/* ======================================================================
   RTL overrides — loaded only on Arabic pages (dir="rtl").
   Most spacing/alignment already uses CSS logical properties in
   style.css, so this file only fixes things logical properties can't
   express: font stack, letter-spacing, decorative gradient positions,
   and icon mirroring for directional glyphs.
   ====================================================================== */

[dir="rtl"] body {
  font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Cairo", var(--font-body);
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .wordmark text {
  font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Cairo", var(--font-display);
  letter-spacing: 0;
}

[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .eyebrow::before { order: 2; }

[dir="rtl"] .hero::after {
  background: radial-gradient(60% 55% at 85% 20%, rgba(45, 212, 191, 0.18), transparent 60%),
              radial-gradient(45% 45% at 10% 15%, rgba(45, 212, 191, 0.12), transparent 60%);
}

/* Directional icons (arrows) should point toward reading-start in RTL */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

[dir="rtl"] .service-body ul li::before {
  inset-inline-start: 0;
}

[dir="rtl"] .breadcrumb .sep {
  transform: scaleX(-1);
  display: inline-block;
}