/* ========================================================================== RTL — exceptions that CSS logical properties (used throughout base, layout and components) cannot resolve automatically. Activated by [dir="rtl"] on , set by language.js. ========================================================================== */ [dir="rtl"] { font-family: var(--font-arabic); } [dir="rtl"] body { font-family: var(--font-arabic); } /* Arabic script benefits from slightly taller line-height for legibility */ [dir="rtl"] p, [dir="rtl"] .lead, [dir="rtl"] .service-description, [dir="rtl"] .article-body p { line-height: var(--lh-relaxed); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; } /* Directional glyphs/icons that must flip in RTL (arrows, chevrons, breadcrumb separators). Apply .mirror-rtl to any icon that visually implies a reading direction. */ [dir="rtl"] .mirror-rtl { transform: scaleX(-1); } .breadcrumb-sep { display: inline-block; } [dir="rtl"] .breadcrumb-sep { transform: scaleX(-1); } /* Testimonial quote mark curls toward the reading direction */ [dir="rtl"] .testimonial-quote svg { transform: scaleX(-1); } /* Native inputs/selects already inherit text alignment from dir, but custom chevron backgrounds on