/*
Theme Name: Maré
Theme URI: https://rumoaomar.org.br
Description: Tema imersivo oceânico do Rumo ao Mar. Navegar a página é descer na coluna d'água.
Author: Rumo ao Mar
Version: 1.0.0
Requires PHP: 7.4
Text Domain: mare
*/

:root {
  --espuma: #F7F9FA;
  --agua-rasa: #7FB8C9;
  --oceano: #1B4965;
  --profundo: #0A2239;
  --abissal: #04121F;
  --coral: #FF6B5B;            /* uso não-textual: bordas, detalhes decorativos, outline de foco */
  --coral-escuro: #CC3F2D;     /* coral com contraste >=4.5 sobre fundos claros (--coral puro reprova em texto corrido);
                                   nota: #D64533 sugerido na spec só chega a 4.18:1, por isso foi escurecido mais um pouco */
  --coral-claro: #FFA08F;      /* acento para fundos escuros (oceano/profundo/abissal): --coral puro só dá 3.43:1 ali,
                                   reprova p/ texto pequeno; --coral-claro chega a >=4.88:1 (AA) */
  --tinta: #10222E;            /* texto sobre fundos claros; também usado como acento sobre --agua-rasa (7.44:1) */
  --nevoa: rgba(16,34,46,.62); /* texto secundário claro */
  --fonte-display: "Fraunces", Georgia, serif;
  --fonte-corpo: "Source Serif 4", Georgia, serif;
  --fonte-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --medida: 70ch;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--espuma);
  color: var(--tinta);
  font-family: var(--fonte-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* Contraste: --coral puro sobre --espuma reprova pra texto corrido (~3.0, ver docs/plans).
   Link padrão (contexto claro) usa --coral-escuro; fundos escuros usam --coral-claro (--coral puro
   sobre --oceano só dá 3.43:1, reprova p/ texto pequeno); fundo --agua-rasa (claro-médio) usa --tinta. */
a { color: var(--coral-escuro); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.corrente--oceano a, .corrente--profundo a, .fundo-do-mar a, .hero-conteudo a, .artigo-capa-texto a, .relacionados-fundo a {
  color: var(--coral-claro);
}
.corrente--agua-rasa a {
  color: var(--tinta);
  text-decoration: underline; /* affordance: não depender só da cor pra sinalizar link */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1, h2, h3 { font-family: var(--fonte-display); line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3rem, 8vh, 6rem); }

.rotulo {
  font-family: var(--fonte-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-escuro);
  text-decoration: none;
}
/* .rotulo aparece tanto em <a> (card, hero) quanto em <h2> (footer) — a regra base acima
   cobre o contexto claro; nos fundos escuros e em --agua-rasa reafirmamos a cor certa aqui,
   já que um seletor "a" descendente não pegaria o caso do <h2>. */
.corrente--oceano .rotulo, .corrente--profundo .rotulo, .fundo-do-mar .rotulo, .hero-conteudo .rotulo, .artigo-capa-texto .rotulo, .relacionados-fundo .rotulo {
  color: var(--coral-claro);
}
.corrente--agua-rasa .rotulo {
  color: var(--tinta);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--abissal); color: #fff; padding: .6rem 1rem; z-index: 99;
}
.skip-link:focus { left: 0; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--coral-escuro); outline-offset: 2px; }
/* Contraste do anel de foco (mínimo 3:1, WCAG 1.4.11): --coral puro sobre
   --agua-rasa mede 1.28:1 e sobre fundos escuros/foto é imprevisível — por
   isso o override abaixo cobre TODO contexto de fundo não-claro do tema
   (oceano/profundo/abissal + hero/capa/arquivo com foto), não só o rodapé.
   hero, artigo-capa e arquivo-hero têm fundo de FOTO imprevisível: branco
   sozinho pode cair perto de 1:1 numa foto muito clara, então a sombra escura
   translúcida por trás do anel garante contraste mesmo nesse pior caso. */
