/* ── Language picker dropdown ─────────────────────────────────────────────
   Compact <details>/<summary> menu, top-right of the header. Scales to any
   number of locales in $LOCALES (bootstrap.php); layout.php loops over them.
   Loaded after site.css; reuses its custom properties (--teal, --line, …).
   The legacy .lang-picker pill rules in site.css are unused by this markup. */

.lang-menu-nav{margin-inline-start:auto} /* logical: works for LTR and RTL */
@media (max-width:1149px){
  .lang-menu-nav{margin-inline-start:0}
  /* Stacked header: the button sits at the line start, so drop the menu
     start-anchored from the button instead of end-aligned. */
  .lang-menu .lang-menu-list{inset-inline-start:0;inset-inline-end:auto}
}

/* The open menu anchors to the <details> button itself so it always drops
   directly under it. Desktop (header on one row): the button sits at the
   right edge, so the menu right-aligns to it. Stacked header (narrow
   screens): the button sits at the left, so the menu left-aligns instead —
   both cases keep it attached to the button and inside the viewport. */
.lang-menu{position:relative}

/* Closed state: button-like summary — current flag + name + chevron */
.lang-menu > summary{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 15px 0 17px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--teal);font-weight:600;
  cursor:pointer;user-select:none;
  transition:background-color .15s ease;
}
.lang-menu > summary::-webkit-details-marker{display:none}
.lang-menu > summary{list-style:none}
.lang-menu > summary:hover{background:var(--teal-mist)}
.lang-menu[open] > summary{background:var(--teal-mist)}

.lang-menu .lang-chevron{display:inline-flex;color:var(--teal);transition:transform .15s ease}
.lang-menu[open] .lang-chevron{transform:rotate(180deg)}

/* Open state: vertical menu attached to the button, one row per locale.
   With 16 locales the list can outgrow small screens: cap its height and
   scroll inside (rows stay 48px tall — see the a{min-height} below). */
.lang-menu .lang-menu-list{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;
  min-width:210px;max-width:calc(100vw - 32px);
  max-height:min(432px,calc(100vh - 110px));
  max-height:min(432px,calc(100dvh - 110px));
  overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:6px;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 16px 36px rgba(30,36,34,.16);
}
.lang-menu .lang-menu-list a{
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:0 14px;
  color:var(--teal);font-weight:600;text-decoration:none;border-radius:12px;
  transition:background-color .15s ease;
}
.lang-menu .lang-menu-list a:hover{background:var(--teal-mist)}
.lang-menu .lang-menu-list a[aria-current="true"]{
  background:var(--teal-mist);color:var(--teal-deep);
}
.lang-menu .lang-name{flex:1;white-space:nowrap}
.lang-menu .lang-check{display:inline-flex;color:var(--teal)}

/* :focus-visible ring comes from the site-wide rule in site.css */

@media (prefers-reduced-motion:reduce){
  .lang-menu > summary,
  .lang-menu .lang-chevron,
  .lang-menu .lang-menu-list a{transition:none}
}