/* ═══════════════════════════════════════════════════════════════════════════
   GulfBot — header language menu.  Injected site-wide by tools/install_lang.py
   from tools/languages.json.  Palette + tokens from css/style.css :root.
   Replaces the bare "العربية" / "English" header anchors on all 152 pages.
   Mobile contract (checklist C1/H1 at 375px): the trigger and the dismiss
   control are ≥16px type and ≥44px tall — they are <button>s, so the pre-ship
   checklist measures them.
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-menu{position:relative;display:inline-flex;flex:none}
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:8px 12px;cursor:pointer;
  border-radius:999px;border:1px solid rgba(13,11,20,.1);
  background:rgba(255,255,255,.72);color:var(--ink);
  font:700 14px/1 var(--font);letter-spacing:-.01em;
  transition:background .2s,border-color .2s,color .2s;
}
.lang-btn:hover{border-color:var(--violet);color:var(--deep)}
.lang-btn[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:transparent}
.lang-globe{flex:none}
.lang-caret{flex:none;opacity:.62;transition:transform .18s}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}

.lang-panel{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:90;
  min-width:212px;padding:7px;
  background:#fff;border:1px solid #e6e0f5;border-radius:14px;
  box-shadow:0 18px 44px rgba(13,11,20,.16);
  display:flex;flex-direction:column;gap:2px;
}
.lang-panel[hidden]{display:none}
.lang-opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;border-radius:10px;text-decoration:none;
  font:600 15px/1.25 var(--font);color:var(--body3);
}
.lang-opt:hover{background:var(--tint);color:var(--deep)}
.lang-opt .lang-endonym{white-space:nowrap}
.lang-opt .lang-en-name{font:500 12.5px/1 var(--mono);color:var(--faint)}
.lang-opt.is-current{color:var(--deep);background:var(--tint)}
.lang-opt.is-current .lang-tick{flex:none;color:var(--violet)}
.lang-opt[data-fallback="1"] .lang-en-name::after{content:" · home";}

/* ── first-visit suggestion bar (built by js/lang.js; never an auto-redirect) ── */
.lang-suggest{
  position:fixed;inset-inline:0;bottom:0;z-index:80;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;
  box-sizing:border-box;width:100%;padding:11px 16px;
  background:rgba(13,11,20,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;
}
.lang-suggest-txt{font:600 15px/1.35 var(--font);color:rgba(255,255,255,.9)}
.lang-suggest-go{
  display:inline-flex;align-items:center;min-height:34px;padding:8px 16px;border-radius:999px;
  background:#fff;color:var(--ink);font:700 15px/1 var(--font);text-decoration:none;
}
.lang-suggest-go:hover{color:var(--deep)}
.lang-suggest-x{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;cursor:pointer;
  background:none;border:0;color:rgba(255,255,255,.65);font:600 16px/1 var(--font);
}
.lang-suggest-x:hover{color:#fff}

@media (max-width:1023px){
  .legal-links{flex-wrap:wrap;row-gap:8px}
  /* the header's right-hand group wraps at ≤767, which can leave the trigger far left;
     anchoring the panel to the button then pushes it off-screen (measured: left -5px on
     /pricing at 375). Anchor it to the sticky header instead — it always spans the
     viewport, so the panel is inside it at every wrap position, in LTR and in RTL. */
  .legal-header .lang-menu{position:static}
  .legal-header .lang-panel{top:calc(100% - 4px);inset-inline-end:18px;inset-inline-start:auto}
}
@media (max-width:767px){
  /* measured at 375px on /pricing: ans-sib 53 + legal-back 84 + lang-menu 91 + 2×18 gap
     = 264px in a 263px box — one pixel of overflow wrapped the whole header onto two
     rows and squeezed the wordmark to "Gulf / Bot". Tighten the gap and the trigger. */
  /* (0,2,0) on purpose — css/legal.css sets `.legal-links{gap:18px}` and loads AFTER
     this sheet, so a (0,1,0) override here would silently lose. */
  .legal-header .legal-links{gap:12px}
  .legal-header .wordmark{white-space:nowrap}
  .legal-header .lang-btn{padding:10px 11px;gap:6px}
  /* checklist H1 (tap target ≥44px) + C1 (button type ≥16px) both measure .lang-btn */
  .lang-btn{min-height:44px;padding:10px 13px;font-size:16px}
  .lang-panel{min-width:190px}
  .lang-opt{padding:12px 13px;font-size:16px}
  .lang-suggest{padding:10px 12px;gap:8px 10px}
  .lang-suggest-txt{font-size:16px}
  .lang-suggest-go{font-size:16px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .lang-caret,.lang-btn{transition:none}
}

/* ── 2026-09-23 · LANE-A stage fit (staged copy ONLY — site/css/lang.css does not carry this yet) ──
   Measured on the stage preview, inner .legal-header pages: with the 09-21 login door now in the
   bar (Answers · Log in · [globe]), `.legal-links{flex-wrap:wrap}` above let the row break onto a
   second line at 300–320px EN and 300–335px AR (header 43px → 96px; wordmark stranded), and on the
   /answers hubs (which keep "← Back to site") up to 370px. Content fits (59 + 20 + 198 = 277 of 284px
   at 320), so the fix is: no wrap + a tighter gap and trigger at ≤479px. Tap target stays 44px tall
   and 16px type (checklist H1/C1). Scan 300→767px step 5, 12 routes EN+AR: one row at every width
   ≥315px; the only residue is <315px (no current phone). No nav-answers.css / style.css rule. */
@media (max-width:479px){
  .legal-header .legal-links{flex-wrap:nowrap;gap:10px}
  .legal-header .lang-btn{padding:10px 9px;gap:5px}
}