/* Language switcher — static stylesheet served from /public/css and
 * linked by `Classic.astro`. The single source of truth for `.ls-*`
 * rules; same delivery pattern as `classic-desktop.css` /
 * `classic-mobile.css`. Keep these rules out of `Sidebar.astro`'s
 * scoped <style> block so the cascade has one deterministic path.
 *
 * The trigger is a flat-row peer of `.sidebar-row`; it sits inside
 * the language group card (cream-gold-bordered surface defined by
 * `.sidebar-language` in `Sidebar.astro`). The dropdown opens
 * DOWNWARD and overlays the rows beneath while open. */

.ls-wrap { position: relative; }

.ls-trigger {
  /* Token-for-token mirror of `.sidebar-row` (defined in
   * Sidebar.astro). Duplicated rather than `@extend`ed because the
   * static stylesheet can't reach Astro-scoped class names. Keep
   * these two declarations in sync if either changes — both went
   * flat-row when the sidebar adopted group-card framing (#470). */
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ls-trigger:hover,
.ls-trigger:focus-visible {
  background: color-mix(in oklab, #fff 4%, transparent);
  outline: none;
}
.ls-trigger[aria-expanded="true"] {
  /* Open-state matches `.sidebar-row[aria-current="page"]`: cream-
   * gold label + tinted bg. The expand chevron rotates 180° below. */
  color: var(--accent-light);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.ls-trigger-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-chevron {
  /* Cream-gold tone matches the chevron on `.sidebar-row` so the
   * closed trigger reads at the same visual weight as Promotions /
   * Contact. */
  color: var(--accent);
  opacity: 0.7;
  transition: transform 0.12s, opacity 0.12s;
  flex-shrink: 0;
}
.ls-trigger:hover .ls-chevron,
.ls-trigger:focus-visible .ls-chevron,
.ls-trigger[aria-expanded="true"] .ls-chevron {
  opacity: 1;
}
.ls-trigger[aria-expanded="true"] .ls-chevron {
  transform: rotate(180deg);
}

.ls-flag {
  /* The flag SVGs use a 24×16 viewBox (set in `src/icons/flags/*.svg`).
   * This 22×15 box keeps a clean 1.46:1 ratio with no anti-aliasing
   * fuzz. `flex-shrink: 0` keeps the flag from being squeezed when the
   * native-name label is long (e.g. "Bahasa Indonesia"). */
  display: inline-block;
  width: 22px;
  height: 15px;
  line-height: 0;
  overflow: hidden;
  border-radius: 2px;
  flex-shrink: 0;
}
.ls-flag > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ls-backdrop {
  /* Catches clicks outside the open list. Sits above the rail's own
   * z-stack. Pointer-only — no fade-in to avoid yet-another paint on
   * a mounted/unmounted interaction. */
  position: fixed;
  inset: 0;
  z-index: 70;
  background: transparent;
}

.ls-list {
  /* Opens DOWNWARD because the trigger sits high in the rail with room
   * beneath it; the panel overlays the Promotions/Contact rows while
   * open. `right: 0` matches the trigger's full width so the menu
   * aligns flush. Surface + outline match the cream-gold-bordered
   * group cards in the rail above (#470). */
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 75;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: linear-gradient(93deg, var(--surface-card-1) 35%, var(--surface-card-2) 100%);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.ls-item {
  /* Renders on an `<a>` now (was `<li>`). Each item is a real
     navigation link to the target-locale URL — that's how Google
     reaches the other-language versions of this page. The `text-
     decoration: none` strips the default anchor underline so the
     row matches the surrounding sidebar's flat-row aesthetic. */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  transition: background 0.12s;
}
.ls-item:hover,
.ls-item:focus-visible {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  outline: none;
}
.ls-item.is-active {
  color: var(--accent-light);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}

.ls-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}