/* =====================================================================
   Camada de design (nov/2026): só aparência, carregada depois de site.css.
   Não altera conteúdo nem estrutura. Para voltar ao visual anterior,
   basta retirar o <link> de tema.css em src/views/public/layout.tsx.

   Leitura: site institucional de paróquia, para fiéis de todas as idades;
   linguagem sóbria e editorial; preserva a marca (azul-marinho e dourado
   do logotipo, Cormorant Garamond nos títulos e Source Sans 3 no texto).
   ===================================================================== */

:root {
  /* tons de apoio, levemente puxados para o azul da marca */
  --tinta: #1C2633;             /* texto principal, mais escuro: melhor leitura */
  --texto: #283340;
  --texto-suave: #4F5B69;       /* 6,7:1 sobre branco; 6,1:1 sobre marfim */
  --linha: #E4E0D6;
  --linha-fria: #DCE3EC;
  --marfim: #F7F5F0;
  --raio: 6px;                  /* botões, etiquetas e campos */
  --raio-m: 10px;               /* cartões e fotos */
  --raio-g: 14px;               /* grandes blocos de imagem */
  --sombra: 0 1px 2px rgba(15, 40, 72, .06), 0 2px 6px -2px rgba(15, 40, 72, .10);
  --sombra-alta: 0 2px 4px rgba(15, 40, 72, .06), 0 8px 8px -6px rgba(15, 40, 72, .14);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --rapido: 180ms;
}

/* ---------- Tipografia ---------- */
body { color: var(--texto); line-height: 1.65; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.01em; line-height: 1.12; }
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h3 { font-weight: 600; line-height: 1.2; }
p, li { text-wrap: pretty; }

/* Texto corrido alinhado à esquerda: sem os "rios" de espaço e sem a hifenização
   excessiva do texto justificado, sobretudo no celular. */
main :is(p, li, dd, blockquote) { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.texto { max-width: 68ch; color: var(--tinta); }
.texto p, .texto li { line-height: 1.7; }
.texto h2 { margin-top: 1.6em; margin-bottom: .45em; }
.texto h3 { margin-top: 1.4em; }
.texto ul, .texto ol { padding-left: 1.2em; }
.texto li { margin-bottom: .45em; }
.texto li::marker { color: var(--dourado-escuro); }
.texto strong { color: var(--tinta); font-weight: 700; }

/* Rótulos acima dos títulos: em vez de letras miúdas em caixa-alta espaçada,
   uma linha em itálico, no dourado da marca. Mais calmo e mais próprio. */
.rotulo {
  font: italic 500 1.12rem/1.3 var(--serif);
  letter-spacing: 0; text-transform: none;
  color: var(--dourado-escuro); margin-bottom: 4px;
}
.secao.azul .rotulo, .destaque-coral .rotulo { color: var(--dourado); }
.hero .sobre, .coral-capa .sobre {
  font: italic 500 1.12rem var(--serif); letter-spacing: 0; text-transform: none;
}

/* Metadados de cartões: caixa normal, sem espaçamento largo */
.card .meta, .comunidade-card .setor, .resultado-busca .tipo-res, .destaque-meta, .cn-meta {
  text-transform: none; letter-spacing: .01em; font-size: .86rem; font-weight: 600;
}
.cn-meta { color: var(--dourado); }

/* Títulos de seção */
.titulo-secao { margin-bottom: clamp(24px, 3vw, 36px); }
.titulo-secao h2 { margin: 0; }
.ver-mais { font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color var(--rapido) var(--ease-out), border-color var(--rapido) var(--ease-out); }

/* Cabeça das páginas internas */
.cabeca-pagina { background: var(--marfim); border-bottom: 1px solid var(--linha); }
.cabeca-pagina h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.cabeca-pagina p { color: var(--texto-suave); text-align: left; }

/* ---------- Ritmo vertical ---------- */
.secao { padding: clamp(64px, 8vw, 104px) 0; }

/* ---------- Botões e interação ---------- */
.botao {
  border-radius: var(--raio); font-weight: 700; min-height: 46px;
  transition: background-color var(--rapido) var(--ease-out), color var(--rapido) var(--ease-out),
              border-color var(--rapido) var(--ease-out), transform 120ms var(--ease-out);
}
.botao:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; border-radius: 4px; }
.secao.azul :focus-visible, .rodape :focus-visible { outline-color: var(--dourado-claro); }
a { transition: color var(--rapido) var(--ease-out); }

