/*
 * RTL baseline for the Arabic market (ar-AE). Loaded only when <html dir="rtl">
 * (see views/layouts/base.twig). This is a STARTING POINT, not a finished RTL
 * pass: the site's component CSS lives in per-page <style> blocks and uses
 * ~270 physical-direction properties (margin-left, text-align:left, left:, …)
 * that still need auditing one by one. See todo/ae/arabic.md (🔴).
 *
 * What this file safely handles globally:
 *  - Arabic webfont for body copy.
 *  - Document-level direction & default text alignment.
 *  - A few high-traffic chrome flips that read obviously wrong otherwise.
 */

/* Make the WHOLE Arabic UI use Tajawal by overriding the design-system font
   variables for RTL. The per-page <style> blocks set headings to var(--display)
   (Bricolage Grotesque) and eyebrows/labels to var(--mono) (Spline Sans Mono) —
   both Latin-only, so Arabic text in them falls back to a browser default.
   `:root[dir='rtl']` (specificity 0,2,0) outranks the per-page `:root`, so
   redefining the vars here flips headings, body and mono/label text to Tajawal. */
:root[dir='rtl'] {
  --display: 'Tajawal', 'Instrument Sans', system-ui, sans-serif;
  --body:    'Tajawal', 'Instrument Sans', system-ui, sans-serif;
  --mono:    'Tajawal', ui-monospace, monospace;
}

[dir='rtl'] body {
  font-family: var(--body);
  text-align: right;
}

/* Latin fragments (handles, prices, code) keep their own direction so
   "@nadia.dxb" / "AED 1,199" don't get visually reversed inside RTL text. */
[dir='rtl'] [data-cs-label],
[dir='rtl'] .price-line,
[dir='rtl'] .who,
[dir='rtl'] .mock-value {
  unicode-bidi: plaintext;
}

/* Country switcher / footer bottom: mirror the inline-flex row. */
[dir='rtl'] .foot-bottom,
[dir='rtl'] .country-switch,
[dir='rtl'] .cs-item {
  flex-direction: row-reverse;
}

/* The hero headline underline (.mark::after) and similar decorations use
   physical left/right; they're symmetric here so they read fine either way. */

/* Common eyebrow/badge rows are inline-flex; keep them starting at the right. */
[dir='rtl'] .eyebrow,
[dir='rtl'] .trust-pill,
[dir='rtl'] .hero-proof span,
[dir='rtl'] .hc-top {
  flex-direction: row-reverse;
}

/* Bullet/check lists that prefix a glyph with margin/padding-left — flip to the
   inline-start side so the marker sits on the right in RTL. */
[dir='rtl'] .plan li,
[dir='rtl'] .win b,
[dir='rtl'] .three div,
[dir='rtl'] .inc {
  text-align: right;
}

/* Keep mixed Latin+Arabic runs (stats, postcodes-equivalent, follower counts,
   currency) visually ordered with the surrounding Arabic. */
[dir='rtl'] .num,
[dir='rtl'] .hc-stat,
[dir='rtl'] .proof-big,
[dir='rtl'] .plan-price {
  unicode-bidi: plaintext;
}

/* ───────────────────────────────────────────────────────────────────────
 * REMAINING RTL WORK (needs browser visual QA — see todo/ae/arabic.md):
 * The ~40 page <style> blocks still use physical margin-left/right,
 * padding-left/right, left:/right: absolute offsets, and translateX marquees.
 * For a polished RTL launch, convert those to logical properties
 * (margin-inline-start, inset-inline-*, text-align:start) or add per-component
 * [dir=rtl] overrides. This baseline makes the page read correctly in Arabic;
 * it does not guarantee pixel-perfect mirroring of every component.
 * ─────────────────────────────────────────────────────────────────────── */
