/* ============================================================ Right-to-left corrections for the Arabic build (/ar/). dir="rtl" on mirrors the flow; everything below fixes what is anchored to a physical side. Selectors are kept generic because these microsites do not share one design system - an unmatched selector simply does nothing. ============================================================ */ [dir="rtl"] body { text-align: right; } [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.15rem; } /* tick bullets and numbered steps */ [dir="rtl"] .checks li, [dir="rtl"] .ticks li, [dir="rtl"] .list-check li { padding-left: 0; padding-right: 1.85rem; } [dir="rtl"] .checks li::before, [dir="rtl"] .ticks li::before, [dir="rtl"] .list-check li::before { left: auto; right: 0; transform: scaleX(-1); } [dir="rtl"] .steps li, [dir="rtl"] .numbers li { padding-left: 0; padding-right: 3.1rem; } [dir="rtl"] .steps li::before, [dir="rtl"] .numbers li::before { left: auto; right: 0; } /* breadcrumbs */ [dir="rtl"] .crumbs li + li::before, [dir="rtl"] .breadcrumb li + li::before { margin-right: 0; margin-left: .5rem; } /* tables and captions */ [dir="rtl"] caption, [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* the switcher menu flips to the other edge */ [dir="rtl"] .langsw__menu { right: auto; left: 0; text-align: right; } /* a fixed contact dock moves to the left edge */ [dir="rtl"] .dock, [dir="rtl"] .cta-dock, [dir="rtl"] .float-wa, [dir="rtl"] .floating, [dir="rtl"] .wa-float, [dir="rtl"] .fab { right: auto; left: 20px; } /* Latin fragments - part codes, emails, tolerances - stay LTR inside Arabic sentences. */ [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"], [dir="rtl"] code { direction: ltr; unicode-bidi: embed; display: inline-block; } /* An off-canvas skip link parked at a negative left offset stops being clipped once the inline axis flips, and stretches the scrollable width until the page looks blank. Clip it instead. */ [dir="rtl"] .skip-link:not(:focus), [dir="rtl"] .skip:not(:focus), [dir="rtl"] .skip-to-content:not(:focus), [dir="rtl"] .visually-hidden { left: auto; right: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* uppercase tracking is meaningless in Arabic */ [dir="rtl"] .btn, [dir="rtl"] .eyebrow, [dir="rtl"] .badge, [dir="rtl"] .kicker { letter-spacing: 0; }