/* lang.css
   Language switcher pill that sits at the top of the page above the hero.
   Not fixed — flows with the content so it scrolls away once the guest is
   reading. The active language is inverted (ink on paper) to match the
   pressed state of the music toggle for a consistent visual language.
   Part of the Mici & Tungi invitation. */
.lang-switch {
  display: flex;
  justify-content: center;
  padding: 32px 24px 0;
}

.lang-switch__group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: oklch(0.985 0.008 88 / 0.78);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.45);
}

.lang-opt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  min-width: 52px;
  min-height: 34px;
  border-radius: 999px;
  transition: background 300ms ease, color 300ms ease;
}
.lang-opt:hover { color: var(--ink); }
.lang-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* aria-current carries the state; the class is the styling hook. Mirrors the
   music toggle's aria-pressed treatment so both controls read the same way. */
.lang-opt.is-active {
  background: var(--ink);
  color: var(--bg);
  cursor: default;
}

/* Some browsers ignore backdrop-filter; keep the pill legible regardless. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .lang-switch__group { background: oklch(0.985 0.008 88 / 0.96); }
}

/* On mobile the music toggle (fixed, top-right) shares this band, so shift
   the language pill to the left corner instead of centering it — otherwise
   the two controls collide on narrow viewports. The top padding also gives
   the curtain rod clear space above so it never sits under either control. */
@media (max-width: 720px) {
  .lang-switch { justify-content: flex-start; padding: 32px 16px 0; }
  .lang-opt { padding: 8px 14px; min-width: 46px; letter-spacing: 0.2em; }
}
@media (max-width: 380px) {
  .lang-switch { padding: 28px 12px 0; }
  .lang-opt { padding: 7px 11px; min-width: 40px; font-size: 10.5px; letter-spacing: 0.18em; }
}