/* ===============================================================
   FORTIHOST — RTL OVERRIDES
   Loaded only on /ar/ pages (via base template, when lang == "ar").
   Fixes directional CSS that the page blocks defined for LTR:
     - entry animations that slide in from the wrong side
     - decorative underline positions
     - any left/right offsets that should mirror
   Layout flow (text/image order) is handled automatically by the
   browser's RTL flex reversal — we only correct the polish here.
   =============================================================== */

/* ---- Hero: image slides in from the correct side ---- */
[dir="rtl"] .fh-hero-image {
  transform: translateX(30px); /* was -30px (LTR) */
}

/* ---- Generic: any element using translateX(-30px) entry anim ---- */
/* Services / About cards that slide from the left should slide from right */
[dir="rtl"] .fh-about-text {
  transform: translateX(30px);
}
[dir="rtl"] .fh-about-image {
  transform: translateX(-30px);
}

/* ---- Underline accents anchored left should anchor right in RTL ---- */
[dir="rtl"] .fh-underline-animate::after,
[dir="rtl"] .fh-boost-highlight::after {
  left: auto;
  right: 0;
}

/* ---- Carousel fade edges: swap gradient directions for RTL ---- */
[dir="rtl"] .fh-services-carousel::before {
  left: auto;
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}
[dir="rtl"] .fh-services-carousel::after {
  right: auto;
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

/* ---- Footer nav chevrons already handled in footer.html via [dir] ---- */

/* ---- Ensure body text aligns right on Arabic pages by default ---- */
[dir="rtl"] .fh-website-main {
  text-align: right;
}
/* …but keep centered sections centered */
[dir="rtl"] .fh-website-main [style*="text-align:center"],
[dir="rtl"] .fh-website-main .fh-boost-inner,
[dir="rtl"] .fh-website-main [class*="hero-buttons"] {
  text-align: center;
}

/* ---- Footer nav chevrons point toward text direction in RTL ---- */
[dir="rtl"] .fh-footer-nav-icon {
  transform: scaleX(-1);
}