/* v2 menu — redesign 2026. Uses tokens from css/v2/tokens.css.
   Structure and behaviour come from UIkit 3.5.7; this file only adds the brand look.
     #bf-menu         : uk-drop, mobile (< 960px) — maquette Web Movil (4) l.53-62: drop-down
                        panel right under the sticky header (and the promo bar), full width,
                        overlaying the page: link rows, then the language row ("country ·
                        language") that expands the form
     #bf-locale-drop  : uk-drop, desktop (>= 960px) — country/language under the header,
                        5px from the viewport's right edge
     .bf-locale-form  : the form shared by both (components/v2/locale-form.html.twig)
   Overrides only counter UIkit itself (drop position, width and z-index) and are scoped
   under our ids. Pages extend base_v2.html.twig: no legacy CSS to counter. */

/* ---- Mobile: drop-down panel ---- */

/* UIkit positions a drop absolutely in the page (inline top/left/width) and it would scroll
   away from the sticky header: pin it to the viewport instead. --bf-menu-top is the header's
   (or the promo bar's) bottom edge, measured by js/v2/menu.js while the panel is open; the
   fallback is that edge when the header sits at the top. The panel scrolls if it ever gets
   taller than the space left (small landscape screens, form open).
   z-index: under the header and the promo bar (the slide-in starts behind them), above the
   page. */
#bf-menu {
  position: fixed !important;
  top: var(--bf-menu-top, calc(var(--bf-header-h) + var(--bf-promo-h))) !important;
  left: 0 !important;
  right: 0;
  z-index: calc(var(--bf-z-header) - 2);
  width: 100% !important;
  max-height: calc(100vh - var(--bf-menu-top, calc(var(--bf-header-h) + var(--bf-promo-h))));
  max-height: calc(100dvh - var(--bf-menu-top, calc(var(--bf-header-h) + var(--bf-promo-h))));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  background: var(--bf-c-white);
  border-bottom: 1px solid var(--bf-c-line-light);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
  color: var(--bf-c-black);
}

#bf-menu *,
#bf-menu *::before,
#bf-menu *::after {
  box-sizing: border-box;
}

#bf-menu .bf-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Maquette rows: padding 18px 20px, DIN 24/1, full-bleed 1px border-top → 61px. The first
   row keeps its border too: the maquette panel sits in the flow under the header, so at rest
   its first border doubles the header's bottom border. */
#bf-menu .bf-menu__item,
#bf-menu .bf-menu__lang {
  border-top: 1px solid var(--bf-c-line-light);
}

#bf-menu .bf-menu__link,
#bf-menu .bf-menu__link:visited {
  display: block;
  padding: 18px var(--bf-gutter);
  font: 400 24px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bf-c-black);
  text-decoration: none;
}

/* Mouse only: on touch screens :hover sticks after a tap. */
@media (hover: hover) {
  #bf-menu .bf-menu__link:hover,
  #bf-menu .bf-menu__lang-toggle:hover {
    color: var(--bf-c-gold);
    text-decoration: none;
  }
}

/* Language row: native <details>, same row box as the links (61px incl. the border) with a
   smaller label — flag + "country · language" + chevron; opening it shows the form below. */

#bf-menu .bf-menu__lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 var(--bf-gutter);
  font: 400 17px/1 var(--bf-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bf-c-black);
  list-style: none;               /* default disclosure marker */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#bf-menu .bf-menu__lang-toggle::-webkit-details-marker {
  display: none;
}

#bf-menu .bf-menu__lang-flag {
  flex: none;
  width: 22px;
  height: 16px;
  line-height: 16px;
  box-shadow: 0 0 0 1px var(--bf-c-line-light);
}

/* One line: a longer "country · language" ends in an ellipsis. line-height 1.4 (centred, so
   the text does not move) keeps the accents (Ñ, Ç) inside the clipped box. */
#bf-menu .bf-menu__lang-label {
  min-width: 0;
  padding-top: 2px;               /* DIN Condensed sits high in its line box */
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#bf-menu .bf-menu__lang-chevron {
  flex: none;
  transition: transform var(--bf-dur) var(--bf-ease);
}

