/**
 * assets/css/lang-picker.css — styles for every Maternl language picker.
 *
 * ===========================================================================
 * WHY THIS FILE HAD TO EXIST
 *
 * Every rule for the picker in header.php is written as
 *
 *     .site-nav .lang-menu-panel { ... }
 *     .site-nav .lang-menu-option { ... }
 *
 * — 38 rules, all descendants of .site-nav. So a second copy of the markup
 * placed anywhere outside the nav inherits NONE of it: no panel positioning,
 * no max-height, no overflow. The panel is a plain <div> in normal flow and
 * the listbox is a bare <ul>, which means 192 unstyled rows of flags and text
 * shoved into the middle of the ask card, pushing the question box off screen.
 * That is what "copy the header markup" actually produces, and it is why the
 * geometry below is not optional.
 *
 * The values here are copied from header.php, not re-derived, so the two
 * pickers are pixel-identical where they are meant to be.
 *
 * ---------------------------------------------------------------------------
 * CONVERGING LATER (optional, one line + one deletion)
 *
 * Right now this stylesheet duplicates header.php's. To get to a single
 * source: add `ml-langpicker ml-langpicker--nav` to the header's wrapper div
 * (maternl_lang_picker() already emits those classes when you switch
 * header.php over to it), then delete the `.site-nav .lang-menu*` block from
 * header.php. Until you do, both exist and agree; nothing is broken by
 * leaving it.
 *
 * The .lang-menu* class names are used by nothing else in the codebase, so
 * these unscoped selectors cannot collide.
 */

/* ---------------------------------------------------------------- wrapper */

.ml-langpicker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

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

.ml-langpicker .lang-menu-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, inherit);
  /* 1rem minimum: iOS Safari auto-zooms the page when a control under 16px
     takes focus, and never zooms back out. */
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .2s, background .3s var(--ease, ease), color .3s var(--ease, ease);
}

/* The header pill, for when this picker sits in the nav. */
.ml-langpicker--nav .lang-menu-trigger {
  height: 40px;
  min-width: 152px;
  max-width: 210px;
  padding-inline: 14px 12px;
  /* padding-block MUST stay 0 — with box-sizing:border-box any vertical
     padding eats the 40px and the text line overflows the pill. */
  padding-block: 0;
  color: var(--nav-fg, #161a1f);
  background: var(--nav-chip, #fff);
  border: 1px solid var(--nav-chip-line, rgba(22, 26, 31, .16));
  border-radius: var(--radius-full, 999px);
}

.ml-langpicker--nav .lang-menu-trigger:hover,
.ml-langpicker--nav .lang-menu-trigger:focus-visible,
.ml-langpicker--nav .lang-menu-trigger[aria-expanded="true"] {
  border-color: var(--brand, #0a5f5d);
  outline: none;
}

html[data-header="navy"] .ml-langpicker--nav .lang-menu-trigger:hover,
html[data-header="navy"] .ml-langpicker--nav .lang-menu-trigger:focus-visible,
html[data-header="navy"] .ml-langpicker--nav .lang-menu-trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .55);
}

/**
 * The form-field variant, for the ask card.
 *
 * Same geometry as the nav pill — same height, same flag size, same gap, same
 * caret, same ellipsis behaviour — but the palette of the Country <select>
 * beside it. Reusing --nav-chip / --nav-fg here would drop a navy pill into a
 * cream form, and under html[data-header="navy"] the text goes near-white on
 * near-white. Matching the neighbouring control is what "identical" has to
 * mean once the picker leaves the nav.
 */
.ml-langpicker--field {
  display: block;
  width: 100%;
}

.ml-langpicker--field .lang-menu-trigger {
  width: 100%;
  /* Matches .ml-loc-field select: 11px block padding on a 1rem line box. */
  padding: 11px 12px;
  min-height: 46px;
  color: var(--ink, #161a1f);
  background: #f7f5f0;
  border: 2px solid #dde;
  border-radius: 12px;
  text-align: left;
}

.ml-langpicker--field .lang-menu-trigger:hover {
  border-color: #ccd;
}

.ml-langpicker--field .lang-menu-trigger:focus-visible,
.ml-langpicker--field .lang-menu-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--teal, #0d7d7a);
  box-shadow: 0 0 0 3px rgba(13, 125, 122, .12);
}

/* ------------------------------------------------------------------- flag */

/* Real SVG flags, so nothing depends on the platform having a colour-emoji
   flag font. The inset ring keeps white-edged flags (Japan-style, or
   Nigeria's white band) from bleeding into the chip. */
.ml-langpicker .lang-menu-flag {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12);
  background: rgba(16, 24, 40, .04);
}

