/* ============================================================
   TEMA VISITAÇÃO — ajustes do WordPress
   Só o que é específico do tema (marcação gerada pelo WordPress,
   estado sem JavaScript, placeholder). Componentes visuais ficam
   no design system (design-system/styles.css, que chega aqui em ds/design-system.css). Só tokens, nenhum valor direto.
   ============================================================ */

/* ── BARRA DE ADMINISTRAÇÃO (logado) ─────────────────────── */
/* O WordPress define --wp-admin--admin-bar--height (32px; 46px até 782px), mas a barra
   só é fixa acima de 600px; até 600px ela rola com a página. O menu preso só desce
   quando a barra está fixa. O "pular para o conteúdo" desce sempre, porque no topo
   da página a barra está lá em qualquer largura. */
:root:has(body.admin-bar) { --barra-admin-topo: var(--wp-admin--admin-bar--height, 0px); }
@media screen and (min-width: 601px) {
  :root:has(body.admin-bar) { --barra-admin: var(--wp-admin--admin-bar--height, 0px); }
}

/* ── CLASSES DO WORDPRESS ────────────────────────────────── */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── ÍCONES ──────────────────────────────────────────────── */
.icone { width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; }

/* ── PLACEHOLDER HONESTO ─────────────────────────────────────
   Aparece quando falta conteúdo no painel. Nunca vai para a versão final:
   o painel do WordPress avisa enquanto houver campo vazio. */
.placeholder-honesto {
  display: inline-block;
  padding: 0 var(--space-3);
  border: var(--border-width) dashed var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  line-height: var(--leading-normal);
}

/* ── HEADER ──────────────────────────────────────────────── */
.navbar__acoes { display: flex; align-items: center; gap: var(--space-7); }
.navbar__lista { display: flex; align-items: center; gap: var(--space-7); list-style: none; padding: 0; }
.navbar__toggle-fechar { display: none; }
.navbar__toggle[aria-expanded="true"] .navbar__toggle-abrir { display: none; }
.navbar__toggle[aria-expanded="true"] .navbar__toggle-fechar { display: block; }

@media (max-width: 768px) {
  .navbar__acoes { gap: var(--space-4); }
  .navbar__nav.open .navbar__lista { flex-direction: column; align-items: stretch; gap: 0; }

  /* Sem JavaScript: o menu fica sempre aberto, abaixo da logo. */
  .no-js .navbar { flex-wrap: wrap; row-gap: var(--space-3); }
  .no-js .navbar__acoes { display: contents; }
  .no-js .navbar__nav { display: flex; order: 3; width: 100%; }
  .no-js .navbar__lista { flex-wrap: wrap; gap: 0 var(--space-6); }
  .no-js .navbar__toggle { display: none; }
}
@media (max-width: 359.98px) {
  .navbar__acoes { gap: var(--space-3); }   /* folga para a logo (ver .navbar__cta no design system) */
}

/* ── CONTEÚDO DE PÁGINAS E POSTS ─────────────────────────── */
.pagina__cabecalho,
.pagina__capa,
.entry-content { max-width: var(--measure-prose); margin-inline: auto; }
.pagina__cabecalho { margin-bottom: var(--space-9); }
.pagina__capa { margin-bottom: var(--space-9); }
.pagina__capa img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.listagem__cabecalho { margin-bottom: var(--space-9); }
.pagina__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-8); }

.entry-content { line-height: var(--leading-relaxed); }
.entry-content > * + * { margin-top: var(--space-6); }
.entry-content a { text-decoration: underline; }
.entry-content img { height: auto; }
.entry-content h2 { font-size: var(--text-2xl); margin-top: var(--space-10); }
.entry-content h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
.entry-content ul, .entry-content ol { padding-left: var(--space-7); }
.entry-content li + li { margin-top: var(--space-2); }
/* Link de WhatsApp no meio do texto (ex.: Política de Privacidade): alvo de toque de 44px de altura */
.entry-content a[href^="https://wa.me/"] { display: inline-flex; align-items: center; min-height: var(--touch-target); }
/* Tabelas em textos longos (ex.: Política de Privacidade): rolam dentro da coluna se não couberem */
.entry-content .wp-block-table { margin-inline: 0; overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-normal); }
.entry-content th, .entry-content td { padding: var(--space-4) var(--space-5); text-align: left; vertical-align: top; border-bottom: var(--border-width) solid var(--border); }
.entry-content th { background: var(--bg-subtle); font-weight: var(--fw-semibold); color: var(--text); }

