/* RTL overrides — applied when */
/* =====================================================
ARABIC FONT OVERRIDES
Cinzel (--font-heading) is a Latin-only typeface with
zero Arabic glyphs. Every heading class that explicitly
sets font-family: var(--font-heading) must be overridden
here. The body rule alone is not enough because direct
class rules cascade above inherited body values.
===================================================== */
/* Headings → Alexandria (the Arabic display font) */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .section-title,
[dir="rtl"] .hero__title,
[dir="rtl"] .service-card__title,
[dir="rtl"] .why__stat,
[dir="rtl"] .why__title,
[dir="rtl"] .prop-card__title,
[dir="rtl"] .about__quote,
[dir="rtl"] .page-hero__inner .section-title {
font-family: var(--font-arabic-heading);
}
/* Section labels: decorative eyebrow text → Alexandria.
letter-spacing tears Arabic letterforms apart; reset it.
text-transform has no effect on Arabic but reset for clarity. */
[dir="rtl"] .section-label {
font-family: var(--font-arabic-heading);
letter-spacing: 0;
text-transform: none;
}
/* Footer headings */
[dir="rtl"] .footer__heading {
font-family: var(--font-arabic-heading);
letter-spacing: 0;
text-transform: none;
}
/* Buttons → Alexandria.
Reset letter-spacing and text-transform (Latin-only conventions). */
[dir="rtl"] .btn {
font-family: var(--font-arabic-heading);
letter-spacing: 0;
text-transform: none;
}
/* row-reverse forces flex-start to the LEFT (wrong in RTL).
row with dir="rtl" sets flex-start to the RIGHT — correct. */
[dir="rtl"] .section-label { flex-direction: row; }
[dir="rtl"] .section-label::before { order: 2; } /* line trails after the text (to its left) */
/* RTL flex containers flow right-to-left naturally when dir="rtl" is
on the html element. row-reverse undoes that, putting the first item
on the LEFT — exactly the bug. Use explicit row to let the browser
handle ordering correctly. */
[dir="rtl"] .nav__links { flex-direction: row; }
[dir="rtl"] .nav__actions { flex-direction: row-reverse; }
[dir="rtl"] .hero__content { text-align: right; }
[dir="rtl"] .hero__ctas { flex-direction: row-reverse; }
[dir="rtl"] .hero__stats-inner { flex-direction: row-reverse; }
[dir="rtl"] .about__inner { direction: rtl; }
[dir="rtl"] .footer__grid { direction: rtl; }
[dir="rtl"] .whatsapp-float { right: auto; left: var(--space-4); }
[dir="rtl"] body { font-family: var(--font-arabic); }
[dir="rtl"] .form-group { text-align: right; }
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group select,
[dir="rtl"] .form-group textarea { text-align: right; direction: rtl; }
[dir="rtl"] .lead-form { direction: rtl; }