/* public/i18n.css — everything the nine languages need from CSS, and nothing
   else. Deliberately NOT in theme.css: theme.css is the office/citizen shared
   design system and is owned elsewhere; this file is owned by the language
   work and can be reasoned about on its own.

   Load it LAST in <head>, after the page's own <style>. Several pages carry
   `html[dir="rtl"] * { font-family: 'Noto Kufi Arabic' }` inline, which has
   the same specificity as the :lang() rules below — source order is what
   decides, and Persian must not be handed an Arabic Kufi face by accident. */

:root {
  /* Arabic: what the site already ships and what Omani government copy is set
     in. Segoe UI / Tahoma are the Windows fallbacks that actually have Arabic
     glyphs — a bare sans-serif renders tofu on some Windows installs. */
  --font-arabic: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, 'Arial', sans-serif;

  /* Persian is written in the Arabic script but is NOT Arabic typography:
     Kufi is a display face and reads as shouting in Persian body text, and
     Persian needs ی / ک with their own shapes. Naskh first, Kufi only as the
     last thing on the site that is guaranteed present. */
  --font-persian: 'Vazirmatn', 'Noto Naskh Arabic', 'Segoe UI', Tahoma,
                  'Noto Kufi Arabic', sans-serif;

  /* Latin + Cyrillic share a stack: Inter (already loaded on every page) has
     full Cyrillic coverage, so Russian costs no extra font download. */
  --font-latin: 'Inter', 'Noto Sans', system-ui, -apple-system, 'Segoe UI',
                Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Devanagari and CJK are SYSTEM fonts on purpose. A Noto Sans Devanagari or
     Noto Sans SC webfont is 300 KB–4 MB; shipping that to every visitor to
     serve two languages is the wrong trade on a phone in Oman. These are the
     real faces present on Windows, macOS, Android and iOS respectively. */
  --font-devanagari: 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal',
                     'Kohinoor Devanagari', 'Devanagari Sangam MN',
                     system-ui, sans-serif;
  --font-cjk: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
              'Noto Sans SC', 'Source Han Sans SC', 'SimSun',
              system-ui, sans-serif;
}

/* ── Per-script faces ─────────────────────────────────────────────────────
   Keyed off :lang() rather than [data-script] so they also work on an inline
   span carrying its own lang= — which is exactly what the picker's endonyms
   are. `html:lang(x) *` matches the inline case too, so both are covered. */
html:lang(ar), html:lang(ar) body, html:lang(ar) *,
:lang(ar) { font-family: var(--font-arabic); }

html:lang(fa), html:lang(fa) body, html:lang(fa) *,
:lang(fa) { font-family: var(--font-persian); }

html:lang(en), html:lang(en) body, html:lang(en) *,
html:lang(de), html:lang(de) body, html:lang(de) *,
html:lang(fr), html:lang(fr) body, html:lang(fr) *,
html:lang(es), html:lang(es) body, html:lang(es) *,
html:lang(ru), html:lang(ru) body, html:lang(ru) *,
:lang(en), :lang(de), :lang(fr), :lang(es), :lang(ru) { font-family: var(--font-latin); }

html:lang(hi), html:lang(hi) body, html:lang(hi) *,
:lang(hi) { font-family: var(--font-devanagari); }

html:lang(zh), html:lang(zh) body, html:lang(zh) *,
:lang(zh) { font-family: var(--font-cjk); }

/* Devanagari and CJK sit lower on the em than Latin at the same px, and the
   pages are laid out for Inter. A hair more line-height stops Hindi matras
   and Chinese glyphs from clipping inside fixed-height chips and buttons. */
html:lang(hi) body, html:lang(zh) body { line-height: 1.7; }

/* Headings need it more than body text, and they are exactly where a utility
   class overrides the rule above: the landing page's h1 carries
   `leading-[1.4]`, which is generous for Inter and clips the ascender matras
   off «ओमान में सरकारी काग़ज़ात» at 48px — verified in headless Chrome. These
   selectors are (0,1,2) so they beat a Tailwind leading-* utility at (0,1,0)
   without !important. */
