/* ============================================================
   Arabic typography corrections.

   Loaded only on /ar/ pages, after every other stylesheet, and it
   contains nothing but overrides — the English pages never see it, so
   the original design is untouched.

   The English design leans on letter-spacing: small mono-font labels,
   eyebrows, uppercase kickers and tight display headings all carry
   tracking. Arabic is a cursive script, so tracking pulls the joins
   between letters apart and a word reads as loose, disconnected
   fragments. The original stylesheets already did this in places
   ([dir=rtl] .eyebrow { letter-spacing: 0 } in the assessment pages);
   this file applies the same correction site-wide.
   ============================================================ */

/* ---- 1. give Arabic an Arabic font ----------------------------------
   The original pages already load Cairo from Google Fonts, but no rule
   ever used it: the three font stacks are Latin-only, so every Arabic
   glyph fell through to the browser's generic default. For --f-mono
   that default is a *monospaced* face, which forces each Arabic letter
   into a fixed advance width — the loose, broken-looking labels.

   Cairo is appended after the Latin faces rather than in front of
   them, so fallback stays per-glyph: Latin characters and digits keep
   IBM Plex Mono / Space Grotesk / Inter exactly as the design intends,
   and only the Arabic glyphs come from Cairo. */
[dir="rtl"] {
  --f-display: 'Space Grotesk', 'Cairo', 'Archivo', sans-serif;
  --f-body:    'Inter', 'Cairo', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Cairo', 'JetBrains Mono', sans-serif;
}

/* ---- 2. drop the tracking -------------------------------------- */
[dir="rtl"] * { letter-spacing: normal !important; }

/* Strings that stay Latin on the Arabic pages keep the tracking the
   design gives them — the wordmark, the small-caps sub-line under it,
   and the partner name in the footer. */
[dir="rtl"] .ss-brand strong      { letter-spacing: .2px  !important; }
[dir="rtl"] .ss-brand-copy > span { letter-spacing: 1.45px !important; }
[dir="rtl"] .brand strong         { letter-spacing: -.01em !important; }

@media (max-width: 700px) {
  [dir="rtl"] .ss-brand-copy > span { letter-spacing: .9px !important; }
}

/* Arabic has no letter case, so the uppercase transform is a no-op on
   Arabic text but still fires on any Latin word mixed into the same
   label. Left as the design has it. */