/* ══════════════════════════════════════════════════════════════════════════
   Language picker — ONE component for every header in the build.

   Three headers exist (.site-header on the homepage, .em-hdr on the interior
   pages, .bk-head in the booking flow) and each of them used to carry its own
   answer to "what language is this": a one-option listbox, a dead <span>EN</span>,
   and nothing at all. This file and lang.js replace all three. The painter owns
   the markup, so there is exactly one set of styles to keep honest.

   The trigger inherits colour from the bar it sits in (the interior header
   crossfades ink↔daylight on scroll, so currentColor is the only safe ink).
   The panel does NOT inherit: it is always the warm near-white plate with dark
   type, the same plate the solid header and the mega-menu use. A dropdown that
   changed colour with the hero behind it would be a second design.

   Flags are data-URI SVGs rather than emoji: 🇦🇪 has no glyph on Windows and
   falls back to the letters AE, which is exactly the tell we are trying to
   avoid on a premium bar.
   ══════════════════════════════════════════════════════════════════════════ */

.lang-pick {
  position: relative;
  flex: none;
  font-family: var(--font-nav, var(--em-font-sans, "Inter"), system-ui, sans-serif);
}

/* ——— the trigger ——— */

.lang-pick__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* the thumb target, not the type size. Stated as the TOKEN, not 2.75rem:
     the root font-size on this site is 15px, so 2.75rem is 41.25px and this
     control had been three pixels short of the minimum on every page. */
  min-height: var(--em-control-min);
  padding: 9px 2px;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.lang-pick__btn:hover { opacity: 0.65; }

.lang-pick__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.lang-pick__code { line-height: 1; }

.lang-pick__chev {
  width: 9px;
  height: 6px;
  flex: none;
  display: block;
  transition: transform 0.42s var(--em-ease-soft);
}

.lang-pick.is-open .lang-pick__chev { transform: rotate(180deg); }

/* ——— the language initials ———
   Text only, no flags (Brand Growth, 2026-10-01): the bar shows the current
   edition's two-letter code, and each row of the list leads with its own
   code in the label voice, in the column the flag chip used to hold. */

.lang-pick__abbr {
  flex: none;
  width: 1.75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow);
}

/* ——— the panel ——— */

.lang-pick__panel {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-end: 0;
  z-index: var(--z-brand);
  min-width: 15.5rem;
  padding: 8px;
  background: var(--em-surface-primary);
  color: var(--em-text-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  text-align: start;
}

.lang-pick.is-open .lang-pick__panel {
  animation: langPanelIn 0.42s var(--em-ease-soft) both;
  transform-origin: top var(--lang-origin, right);
}

@keyframes langPanelIn {
  from { opacity: 0; transform: translateY(-7px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.lang-pick__label {
  margin: 0;
  padding: 6px 10px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow);                /* --em-ink-eyebrow, 5.14:1 on this plate */
}

/* ——— the options ——— */

.lang-pick__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* One height for every row. English carries no second line and Arabic's is
     the tallest, so left to content the three rows stepped 44 / 53 / 60 and the
     list read as a stack of different things. The floor is the tallest row. */
  min-height: 3.6rem;
  padding: 0.65rem 0.65rem;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  background: none;
  color: var(--em-text-primary);
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.24s ease;
}

.lang-pick__opt:last-child { border-bottom: 0; }

.lang-pick__opt:hover,
.lang-pick__opt[aria-selected="true"] { background: var(--em-surface-sunk); }

.lang-pick__opt:focus-visible {
  outline: 2px solid var(--em-text-primary);
  outline-offset: -2px;
}

.lang-pick.is-open .lang-pick__opt {
  animation: langOptIn 0.42s var(--em-ease-soft) both;
  animation-delay: calc(80ms + var(--i, 0) * 34ms);
}

@keyframes langOptIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.lang-pick__names {
  display: flex;
  flex-direction: column;
  /* shrink-to-fit, not stretch: an RTL endonym in a full-width box aligns to
     its own right edge and floats away from the Latin line beneath it */
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lang-pick__name {
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--em-text-primary);
}

.lang-pick__native {
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--em-text-muted);                /* --em-ink-mute, 4.83:1 */
}

/* Arabic sets its own line box; give the endonym the leading it needs so the
   row height does not jump against the Latin ones. */
.lang-pick__name[lang="ar"] { font-size: 0.9rem; line-height: 1.35; }

.lang-pick__tick {
  width: 13px;
  height: 13px;
  flex: none;
  display: block;
  margin-inline-start: auto;
  color: var(--em-text-accent);                /* --em-accent: the metal ON PAPER, 4.93:1 */
  opacity: 0;
}

.lang-pick__opt[aria-selected="true"] .lang-pick__tick { opacity: 1; }

/* An edition that has not shipped says so. It stays in the list — the reader
   asked what languages exist, and the answer includes the ones in production —
   but it is not a link, and the state is carried by a word, not by dimming
   (a translucent row would fail on this plate before it read as disabled). */
.lang-pick__opt[aria-disabled="true"] { cursor: default; }
.lang-pick__opt[aria-disabled="true"]:hover { background: none; }
.lang-pick__opt[aria-disabled="true"] .lang-pick__name { color: var(--em-text-secondary); }

.lang-pick__soon {
  margin-inline-start: auto;
  flex: none;
  padding: 3px 7px;
  border: 1px solid rgba(var(--em-rgb-ink), 0.18);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--em-text-muted);
  white-space: nowrap;
}

/* ——— per-header seating ——— */

/* The interior bar drops the CTA and WhatsApp below 1200px; the picker stays.
   Knowing what language you are reading is not a desktop luxury. */
.em-hdr__acts .lang-pick { margin-inline-start: 0; }

@media (max-width: 519px) {
  .lang-pick__btn { gap: 6px; padding: 9px 2px; }
  .lang-pick__panel { min-width: 13.5rem; }
}

/* Panels are right-aligned in LTR and left-aligned in RTL by inset-inline-end;
   the growth origin has to follow, or an Arabic panel unfolds off its anchor. */
html[dir="rtl"] .lang-pick { --lang-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .lang-pick.is-open .lang-pick__panel,
  .lang-pick.is-open .lang-pick__opt { animation: none; }
  .lang-pick__chev { transition: none; }
}

@media print {
  .lang-pick { display: none !important; }
}