.corrente--oceano :focus-visible, .corrente--profundo :focus-visible, .fundo-do-mar :focus-visible,
.hero :focus-visible, .hero-rodape :focus-visible, .hero-secundarios :focus-visible,
.artigo-capa :focus-visible, .arquivo-hero :focus-visible,
.topo :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--abissal) 55%, transparent);
}
/* .topo entrou na lista acima (não só herdando a base --coral-escuro) porque
   é sticky com fundo translúcido (color-mix abissal 82% + transparent) e
   deixa passar o que rola atrás — pode ser --espuma, uma foto ou a
   Correnteza clara. Cobre menu, dropdowns .sub-menu, hambúrguer e a busca
   do cabeçalho (todos descendentes de .topo). Medido nos dois extremos:
   com --espuma atrás o fundo composto ~rgb(48,60,70) dá 11.3:1 pro branco;
   com --abissal atrás (fundo já no piso) dá >19:1. Ambos >> mínimo 3:1;
   halo mantido por consistência com o mesmo padrão usado em hero/capa/rodapé. */
.corrente--agua-rasa :focus-visible {
  /* --tinta sobre --agua-rasa mede 7.44:1 (>> mínimo 3:1) — mesmo token já
     usado pro texto/links nesse tier, sem inventar cor nova. */
  outline-color: var(--tinta);
}

/* ===== HEADER ===== */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--abissal) 82%, transparent);
  backdrop-filter: blur(8px);
}
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; }
.topo-titulo {
  font-family: var(--fonte-display); font-weight: 900; font-size: 1.35rem;
  color: #fff; text-decoration: none; letter-spacing: .01em;
}
.topo-nav .menu { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.topo-nav .menu a {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .92rem; font-weight: 500;
}
/* --coral puro aqui reprova no pior caso real: o header é sticky com fundo
   translúcido (color-mix abissal 82% + transparent, blur), então o que passa
   por baixo dele ao rolar a página entra na conta. Simulando o pior caso
   (conteúdo --espuma rolando atrás do header) o fundo efetivo composto mede
   ~rgb(48,60,70) — --coral dá só 4.05:1 ali (abaixo de 4.5); --coral-claro
   sobe pra 5.77:1. */
.topo-nav .menu a:hover, .topo-nav .menu .current-menu-item > a { color: var(--coral-claro); }
.topo-hamburguer { display: none; }

@media (max-width: 860px) {
  .topo-hamburguer {
    display: block; background: none; border: 0; padding: .6rem; cursor: pointer;
  }
  .hamburguer-tracos, .hamburguer-tracos::before, .hamburguer-tracos::after {
    content: ""; display: block; width: 22px; height: 2px; background: #fff; position: relative; transition: transform .2s;
  }
  .hamburguer-tracos::before { position: absolute; top: -7px; }
  .hamburguer-tracos::after { position: absolute; top: 7px; }
  .topo-nav { display: none; position: absolute; inset: 64px 0 auto 0; background: var(--abissal); padding: 1rem 0 1.5rem; }
  .topo-nav.aberto { display: block; }
  .topo-nav .menu { flex-direction: column; gap: 0; padding-inline: clamp(1rem, 4vw, 2.5rem); }
  .topo-nav .menu a { display: block; padding: .7rem 0; font-size: 1.05rem; }
}

/* ===== FOOTER: FUNDO DO MAR ===== */
.fundo-do-mar { background: var(--abissal); color: rgba(255,255,255,.78); margin-top: 0; }
.fundo-do-mar .onda { margin-top: -1px; }
.fundo-grade {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
  padding-block: 3rem 2rem;
}
.fundo-logo { font-family: var(--fonte-display); font-weight: 900; font-size: 1.6rem; color: #fff; margin: 0 0 .4rem; }
.fundo-categorias ul { list-style: none; margin: .8rem 0 0; padding: 0; columns: 2; }
.fundo-categorias a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .9rem; line-height: 2; }
.fundo-categorias a:hover { color: var(--coral-claro); } /* mesma especificidade de .fundo-grupo/.fundo-orfas a:hover abaixo — alinhado por consistência */
.fundo-assinatura { padding-block: 1.2rem 2rem; font-size: .8rem; color: rgba(255,255,255,.4); margin: 0; }
@media (max-width: 860px) { .fundo-grade { grid-template-columns: 1fr; gap: 2rem; } }

/* ===== HERO: SUPERFÍCIE ===== */
/* 82svh (era 92svh): preserva o ritual do mergulho sem apostar a tela inteira
   numa matéria só — nem G1 nem R7 fazem isso (ver docs/pesquisa/2026-08-25-
   aprendizados-g1-r7.md, rec. 2.2 e tensão 5.1). A segunda porta de entrada é
   a faixa .hero-secundarios abaixo. */
.hero { position: relative; min-height: 82svh; display: grid; align-items: end; margin-top: -64px; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,18,31,.35) 0%, rgba(4,18,31,.05) 35%, rgba(4,18,31,.82) 100%);
}
/* padding-bottom maior que o original (5.5rem) pra abrir espaço de sobra pro
   .hero-rodape (mergulhe + faixa) sem tocar no texto da meta — ver .hero-rodape
   abaixo, cuja altura varia com o conteúdo da faixa e não pode ser prevista
   com um número mágico só no .hero-mergulhe. */
