/* assets/css/base.css — Base: contorno de foco (teclado), reset, body, títulos, links e container. */

/* =====================================================
   CONTORNO DE FOCO — navegação por teclado (Tab) — SITE INTEIRO
   Pedido do Luciano em 2026-09-11: até aqui os elementos novos (cards
   "Veja também", CTA de página interna, links do breadcrumb) dependiam
   só do contorno padrão do navegador. Regra geral abaixo cobre o site
   todo (header, cards da home, páginas internas), não só o que foi
   criado por último.

   Usa :focus-visible (não :focus puro) — o contorno só aparece quando
   a navegação é por teclado; clique de mouse não mostra nada, igual ao
   comportamento nativo do navegador, só que com a cor da marca em vez
   do azul padrão. Regras :focus mais específicas que já existem (ex:
   campo de busca do header, que troca o contorno por borda colorida)
   continuam valendo por cima desta, sem precisar de exceção manual.
   ===================================================== */
:focus-visible {
  outline: 3px solid var(--stieen-vermelho);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fundos escuros (rodapé, faixa de CTA, modo escuro do site, e o hero
   com foto de fundo) perdem contraste com o vermelho padrão — mesmo
   motivo documentado acima do --stieen-vermelho-vivo. Usa a versão viva
   do vermelho nesses trechos. */
.stieen-footer :focus-visible,
.stieen-cta :focus-visible,
.stieen-hero-slider :focus-visible,
[data-tema="escuro"] :focus-visible {
  outline-color: var(--stieen-vermelho-vivo);
}

*, *::before, *::after { box-sizing: border-box; }
/* <picture> nasce inline por padrão — vira bloco pra herdar certinho
   qualquer regra de largura/altura que já mirava direto no <img> lá
   dentro (padrão WebP+JPG do projeto, ver CLAUDE.md). */
picture { display: block; }

body.stieen-site {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: calc(16px * var(--stieen-escala-fonte));
  color: var(--stieen-cinza);
  background: var(--cor-main-fundo, var(--stieen-branco));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Assistant', system-ui, sans-serif; margin: 0; letter-spacing: -0.02em; }

a { text-decoration: none; }

.stieen-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }