/* public/css/fm/footer.css
 *
 * Skin do Footer próprio (fatia 1). Valores derivados do skin legado:
 *   .body (bg)                → fundo navy #011222 = --fm-navy (o footer pinta o próprio)
 *   .footer (skin)            → position: sticky; bottom: 0 (a pilha sticky da home rola por cima)
 *   .page-padding             → padding lateral 4rem (2.5/2/1.5 nos breakpoints)
 *   .container-xlarge         → largura 100%, centralizado
 *   .padding-vertical.padding-xhuge → padding vertical 10rem (6rem/4rem responsivo)
 *   .footer-grid              → flex row, colunas dimensionadas pelo conteúdo (max 20rem), gap 2rem; ≤991 empilha em coluna única centralizada
 *   .footer-grid-column       → max-width 20rem
 *   .text-size-regular.white.footer → tagline 1rem/160%, branco, padding-top 10px
 *   .heading-h4-cta-inverse   → contato 1.625rem/600/130%, branco, hover --fm-teal-bright
 *   .text-meta-footer         → título de coluna 1rem/700, uppercase, letter-spacing 1px, 150%
 *   .footer-nav-item-link-2   → link branco, sem sublinhado, block
 *   .badge.inverse            → social 40×40 círculo, bg #fff, ícone navy, hover --fm-gray-100
 *   .footer-bottom (site.css) → linha flex space-between, ds-link opacity .5 → 1
 * Auto-contido: o skin legado coexiste (regras de elemento a/.body/img cascateiam),
 * então fixamos box-sizing/font/cor/decoração/tamanho explicitamente em cada classe fm-.
 */

.fm-footer,
.fm-footer * {
  box-sizing: border-box;
}

.fm-footer {
  /* Paridade EXATA com o skin (.footer):
   *   >991px  → position: sticky; bottom: 0; z-index: 0
   *             O <main> (z-index:1, fundo branco) rola/cobre o rodapé fixado — no
   *             desktop o rodapé fica ATRÁS do conteúdo (aparece só a faixa navy).
   *   ≤991px  → position: static (override abaixo): o rodapé sai de baixo do <main>
   *             e fica VISÍVEL logo após o conteúdo (mobile/tablet). */
  position: sticky;
  bottom: 0;
  z-index: 0;
  background-color: var(--fm-navy);
  color: var(--fm-white);
  font-family: var(--fm-font-body);
  /* .margin-large responsivo do skin: 3rem → 2.5rem (≤991) → 1.5rem (≤767) */
  --fm-footer-mb-large: 3rem;
  /* .padding-xhuge responsivo do skin: 10rem → 6rem (≤991) → 4rem (≤767) */
  --fm-footer-pad: 10rem;
}

/* casca interna: padding lateral (.page-padding) + vertical (.padding-xhuge) + largura.
 * Modelo do skin: a grade vive num bloco .padding-xhuge (160px topo/base no desktop),
 * e a linha de baixo (.footer-bottom) fica FORA, com padding-bottom 4rem. Replicamos:
 *   topo = padding-xhuge + 4rem (o "respiro" extra do skin acima da grade)
 *   base = 0 (o respiro inferior vem do margin-top da grade p/ a linha + pb da linha) */
.fm-footer-inner {
  width: 100%;
  max-width: var(--fm-max-width); /* site-wide: rodapé não espalha em telas largas */
  margin: 0 auto;
  padding: calc(var(--fm-footer-pad) + 4rem) 4rem 0;
}

/* ——— grade de colunas (espelha .footer-grid do skin: grid 5 colunas
 *      1.5fr 1fr 1fr 1fr 1fr, gap 2rem, place-items stretch center — as colunas
 *      esticam todas à mesma altura, igual ao baseline) ————————————————————— */

.fm-footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  justify-content: center;
  place-items: stretch center;
}

.fm-footer-col {
  display: flex;
  flex-direction: column;
  /* lista de itens espelha .footer-nav: gap 1rem (não 0.75) */
  gap: 1rem;
  align-items: flex-start;
}

/* ——— coluna da marca ———————————————————————————————————————— */

.fm-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fm-footer-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* logo + tagline formam um bloco (.margin-bottom.margin-large.footer): mb 3rem */
.fm-footer-tagline {
  margin: 0 0 var(--fm-footer-mb-large);
  padding-top: 10px;
  font-family: var(--fm-font-body);
  font-size: var(--fm-text-md);
  line-height: 1.5; /* .text-size-regular do skin (site.css aperta p/ 1.5) */
  color: var(--fm-white);
}

/* e-mail: .margin-bottom.margin-small.footer → mb 1rem.
 * O skin desenha um sublinhado 1px branco rente à base de cada link de contato
 * (.link-08_underline: width 100%, height 1px, branco). Replicamos com border-bottom;
 * width:max-content faz a linha medir o texto (não a coluna), igual ao baseline. */