.hero-conteudo { position: relative; padding-block: 4.5rem 9.8rem; max-width: 900px; }
.hero-titulo { margin-top: .5rem; }
.hero-titulo a { color: #fff; text-decoration: none; }
.hero-titulo a:hover { text-decoration: underline; text-decoration-color: var(--coral); }
.hero-meta { color: rgba(255,255,255,.75); font-size: .9rem; margin: .6rem 0 0; }

/* Empilha mergulhe + faixa em fluxo normal, pinado no rodapé do hero — o
   mergulhe fica sempre imediatamente acima da faixa (ou sozinho, se a faixa
   não renderizar), sem depender de deslocamentos fixos que quebrariam com a
   altura variável da faixa (1 vs. 3 colunas, título de 1 ou 2 linhas). */
.hero-rodape {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
}
.hero-mergulhe {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mergulhe span { display: inline-block; animation: mare-boia 2.2s ease-in-out infinite; }
  @keyframes mare-boia { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
}

/* Faixa de 2ª porta de entrada: 3 títulos secundários ancorados no rodapé do
   hero, abaixo do "mergulhe ↓". Deliberadamente discreta — fundo
   semi-transparente, tipografia pequena de --fonte-ui — pra não competir com
   a manchete principal. */
.hero-secundarios {
  width: 100%;
  background: color-mix(in srgb, var(--abissal) 88%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: .9rem;
}
.hero-secundarios-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.hero-secundario {
  display: flex; flex-direction: column; gap: .2rem;
  text-decoration: none; min-width: 0;
}
.hero-secundario-rotulo {
  font-family: var(--fonte-ui); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--coral-claro);
}
.hero-secundario-titulo {
  font-family: var(--fonte-ui); font-size: .85rem; font-weight: 600; color: #fff;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-secundario:hover .hero-secundario-titulo { text-decoration: underline; text-decoration-color: var(--coral); }
/* Mobile: mostra só o 1º título em vez de virar carrossel — a faixa já é um
   "espia" discreto, e um scroll horizontal dentro do hero (área pensada pra
   imersão vertical) competiria mais com o mergulho do que ajudaria. */
@media (max-width: 860px) {
  .hero-secundarios-lista { grid-template-columns: 1fr; }
  .hero-secundario:nth-child(n+2) { display: none; }
}

/* ===== CARDS ===== */
.card { display: flex; flex-direction: column; gap: .7rem; }
.card-capa { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 6px; background: var(--oceano); }
.card-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (prefers-reduced-motion: no-preference) { .card:hover .card-capa img { transform: scale(1.04); } }
.card-capa-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--oceano), var(--profundo)); }
/* font-size/font-weight explícitos (achado 6): parts/card.php agora pode
   renderizar este título como <h2> (páginas de arquivo) ou <h3> (home,
   relacionados) — sem isso, o card herdaria o font-size/weight do próprio h2
   (clamp(1.5rem,3vw,2.2rem), 700) nas páginas de arquivo, bem maior que o
   h3 padrão (clamp(1.1rem,2vw,1.4rem), 600) e quebraria a grade visualmente.
   Fixando aqui, a aparência independe do nível semântico do heading. */
