/* ============================================================ RTL / Arabic overrides Loaded ONLY when (Arabic locale), AFTER style.css. Other locales never load this file, so LTR is untouched. Bootstrap 5 logical utilities (.ms-*/.me-*, .float-start/end, .text-start/end) and flex layouts auto-mirror under direction:rtl; this file sets direction + Arabic typography and flips the template's remaining physical/legacy directional rules. ============================================================ */ /* ---- Direction ---- */ html[dir="rtl"], html[dir="rtl"] body { direction: rtl; } html[dir="rtl"] body { text-align: right; } /* ---- Arabic typography ---- */ html[dir="rtl"] { --global--font-body: 'Cairo', sans-serif; --global--font-heading: 'Cairo', sans-serif; --global--font-secondary: 'Cairo', sans-serif; } html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] li, html[dir="rtl"] label, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] button, html[dir="rtl"] .btn, html[dir="rtl"] .nav-link { font-family: 'Cairo', 'Rubik', sans-serif; } /* ---- Legacy text-align utilities (don't auto-mirror) ---- */ html[dir="rtl"] .text--left { text-align: right !important; } html[dir="rtl"] .text--right { text-align: left !important; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .text--center, html[dir="rtl"] .text-center { text-align: center !important; } /* ---- Lists: bullets/numbers on the correct side ---- */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.2rem; padding-left: 0; } /* ---- Decorative offsets in shared template (mirror) ---- */ html[dir="rtl"] .bg-section img { left: auto; right: 0; } /* ---- Header spacing: template uses trailing margin-right for inter-item gaps in flex rows, which collapses on the wrong side under RTL (last menu item and the app button collide with their neighbours). Replace with a direction-agnostic column-gap and zero the physical child margins. ---- */ html[dir="rtl"] .navbar .navbar-nav { column-gap: 20px; } html[dir="rtl"] .navbar .navbar-nav > li { margin-right: 0 !important; margin-left: 0 !important; } html[dir="rtl"] .module-holder { column-gap: 40px; } html[dir="rtl"] .module-holder > * { margin-right: 0 !important; margin-left: 0 !important; } html[dir="rtl"] .module-holder .module-contact { column-gap: 40px; } html[dir="rtl"] .module-holder .module-contact > * { margin-right: 0 !important; margin-left: 0 !important; } /* ---- Sub-page tweaks revealed by the visual audit get appended below ---- */