.fm-footer-contact {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 1rem;
  font-family: var(--fm-font-body);
  font-size: 1.625rem;
  font-weight: 600;
  /* line-height 1.33 + border-bottom: o skin renderiza cada link de contato como
   * inline-block (line-box ~27px) com um sublinhado 1px branco colado na base
   * (.link-08_underline). O border-bottom reproduz a linha E a altura do bloco, e
   * casa o empilhamento do brand pixel-a-pixel com o baseline (sem drift). */
  line-height: 1.33;
  color: var(--fm-white);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* telefone (2º contato): .margin-bottom.margin-large.footer → mb 3rem (abre o gap p/ os sociais) */
.fm-footer-contact + .fm-footer-contact {
  margin-bottom: var(--fm-footer-mb-large);
}

.fm-footer-contact:hover {
  color: var(--fm-teal-bright);
}

/* sociais: bloco final do brand, sem margem extra (o gap vem do telefone acima) */
.fm-footer-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-space-4);
  margin-top: 0;
}

.fm-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--fm-white);
  color: var(--fm-navy);
  border: 1px solid transparent;
  line-height: 100%;
  text-decoration: none;
  transition: background-color 0.2s, border 0.2s;
}

.fm-footer-social:hover {
  background-color: var(--fm-gray-100);
}

.fm-footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ——— colunas de serviços ————————————————————————————————————— */

.fm-footer-col-title {
  margin: 0; /* o espaçamento p/ os itens vem do gap 1rem da coluna (.fm-footer-col) */
  font-family: var(--fm-font-body);
  font-size: var(--fm-text-md);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fm-white);
}

.fm-footer-link {
  display: block;
  font-family: var(--fm-font-body);
  font-size: var(--fm-text-md);
  line-height: 1.2; /* paridade c/ .footer-nav-item-text (120%) — altura do item */
  color: var(--fm-white);
  text-decoration: none;
  transition: color 0.2s;
}

.fm-footer-link:hover {
  color: var(--fm-teal-bright);
}

/* ——— linha de baixo (copyright + link discreto do Design System) ——— */

.fm-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fm-space-4);
  /* respiro entre a grade e a linha de baixo = .padding-xhuge (skin) */
  margin-top: var(--fm-footer-pad);
  /* .footer-bottom do skin: padding-bottom 4rem (a linha fica acima da base) */
  padding-bottom: 4rem;
}

/* copyright + link DS: o skin usa 12px / line-height 1.6 (não --fm-text-sm) */
.fm-footer-copy {
  font-family: var(--fm-font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fm-white);
}

.fm-footer-ds {
  font-family: var(--fm-font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fm-white);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.fm-footer-ds:hover {
  opacity: 1;
}

/* ——— responsivo (breakpoints do skin: ≤991 empilha em coluna única centralizada) ——— */

@media screen and (max-width: 991px) {
  .fm-footer {
    position: static; /* .footer @≤991 do skin: sai de baixo do <main>, fica visível */
    --fm-footer-mb-large: 2.5rem; /* .margin-large @≤991 */
    --fm-footer-pad: 6rem; /* .padding-xhuge @≤991 */
  }
  .fm-footer-inner {
    padding: calc(var(--fm-footer-pad) + 4rem) 2.5rem 0;
  }
  /* .footer-grid @≤991 → grid 2 colunas, gap 3rem, centralizado (skin) */
  .fm-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .fm-footer-brand,
  .fm-footer-col {
    width: 100%;
    max-width: 100%;
    align-items: center; /* .footer-grid-column text-align:center */
    text-align: center;
  }
  .fm-footer-link {
    font-size: 0.9rem; /* .footer-nav-item-text @≤991 */
  }
  .fm-footer-tagline {
    font-size: 0.9rem; /* .text-size-regular @≤991 */
  }
  .fm-footer-contact {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .fm-footer {
    --fm-footer-mb-large: 1.5rem; /* .margin-large @≤767 */
    --fm-footer-pad: 4rem; /* .padding-xhuge @≤767 */
  }
  .fm-footer-inner {
    padding: calc(var(--fm-footer-pad) + 4rem) 2rem 0;
  }
}

@media screen and (max-width: 479px) {
  .fm-footer-inner {
    padding: calc(var(--fm-footer-pad) + 4rem) 1.5rem 0;
  }
  /* .footer-grid @≤479 → coluna única, empilha tudo centralizado (skin) */
  .fm-footer-cols {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .fm-footer-contact {
    font-size: 1.2rem;
  }
  /* .footer-bottom @≤479 → empilha centralizado (skin) */
  .fm-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}