/* ── BUSCA ───────────────────────────────────────────────── */
.busca { display: flex; gap: var(--space-3); }
.busca .input { min-width: 0; }

/* ── PAGINAÇÃO DO WORDPRESS (mesmo visual de .page-btn) ──── */
.navigation.pagination { margin-top: var(--space-10); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.nav-links .page-numbers {
  min-width: var(--touch-target); height: var(--touch-target); padding: 0 var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted);
}
.nav-links a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.nav-links .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); }
.nav-links .page-numbers.dots { border: none; }

/* ── RODAPÉ ──────────────────────────────────────────────── */
.rodape__interno { max-width: var(--container-max); margin-inline: auto; }
.rodape__lista { list-style: none; padding: 0; }
.rodape__nome { margin-top: var(--space-4); margin-bottom: var(--space-3); }   /* identificação da paróquia, abaixo da logo */
.rodape__slogan { margin-bottom: var(--space-5); }
.rodape__endereco { font-style: normal; }
.rodape__item { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
/* Bloco com várias linhas (horários): ícone alinhado à primeira linha */
p.rodape__item { align-items: flex-start; }
.rodape__redes { list-style: none; padding: 0; margin: 0; }

/* Linha final do rodapé: botão de pausa da frase e redes sociais à direita */
.rodape__fim { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.footer-slogan__icone-play { display: none; }
.footer.is-paused .footer-slogan__icone-pausa { display: none; }
.footer.is-paused .footer-slogan__icone-play { display: block; }

/* Link da Política de Privacidade na linha do copyright */
.footer__copy-link { color: inherit; text-decoration: underline; }
.footer__copy-link:hover { color: var(--text-inverse); }

@media (max-width: 640px) {
  .entry-content th, .entry-content td { padding: var(--space-3) var(--space-3); }
}

/* ── SOBRE: ORAÇÃO À PADROEIRA (seção 4b) ────────────────────
   Específico do tema; se virar componente do design system, mover para lá.
   Cartão claro e centralizado, texto em serifa, "Amém." como fecho. */
.sobre-oracao__cabecalho { max-width: 760px; margin-inline: auto; margin-bottom: var(--space-9); text-align: center; }
.sobre-oracao__cartao {
  position: relative; max-width: 760px; margin-inline: auto;
  padding: var(--space-12) var(--space-11) var(--space-11);
  background: var(--bg-subtle); border-radius: var(--radius-2xl);
  border-top: 3px solid var(--color-primary);
}
.sobre-oracao__aspas {
  display: block; margin-bottom: calc(var(--space-11) * -0.6); font-family: var(--font-serif);
  font-size: clamp(5rem, 9vw, 8rem); line-height: 1; color: var(--color-primary-light); opacity: 0.55;
}
.sobre-oracao__texto { position: relative; }
.sobre-oracao__texto p {
  margin: 0 0 var(--space-7); font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.4; color: var(--text);
  text-wrap: pretty;
}
.sobre-oracao__amem {
  margin: var(--space-9) 0 0; padding-top: var(--space-7); border-top: 1px solid var(--border-strong);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1; color: var(--color-primary-hover); text-align: center;
}
@media (max-width: 640px) {
  .sobre-oracao__cartao { padding: var(--space-10) var(--space-7) var(--space-9); border-radius: var(--radius-xl); }
  .sobre-oracao__cabecalho { margin-bottom: var(--space-8); }
}

/* ── SOBRE: TÍTULOS CENTRALIZADOS NO CELULAR ────────────────
   Só títulos de seção e o rótulo acima deles; textos e linha do tempo seguem alinhados à esquerda. */
@media (max-width: 640px) {
  body.page-template-pagina-sobre-php main .section__title,
  body.page-template-pagina-sobre-php main .section__eyebrow,
  body.page-template-pagina-sobre-php main .pagina-secoes h2,
  body.page-template-pagina-sobre-php main .sobre-paroco__cabecalho { text-align: center; }
  body.page-template-pagina-sobre-php main .section__eyebrow { justify-content: center; }
}