.card-titulo { margin: .15rem 0 0; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
.card-titulo a { color: inherit; text-decoration: none; }
/* Hover no mesmo sistema de 3 tiers do estado padrão (coral puro reprova em
   --espuma [2.65:1] e feio em --agua-rasa [1.28:1]): coral-escuro em fundo
   claro (4.61:1 sobre --espuma), coral-claro em fundo escuro (4.88-9.61:1
   sobre oceano/profundo/abissal), tinta sobre --agua-rasa (7.44:1) — como a
   cor de repouso ali já é --tinta (herdada do body), o underline sinaliza a
   troca de estado sem depender só da cor. */
.card-titulo a:hover { color: var(--coral-escuro); }
.card--escuro .card-titulo a:hover { color: var(--coral-claro); }
.corrente--agua-rasa .card-titulo a:hover { color: var(--tinta); text-decoration: underline; }
/* Só o card grande recebe dek (rec. 2.4) — não pesa a grade densa dos cards pequenos. */
.card-dek { font-family: var(--fonte-corpo); font-size: .98rem; line-height: 1.5; color: var(--nevoa); margin: 0; }
.card--escuro .card-dek { color: rgba(255,255,255,.75); }
.card-meta { font-size: .8rem; color: var(--nevoa); margin: 0; }
.card--escuro { color: #fff; }
.card--escuro .card-meta { color: rgba(255,255,255,.6); }
/* --nevoa (tinta a 62% de opacidade) dá só 3.33:1 sobre --agua-rasa (precisa
   4.5:1) — mesma lacuna do achado 2. --tinta puro (7.44:1) resolve sem cor
   nova; em --oceano/--profundo o --nevoa original já passa (4.6-6.6:1). */
.corrente--agua-rasa .card-dek, .corrente--agua-rasa .card-meta { color: var(--tinta); }

/* ===== CORRENTEZA ===== */
.secao-titulo { margin-bottom: 1.6rem; }
.correnteza-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.6rem; }
@media (max-width: 1024px) { .correnteza-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .correnteza-grade { grid-template-columns: 1fr; } }

/* ===== CORRENTES TEMÁTICAS: A DESCIDA ===== */
.corrente--agua-rasa { background: var(--agua-rasa); }
.corrente--oceano { background: var(--oceano); }
.corrente--profundo { background: var(--profundo); }
.corrente--oceano, .corrente--profundo { color: #fff; }
.corrente--oceano .secao-titulo a, .corrente--profundo .secao-titulo a { color: #fff; }
.corrente--agua-rasa .secao-titulo a { color: var(--tinta); }
.secao-titulo a { text-decoration: none; }
/* Mesmo sistema de 3 tiers do hover de .card-titulo (achado 4): coral-claro
   sobre oceano/profundo (repouso já é branco, então a cor muda de verdade);
   sobre --agua-rasa o repouso já é --tinta, então o underline é o sinal de
   hover (mesma lógica do .card-titulo ali). */
.secao-titulo a:hover { color: var(--coral-claro); }
.corrente--agua-rasa .secao-titulo a:hover { color: var(--tinta); text-decoration: underline; }
.corrente-grade { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: start; }
.corrente-destaque .card-capa { aspect-ratio: 16/11; }
.corrente-destaque .card-titulo { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.corrente-lista { display: grid; gap: 1.4rem; }
.corrente-lista .card { flex-direction: row; align-items: center; }
.corrente-lista .card-capa { flex: 0 0 132px; aspect-ratio: 4/3; }
@media (max-width: 860px) {
  .corrente-grade { grid-template-columns: 1fr; gap: 1.8rem; }
  .corrente-lista .card-capa { flex-basis: 108px; }
}

/* Duotone azul: unifica o acervo desigual do Wayback */
.duotone .card-capa { position: relative; }
.duotone .card-capa img { filter: grayscale(1) contrast(1.05); }
.duotone .card-capa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--agua-rasa), var(--profundo));
  mix-blend-mode: color; pointer-events: none;
}

/* ===== ARTIGO ===== */
.artigo-capa { position: relative; min-height: 58svh; display: grid; align-items: end; margin-top: -64px; }
.artigo-capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artigo-capa-texto { position: relative; color: #fff; padding-block: 3rem 3.5rem; max-width: 900px; }
.artigo-capa--tipografica { background: linear-gradient(165deg, var(--oceano), var(--profundo)); min-height: 42svh; }
/* Selo escuro translúcido atrás do texto (achado 3) — mesma técnica já usada
   em .topo e .hero-secundarios (color-mix com --abissal), em vez de mudar a
   cor do texto ou o gradiente de fundo: o breadcrumb aparece sobre fundo
   IMPREVISÍVEL (gradiente água-rasa OU foto do post, category.php) e medir
   caso a caso não escala. Medido no pior ponto real (canvas replicando a
   foto de /category/marinha/, que tem um trecho bem claro atrás do texto):
   sem selo dava só 2.51:1; com este selo (70% --abissal) sobe pra 8.87:1. E
   contra o pior caso teórico (foto branca pura) ainda dá 7.13:1 — cobre
   também o fallback sem foto (gradiente --agua-rasa/--oceano original,
   inalterado, mede 7.98:1 com este selo). */
.breadcrumb {
  /* inline-block (não inline-flex): o separador " > " do NavXT/Yoast/fallback
     é texto solto entre elementos — em flex ele vira "item flex anônimo" e o
     espaço em volta pode ser descartado pelo motor; inline-block mantém fluxo
     inline normal (espaços preservados, quebra de linha automática se faltar
     largura, sem risco de overflow horizontal em telas estreitas). */
  display: inline-block;
  max-width: 100%;
  background: color-mix(in srgb, var(--abissal) 70%, transparent);
  padding: .3rem .6rem;
  border-radius: 4px;
}
.breadcrumb, .breadcrumb a { color: rgba(255,255,255,.8); font-size: .82rem; text-decoration: none; }
.breadcrumb a:hover { color: var(--coral-claro); }
.artigo-byline { font-size: .9rem; color: var(--nevoa); margin: 1.6rem 0 0; }
.artigo-byline a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.artigo-byline a:hover { color: var(--coral-escuro); } /* fundo claro (--espuma): coral puro reprova (2.65:1), coral-escuro dá 4.61:1 */

.prosa {
  font-family: var(--fonte-corpo);
  font-size: 1.19rem;
  line-height: 1.7;
  max-width: var(--medida);
  margin-block: 1.4rem 3.5rem;
}
.prosa p { margin: 0 0 1.25em; }
.prosa h2, .prosa h3 { margin-top: 1.6em; }
.prosa img { border-radius: 6px; }
.prosa figure, .prosa img.aligncenter, .prosa .wp-caption {
  max-width: min(860px, 100%); margin-inline: 0; margin-block: 2rem;
}
.prosa figcaption, .prosa .wp-caption-text { font-family: var(--fonte-ui); font-size: .82rem; color: var(--nevoa); margin-top: .5rem; }
.prosa blockquote {
  border-left: 3px solid var(--coral); margin-inline: 0; padding-left: 1.2rem;
  font-style: italic; color: var(--oceano);
}

.relacionados-fundo { background: var(--oceano); color: #fff; }
.relacionados .onda { background: var(--espuma); }
.relacionados-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; }
@media (max-width: 860px) { .relacionados-grade { grid-template-columns: 1fr; } }
.artigo-comentarios { max-width: var(--medida); padding-block: 2rem 3rem; }

/* ===== ARQUIVO / CATEGORIA ===== */
.arquivo-hero { position: relative; color: #fff; padding-block: calc(64px + 2.5rem) 2.5rem; margin-top: -64px; }
.arquivo-hero--agua-rasa { background: linear-gradient(165deg, var(--agua-rasa), var(--oceano)); }
.arquivo-hero--oceano { background: linear-gradient(165deg, var(--oceano), var(--profundo)); }
.arquivo-hero--profundo { background: linear-gradient(165deg, var(--profundo), var(--abissal)); }
.arquivo-hero--404 { min-height: 55svh; display: grid; align-items: center; }
/* Categoria com foto (correção 6): a foto + .hero-veu (mesma classe do hero
   da home/artigo) ficam absolutas por cima do gradiente; o gradiente
   continua no background do .arquivo-hero--{depth} como fallback caso a
   imagem demore/falhe a carregar. .arquivo-hero-conteudo precisa de
   position:relative pra empilhar acima das duas camadas absolutas — mesma
   técnica do .hero-conteudo/.artigo-capa-texto. */
.arquivo-hero--com-foto { min-height: 40svh; display: grid; align-items: end; }
.arquivo-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arquivo-hero-conteudo { position: relative; }
.arquivo-descricao { max-width: 60ch; color: rgba(255,255,255,.8); }
.arquivo-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.6rem; }
@media (max-width: 1024px) { .arquivo-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arquivo-grade { grid-template-columns: 1fr; } }
.arquivo-paginacao { margin-top: 2.5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.arquivo-paginacao .page-numbers {
  padding: .45rem .8rem; border-radius: 4px; text-decoration: none;
  color: var(--tinta); background: #fff; border: 1px solid rgba(16,34,46,.12);
}
.arquivo-paginacao .page-numbers.current { background: var(--oceano); color: #fff; border-color: var(--oceano); }
.arquivo-paginacao a.page-numbers:hover { border-color: var(--coral-escuro); color: var(--coral-escuro); } /* fundo do pill é branco: coral-escuro dá 4.87:1 (texto) e 4.87:1 (borda, min. 3:1) */
.search-form input[type="search"] { padding: .6rem .8rem; border: 1px solid rgba(16,34,46,.25); border-radius: 4px; font: inherit; min-width: 240px; }
.search-form input[type="submit"] { padding: .6rem 1rem; border: 0; border-radius: 4px; background: var(--coral); color: #fff; font: inherit; cursor: pointer; }

/* ===== SUBMENUS (dropdown) ===== */
.topo-nav .menu ul.sub-menu { list-style: none; margin: 0; padding: 0; }
@media (min-width: 861px) {
  .topo-nav .menu > li { position: relative; }
  .topo-nav .menu > li.menu-item-has-children > a::after { content: " ▾"; font-size: .7em; opacity: .7; }
  .topo-nav .sub-menu {
    position: absolute; top: 100%; left: -1rem; min-width: 220px;
    background: var(--abissal); padding: .5rem 0; border-radius: 0 0 6px 6px;
    display: none; z-index: 60; box-shadow: 0 12px 24px rgba(4,18,31,.35);
  }
  .topo-nav li:hover > .sub-menu, .topo-nav li:focus-within > .sub-menu { display: block; }
  .topo-nav .sub-menu a { display: block; padding: .45rem 1.1rem; white-space: nowrap; }
}
@media (max-width: 860px) {
  .topo-nav .sub-menu { padding-left: 1rem; }
}

/* ---- Menu gerado (mare_taxonomia): DUAS listas com os mesmos dados.
   Desktop (.menu-gerado--desktop) reaproveita 100% o sistema <li>/.sub-menu
   com :hover/:focus-within acima, sem <details>. Mobile (.menu-gerado--movel)
   usa <details>/<summary> nativo pro acordeão — forçar via CSS a abertura de
   um <details> fechado não é confiável (o conteúdo de um <details> fechado
   fica com tamanho zero por dentro nos engines atuais, ignorando
   display:block no filho), então cada contexto usa a técnica que
   efetivamente funciona nele; as duas ficam ocultas uma pra outra por
   display:none conforme o breakpoint, sem JS em nenhuma das duas. ---- */
.topo-nav .menu-gerado--movel { display: none; }
@media (max-width: 860px) {
  .topo-nav .menu-gerado--desktop { display: none; }
  .topo-nav .menu-gerado--movel { display: flex; }
}
.topo-nav .mare-submenu { margin: 0; padding: 0; }
.topo-nav .mare-submenu summary {
  display: flex; align-items: center; gap: .3rem;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.topo-nav .mare-submenu summary::-webkit-details-marker { display: none; }
.topo-nav .mare-submenu summary::after {
  content: "▾"; font-size: .7em; opacity: .7; color: rgba(255,255,255,.85);
}
.topo-nav .mare-submenu[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .topo-nav .mare-submenu summary::after { display: inline-block; transition: transform .15s ease; }
}
.sub-menu-contagem { opacity: .55; font-size: .82em; }

/* Item ativo: acento de profundidade na borda + peso — nunca só pela cor
   (aria-current="page" no link cobre quem usa leitor de tela). */
.topo-nav .menu-item.is-ativo { border-bottom: 3px solid transparent; }
.topo-nav .menu-item.is-ativo > a,
.topo-nav .menu-item.is-ativo .mare-submenu summary a { font-weight: 700; }
.topo-nav .menu-item.is-ativo.menu-item--agua-rasa { border-bottom-color: var(--agua-rasa); }
.topo-nav .menu-item.is-ativo.menu-item--oceano { border-bottom-color: var(--oceano); }
.topo-nav .menu-item.is-ativo.menu-item--profundo { border-bottom-color: var(--profundo); }

@media (max-width: 860px) {
  .topo-nav .menu-gerado--movel { flex-direction: column; gap: 0; padding-inline: clamp(1rem, 4vw, 2.5rem); }
  .topo-nav .menu-item { padding: .2rem 0; }
  .topo-nav .menu-item > a { display: block; padding: .7rem 0; font-size: 1.05rem; }
  .topo-nav .mare-submenu summary { padding: .7rem 0; font-size: 1.05rem; }
  .topo-nav .mare-submenu summary a { display: inline; padding: 0; }
  .topo-nav .mare-submenu .sub-menu { padding-left: 1rem; padding-bottom: .3rem; }
  .topo-nav .mare-submenu .sub-menu a { display: block; padding: .5rem 0; }
}

/* ===== BUSCA NO HEADER ===== */
.topo-nav-area { display: flex; align-items: center; gap: 1.4rem; }
.topo-busca--movel { display: none; }
.topo-busca .search-form { display: flex; align-items: center; gap: .4rem; }
.topo-busca .search-form label { display: flex; align-items: center; }
.topo-busca .search-form input[type="search"] {
  background: var(--espuma); color: var(--tinta); border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px; padding: .45rem .7rem; font: inherit; font-size: .88rem; min-width: 160px;
}
.topo-busca .search-form input[type="submit"] {
  background: transparent; border: 1px solid var(--coral-claro); color: var(--coral-claro);
  border-radius: 4px; padding: .45rem .8rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.topo-busca .search-form input[type="submit"]:hover { background: var(--coral-claro); color: var(--abissal); }
@media (max-width: 860px) {
  .topo-nav-area { display: contents; }
  .topo-busca--fixa { display: none; }
  .topo-busca--movel {
    display: block; margin: 1.2rem clamp(1rem, 4vw, 2.5rem) 0;
    padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15);
  }
  .topo-busca--movel .search-form input[type="search"] { flex: 1 1 auto; min-width: 0; }
}

/* ===== RODAPÉ: MAPA AGRUPADO POR MACRO-EDITORIA ===== */
.fundo-grupos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.4rem 1.2rem; margin-top: .8rem;
}
.fundo-grupo h3 {
  font-family: var(--fonte-ui); font-size: .8rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5rem;
}
.fundo-grupo ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.fundo-grupo li { margin: 0 0 .4rem; }
.fundo-grupo a, .fundo-orfas a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .88rem; line-height: 1.5; }
.fundo-grupo a:hover, .fundo-orfas a:hover { color: var(--coral-claro); }
.fundo-orfas { margin: 1.4rem 0 0; font-size: .82rem; color: rgba(255,255,255,.5); }
.fundo-orfas a { text-decoration: underline; text-underline-offset: 2px; }

/* ===== COMPARTILHAMENTO ===== */
.compartilhar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  max-width: var(--medida);
  margin-block: 1.4rem 0;
}
.compartilhar-rotulo { flex: 0 0 auto; }
.compartilhar-links {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.compartilhar-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(16, 34, 46, .18);
  background: transparent;
  color: var(--oceano);
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.compartilhar-botao svg { width: 18px; height: 18px; display: block; }
.compartilhar-botao:hover {
  /* ícone branco sobre --coral mede 2.80:1 (componente não-textual, mínimo
     3:1) — --coral-escuro sobe pra 4.87:1. */
  background: var(--coral-escuro);
  border-color: var(--coral-escuro);
  color: #fff; /* --coral-escuro aqui é fundo (uso não-textual); ícone precisa ficar legível sobre ele */
}
.compartilhar-confirmacao {
  font-family: var(--fonte-ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--coral-escuro);
  opacity: 0;
  transition: opacity .2s ease;
}
.compartilhar-confirmacao.mostrar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .compartilhar-botao, .compartilhar-confirmacao { transition: none; }
}
/* fundos escuros já cobertos pelas regras de contexto de .artigo-capa-texto etc.;
   a barra de compartilhamento só aparece em fundo claro (.wrap dentro do artigo) */
@media (max-width: 480px) {
  .compartilhar-links {
    overflow-x: auto;
    padding-bottom: .3rem;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== COMENTÁRIOS ===== */
.comentarios-titulo { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.comentarios-lista, .comentarios-lista .children {
  list-style: none; margin: 0; padding: 0;
}
.comentarios-lista > li { margin: 0 0 1.8rem; }
.comentarios-lista .children { margin-top: 1.4rem; padding-left: clamp(1rem, 4vw, 2rem); border-left: 2px solid rgba(16,34,46,.1); }
.comment-body .comment-author { display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; }
.comment-body .avatar { border-radius: 999px; display: block; }
.comment-body .fn { font-family: var(--fonte-ui); font-style: normal; font-weight: 700; font-size: .92rem; }
.comment-body .says { display: none; }
.comment-metadata { font-family: var(--fonte-ui); font-size: .78rem; color: var(--nevoa); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content { font-family: var(--fonte-corpo); font-size: 1.02rem; line-height: 1.6; margin-top: .5rem; }
.comment-content p { margin: 0 0 1em; }
.comment-reply-link { font-family: var(--fonte-ui); font-size: .8rem; font-weight: 600; color: var(--coral-escuro); text-decoration: none; }
.comment-awaiting-moderation { font-family: var(--fonte-ui); font-size: .82rem; color: var(--nevoa); font-style: italic; }
.comentarios-fechados { font-family: var(--fonte-ui); font-size: .9rem; color: var(--nevoa); }

.comment-respond { margin-top: 2rem; }
.comment-reply-title { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; font-family: var(--fonte-ui); font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; font: inherit; font-family: var(--fonte-corpo); padding: .6rem .7rem;
  border: 1px solid rgba(16,34,46,.25); border-radius: 4px; background: #fff; color: var(--tinta);
}
.comment-form textarea { resize: vertical; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.form-submit input[type="submit"] {
  padding: .6rem 1.2rem; border: 0; border-radius: 4px; background: var(--coral); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.form-submit input[type="submit"]:hover { background: var(--coral-escuro); }
.comentarios-obrigatorio { color: var(--coral-escuro); }