/* ============================================================
   Brooklyn Fitboxing — Redesign 2026 (v2) foundations
   Source: tmp/"Diseño web móvil HTML (1)" — Web Desktop v3 / Web Movil.
   Built on UIkit 3.5.7 (vendored): layout, visibility, toggle, offcanvas,
   drop, grid and icons come from UIkit; this layer only adds the brand
   look. Custom classes are prefixed `bf-`, UIkit modifiers follow the
   `uk-*-bf` convention, and every override is scoped so base.css,
   style.css and components.css never leak in.

   Breakpoints = UIkit's (CSS variables cannot be used in media queries):
     @s 640px · @m 960px · @l 1200px
     mobile  : < 960px  — burger + offcanvas menu
     desktop : >= 960px (@m) — inline nav
   ============================================================ */

/* DIN Condensed (ParaType) — official web build v1.005W (tmp/Tipografías/DIN CONDENSED REGULAR/WEB),
   same outlines and metrics as the former DINCondensed.woff2 (kept for legacy pages), wider charset.
   Web licence to be confirmed before production. */
@font-face {
  font-family: 'BF DIN Condensed';
  src: url('../../fonts/din-condensed/din-condensed-normal-1005w.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter Tight (SIL OFL) — variable, wght axis limited to 300–700. */
@font-face {
  font-family: 'BF Inter Tight';
  src: url('../../fonts/inter-tight/InterTight-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Fira Sans Extra Condensed (SIL OFL) — Latin subsets: 900 (rating figures) and 700 (training
   durations: "47 min", step minutes, club badge). Same unicode ranges in both files.
   The font has no U+2605 glyph: the ★ stars render with the fallback font. */
@font-face {
  font-family: 'BF Fira Sans Extra Condensed';
  src: url('../../fonts/fira-sans-extra-condensed/FiraSansExtraCondensed-Black-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BF Fira Sans Extra Condensed';
  src: url('../../fonts/fira-sans-extra-condensed/FiraSansExtraCondensed-Bold-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Families ---- */
  --bf-font-display: 'BF DIN Condensed', 'DIN Condensed', 'Arial Narrow', sans-serif;
  --bf-font-body: 'BF Inter Tight', 'Inter Tight', Arial, Helvetica, sans-serif;
  --bf-font-numeric: 'BF Fira Sans Extra Condensed', 'Arial Narrow', sans-serif;

  /* ---- Colours ---- */
  --bf-c-yellow: #FFCC00;       /* CTA fill */
  --bf-c-gold: #A68500;         /* active underline, link hover on white */
  --bf-c-sand: #F1F1E9;         /* light section / card background */
  --bf-c-black: #000000;
  --bf-c-white: #FFFFFF;
  --bf-c-ink-idle: #5C5C5C;     /* idle nav item on white */
  --bf-c-grey-200: #B2B2B2;     /* text on black (footer) */
  --bf-c-field: #0C0C0C;        /* input bg on black */
  --bf-c-line-dark: #353535;    /* hairline on black */
  --bf-c-line-light: rgba(0, 0, 0, .12); /* hairline on white */
  --bf-c-header-bg: rgba(255, 255, 255, .94);

  /* ---- Layout ---- */
  --bf-container: 1456px;      /* maquette: 1360px content + 2×48px gutters (border-box) */
  --bf-gutter: 20px;            /* mobile */
  --bf-gutter-desktop: 48px;

  /* ---- Component metrics ---- */
  --bf-header-h: 67px;          /* mobile: 14px padding + 38px CTA + 1px border */
  --bf-header-h-desktop: 81px;  /* desktop: 18px padding + 44px CTA (36px logo at 1440) + 1px border */
  --bf-promo-h: 0px;            /* promo bar under the header: set by css/v2/promo-bar.css, only
                                   loaded with a promo. Subtract it wherever --bf-header-h is. */
  --bf-country-h: 0px;          /* country-selector bar above the header, root URL only: measured by
                                   components/v2/country-selector.html.twig. Not sticky, so only
                                   load-time "fits the first screen" rules subtract it. */
  --bf-radius-btn: 4px;
  --bf-radius-field: 4px;

  /* ---- Motion ---- */
  --bf-dur: .2s;
  --bf-ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Stacking ---- */
  --bf-z-header: 1000;
  --bf-z-menu: 990;             /* panel slides under the sticky header */
}

/* ---- Page defaults (body.bf-v2 is set by base_v2.html.twig) ---- */

body.bf-v2 {
  font-family: var(--bf-font-body);
  color: var(--bf-c-black);
  background: var(--bf-c-white);
}

/* Titles: a long single word (e.g. a de compound, "WILLKOMMENSANGEBOT") wraps instead of
   overflowing its box. Hyphenation only for German (base_v2 sets <html lang="de-de">), so the
   validated es line breaks never change. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

:lang(de) h1,
:lang(de) h2,
:lang(de) h3 {
  hyphens: auto;
}

/* ---- Page frame: sticky footer (body.bf-v2-page, base_v2.html.twig only — never the embed) ----
   A page shorter than the viewport (a confirmation, a status page… on 1920x1200 / 2560x1440)
   used to leave an empty band under the footer. <body> becomes a flex column at least one
   viewport tall and .bf-v2-page__content (messages + the page's content block) takes the spare
   height, so the footer ends on the viewport bottom; the band is the page background, above the
   footer, under top-aligned content. A longer page keeps its exact height (min-height only).
   The other body children keep their layout: header and promo bar stay position: sticky (body
   is still their containing block), offcanvas / modals / contact bubble are fixed or hidden
   (out of the flow), scripts are display: none. 100dvh where supported, so a mobile browser
   bar never pushes the footer below the fold.

   Not on a page where uk-height-viewport="expand: true" is in charge (gift, franchise dossier,
   I Love BF, legal, free-trial coupon/gift-to-friend…): UIkit sizes that container from the
   document height, which this min-height would pin to the viewport, so it would stop stretching
   (losing its background fill and vertical centring). Those pages already end on the viewport
   bottom through UIkit. The exception is an expand container inside .confirmation: the
   thank-you's (css/confirmation.css) cancels UIkit's min-height with !important, so it never
   stretches and the frame still has to.
   Browsers without :has() drop the whole rule and keep the previous layout. */
body.bf-v2-page:not(:has([uk-height-viewport*="expand"]:not(.confirmation *))) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.bf-v2-page__content {
  flex: 1 0 auto;
}

/* ---- Shared primitives ---- */

/* UIkit container modifier — use with `uk-container uk-container-bf`.
   Maquette: 1360px content + 48px gutters on desktop, 20px on mobile.
   UIkit's .uk-container is content-box, so max-width is the content width. */
.uk-container.uk-container-bf {
  max-width: calc(var(--bf-container) - 2 * var(--bf-gutter-desktop));
  padding-left: var(--bf-gutter);
  padding-right: var(--bf-gutter);
}

@media (min-width: 960px) {
  .uk-container.uk-container-bf {
    padding-left: var(--bf-gutter-desktop);
    padding-right: var(--bf-gutter-desktop);
  }
}

/* Primary CTA: yellow, flips to black/yellow on hover (maquette). */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font: 400 17px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  border-radius: var(--bf-radius-btn);
  padding: 14px 20px;
  cursor: pointer;
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease);
}

/* :hover keeps the idle look by default: on touch screens it sticks after a tap, and without
   this UIkit's `a:hover` (blue, underlined) would win over .bf-btn. Mouse hover is below. */
.bf-btn--primary,
.bf-btn--primary:visited,
.bf-btn--primary:hover {
  background: var(--bf-c-yellow);
  color: var(--bf-c-black);
  text-decoration: none;
}

.bf-btn--primary:focus-visible {
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
  text-decoration: none;
}

/* Hover only where a pointer can hover: on touch screens :hover sticks after a tap and
   would leave the button black. */
@media (hover: hover) {
  .bf-btn--primary:hover {
    background: var(--bf-c-black);
    color: var(--bf-c-yellow);
    text-decoration: none;
  }
}

/* Hero CTA on a photo/video (home, training, finder, province, club heroes): hover flips to
   white/black instead of black/yellow, no glow (maquette WD l.184, 373, 415, 523). */
.bf-btn--primary.bf-btn--on-media:focus-visible {
  background: var(--bf-c-white);
  color: var(--bf-c-black);
  box-shadow: none;
}

@media (hover: hover) {
  .bf-btn--primary.bf-btn--on-media:hover {
    background: var(--bf-c-white);
    color: var(--bf-c-black);
    box-shadow: none;
  }
}

.bf-btn--sm {
  font-size: 16px;
  padding: 11px 14px;
}

.bf-btn:focus-visible,
.bf-link:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

.bf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- reCAPTCHA Enterprise badge: hidden as on legacy pages (custom.css) ---- */
.grecaptcha-badge {
  visibility: collapse !important;
}