/* Markets.Futbol : locale switcher.
   Pairs with i18n.js. Built from the same tokens as style.css / schedule.css so
   it reads as part of the header rather than a widget bolted onto it. Token
   fallbacks are inline because not every page in site/ defines the full set.

   Markup is generated by i18n.js from <div data-mf-locale-switcher></div>. */

.mf-lang{position:relative;display:inline-block;flex:none}

/* Trigger. Matches .lang in schedule.css: same border, radius, weight, hover. */
.mf-lang-trigger{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line,rgba(255,255,255,.09));border-radius:.55rem;
  background:transparent;color:var(--text,#e2e2e8);cursor:pointer;
  font-family:inherit;font-size:.82rem;font-weight:700;line-height:1;
  padding:8px 10px;transition:border-color .15s,color .15s,background .15s;
}
/* Outlined chip, never a button: gold fills and glows are reserved for the
   conversion CTAs, so hover and open change border and text colour only. */
.mf-lang-trigger:hover{border-color:var(--gold,#f2ca50);color:var(--gold,#f2ca50)}
.mf-lang.is-open .mf-lang-trigger{border-color:var(--gold,#f2ca50);color:var(--gold,#f2ca50)}

/* Keyboard focus ring. Without this the trigger falls back to the browser
   default outline, which is barely visible against #080a0e. Copied from the one
   focus ring the site already has, `.privacy-note > summary:focus-visible` in
   lp.css: 2px solid --gold-dark, 2px offset. Same ring everywhere beats a
   second, prettier one. --gold-dark is not declared in schedule.css, hence the
   literal fallback. Shipped with the component so it travels to every page that
   mounts a switcher. */
.mf-lang-trigger:focus-visible{
  outline:2px solid var(--gold-dark,#d4af37);outline-offset:2px;
  border-color:var(--gold,#f2ca50);color:var(--gold,#f2ca50);
}
.mf-lang-trigger:focus:not(:focus-visible){outline:none}

.mf-lang-flag{font-size:1rem;line-height:1;flex:none}
.mf-lang-short{letter-spacing:.06em}

/* Caret, drawn rather than typed so it inherits colour and never picks up an
   emoji fallback font. */
.mf-lang-caret{width:7px;height:7px;flex:none;margin-left:1px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.mf-lang.is-open .mf-lang-caret{transform:translateY(1px) rotate(225deg)}

/* Panel */
.mf-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  min-width:210px;max-width:calc(100vw - 28px);
  list-style:none;margin:0;padding:5px;
  background:var(--doc,#111317);border:1px solid var(--line,rgba(255,255,255,.09));
  border-radius:.7rem;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.mf-lang-menu[hidden]{display:none}

.mf-lang-option{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:.5rem;cursor:pointer;
  color:var(--text,#e2e2e8);font-size:.87rem;font-weight:600;line-height:1.25;
  white-space:nowrap;transition:background .12s,color .12s;
}
.mf-lang-option:hover{background:rgba(255,255,255,.05)}
.mf-lang-option:focus{background:rgba(255,255,255,.06);color:var(--gold,#f2ca50);outline:none}
/* Same ring as the trigger, pulled inside so it does not clip on the panel. */
.mf-lang-option:focus-visible{outline:2px solid var(--gold-dark,#d4af37);outline-offset:-2px}
.mf-lang-option.is-selected{color:var(--gold,#f2ca50);font-weight:700}
.mf-lang-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Checkmark on the active locale. Decorative: aria-selected carries the state. */
.mf-lang-tick{flex:none;width:6px;height:10px;opacity:0;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px)}
.mf-lang-option.is-selected .mf-lang-tick{opacity:1}

@media(prefers-reduced-motion:no-preference){
  .mf-lang-menu{animation:mf-lang-in .15s cubic-bezier(.22,.61,.36,1) both}
  @keyframes mf-lang-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* Narrow phones: the flag alone carries the meaning, and the accessible name on
   the trigger still spells the language out in full.

   440px, not 379px. 390px is the most common phone width (iPhone 12 through 16)
   and is where the header runs out of room, so a 379px ceiling never fired
   where it was needed. 440px covers every mainstream handset up to the 430px
   Pro Max while leaving tablets and up with the full EN / MX label. */
@media(max-width:440px){
  .mf-lang-short{display:none}
  .mf-lang-trigger{padding:8px}
  .mf-lang-menu{min-width:190px}
}