/* ============================================================================= * modern-overrides-rtl.css * Right-to-left layout adjustments for Arabic (ar-MA). * Loaded only when . * * NOTE: Most directional layout rules now live in modern-overrides.css using * logical properties (text-align: start/end, padding-inline-start/end, flex * with `direction: rtl` cascading from ). This file contains only * RTL-specific tweaks that aren't expressible as logical properties. * ============================================================================= */ /* Slight typography tuning for Arabic script — it reads more comfortably * a touch larger with extra line-height. */ html[dir="rtl"] body { font-size: 16px; line-height: 1.75; } /* Breadcrumb separator flips direction (the chevron pointer) */ html[dir="rtl"] .breadcrumbs span[property="itemListElement"]::after { content: "‹ "; } html[dir="rtl"] .breadcrumbs span[property="itemListElement"]:last-child::after { content: ""; } /* Embedded Calendly widget — opt-out: stays LTR (its own UI is in English/French) */ html[dir="rtl"] .calendly-inline-widget { direction: ltr; text-align: left; } /* Embedded Google Maps iframe — stays LTR (Google Maps controls assume LTR) */ html[dir="rtl"] .qt-map-iframe iframe { direction: ltr; } /* Numeric / Latin-script content nested in RTL paragraphs reads better * with bidirectional isolation. Phone numbers, addresses with Latin chars, * etc. — wrap them in in HTML if needed; this is a fallback. */ html[dir="rtl"] code, html[dir="rtl"] var, html[dir="rtl"] kbd, html[dir="rtl"] samp, html[dir="rtl"] .calendly-inline-widget * { unicode-bidi: isolate; } /* Language-switcher: in RTL the `.lang-ar` pill is the active language; * font-family for the Arabic glyph is already set in modern-overrides.css. */ /* Navigation menu and sub-menu — Bootstrap's float-based nav doesn't * auto-mirror, so flip its float here. (Hard to use logical properties * because Bootstrap 3 wasn't written with them.) */ html[dir="rtl"] .main-navigation > li { float: right; } html[dir="rtl"] .main-navigation .sub-menu { right: 0; left: auto; } html[dir="rtl"] .header-logo { float: right; } html[dir="rtl"] .header-navigation { float: left; } html[dir="rtl"] .featured-button { float: left; }