/* v2 footer — redesign 2026. Uses tokens from css/v2/tokens.css.
   Maquette: "Diseño web móvil HTML (4)" Web Desktop / Web Movil, last `background:#000000` block
   (newsletter column removed). Structure comes from UIkit (uk-container-bf,
   uk-grid, uk-flex, uk-icon); this file adds the brand look and the exact
   maquette spacing. Mobile first, desktop from UIkit @m (960px). */

.bf-footer {
  background: var(--bf-c-black);
  color: var(--bf-c-grey-200);
  font-family: var(--bf-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Horizontal geometry comes from .uk-container-bf. */
.bf-footer__inner {
  padding-top: 40px;
  padding-bottom: 32px;
}

/* ---- Counter UIkit base: `ul` margin (incl. `* + ul`) and padding ---- */

.bf-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-footer img {
  display: block;
}

/* ---- Columns (uk-grid with the maquette gutters: 28, 56 @m) ----
   2 columns until @m: at @s (640) a 4-column row is 126px wide and pt-br
   "Encontre sua unidade" (130px) wraps. */

.bf-footer__grid.uk-grid {
  margin-left: -28px;
}

.bf-footer__grid.uk-grid > * {
  padding-left: 28px;
}

.bf-footer__grid.uk-grid > .uk-grid-margin {
  margin-top: 28px;
}

.bf-footer__heading {
  margin: 0 0 12px;  /* a <p>: also cancels UIkit's p / `* + p` margins */
  font: 400 12px/1 var(--bf-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bf-c-yellow);
}

.bf-footer__links {
  gap: 10px;
}

/* Block, like the maquette's flex-item links: the row height is the link's own
   line-height, not the 24px inherited by the <li>. */
.bf-footer__link {
  display: block;
  font: 400 14px/1.3 var(--bf-font-body);
  color: var(--bf-c-grey-200);
  transition: color var(--bf-dur) var(--bf-ease);
}

.bf-footer__link:hover,
.bf-footer__link:focus-visible {
  color: var(--bf-c-white);
  text-decoration: none;  /* UIkit underlines a:hover */
}

/* ---- Social (uk-icon, inline SVG for X / Spotify) ---- */

.bf-footer__social {
  gap: 12px;
}

.bf-footer__social-link {
  width: 24px;  /* 20px icon, 24px hit area (WCAG 2.2 target size) */
  height: 24px;
  color: var(--bf-c-grey-200);
  transition: color var(--bf-dur) var(--bf-ease);
}

.bf-footer__social-link:hover,
.bf-footer__social-link:focus-visible {
  color: var(--bf-c-yellow);
}

.bf-footer__social-link svg {
  display: block;
  width: 20px;
  height: 20px;  /* UIkit sets svg { height: auto } */
}

.bf-footer__link:focus-visible,
.bf-footer__social-link:focus-visible,
.bf-footer__logo:focus-visible,
.bf-footer__badge:focus-visible {
  outline: 2px solid var(--bf-c-yellow);
  outline-offset: 2px;
}

/* ---- Bottom bar ---- */

.bf-footer__bottom {
  gap: 12px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--bf-c-line-dark);
}

.bf-footer__logo {
  display: block;
}

.bf-footer__logo img {
  width: auto;
  height: 18px;
}

.bf-footer__legal {
  gap: 8px 16px;
}

.bf-footer__legal .bf-footer__link,
.bf-footer__copyright {
  font-size: 12px;
}

.bf-footer__copyright {
  margin: 0;  /* UIkit p margin, incl. `* + p` */
  line-height: 1.3;
  color: var(--bf-c-white);  /* WD l.690, WM l.680 */
}

/* Payment methods + country badges (AFIP ar, ENISA es-es). */
.bf-footer__meta {
  gap: 12px;
}

.bf-footer__payments {
  gap: 8px 12px;
}

.bf-footer__payments-label {
  font: 400 12px/1.3 var(--bf-font-body);
  color: var(--bf-c-grey-200);
}

.bf-footer__payments-list {
  gap: 6px;
}

/* Same assets as the current (dark) footer — they are drawn for a black
   background. Fixed box so every mark gets the same visual weight. */
.bf-footer__payments-list li {
  width: 34px;
  height: 20px;
}

.bf-footer__payments-list img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.bf-footer__badge--afip img {
  width: 64px;
  height: auto;
}

.bf-footer__badge--enisa img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* ============================================================
   Desktop (UIkit @m)
   ============================================================ */

@media (min-width: 960px) {
  /* WD l.653: 80px 48px 40px. */
  .bf-footer__inner {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .bf-footer__grid.uk-grid {
    margin-left: -56px;
  }

  .bf-footer__grid.uk-grid > * {
    padding-left: 56px;
  }

  .bf-footer__heading {
    margin-bottom: 16px;
  }

  .bf-footer__links {
    gap: 12px;
  }

  .bf-footer__link {
    font-size: 15px;
  }

  /* Row 1: logo · legal · © (legal is uk-width-expand@m + uk-flex-center@m, which
     lands it where the maquette's space-between does). Row 2: payments + badges. */
  .bf-footer__bottom {
    gap: 24px 32px;
    margin-top: 56px;  /* WD l.680 */
    padding-top: 26px;
  }

  .bf-footer__logo img {
    height: 20px;
  }

  .bf-footer__legal {
    gap: 8px 20px;
  }

  .bf-footer__legal .bf-footer__link,
  .bf-footer__copyright,
  .bf-footer__payments-label {
    font-size: 13px;
  }

  /* Payment logos centred on the full content width: 1fr · logos · 1fr. AFIP (64px)
     fits in the right track, same row; ENISA (320px) only fits there from 1051px (see
     below), so under that it takes its own row below, right-aligned. */
  .bf-footer__meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px 32px;
  }

  .bf-footer__payments {
    grid-column: 2;
  }

  .bf-footer__badge {
    grid-column: 3;
    justify-self: end;
  }

  .bf-footer__badge--enisa {
    grid-column: 1 / -1;
  }

  /* Visible label dropped on desktop; it still names the list (aria-labelledby). */
  .bf-footer__payments-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ENISA back on the logos' row once the right track holds its 320px with the usual 32px
   gap: (content − 234 logos − 2×32) / 2 ≥ 320 → content ≥ 938 → 938 + 2×48 = 1034px.
   +17px because the media query counts a classic (Windows) scrollbar that the layout
   doesn't get: at 1034–1050 ENISA would shrink to fit instead of keeping 320px. */
@media (min-width: 1051px) {
  .bf-footer__badge--enisa {
    grid-column: 3;
  }
}