/* ═══════════════════════════════════════════════════════════════
   LANG — EN/HU language switcher in the nav. Markup is built by
   assets/lang.js (no page markup edits); shared verbatim by every
   page. The links carry the page's own .nav-link class, so they
   follow each page's nav color scheme (dark/light hero, scrolled)
   automatically — this file only shapes size, spacing and state.
   ═══════════════════════════════════════════════════════════════ */

.nav .lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: var(--space-4, 1rem);
}

.nav .lang-switch .lang-link {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  letter-spacing: var(--tracking-wider, 0.05em);
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 4px;
  /* inherits .nav-link's already-AA-checked color as-is (no extra dimming —
     stacking opacity on top of nav-link's own low-alpha color broke contrast) */
}

.nav .lang-switch .lang-link.is-active {
  font-weight: var(--weight-bold, 700);
  text-decoration: underline;
  text-underline-offset: 3px;
  pointer-events: none;
}

.nav .lang-sep {
  opacity: 0.35;
  font-size: var(--text-xs, 0.75rem);
  user-select: none;
}

/* open mobile menu: panel is dark, force light */
body.nav-mobile-open .nav .lang-switch .lang-link,
body.nav-mobile-open .nav .lang-sep { color: #fff; }

@media (max-width: 900px) {
  .nav .lang-switch { margin-right: var(--space-2, 0.5rem); }
  .nav .lang-switch .lang-link { padding: 10px 4px; } /* larger tap target */
}