/* RTL override stylesheet — loaded only for the Arabic (ar) locale, via the same [dir="rtl"] attribute set on by every header partial. This is a SCOPED override, not a full logical-properties rewrite of style.css/portal.css: it only touches the physical left/right, margin, padding, and positioning rules that visibly break under RTL. Every selector here is prefixed with [dir="rtl"] so it never affects the other 13 locales, which don't set that attribute. */ /* ---- Main nav (style.css) ---- */ [dir="rtl"] .nav-cta { margin-left: 0; margin-right: auto; } [dir="rtl"] .nav-lang-dropdown { margin-left: 0; margin-right: 8px; } /* Services mega-dropdown + account/lang dropdowns open from the left instead of the right, so they stay under their trigger instead of running off the (now mirrored) edge of the viewport. */ [dir="rtl"] .nav-dropdown-menu { left: auto; right: 0; } [dir="rtl"] .nav-lang-menu { left: 0; right: auto; } /* Mega-menu column divider was a left border between columns; in RTL the columns render in reverse visual order so the divider belongs on the other edge of each column. */ [dir="rtl"] .nav-dropdown-col { border-left: none; border-right: 1px solid var(--border-subtle); } [dir="rtl"] .nav-dropdown-col:first-child { border-right: none; } /* Mobile off-canvas nav panel slides in from the left instead of the right. */ @media (max-width: 991px) { [dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; } [dir="rtl"] .nav-links { right: auto; left: -100%; border-left: none; border-right: 1px solid var(--border-subtle); transition: left var(--transition); } [dir="rtl"] .nav-links.open { left: 0; } } /* ---- Portal nav (portal.css) ---- */ [dir="rtl"] .navbar-auth-links { margin-left: 0; margin-right: auto; } /* ---- Footer ---- */ /* .footer-cols is a CSS grid; setting dir="rtl" on already reverses the visual order of its tracks (logo|Company|Services|Legal renders Legal|Services|Company|logo), so no grid-template-columns override is needed here — only confirmed, not fixed. */ /* ---- Cards / feature list / service nav (style.css) ---- */ [dir="rtl"] .home-category { border-left: none; border-right: 3px solid var(--acc, var(--accent-blue)); } [dir="rtl"] .home-category:hover { border-left-color: transparent; border-right-color: var(--acc); } [dir="rtl"] .home-category-title .icon { margin-right: 0; margin-left: 10px; } [dir="rtl"] .feat-item { grid-template-columns: 1fr 64px; } /* Service prev/next floating nav: swap sides, corner radii, and border-cut edge. */ [dir="rtl"] .svc-nav-prev { left: auto; right: 0; border-radius: 4px 0 0 4px; border-left: 1px solid rgba(125,211,252,0.12); border-right: none; } [dir="rtl"] .svc-nav-next { right: auto; left: 0; flex-direction: row; border-radius: 0 4px 4px 0; border-right: 1px solid rgba(125,211,252,0.12); border-left: none; } /* Mirror the CTA/nav arrow glyphs (→/←/← rendered as literal text in the PHP views) in place, without touching the templates that render → vs ← on purpose for prev/next semantics. A flipped right-arrow visually reads as a left-arrow and vice versa, which is exactly the semantics RTL needs (the "next" direction is now leftward). */ [dir="rtl"] .btn > span[aria-hidden="true"], [dir="rtl"] .svc-nav-arrow, [dir="rtl"] .home-svc-arrow, [dir="rtl"] .back-link-arrow { display: inline-block; transform: scaleX(-1); } /* Quiz option hover nudge moves toward the leading edge, which is now the left. */ [dir="rtl"] .quiz-option:hover { transform: translateX(-4px); } /* ---- Forms (style.css + portal.css share .form-group) ---- */ [dir="rtl"] .form-group { text-align: right; } [dir="rtl"] .enquiry-success-details { text-align: right; } [dir="rtl"] .co-label, [dir="rtl"] .subscribe-label { text-align: right; } [dir="rtl"] .nav-logout-btn--menu { text-align: right; } /* ---- Portal dashboard (portal.css) ---- */ [dir="rtl"] .dash-account-note { margin-left: 0; margin-right: auto; } [dir="rtl"] .dash-table th, [dir="rtl"] .dash-table td { text-align: right; } [dir="rtl"] .dash-table th:first-child, [dir="rtl"] .dash-table td:first-child { padding-left: 0.75rem; padding-right: 0; } /* Event-log timeline rail runs down the right side instead of the left, with the dot marker flipped to match. */ [dir="rtl"] .dash-event-log { border-left: none; border-right: 2px solid rgba(125,211,252,0.15); margin-left: 0; margin-right: 0.625rem; } [dir="rtl"] .dash-event-row { padding: 0.75rem 1.25rem 0.75rem 0; } [dir="rtl"] .dash-event-dot { left: auto; right: -0.45rem; }