html:lang(hi) h1, html:lang(hi) h2, html:lang(hi) h3,
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { line-height: 1.55; }

/* ── Bidi isolation ───────────────────────────────────────────────────────
   «العربية» inside an English menu, or "English" inside an Arabic header, is
   a run of the opposite direction. Without isolation the UBA drags adjacent
   punctuation across the boundary and the menu renders as ‎«العربية ·‏» with
   the separator on the wrong side. Every element that carries its own dir=
   gets isolated. */
[dir] > [dir],
.lang-picker [lang],
.lang-bar [lang] { unicode-bidi: isolate; }

/* A name that must never be reordered at all — a service title quoted inside
   a sentence of the opposite direction. */
.bidi-plain { unicode-bidi: isolate-override; }

/* ── The picker ───────────────────────────────────────────────────────────
   No flags. A flag is a country, not a language: Persian is not Iran to an
   Afghan reader, Spanish is not Spain to a Colombian one, and English has no
   flag at all that is not somebody's colonial history. 🌐 + the endonym, in
   its own script, is the whole control. */
.lang-picker { position: relative; display: inline-block; font-size: 12px; }

.lang-picker__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .85);
  color: #0f172a; font: inherit; font-weight: 600;
  cursor: pointer; line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.lang-picker__btn:hover { background: #fff; border-color: rgba(15, 23, 42, .28); }
.lang-picker__btn:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.lang-picker__globe { font-size: 14px; line-height: 1; }
.lang-picker__chev { opacity: .5; font-size: 9px; }

.lang-picker__menu {
  position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 6px);
  min-width: 190px; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}
.lang-picker__menu[hidden] { display: none; }
.lang-picker__opt {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: #0f172a; font: inherit;
  text-align: start; cursor: pointer;
}
.lang-picker__opt:hover { background: #f1f5f9; }
.lang-picker__opt[aria-selected="true"] { background: #ccfbf1; font-weight: 700; }
.lang-picker__opt:focus-visible { outline: 2px solid #0d9488; outline-offset: -2px; }
/* The endonym leads; the English name is the quiet second line, so a reader
   who cannot yet read the endonym can still find their language. */
.lang-picker__endonym { font-size: 13px; }
.lang-picker__english { font-size: 11px; opacity: .55; margin-inline-start: auto; }

/* ── The first-visit suggestion bar ───────────────────────────────────────
   One line, dismissible, and it never switches anything by itself: the boot
   already picked a language from navigator.languages, and this bar exists so
   that decision is visible and reversible rather than mysterious. */
.lang-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 12.5px;
  background: #0f766e; color: #f0fdfa;
}
.lang-bar[hidden] { display: none; }
.lang-bar__msg { flex: 1 1 auto; }
.lang-bar__pick, .lang-bar__x {
  border: 0; background: rgba(255, 255, 255, .16); color: inherit;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
}
.lang-bar__pick:hover, .lang-bar__x:hover { background: rgba(255, 255, 255, .28); }
.lang-bar__x { padding: 2px 9px; font-size: 15px; line-height: 1.2; }

@media (max-width: 420px) {
  .lang-picker__english { display: none; }
  .lang-bar { font-size: 12px; padding: 7px 10px; }
}

/* Touch. Same rule theme.css applies to the office console's controls, for
   the one control every citizen page carries. The picker button was 31px
   tall — under the 44px Apple/Material minimum — on the page written for
   people who cannot read the rest of it, which is the worst possible place
   to make someone aim. Desktop is untouched: this is a media query, not a
   size bump. */
@media (pointer: coarse) {
  .lang-picker__btn { min-height: 44px; }
  .lang-picker__opt { min-height: 44px; }
  .lang-bar__pick, .lang-bar__x { min-height: 40px; }
}