html[data-header="navy"] .ml-langpicker--nav .lang-menu-trigger .lang-menu-flag {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.ml-langpicker .lang-menu-flag-fallback {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--nav-fg-soft, #6b7280);
}

.ml-langpicker .lang-menu-current-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nothing chosen yet (the `placeholder` option). Reads as prompt copy, not
   as a language that has been selected -- deliberately the same muted grey a
   native <select> gives a disabled placeholder <option>, which is what this
   control replaced. Not italic: several of the languages beside it are in
   scripts with no italic form, and a slanted Latin placeholder above an
   upright Arabic list looks like a rendering fault. */
.ml-langpicker .lang-menu-current-name.is-placeholder {
  color: var(--muted, #5b6672);
}

.ml-langpicker .lang-menu-caret {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--nav-fg-soft, #6b7280);
  transition: transform .2s var(--ease, ease), color .3s var(--ease, ease);
}

.ml-langpicker--field .lang-menu-caret { color: #5b6672; }

.ml-langpicker .lang-menu-trigger[aria-expanded="true"] .lang-menu-caret {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------ panel */

/* A panel holding a fixed search box and a scrolling list, rather than one
   scrolling <ul>: with 192 rows the search field has to stay put while the
   list moves under it. */
.ml-langpicker .lang-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 10001;
  /* 300px, not 248: translated country names run long (Turkish "Amerika
     Birleşik Devletleri"), and a wider panel ellipsises fewer of them. */
  width: max(300px, 100%);
  display: flex;
  flex-direction: column;
  max-height: min(66vh, 460px);
  background: #fff;
  color: #161a1f;
  border: 1px solid rgba(22, 26, 31, .12);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .18);
  overflow: hidden;
}

/* The nav pill sits at the right edge of the header, so its panel hangs from
   the right. A left-aligned form field needs the opposite, or the panel hangs
   off the field's right edge and clips against the card. */
.ml-langpicker--nav .lang-menu-panel   { inset-inline-end: 0; }
.ml-langpicker--field .lang-menu-panel { inset-inline-start: 0; }

.ml-langpicker .lang-menu-panel[hidden] { display: none; }

/* ----------------------------------------------------------------- search */

.ml-langpicker .lang-menu-searchwrap {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 8px 6px;
  border-bottom: 1px solid rgba(22, 26, 31, .08);
}

.ml-langpicker .lang-menu-searchicon {
  position: absolute;
  inset-inline-start: 19px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9aa2ad;
  pointer-events: none;
}

.ml-langpicker .lang-menu-search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body, inherit);
  /* 16px minimum, same iOS zoom reason as the trigger. */
  font-size: 16px;
  line-height: 1.2;
  padding: 9px 11px 9px 30px;
  border: 1px solid rgba(22, 26, 31, .16);
  border-radius: 9px;
  background: #fafafa;
  color: #161a1f;
  -webkit-appearance: none;
  appearance: none;
}

[dir="rtl"] .ml-langpicker .lang-menu-search { padding: 9px 30px 9px 11px; }

.ml-langpicker .lang-menu-search:focus {
  outline: none;
  border-color: var(--brand, #0a5f5d);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 95, 93, .13);
}

.ml-langpicker .lang-menu-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ------------------------------------------------------------------- list */

.ml-langpicker .lang-menu-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  outline: none;
}

.ml-langpicker .lang-menu-list:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand, #0a5f5d);
  border-radius: 10px;
}

/* Region headings. Sticky, so the group a row belongs to stays visible while
   scrolling a list this long. */