/* ---------- Cartões e imagens ---------- */
.comunidade-card {
  border: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  border-radius: var(--raio-m); box-shadow: none;
  transition: border-color var(--rapido) var(--ease-out), box-shadow var(--rapido) var(--ease-out), transform var(--rapido) var(--ease-out);
}
.comunidade-card:hover { border-color: var(--dourado); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.comunidade-card img { transition: transform 400ms var(--ease-out); }
.comunidade-card:hover img { transform: scale(1.03); }
.comunidade-card h3 { transition: color var(--rapido) var(--ease-out); }

.destaque-foto, .noticia-capa img, .foto-comunidade img { border-radius: var(--raio-m); }
.destaque-foto { box-shadow: var(--sombra); }

/* Foto do pároco: uma moldura só (antes eram duas, com sombra larga) */
.saudacao-foto { border: 1px solid rgba(183, 154, 88, .7); box-shadow: 0 0 0 5px var(--branco), 0 0 0 6px var(--linha); border-radius: var(--raio-g); }

/* Setores da página inicial */
.setores a { transition: background-color var(--rapido) var(--ease-out); }
.setores a:hover { background: var(--marfim); }

/* Etiquetas da agenda */
.evento .tipo { border-radius: 4px; letter-spacing: .04em; font-size: .72rem; }

/* ---------- Citações e destaques: sem faixas laterais ---------- */
.texto blockquote {
  border-left: 0; padding: 18px 22px 18px 52px; position: relative;
  background: var(--marfim); border-radius: var(--raio-m);
}
.texto blockquote::before {
  content: '“'; position: absolute; left: 16px; top: 4px;
  font: 600 3rem/1 var(--serif); color: var(--dourado);
}
.texto blockquote p:last-child { margin-bottom: 0; }
.versiculo, .hero-citacao { border-left: 0; padding-left: 0; }
.versiculo::before, .hero-citacao::before { content: ''; display: block; width: 40px; height: 1px; background: var(--dourado); margin-bottom: 12px; }
.aviso-validacao { border-left: 0; border: 1px solid rgba(183, 154, 88, .5); border-radius: var(--raio); }
.faixa-coral { border-left: 0; border: 1px solid rgba(183, 154, 88, .55); border-radius: var(--raio-m); }
.faixa-ajudar { border-left: 0; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--marfim); }

/* ---------- Carrossel "Em destaque" ---------- */
.cn-palco { border-radius: var(--raio-g); box-shadow: var(--sombra-alta); }
.cn-foto::after { content: none; }
.cn-texto::before { content: none; }
.cn-num { font-weight: 500; }
.cn-ler { border-radius: var(--raio); }

/* ---------- Faixa de acessos rápidos ---------- */
.rapidos-faixa a { border-radius: var(--raio-m); transition: background-color var(--rapido) var(--ease-out), border-color var(--rapido) var(--ease-out), transform var(--rapido) var(--ease-out); }
.rapidos-faixa a:active { transform: scale(.98); }

/* ---------- Rodapé ---------- */
.rodape .marca-rodape span { letter-spacing: .06em; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .botao, .comunidade-card, .comunidade-card img, .rapidos-faixa a, a { transition: none; }
  .botao:active, .rapidos-faixa a:active { transform: none; }
  .comunidade-card:hover, .comunidade-card:hover img { transform: none; }
}

/* ---------- Segunda revisão ---------- */
/* Hierarquia: títulos de seção um degrau acima do texto dos cartões */
.titulo-secao h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }

/* Datas da agenda: bloco tingido, sem moldura dourada */
.data-bloco { border: 0; border-radius: var(--raio); background: var(--marfim); padding: 10px 4px 11px; }
.secao.azul .data-bloco { background: rgba(255, 255, 255, .07); }
.data-bloco .mes { letter-spacing: .08em; }

/* Assinatura do pároco: função em itálico, sem caixa-alta espaçada */
.saudacao .assinatura span { font: italic 500 1.05rem var(--serif); letter-spacing: 0; text-transform: none; color: var(--dourado-escuro); }

/* Carrossel: a ordem já aparece na barra; os números sobram */
.cn-num { display: none; }
.cn-abas a { grid-template-columns: 1fr; }
.saudacao-oracao { border-left: 0; padding-left: 0; }
.saudacao-oracao::before { content: ''; display: block; width: 40px; height: 1px; background: var(--dourado); margin-bottom: 12px; }

/* Fotos em pé dentro do texto: não passam da altura da tela e ficam centralizadas */
.texto > figure img { max-height: 80vh; width: auto; margin-inline: auto; }
.texto > figure figcaption { text-align: center; }