/* ==========================================================================
   Language switcher — compact disclosure control
   --------------------------------------------------------------------------
   Shared marketing-page component. Replaces the old four-link `EN · HU · DE ·
   FR` row, which overflowed the mobile header (issue #672, audit item 1).

   Markup contract: see landing/lang-switcher.js header comment.
   Behaviour:      landing/lang-switcher.js (loaded with `defer`).

   Uses design tokens only (--surface-3, --border-subtle, --accent-gold,
   --accent-gold-bright, --text-primary, --text-secondary), so it follows
   :root[data-theme="dark"] / :root[data-theme="light"] with no extra work.

   Stacking: .site-header is `position: sticky; z-index: 50`, so it opens its
   own stacking context; the menu only has to beat the header's own children
   (.header-inner, .mobile-nav). z-index: 20 does that.
   ========================================================================== */

.lang-switcher {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  /* Reset the legacy `.lang-switcher` typography so a stale page rule cannot
     leak into the new control. */
  gap: 0;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

/* --------------------------------------------------------------- trigger */

.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  background: transparent;
  color: var(--accent-gold);
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

/* The code is the control's only text, so it takes --text-primary like
   every sibling header control (.theme-toggle, .menu-btn). Gold stays on
   the border and the chevron, where it is decoration rather than a label:
   --accent-gold measures 2.65:1 and --accent-gold-bright 1.6:1 against the
   light theme's --bg. */
.lang-switcher__code {
  color: var(--text-primary);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Clipped, not display:none — the text must stay in the accessible name.
   It prefixes the visible code so the name reads "Choose language: HU",
   which contains the visible label (WCAG 2.5.3) and states the current
   language. */
.lang-switcher__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lang-switcher__btn svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-switcher__btn:hover {
  color: var(--accent-gold-bright);
  border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.lang-switcher__btn[aria-expanded="true"] {
  color: var(--accent-gold-bright);
  border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.lang-switcher__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.lang-switcher__btn:focus-visible {
  outline: 2px solid var(--accent-gold-bright);
  outline-offset: 2px;
}

/* Smallest phones (iPhone SE 1st gen and friends): shave the trigger down
   without dropping below the 40px touch target. */
@media (max-width: 359.98px) {
  .lang-switcher__btn {
    gap: 4px;
    padding: 0 8px;
  }
}

/* ------------------------------------------------------------------ menu */

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  /* Never wider than the viewport, whatever the header padding is. */
  max-width: min(240px, calc(100vw - 32px));
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

:root[data-theme="light"] .lang-switcher__menu {
  box-shadow:
    0 12px 32px rgba(42, 0, 2, 0.12),
    0 2px 8px rgba(42, 0, 2, 0.08);
}

.lang-switcher__menu[hidden] {
  display: none;
}

.lang-switcher__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two type selectors so this beats a stale `.lang-switcher a` page rule
   regardless of stylesheet order. */
.lang-switcher__menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--text-primary);
}

.lang-switcher__menu li a::after {
  content: attr(lang);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.lang-switcher__menu li a:hover {
  background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
  color: var(--text-primary);
  filter: none;
}

.lang-switcher__menu li a:focus-visible {
  outline: 2px solid var(--accent-gold-bright);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
}

/* Optional: a page may keep the active language in the list as well. */
.lang-switcher__menu li a[aria-current="page"] {
  color: var(--accent-gold-bright);
}

.lang-switcher__menu li a[aria-current="page"]::after {
  color: var(--accent-gold);
}

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .lang-switcher__btn svg {
    transition: none;
  }
}