/*
 * Language chrome — the nav switcher, the footer row, and the first-visit
 * nudge card. Black and white only, tokens from site-tokens.css.
 *
 * The nav switcher REUSES the Resources menu (.lnav-res / .lnav-res-btn /
 * .lnav-res-menu in landing.css), so every bar state it already handles
 * (transparent over the hero, frosted black when scrolled, white on light
 * sections and subpages) applies for free. Only what a language menu needs
 * differently lives here: it hangs off the right edge instead of the center,
 * it is narrower, and it marks the current locale.
 */

/* ── Nav switcher ─────────────────────────────────────────────────────────── */
.lnav-lang .lnav-res-btn {
  gap: 4px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
/* The menu sits at the right edge of the bar, not centered under its button:
   the switcher is the last item before the CTA, so a centered panel would
   hang off the viewport on narrow screens. */
.lnav-res.lnav-lang .lnav-res-menu {
  left: auto;
  right: 0;
  min-width: 144px;
  transform: translateY(-4px);
}
.lnav-res.lnav-lang.open .lnav-res-menu {
  transform: translateY(0);
}
/* Current locale: weight carries it, so the menu's own hover/color rules for
   each bar state stay in charge of everything else. */
.lnav-lang .lnav-res-menu a.is-active {
  color: #fff;
  font-weight: 600;
}
.lnav.scrolled.on-light .lnav-lang .lnav-res-menu a.is-active,
.lnav.lnav-solid .lnav-lang .lnav-res-menu a.is-active {
  color: var(--ink-strong);
}

/* ── Mobile sheet: the same three languages, flattened ────────────────────── */
.lnav-drop-lang {
  font-weight: 500;
}
.lnav-drop .lnav-drop-lang.is-active {
  color: #fff;
  font-weight: 600;
}
.lnav.scrolled.on-light + .lnav-drop .lnav-drop-lang.is-active,
.lnav.lnav-solid + .lnav-drop .lnav-drop-lang.is-active {
  color: var(--ink-strong);
}

/* ── Footer row ───────────────────────────────────────────────────────────── */
.lfoot-lang {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.lfoot .lfoot-lang a {
  color: var(--on-ink-faint);
  text-decoration: none;
}
.lfoot .lfoot-lang a:hover {
  color: #fff;
}
.lfoot .lfoot-lang a.is-active {
  color: var(--on-ink);
  font-weight: 600;
}

/* ── First-visit nudge (English landing only) ─────────────────────────────
   A bottom-left card, deliberately out of the fixed nav's way: nothing above
   the fold shifts when it appears. White card, ink type, one ink pill. */
.lang-nudge {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 95;
  max-width: 320px;
}
.lang-nudge-card {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.45);
  padding: 14px 16px;
}
.lang-nudge-text {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 10px;
  color: var(--ink);
}
.lang-nudge-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lang-nudge-cta {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--action);
  color: var(--action-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.lang-nudge-cta:hover {
  background: var(--action-hover);
}
.lang-nudge-dismiss {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-subtle);
  transition: color var(--dur-fast) var(--ease-standard);
}
.lang-nudge-dismiss:hover {
  color: var(--ink-strong);
}
@media (prefers-reduced-motion: no-preference) {
  .lang-nudge-card {
    animation: lang-nudge-in var(--dur-elegant) var(--ease-entrance) both;
  }
  @keyframes lang-nudge-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (max-width: 460px) {
  .lang-nudge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* The nav row has no mobile layout yet (pre-existing: .lnav-burger is dead and
   .lnav-links never collapses), so the switcher yields the crowded space on
   phones. The footer language row and the first-visit nudge stay available. */
@media (max-width: 880px) {
  .lnav-lang {
    display: none;
  }
}

/* ── Focus: the shared ink ring, on every language control ────────────────── */
.lnav-lang .lnav-res-btn:focus-visible,
.lnav-lang .lnav-res-menu a:focus-visible,
.lnav-drop-lang:focus-visible,
.lfoot-lang a:focus-visible,
.lang-nudge-cta:focus-visible,
.lang-nudge-dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}