/* ── LANGUAGE SWITCHER ──────────────────────────────────────────────────────
   Circular button at the right end of the nav showing the current language's
   two-letter code; click opens a menu of code + full language name.

   NO FLAGS — deliberate. A flag ties a language to one country, and es targets
   Latin America (not Spain), pt is Brazilian (not Portugal), en is US-first
   (not the UK). Codes stay neutral.

   Injected by lang-switcher.js, which handles all three nav variants:
     • homepage      nav#siteNav        (dark pill, .nav-menu)
     • hub pages     nav.site-nav       (dark pill, .nav-menu)
     • guide pages   nav (article.css)  (light bar, no .nav-menu)
   ───────────────────────────────────────────────────────────────────────── */

/* The article nav is `justify-content: space-between`, so a margin alone can't
   hold the switcher next to the CTA — the free space distributes between them.
   lang-switcher.js wraps the CTA and the switcher in this group so the pair
   travels together as space-between's right-hand item. */
.lang-switch-group {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Sits 8px from the element before it. Inside .nav-menu the parent supplies
     4px of gap, so we add the remaining 4px (see the override below). */
  margin-left: 8px;
  flex: none;
}

/* Base styling targets the LIGHT article nav (a bare <nav> on guide pages).
   The dark pill navs override below — that direction round means a page using
   an unrecognised nav gets a readable dark-on-light button rather than the
   white-on-white one it would get if dark were the default. */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(19, 33, 56, 0.07);
  color: #132138;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.lang-switch-btn:hover { background: rgba(19, 33, 56, 0.13); }
.lang-switch-btn:focus-visible {
  outline: 2px solid #132138;
  outline-offset: 2px;
}

/* ── Dark pill navs (homepage + hubs) ── */
nav#siteNav .lang-switch-btn,
nav.site-nav .lang-switch-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
nav#siteNav .lang-switch-btn:hover,
nav.site-nav .lang-switch-btn:hover { background: rgba(255, 255, 255, 0.22); }
nav#siteNav .lang-switch-btn:focus-visible,
nav.site-nav .lang-switch-btn:focus-visible { outline-color: #fff; }

/* ── The menu — light by default, matching the article nav ── */
.lang-switch-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 300;
  min-width: 172px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(19, 33, 56, 0.10);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(19, 33, 56, 0.18);
}
nav#siteNav .lang-switch-menu,
nav.site-nav .lang-switch-menu {
  background: #132138;
  border-color: transparent;
  box-shadow: 0 14px 40px rgba(19, 33, 56, 0.34);
}
.lang-switch.open .lang-switch-menu { display: block; }