#bf-menu .bf-menu__lang[open] .bf-menu__lang-chevron {
  transform: rotate(180deg);
}

#bf-menu .bf-menu__lang-panel {
  padding: 4px var(--bf-gutter) 24px;
}

/* Keyboard focus: inset outline (the rows are full-bleed). */
#bf-menu .bf-menu__link:focus,
#bf-menu .bf-menu__lang-toggle:focus {
  outline: none;
}

#bf-menu .bf-menu__link:focus-visible,
#bf-menu .bf-menu__lang-toggle:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: -2px;
}

@media (min-width: 960px) {
  #bf-menu {
    display: none !important;
  }
}

/* ---- Desktop: drop ---- */

/* Right edge 5px from the viewport edge (legacy selector: right: 5px). UIkit puts the drop's box
   under the full-width .bf-header, right edges flush (boundary-align, see locale-drop.html.twig);
   the inset is a transparent right padding, the surface is the inner panel. offset: 0 keeps
   UIkit's position class (and its 20px gap) off: the drop sits right under the header border. */
#bf-locale-drop {
  width: 365px;                   /* 360px panel + 5px inset; UIkit: 300px */
  padding: 0 5px 0 0;
}

#bf-locale-drop .bf-locale-drop__panel {
  padding: 24px;
  background: var(--bf-c-white);
  border: 1px solid var(--bf-c-line-light);
  border-top: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

#bf-locale-drop *,
#bf-locale-drop *::before,
#bf-locale-drop *::after {
  box-sizing: border-box;
}

@media (max-width: 959px) {
  #bf-locale-drop {
    display: none !important;
  }
}

/* ---- Shared: country & language form ---- */

.bf-locale-form__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bf-locale-form__overline {
  float: left;            /* lets the legend sit in the flow like a block */
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  font: 400 12px/1 var(--bf-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bf-c-gold);
}

.bf-locale-form__current {
  clear: both;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font: 400 15px/1.3 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-locale-form__flag {
  flex: none;
  width: 22px;
  height: 16px;
  line-height: 16px;
  box-shadow: 0 0 0 1px var(--bf-c-line-light);
}

.bf-locale-form__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bf-locale-form__select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  font: 400 16px/1.2 var(--bf-font-body);   /* 16px: no iOS zoom on focus */
  color: var(--bf-c-black);
  background: var(--bf-c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: var(--bf-radius-field);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--bf-dur) var(--bf-ease);
}

.bf-locale-form__select:hover {
  border-color: var(--bf-c-black);
}

/* Chrome treats a script-focused <select> as :focus-visible even after a mouse click
   (menu.js focuses it when the drop opens), so keep the focus state sober: 2px black border. */
.bf-locale-form__select:focus {
  border-color: var(--bf-c-black);
  box-shadow: 0 0 0 1px var(--bf-c-black);
  outline: none;
}

/* Secondary button: black outline, flips to the CTA hover colours. */
.bf-locale-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin: 4px 0 0;
  padding: 0 20px;
  font: 400 17px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bf-c-black);
  background: transparent;
  border: 1px solid var(--bf-c-black);
  border-radius: var(--bf-radius-btn);
  cursor: pointer;
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease);
}

.bf-locale-form__submit:focus-visible {
  color: var(--bf-c-yellow);
  background: var(--bf-c-black);
}

/* Mouse only: on touch screens :hover sticks after a tap and would leave the button black. */
@media (hover: hover) {
  .bf-locale-form__submit:hover {
    color: var(--bf-c-yellow);
    background: var(--bf-c-black);
  }
}

.bf-locale-form__submit:focus {
  outline: none;
}

.bf-locale-form__submit:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #bf-menu .bf-menu__lang-chevron,
  .bf-locale-form__select,
  .bf-locale-form__submit {
    transition: none;
  }

  /* UIkit sets the drops' animation duration inline (200ms) and waits for animationend:
     shorten it rather than remove it. */
  #bf-menu,
  #bf-locale-drop {
    animation-duration: 1ms !important;
  }
}