/* ══════════════════════════════════════════════════════════════════════════ ar.css — Arabic (RTL) overlay for the Design-A shell. Loaded ONLY by Views/Shared/ar/_Layout.cshtml, as the LAST stylesheet — after css/shared/{global,header,footer}.css and the per-page css/elements/*.css — so its rules win where an RTL override is required. Design-A's shared CSS is already direction-agnostic: it is authored with CSS logical properties (margin-inline / padding-inline / inset-inline / text-align:start|end), so setting dir="rtl" on mirrors the whole layout automatically. This file therefore carries ONLY the handful of things logical properties cannot express: 1. the Arabic font (Noto Kufi) on the body, 2. physical transforms that ignore writing direction (the mobile drawer), 3. a helper to mirror inherently-directional icons (arrows / chevrons). Brand tokens (--primary #F05000 / --navy #003060) are inherited UNCHANGED from css/shared/global.css — R5 freeze; this file defines no tokens. No Bootstrap, no JS libraries — R7. ══════════════════════════════════════════════════════════════════════════ */ /* 1 — Arabic typography ─────────────────────────────────────────────────────── css/shared/global.css already sets `[lang="ar"] body { font-family: var(--font-ar) }` (that is why simply loading the Design-A CSS fixes the legacy "Noto Kufi loaded-but-never-applied" bug — the old AR layout loaded assets/css/global.css (since removed), which hard-set Inter). Restated here so the AR foundation is self-contained if that shared rule ever changes. --font-ar = 'Noto Kufi Arabic', 'Inter', sans-serif (defined in global.css). */ body { font-family: var(--font-ar); } /* 2 — Mobile nav drawer ─────────────────────────────────────────────────────── header.css anchors the drawer with the logical `inset-inline-end: 0`, so in RTL it correctly sits on the LEFT edge. But it hides the drawer with `transform: translateX(100%)`, and translateX is PHYSICAL — it ignores writing direction — so the shared value would slide a left-anchored drawer toward the centre instead of off-screen. Flip the sign for RTL. The open resting state (`translateX(0)`) is already direction-neutral. */ .drawer { transform: translateX(-100%); } /* 3 — Directional icons ─────────────────────────────────────────────────────── Arrows / chevrons that mean "forward · next · previous · back" must point the other way in RTL. The sprite ships both directions, so views prefer the correct symbol; where a single glyph is reused across directions, add class="rtl-flip" to mirror it. */ .rtl-flip { transform: scaleX(-1); }