/* ═══════════════════════════════════════════════════════
   Obzek.io — the EN/ES switch.

   One owner, because the control sits in two different bars: the
   landing page's <nav> and the topbar every tool wears. Tokens come
   from the host page's :root, with the site palette as a fallback so
   the switch still looks like itself on a page that defines fewer of
   them.

   The markup is built by app/shared/js/i18n.js — a page only leaves
   an empty [data-i18n-switch] element where it wants one.
   ═══════════════════════════════════════════════════════ */

.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 100px;
  border: 1px solid var(--border, rgba(109, 40, 217, .22));
  background: rgba(109, 40, 217, .12);
  flex: none;
}

.lang-btn {
  font-family: var(--font-head, 'Sora', sans-serif);
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  color: var(--text-sub, #9D8EC4);
  background: none; border: 0; border-radius: 100px;
  padding: .26rem .55rem; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.lang-btn:hover { color: var(--text, #EDE8FF); }

/* The chosen one wears the site's gold, the same way the CTA does. */
.lang-btn[aria-pressed="true"] {
  color: #1A0E00;
  background: linear-gradient(135deg, var(--gold-bright, #F59E0B), var(--gold-light, #FCD34D));
}

.lang-btn:focus-visible {
  outline: 2px solid var(--gold-light, #FCD34D);
  outline-offset: 1px;
}

/* In the landing nav the switch is a list item like any other link. Above
   the mobile breakpoint it sits inline with the rest of #nav; the negative
   margin corrects for the pill's own padding so it reads flush with its
   neighbours. */
.nav-links .lang-switch { margin-left: -.75rem; }

@media (max-width: 640px) {
  /* Below the breakpoint .nav-links moves into the hamburger dropdown
     (styles.css) as a vertical list with room to spare, not a horizontal
     row starved for width — the inline alignment hack no longer applies,
     and the pill becomes a full-width, thumb-sized control set off from
     the links above it. */
  #nav.nav-open .nav-links .lang-switch {
    margin-left: 0; margin-top: .3rem; padding-top: .7rem;
    width: 100%; justify-content: stretch;
    border-top: 1px solid var(--border);
  }
  #nav.nav-open .nav-links .lang-btn {
    flex: 1; padding: .65rem 0; font-size: .82rem; text-align: center;
  }
}

/* ─── ROOM FOR A LONGER LANGUAGE ────────────────────── */
/* Spanish runs about a third longer than English: "Open the Tools" is
   "Abrir herramientas". Above the mobile breakpoint the nav is still one
   inline row with no slack for that, so Spanish tightens its gaps sooner
   and drops the three scroll-anchors (only ever a scroll away) at a wider
   screen than English does. Both are bounded to widths above 640px —
   below it the hamburger dropdown already shows every link, in either
   language, so there is nothing left to make room for. */
.nav-links a { white-space: nowrap; }

@media (max-width: 1080px) {
  html[lang="es"] .nav-links { gap: 1.2rem; }
  html[lang="es"] .nav-links .nav-cta { padding: .5rem 1rem; }
}
@media (min-width: 641px) and (max-width: 820px) {
  html[lang="es"] .nav-links li:not(:last-child):not(.nav-keep) { display: none; }
}
/* Inside the dropdown itself, nowrap would rather overflow than fold — let
   the longer Spanish strings wrap instead, since a vertical list has the
   height to spare that the old inline row never did. */
@media (max-width: 640px) {
  #nav.nav-open .nav-links a { white-space: normal; }
}