/* assets/css/modo-escuro.css — Modo escuro: [data-tema="escuro"]. */

/* =====================================================
   MODO ESCURO — [data-tema="escuro"] no <html>, ligado pelo widget
   flutuante de acessibilidade (assets/js/acessibilidade.js, botão
   fixo no canto da tela). Estratégia: reaproveitar variáveis que
   hoje só servem de TEXTO (--stieen-cinza) ou de fundos claros
   compartilhados (--stieen-cinza-claro, --stieen-cinza-borda) — só
   redefinir o valor delas aqui já propaga pra várias regras de uma
   vez. --stieen-escuro NÃO é redefinida global: ela é fundo do
   rodapé/CTA (que já são escuros e não precisam mudar) E cor de
   texto de vários títulos ao mesmo tempo — por isso os usos como
   TEXTO ganham override pontual, selecionados abaixo. O Hero (foto
   de fundo) fica de fora de propósito: o contraste do título ali
   depende da própria imagem (composta com área clara reservada),
   não do tema do site — trocar a cor do texto quebraria a
   legibilidade contra a foto, que não muda com o tema.
   ===================================================== */
[data-tema="escuro"] {
  --stieen-cinza: var(--stieen-cinza-suave);
  --stieen-cinza-claro: var(--stieen-escuro-elevado);
  --stieen-cinza-borda: var(--stieen-borda-escura);
}

[data-tema="escuro"] body.stieen-site { background: var(--stieen-escuro-fundo); }

/* Fundos claros → escuro (cabeçalho, dropdowns, busca, hero-slider
   atrás da foto, CTA, menu mobile em tela cheia) */
[data-tema="escuro"] .stieen-header,
[data-tema="escuro"] .stieen-header-busca-form,
[data-tema="escuro"] .stieen-hero-slider,
[data-tema="escuro"] .stieen-cta { background: var(--stieen-escuro-fundo); }
[data-tema="escuro"] .stieen-submenu,
[data-tema="escuro"] .stieen-header-idioma-menu,
[data-tema="escuro"] .stieen-header-busca-sugestoes,
[data-tema="escuro"] .stieen-menu { background: var(--stieen-escuro-card); }
[data-tema="escuro"] .stieen-header-busca-campo input,
[data-tema="escuro"] .stieen-menu-mobile-busca input { background: var(--stieen-escuro-card); color: var(--stieen-claro); }
[data-tema="escuro"] .stieen-header-busca-sugestoes-item { color: var(--stieen-claro); border-bottom-color: var(--stieen-escuro-elevado); }
[data-tema="escuro"] .stieen-header-busca-sugestoes-item:hover { background: var(--stieen-escuro-elevado); }
[data-tema="escuro"] .stieen-busca-item { border-color: var(--stieen-escuro-elevado); }

/* Textos escuros (títulos/links que usam var(--stieen-escuro) como
   COR — não os que usam como FUNDO, esses ficam intocados) */
[data-tema="escuro"] .stieen-menu > ul > li > a,
[data-tema="escuro"] .stieen-header-idioma-btn,
[data-tema="escuro"] .stieen-header-idioma-menu a,
[data-tema="escuro"] .stieen-header-icone-btn,
[data-tema="escuro"] .stieen-menu-mobile-toggle,
[data-tema="escuro"] .stieen-pilar-intro h2,
[data-tema="escuro"] .stieen-pilar h3,
[data-tema="escuro"] .stieen-noticias-topo h2,
[data-tema="escuro"] .stieen-noticia-card h4,
[data-tema="escuro"] .stieen-multimidia-intro h2,
[data-tema="escuro"] .stieen-multimidia-item-titulo,
[data-tema="escuro"] .stieen-menu-mobile-login,
[data-tema="escuro"] .stieen-cta { color: var(--stieen-claro); }

/* Cinzas literais (não usavam variável) → equivalente claro sobre
   fundo escuro */
[data-tema="escuro"] .stieen-pilar-intro p,
[data-tema="escuro"] .stieen-multimidia-intro p { color: var(--stieen-cinza-suave); }
[data-tema="escuro"] .stieen-pilar p { color: var(--stieen-cinza-suave); }
[data-tema="escuro"] .stieen-noticia-card .stieen-noticia-data,
[data-tema="escuro"] .stieen-noticias-vazio { color: var(--stieen-cinza-suave); }
[data-tema="escuro"] .stieen-noticia-card:not(:first-child)::before {
  height: 2px;
  background: var(--stieen-borda-escura);
}
[data-tema="escuro"] .stieen-pilares-grid > *:not(:first-child),
[data-tema="escuro"] .stieen-pilar-intro,
[data-tema="escuro"] .stieen-pilar { border-color: var(--stieen-borda-escura); }
[data-tema="escuro"] .stieen-menu > ul > li:not(:last-child)::after { background: var(--stieen-borda-escura); }

/* Fundo/borda dos cards e "Em Breve" (multimídia/notícias) já eram
   escuros no claro (--stieen-escuro) — ficam como estão. Só o
   veúzinho de legibilidade do hero em telas ≤980px muda de tom
   (branco translúcido não faz sentido em tema escuro). */
[data-tema="escuro"] .stieen-hero-bg-wrap::before { background: var(--stieen-veu-escuro); opacity: .55; }