.lang-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(19, 33, 56, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease, background 140ms ease;
}
.lang-switch-item:hover { color: #132138; background: rgba(19, 33, 56, 0.06); }
.lang-switch-item:focus-visible {
  outline: 2px solid #132138;
  outline-offset: -2px;
  color: #132138;
}

.lang-switch-code {
  flex: none;
  width: 26px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(19, 33, 56, 0.42);
}
.lang-switch-item:hover .lang-switch-code { color: rgba(19, 33, 56, 0.7); }

.lang-switch-item[aria-current="true"] {
  color: #132138;
  background: rgba(19, 33, 56, 0.07);
  font-weight: 700;
}
.lang-switch-item[aria-current="true"] .lang-switch-code { color: rgba(19, 33, 56, 0.55); }

/* Dark pill navs invert the whole menu. */
nav#siteNav .lang-switch-item,
nav.site-nav .lang-switch-item { color: rgba(255, 255, 255, 0.72); }
nav#siteNav .lang-switch-item:hover,
nav.site-nav .lang-switch-item:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
nav#siteNav .lang-switch-item:focus-visible,
nav.site-nav .lang-switch-item:focus-visible { outline-color: #fff; color: #fff; }
nav#siteNav .lang-switch-code,
nav.site-nav .lang-switch-code { color: rgba(255, 255, 255, 0.5); }
nav#siteNav .lang-switch-item:hover .lang-switch-code,
nav.site-nav .lang-switch-item:hover .lang-switch-code { color: rgba(255, 255, 255, 0.8); }
nav#siteNav .lang-switch-item[aria-current="true"],
nav.site-nav .lang-switch-item[aria-current="true"] { color: #132138; background: #fff; }
nav#siteNav .lang-switch-item[aria-current="true"]:hover,
nav.site-nav .lang-switch-item[aria-current="true"]:hover { background: rgba(255, 255, 255, 0.92); }

/* Japanese renders in the system font — matches the app's ja handling. */
.lang-switch-item[lang="ja"] {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
               "Noto Sans JP", sans-serif;
}

/* ── Inside the dark pill navs, .nav-menu already contributes 4px of gap ── */
nav#siteNav .nav-menu .lang-switch,
nav.site-nav .nav-menu .lang-switch { margin-left: 4px; }

/* ── Translated pill navs collapse to the hamburger EARLIER ─────────────────
   The floating pill sizes itself to its contents, and translated nav labels are
   simply longer than English ones ("Descarga la app" vs "Get the app",
   "Télécharger l'app", "Acerca de" vs "About"). Measured on the Spanish guides
   hub: 884px of content trying to fit 828px of pill at a 852px viewport — the
   language button itself overflowed past the pill's right edge.

   CSS cannot measure text, so rather than guess a per-language breakpoint we
   collapse every non-English pill nav at 1000px. That is comfortably above the
   widest measured case and leaves headroom for languages not yet built. English
   keeps its original 760px breakpoint, unchanged.

   These rules deliberately restate the collapse from site-nav.css / the
   homepage's inline styles rather than importing them — those two files own the
   English behaviour and must stay untouched so this can never regress it. */
@media (min-width: 761px) and (max-width: 1000px) {
  html:not([lang="en"]) nav#siteNav,
  html:not([lang="en"]) nav.site-nav {
    left: 12px; right: 12px; transform: none; max-width: none;
    justify-content: space-between; padding: 8px 8px 8px 18px;
  }
  html:not([lang="en"]) nav#siteNav .nav-toggle,
  html:not([lang="en"]) nav.site-nav .nav-toggle { display: flex; }
  html:not([lang="en"]) nav#siteNav .nav-menu,
  html:not([lang="en"]) nav.site-nav .nav-menu {
    display: none;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #132138; border-radius: 22px; padding: 10px;
    box-shadow: 0 14px 40px rgba(19, 33, 56, 0.34);
  }
  html:not([lang="en"]) nav#siteNav.open .nav-menu,
  html:not([lang="en"]) nav.site-nav.open .nav-menu { display: flex; }
  html:not([lang="en"]) nav#siteNav .nav-link,
  html:not([lang="en"]) nav.site-nav .nav-link {
    padding: 13px 16px; font-size: 15px; text-align: center;
  }
  html:not([lang="en"]) nav#siteNav .nav-cta,
  html:not([lang="en"]) nav.site-nav .nav-cta {
    margin: 6px 0 0; justify-content: center; padding: 13px 18px; font-size: 15px;
  }
  html:not([lang="en"]) nav#siteNav .nav-menu .lang-switch,
  html:not([lang="en"]) nav.site-nav .nav-menu .lang-switch {
    margin: 6px 0 0; width: 100%; justify-content: center;
  }
  html:not([lang="en"]) nav#siteNav .nav-menu .lang-switch .lang-switch-menu,
  html:not([lang="en"]) nav.site-nav .nav-menu .lang-switch .lang-switch-menu {
    right: 50%; transform: translateX(50%);
  }
}

/* ── Mobile: the pill navs collapse .nav-menu into a dropdown column ── */
@media (max-width: 760px) {
  nav#siteNav .nav-menu .lang-switch,
  nav.site-nav .nav-menu .lang-switch {
    margin: 6px 0 0;
    width: 100%;
    justify-content: center;
  }
  nav#siteNav .nav-menu .lang-switch .lang-switch-menu,
  nav.site-nav .nav-menu .lang-switch .lang-switch-menu {
    right: 50%;
    transform: translateX(50%);
  }
}