/* ─── RTL / ARABIC OVERRIDES ───────────────────────────────────────────────── Loaded on every page after style.css. Only takes effect when is set by the language toggle (see i18n.js / layout.js). Keep this additive — never redeclare rules that should stay the same in both languages. ------------------------------------------------------------------------- */ html[dir="rtl"] body { font-family: 'Tajawal', 'Barlow', sans-serif; } /* Arabic script doesn't take tracked-out letter-spacing well — it breaks the natural letter joining used throughout the Latin-designed UI. */ html[dir="rtl"] * { letter-spacing: normal; } /* Keep numerals/stat figures (9+, 360°, 6.0M, percentages, $ amounts) left-to-right looking even inside an RTL flow. */ html[dir="rtl"] .hero-stat strong, html[dir="rtl"] .who-num strong, html[dir="rtl"] .stat-item strong, html[dir="rtl"] .adops-bar-val, html[dir="rtl"] .adops-metric strong, html[dir="rtl"] .dash-kpi strong, html[dir="rtl"] .channel-val, html[dir="rtl"] .cs-val { direction: ltr; unicode-bidi: isolate; } /* Mirror label alignment inside horizontal bar rows (Ad Ops / Dashboard charts) so labels stay flush against their bar instead of drifting to the outer edge. */ html[dir="rtl"] .adops-bar-label, html[dir="rtl"] .channel-val { text-align: left; } /* Breadcrumb separators and process-step connector line read fine mirrored automatically via flexbox/grid + dir, no extra rules required. */ /* Decorative full-bleed elements are absolutely positioned with physical left/right values, so `dir` doesn't mirror them automatically. Since real heading/paragraph text now sits flush right (RTL default), move these watermark-style graphics to the left so they stay behind empty space instead of colliding with the text. */ html[dir="rtl"] .hero-sweep { right: auto; left: -100px; } html[dir="rtl"] .hero-decor { right: auto; left: 5%; } html[dir="rtl"] .page-hero::after { right: auto; left: -20px; } /* Nav / footer logo spacing looks tighter in Arabic condensed caps; give the wordmark a touch more room next to the logo mark. */ html[dir="rtl"] .nav-logo { gap: 8px; } /* Language toggle pill — same look in both directions, defined once here so it doesn't need to duplicate across style.css language states. */ .lang-toggle { background: transparent; border: 1px solid rgba(0,0,0,.18); color: var(--dgray); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 7px 16px; cursor: pointer; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; } .lang-toggle:hover { background: var(--red); border-color: var(--red); color: #fff; } html[dir="rtl"] .lang-toggle { letter-spacing: normal; } @media (max-width: 900px) { .lang-toggle { width: 100%; text-align: center; padding: 10px 16px; } }