/* RTL overrides — applied when dir="rtl" is set on */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] button, [dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] li, [dir="rtl"] span, [dir="rtl"] time, [dir="rtl"] blockquote, [dir="rtl"] th, [dir="rtl"] td { font-family: var(--font-ar); letter-spacing: 0; } [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] blockquote, [dir="rtl"] label { line-height: var(--leading-loose); } [dir="rtl"] .section-label { letter-spacing: 0; } /* ── Navbar ─────────────────────────────────────────────── */ /* Mobile menu: in RTL the toggle is on the left side, so the drawer slides in from the left */ @media (max-width: 1023px) { [dir="rtl"] .nav__menu { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); } [dir="rtl"] .nav__menu.open { transform: translateX(0); } } [dir="rtl"] .nav__actions { flex-direction: row-reverse; } /* ── Hero ────────────────────────────────────────────────── */ [dir="rtl"] .hero__content { text-align: right; } [dir="rtl"] .hero__ctas { justify-content: flex-end; } /* ── Stats bar ───────────────────────────────────────────── */ /* Keep numeric stat values left-to-right so +5,000 reads correctly */ [dir="rtl"] .stat__number { direction: ltr; unicode-bidi: embed; } /* ── Service / feature lists ─────────────────────────────── */ [dir="rtl"] .service-feature { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .service-feature__icon { margin-inline-start: var(--space-3); margin-inline-end: 0; } /* ── Forms ───────────────────────────────────────────────── */ [dir="rtl"] .form-group input, [dir="rtl"] .form-group select, [dir="rtl"] .form-group textarea { text-align: right; } [dir="rtl"] .form-group select { background-position: left var(--space-4) center; padding-right: var(--space-4); padding-left: var(--space-10); } /* ── Blog card category badge ────────────────────────────── */ [dir="rtl"] .blog-card__category { inset-inline-start: var(--space-3); inset-inline-end: auto; } /* ── Lightbox ────────────────────────────────────────────── */ [dir="rtl"] .lightbox__close { inset-inline-end: var(--space-6); inset-inline-start: auto; } /* Swap prev/next positions so arrow logic stays intuitive */ [dir="rtl"] .lightbox__prev { inset-inline-end: var(--space-6); inset-inline-start: auto; } [dir="rtl"] .lightbox__next { inset-inline-start: var(--space-6); inset-inline-end: auto; } /* ── Footer ──────────────────────────────────────────────── */ [dir="rtl"] .footer__tagline { text-align: right; } [dir="rtl"] .footer__social { justify-content: flex-start; } [dir="rtl"] .footer__bottom { flex-direction: row-reverse; } /* ── Floating buttons (already use logical properties) ────── */ /* WhatsApp: inset-inline-end in components.css already handles RTL correctly */ /* Scroll-top: inset-inline-end in components.css already handles RTL correctly */