/**
 * Widget Elementor — Rodapé (fjpn-footer)
 *
 * Fundo `--fjpn-slate-900` com texto `--fjpn-slate-400`, conforme
 * architecture/secoes-design.md §13 e design-tokens.md §1.3.
 *
 * Checagem de contraste (WCAG 2.1 AA, 4.5:1 para texto normal):
 * #94a3b8 (--fjpn-slate-400) sobre #0f172a (--fjpn-slate-900) = ~6,96:1.
 * Passa AA com folga (e quase alcança AAA, 7:1) — nenhuma correção de cor
 * foi necessária, o par de tokens do design já é acessível.
 *
 * Fonte dos valores: assets/css/tokens.css (única fonte da verdade).
 * NÃO editar wp-content/themes/bighearts/ nem tokens.css a partir daqui.
 */

/* ==========================================================
 * 1. ESTRUTURA GERAL
 * ========================================================== */

.fjpn-footer {
  /* Cores customizáveis (widgets/footer.php, controles "Cor de fundo do
     rodapé" / "Cor do texto") — fallback idêntico ao original
     (--fjpn-slate-900 / --fjpn-slate-400). `color` é herdado por
     .fjpn-footer__texto, .fjpn-footer__selo e .fjpn-footer__copyright, que
     não declaram cor própria. */
  background: var(--fjpn-footer-bg, var(--fjpn-slate-900));
  color: var(--fjpn-footer-texto-cor, var(--fjpn-slate-400));
}

.fjpn-footer__container {
  padding-block: var(--fjpn-space-section-py-sm); /* 64px — py-16, conteúdo interno do Footer (doc §3.1) */
}

/* ==========================================================
 * 2. GRID — MARCA (2 colunas em desktop) + N COLUNAS DE LINKS
 * `--fjpn-footer-colunas` é escrito inline pelo PHP (contagem real de
 * colunas configuradas no Repeater) para o grid se adaptar sem hardcodar
 * um número fixo de colunas no CSS.
 * ========================================================== */

.fjpn-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fjpn-gap-grid); /* 24px — gap padrão de grid do site (doc §3.3) */
}

@media (min-width: 640px) {
  .fjpn-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fjpn-footer__grid {
    grid-template-columns: 2fr repeat(var(--fjpn-footer-colunas, 3), 1fr);
  }

  .fjpn-footer__marca {
    grid-column: span 2;
  }
}

/* ==========================================================
 * 3. BLOCO DE MARCA
 * ========================================================== */

.fjpn-footer__logo-link {
  display: inline-block;
}

.elementor .fjpn-footer__logo {
  /* Sem token dedicado à altura da logo do rodapé — segue o mesmo valor
     documentado para a logo do header (30px, secoes-design.md §1), para
     manter a identidade visual consistente entre as duas áreas. */
  height: 30px;
  width: auto;
  /* Mesma técnica do header: converte a logo colorida em branca sobre o
     fundo escuro (filter: brightness(0) invert(1)), documentada em
     secoes-design.md §13 ("logo branca, mesmo filtro da Navbar"). */
  filter: brightness(0) invert(1);
}

.fjpn-footer__logo-link:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-primary);
  outline-offset: 2px;
}

.fjpn-footer__texto {
  margin-top: var(--fjpn-gap-medium); /* 16px */
  max-width: 32rem;
}

.fjpn-footer__selo {
  display: flex;
  align-items: center;
  gap: var(--fjpn-gap-icon-text); /* 8px */
  margin-top: var(--fjpn-gap-medium);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  /* Mesma cor customizável de .fjpn-footer acima (redeclarada aqui apenas
     porque o valor original já estava explícito neste seletor). */
  color: var(--fjpn-footer-texto-cor, var(--fjpn-slate-400));
}

.fjpn-footer__selo strong {
  color: var(--fjpn-white);
  font-weight: var(--fjpn-weight-bold);
}

.fjpn-footer__selo-icone {
  font-size: 1.1em;
  line-height: 1;
}