.ml-langpicker .lang-menu-group {
  position: sticky;
  top: -6px;
  z-index: 1;
  background: #fff;
  margin: 0 -6px;
  padding: 7px 16px 4px;
  list-style: none;
}

.ml-langpicker .lang-menu-group[hidden] { display: none; }

.ml-langpicker .lang-menu-group-head {
  font-family: var(--font-body, inherit);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand, #0a5f5d);
}

.ml-langpicker .lang-menu-empty {
  list-style: none;
  padding: 14px 12px;
  font-family: var(--font-body, inherit);
  font-size: .88rem;
  color: #6b7280;
}

.ml-langpicker .lang-menu-empty[hidden] { display: none; }

/* ----------------------------------------------------------------- option */

.ml-langpicker .lang-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 44px is the smallest comfortable touch target, and the list is long
     enough that mis-taps are otherwise easy. */
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: #161a1f;
  font-family: var(--font-body, inherit);
  font-size: .95rem;
  line-height: 1.25;
  /* Every row is flag-then-name, left to right, whatever script the endonym is
     written in. Without this an Arabic, Hebrew, Urdu or Farsi endonym reverses
     the whole flex row: the name lands hard against the far edge while its own
     flag stays behind. */
  direction: ltr;
  text-align: left;
}

.ml-langpicker .lang-menu-option[hidden] { display: none; }

.ml-langpicker .lang-menu-option .lang-menu-flag { width: 22px; height: 16px; }

.ml-langpicker .lang-menu-labels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

.ml-langpicker .lang-menu-lang {
  font-weight: 500;
  /* isolate, not plaintext: the letters inside still run right-to-left as they
     must, but the span stays a left-aligned box in an LTR row. */
  unicode-bidi: isolate;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-langpicker .lang-menu-country {
  font-size: .78rem;
  color: #6b7280;
  /* One line always, so every row keeps the same height even when the country
     name is long in the current UI language. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-langpicker .lang-menu-option.is-active,
.ml-langpicker .lang-menu-option:hover,
.ml-langpicker .lang-menu-option[aria-selected="true"] {
  background: rgba(16, 24, 40, .06);
}

.ml-langpicker .lang-menu-option[aria-selected="true"] .lang-menu-lang {
  font-weight: 700;
}

.ml-langpicker .lang-menu-option[aria-selected="true"]::after {
  content: "\2713";
  margin-inline-start: auto;
  padding-inline-start: 6px;
  color: var(--brand, #0a5f5d);
  font-weight: 700;
  flex: 0 0 auto;
}

/* --------------------------------------------- "not yet available" rows */

/* Visible and searchable, but not selectable. Keeping them shown is
   deliberate: it tells her the site knows her language and has not switched it
   on yet, rather than letting her conclude it does not exist. Hover and the
   active highlight are suppressed so it never looks clickable. */
.ml-langpicker .lang-menu-option.is-unavailable {
  cursor: default;
  opacity: .55;
}

.ml-langpicker .lang-menu-option.is-unavailable:hover,
.ml-langpicker .lang-menu-option.is-unavailable.is-active {
  background: transparent;
}

/* ----------------------------------------------------------------- phones */

@media (max-width: 600px) {
  .ml-langpicker--nav .lang-menu-trigger {
    min-width: 0;
    width: 124px;
    padding-inline: 10px 8px;
    gap: 5px;
  }
  /* Full width in the form: it is a field, and it sits in a one-column stack
     with Country and City on a phone. */
  .ml-langpicker--field .lang-menu-panel {
    width: 100%;
    max-height: min(60vh, 380px);
  }
}

@media (max-width: 420px) {
  .ml-langpicker--nav .lang-menu-trigger {
    width: 104px;
    padding-inline: 8px 6px;
    gap: 4px;
  }
}

/* Someone who has asked the OS to stop animating should not get a spinning
   caret or a transitioning border. */
@media (prefers-reduced-motion: reduce) {
  .ml-langpicker .lang-menu-trigger,
  .ml-langpicker .lang-menu-caret {
    transition: none;
  }
}