/* ==========================================================================
   FOOTER — encerramento do site
   Consome exclusivamente tokens de css/design-system.css.

   DECISÃO DE FUNDO: grafite (--color-grafite), não off-white com
   divisor. Duas razões: (1) todas as oito seções da Home já alternam
   off-white/branco — um footer nessa mesma paleta seria mais uma
   seção clara, sem ler como o fim de fato; grafite fecha a página como
   um ponto final visível, coerente com a referência de "livro
   contemporâneo, revista cultural" da seção 4 do PROJECT.md. (2) não é
   uma cor nova: --color-grafite + --color-offwhite é exatamente o
   mesmo par que .skip-link e o hover de .btn-secondary já usam em
   design-system.css — só está sendo aplicado num componente novo, não
   inventado aqui.

   CONTRASTE — verificado, não assumido (WCAG 2.1, contraste relativo):
   - texto off-white sobre grafite: 12,04:1 (mín. AA texto normal: 4,5:1) ✅
   - divisor --color-border sobre grafite: 6,3:1 — bem visível ✅
   - sublinhado dos links em --color-accent-primary (terracota) sobre
     grafite: 3,43:1 (mín. p/ elemento gráfico: 3:1) — passa, com pouca
     folga; é só o traço decorativo do hover, o texto do link em si já
     usa off-white a 12:1
   - PROBLEMA ENCONTRADO: o anel de foco padrão do design system
     (--color-focus-ring = petróleo) só dá 1,51:1 sobre grafite — abaixo
     do mínimo de 3:1 para indicador de foco (WCAG 1.4.11). É por isso
     que este arquivo sobrescreve só a cor do anel de foco dentro do
     footer (ver ".site-footer a:focus-visible" abaixo) — não altera a
     regra global em design-system.css, que continua correta em todo o
     resto do site (fundo claro).
   ========================================================================== */

.site-footer {
  background-color: var(--color-grafite);
  color: var(--color-offwhite);
}

/* --------------------------------------------------------------------------
   BLOCO PRINCIPAL — identidade à esquerda, links à direita. Empilhado
   por padrão (mobile-first); lado a lado a partir de 768px, mesmo
   breakpoint já usado em toda a Home. --space-section-sm (já definido
   no design system, ainda sem uso em nenhum arquivo até esta etapa) em
   vez de --space-section: um footer pede menos respiro vertical do que
   uma seção de conteúdo pleno.
   -------------------------------------------------------------------------- */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-section-sm);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   IDENTIFICAÇÃO — nome + credencial. O nome usa a família de título
   (Cormorant Garamond) só por tipografia, não é um heading: mesma
   lógica já documentada em .hero__eyebrow (hero.css) — não deve entrar
   na hierarquia de headings da página, que termina no H2 da seção
   anterior. Credencial em opacidade reduzida sobre o mesmo off-white —
   cria hierarquia sem precisar de um tom novo (ainda a 7,5:1 de
   contraste mesmo a 75% de opacidade, bem acima do mínimo AA).
   -------------------------------------------------------------------------- */
.site-footer__name {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display-medium);
  line-height: var(--leading-display);
}

.site-footer__role {
  margin: 0;
  font-size: var(--text-secundario);
  line-height: var(--leading-body);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   LINKS — WhatsApp e Política de Privacidade. Reaproveita, regra por
   regra, o tratamento de .site-header__whatsapp-link (header.css): sem
   sublinhado por padrão, um traço em --color-accent-primary (terracota)
   revela no hover/foco. Só a cor de texto muda (off-white em vez de
   grafite, porque aqui o fundo é escuro) — a técnica é a mesma, não
   uma nova.
   -------------------------------------------------------------------------- */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-secundario);
  color: var(--color-offwhite);
  text-decoration: none;
}

.site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: var(--color-accent-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.site-footer__links a:hover::after,
.site-footer__links a:focus-visible::after {
  transform: scaleX(1);
}

.site-footer__links a:active {
  opacity: 0.7;
}

/* Correção pontual de contraste — ver nota no topo do arquivo. Maior
   especificidade que a regra global (design-system.css) por já incluir
   a classe do componente, então vence sem precisar de !important. */
.site-footer a:focus-visible {
  outline-color: var(--color-offwhite);
}

/* --------------------------------------------------------------------------
   BARRA INFERIOR — linha fina de separação + direitos autorais.
   --color-border funciona como divisor mesmo sobre grafite (6,3:1 de
   contraste, verificado acima) — não precisou de um tom novo.
   -------------------------------------------------------------------------- */
.site-footer__bottom {
  border-top: var(--border-width) solid var(--color-border);
}

.site-footer__bottom .container {
  padding-block: var(--space-lg);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--text-secundario);
  opacity: 0.7;
}