/* ==========================================================
 * 4. REDES SOCIAIS
 * Círculo branco 44×44 com borda/sombra documentadas em tokens.css como
 * próprias do footer (--fjpn-shadow-social-icon, borda slate-200), ícone
 * colorido com a cor oficial de cada rede (tokens.css §18 — decorativo,
 * não faz parte da paleta de marca).
 * ========================================================== */

.fjpn-footer__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fjpn-gap-medium); /* 16px */
  margin-top: var(--fjpn-gap-hero-columns); /* 48px — respiro maior antes do bloco de ícones */
  list-style: none;
  padding: 0;
}

.fjpn-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* doc §4.1 — "botões sociais circulares (44×44px)" */
  height: 44px;
  border-radius: var(--fjpn-radius-full);
  background: var(--fjpn-white);
  border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  box-shadow: var(--fjpn-shadow-social-icon);
  transition: transform var(--fjpn-duration-base) var(--fjpn-ease-simple);
}

.fjpn-footer__social:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-primary);
  outline-offset: 2px;
}

.fjpn-footer__social--facebook {
  color: var(--fjpn-decorative-social-facebook);
}

.fjpn-footer__social--instagram {
  color: var(--fjpn-decorative-social-instagram);
}

.fjpn-footer__social--youtube {
  color: var(--fjpn-decorative-social-youtube);
}

.fjpn-footer__social--twitter {
  color: var(--fjpn-decorative-social-twitter);
}

/* ==========================================================
 * 5. COLUNAS DE LINKS (wp_nav_menu)
 * ========================================================== */

.fjpn-footer__coluna-titulo {
  margin: 0 0 var(--fjpn-gap-medium);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-button); /* 14px */
  font-weight: var(--fjpn-weight-bold);
  /* Cor customizável (widgets/footer.php, controle "Cor do título da
     coluna") — fallback idêntico ao original (--fjpn-white). */
  color: var(--fjpn-footer-titulo-cor, var(--fjpn-white));
}

.fjpn-footer__nav {
  display: block;
}

.fjpn-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fjpn-gap-icon-text-lg); /* 10px */
}

.fjpn-footer__menu a {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  /* Cor customizável (widgets/footer.php, controle "Cor dos links") —
     fallback idêntico ao original (--fjpn-slate-400). O hover permanece
     branco fixo, não customizável (ver regra abaixo). */
  color: var(--fjpn-footer-link-cor, var(--fjpn-slate-400));
  text-decoration: none;
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.fjpn-footer__menu a:hover {
  color: var(--fjpn-white);
}

.fjpn-footer__menu a:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-primary);
  outline-offset: 2px;
  color: var(--fjpn-white);
}

.fjpn-footer__aviso-editor {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  color: var(--fjpn-error-light);
  border: var(--fjpn-border-width-default) dashed var(--fjpn-error-light);
  border-radius: var(--fjpn-radius-lg);
  padding: var(--fjpn-gap-icon-text);
  margin: 0;
}

/* ==========================================================
 * 6. BARRA INFERIOR — COPYRIGHT + LINKS LEGAIS
 * Sem token dedicado ao espaçamento da barra; reaproveita por valor o
 * token de gap médio (16px) e o de borda padrão, ambos já existentes.
 * ========================================================== */

.fjpn-footer__barra {
  margin-top: var(--fjpn-space-section-py-sm);
  padding-top: var(--fjpn-gap-medium);
  border-top: var(--fjpn-border-width-default) solid var(--fjpn-slate-700);
  display: flex;
  flex-direction: column;
  gap: var(--fjpn-gap-medium);
}

@media (min-width: 640px) {
  .fjpn-footer__barra {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.fjpn-footer__copyright {
  margin: 0;
}

.fjpn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fjpn-gap-medium);
}

.fjpn-footer__legal-link {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  /* Mesma cor customizável de .fjpn-footer__menu a acima — fallback
     idêntico ao original (--fjpn-slate-400). */
  color: var(--fjpn-footer-link-cor, var(--fjpn-slate-400));
  text-decoration: none;
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.fjpn-footer__legal-link:hover {
  color: var(--fjpn-white);
}

.fjpn-footer__legal-link:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-primary);
  outline-offset: 2px;
  color: var(--fjpn-white);
}