/* RTL overrides for Arabic. Flexbox/grid layouts mirror automatically via the browser once dir="rtl" is set on — this file only fixes the physical (non-logical) left/right positioning that doesn't auto-flip: decorative glows, floating badges, and a few explicit inline overrides. First-pass RTL — good for real use, not yet pixel-audited line by line. */ html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .slh-section__lede, html[dir="rtl"] .slh-story__text { text-align: right !important; margin-left: auto !important; margin-right: 0 !important; } /* Skip link */ html[dir="rtl"] .slh-skip-link { left: auto; right: -999px; border-radius: 0 0 0 var(--slh-radius-sm); } html[dir="rtl"] .slh-skip-link:focus { left: auto; right: 0; } /* Checklist bullets (checkmark should sit on the trailing/right side) */ html[dir="rtl"] .slh-checklist li { padding-left: 0; padding-right: 1.75rem; } html[dir="rtl"] .slh-checklist li::before { left: auto; right: 0; } html[dir="rtl"] .slh-checklist li::after { left: auto; right: 0.34rem; transform: rotate(45deg) scaleX(-1); } /* Eyebrow lines that were explicitly left-aligned */ html[dir="rtl"] .slh-eyebrow-line--left { justify-content: flex-end; } /* Decorative glows / dots — mirror corner-to-corner */ html[dir="rtl"] .slh-hero__glow--green, html[dir="rtl"] .slh-cta__glow--green, html[dir="rtl"] .slh-about-hero__glow--green, html[dir="rtl"] .slh-services-hero__glow--green, html[dir="rtl"] .slh-news-hero__glow--green, html[dir="rtl"] .slh-support-hero__glow--green, html[dir="rtl"] .slh-contact-hero__glow--green { right: auto; left: -5rem; } html[dir="rtl"] .slh-hero__glow--green { left: -8rem; right: auto; } html[dir="rtl"] .slh-hero__glow--teal, html[dir="rtl"] .slh-cta__glow--teal, html[dir="rtl"] .slh-about-hero__glow--teal, html[dir="rtl"] .slh-services-hero__glow--teal, html[dir="rtl"] .slh-news-hero__glow--teal, html[dir="rtl"] .slh-support-hero__glow--teal, html[dir="rtl"] .slh-contact-hero__glow--teal { left: auto; right: -5rem; } html[dir="rtl"] .slh-hero__glow--teal { right: -8rem; left: auto; } html[dir="rtl"] .slh-story__blob--green { right: auto; left: -1rem; } html[dir="rtl"] .slh-story__blob--teal { left: auto; right: -1rem; } html[dir="rtl"] .slh-vm-card__glow--teal, html[dir="rtl"] .slh-vm-card__glow--green { right: auto; left: -2.5rem; } /* Floating badges (functional, not decorative — mirror them too) */ html[dir="rtl"] .slh-hero__floater--top { right: auto; left: -1rem; } html[dir="rtl"] .slh-hero__floater--bottom { left: auto; right: -1rem; } html[dir="rtl"] .slh-about__float--green { right: auto; left: -1.25rem; } html[dir="rtl"] .slh-about__float--white { left: auto; right: -1.25rem; } /* Language dropdown should hang from the same side as the trigger button */ html[dir="rtl"] .slh-lang__menu { right: auto; left: 0; } /* Floating WhatsApp button mirrors to the opposite corner */ html[dir="rtl"] .slh-whatsapp-fab { right: auto; left: 1.5rem; } /* Card underline/accent bars that grow from a fixed edge */ html[dir="rtl"] .slh-service-card__bar, html[dir="rtl"] .slh-value-card__bar { left: auto; right: 0; } /* Nav menu active-item underline stays centered — no change needed */