/* ==========================================================================
   COMPONENTE: Rodapé do Site
   --------------------------------------------------------------------------
   Uma única linha (mobile-first, com "flex-wrap" apenas como rede de
   segurança em ecrãs muito estreitos): copyright à esquerda, redes
   sociais + política de privacidade + crédito de desenvolvimento à
   direita. Sem logótipo — assinatura discreta de fecho de página.

   Fundo em --color-navy-deep. Contraste verificado (WCAG AA):
     --color-grey-light  → 9.38:1  (texto de copyright/crédito)
     --color-gold-light  → 7.05:1  (ligações)
     --color-white       → 10.95:1 (hover das ligações)
   ========================================================================== */

.site-footer {
  padding-block: var(--space-4);
  background-color: var(--color-navy-deep);
  color: var(--color-grey-light);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  column-gap: var(--space-4);
}

.site-footer__copyright {
  font-size: var(--fs-small);
  color: var(--color-grey-light);
  max-width: none; /* sobrepõe o "max-width: 60ch" de <p> em base/_typography.css — linha curta, não precisa de limite */
}

.site-footer__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-small);
}

.site-footer__social-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Botões circulares — mesma métrica (40px) e vocabulário de hover
   (elevação + mudança de cor) dos ícones diretos do cabeçalho
   (.site-header__icon-link em components/_header.css), invertidos
   para o fundo escuro do rodapé. Ligeiramente menores aqui (2.25rem)
   para caber com naturalidade numa única linha de texto. */
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(248, 248, 248, 0.3);
  color: var(--color-gold-light);
  transition:
    transform var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.site-footer__social-link svg {
  width: 1.05rem;
  height: 1.05rem;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-navy-deep); /* 4.85:1 sobre o dourado — cumpre o mínimo de 3:1 para elementos gráficos */
}

.site-footer__social-link:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

.site-footer__meta-link {
  color: var(--color-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(227, 199, 126, 0.4);
  transition:
    color var(--duration-fast) var(--ease-default),
    text-decoration-color var(--duration-fast) var(--ease-default);
}

.site-footer__meta-link:hover,
.site-footer__meta-link:focus-visible {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}

.site-footer__meta-link:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Separadores "·" gerados via ::before (em vez de <span> à parte no
   HTML): assim ficam sempre "colados" ao texto que introduzem e nunca
   podem ficar órfãos no fim de uma linha quando o rodapé quebra em
   ecrãs estreitos. */
.site-footer__meta-link + .site-footer__meta-link::before,
.site-footer__credit::before {
  content: '';
  margin-right: var(--space-2);
  color: rgba(248, 248, 248, 0.35);
}

.site-footer__credit {
  color: var(--color-grey-light);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__social-link {
    transition: none !important;
  }
}