/* ================================================
   WAQTAK RTL / ARABIC STYLESHEET
   waqtak-styles-rtl.css

   Load AFTER waqtak-styles.css on Arabic pages.
   Arabic pages must also have: <html lang="ar" dir="rtl">

   This file only overrides directional properties.
   All colors, spacing, and visual design remain identical.
   ================================================ */


/* ===== BASE DIRECTION ===== */
body {
  font-family: 'Almarai', sans-serif;
  direction: rtl;
  text-align: right;
}


/* ================================================
   NAVIGATION
   ================================================ */

/* Nav CTA: was margin-left → flip to margin-right */
.nav-cta {
  margin-left: 0;
  margin-right: 8px;
}

/* Hamburger spans: flip from left to right anchor */
.hamburger span {
  left: auto;
  right: 7px;
}

/* Mobile menu: in LTR it slides from right (translateX 100%)
   In RTL, slide from left (translateX -100%) */
.mobile-menu {
  transform: translateX(-100%);
}
.mobile-menu.open {
  transform: translateX(0);
}

/* Mobile menu inner text direction */
.mm-toggle {
  direction: rtl;
}

/* Mega dropdown: keep centred positioning intact */
/* No change needed — left:50% + translateX(-50%) centres correctly */


/* ================================================
   BUTTONS — Flip directional arrow icons
   ================================================ */

/* Flip all right-pointing arrows to point left */
.btn-direct i.fa-arrow-right,
.btn-trans i.fa-arrow-right,
.btn-trans-light i.fa-arrow-right,
.mm-cta a i.fa-arrow-right,
.ind-link i.fa-arrow-right,
.hero-buttons a i.fa-arrow-right {
  transform: scaleX(-1);
  display: inline-block;
}


/* ================================================
   HERO
   ================================================ */

/* Hero glow: mirror from right to left */
.hero::before {
  right: auto;
  left: -10%;
}

/* Hero sub and one-liner text naturally align right — fine */
/* Hero breadcrumb — naturally aligns right in RTL */


/* ================================================
   EMPATHY SECTION (Homepage)
   Flip the left border/padding accent to the right
   ================================================ */
.emp-quote {
  padding-left: 0;
  padding-right: 24px;
  border-left: none;
  border-right: 4px solid var(--cyan);
}


/* ================================================
   FEATURES SECTION — Alternating rows
   In LTR: row 1 = image-left/content-right
           row.rev = image-right/content-left (via direction:rtl)
   In RTL: row 1 = image-right/content-left (natural)
           row.rev should flip back = image-left/content-right (via direction:ltr)
   ================================================ */
.feat-row.rev {
  direction: ltr;
}
.feat-row.rev > * {
  direction: rtl;
  text-align: right;
}


/* ================================================
   PLAN SECTION — Steps connecting line
   Flip gradient direction for RTL reading flow
   ================================================ */
.steps::before {
  background: linear-gradient(270deg, var(--cyan), var(--mint), var(--teal));
}


/* ================================================
   SUCCESS SECTION — Before/After transform arrow
   ================================================ */
.tf-arrow i.fa-arrow-right {
  transform: scaleX(-1);
  display: inline-block;
}


/* ================================================
   TESTIMONIAL — Opening quote mark position
   In LTR: mark sits at left:0 (start of text)
   In RTL: mark should sit at right:0 (start of RTL text)
   ================================================ */
.test-quote::before {
  left: auto;
  right: 0;
}


/* ================================================
   FOOTER
   ================================================ */

/* Footer brand tagline max-width — keep, direction handles alignment */
.footer-brand p {
  text-align: right;
}

/* Footer bottom: justify-content:space-between auto-reverses in RTL — fine */

/* Footer column headings and links align right naturally */


/* ================================================
   RESPONSIVE — Tablet (≤1024px)
   ================================================ */
@media (max-width: 1024px) {
  /* Reset feat-row.rev to normal RTL when stacked */
  .feat-row.rev {
    direction: rtl;
  }
  .feat-row.rev > * {
    direction: rtl;
    text-align: right;
  }

  /* Transformation arrow: was rotate(90deg) in LTR tablet
     In RTL we want it pointing down the same way */
  .tf-arrow {
    transform: rotate(90deg);
  }
  .tf-arrow i.fa-arrow-right {
    transform: none; /* rotation handles direction */
  }
}


/* ================================================
   RESPONSIVE — Mobile (≤768px)
   ================================================ */
@media (max-width: 768px) {
  /* Mobile nav padding flip */
  .nav {
    padding: 0 24px;
  }

  /* On mobile, feat-row.rev direction is irrelevant (stacks to 1 col) */
  .feat-row.rev {
    direction: rtl;
  }
  .feat-row.rev > * {
    direction: rtl;
    text-align: right;
  }

  /* Ensure button arrows still flip correctly on mobile */
  .btn-direct i.fa-arrow-right,
  .ind-link i.fa-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
  }
}


/* ================================================
   UTILITY — Any element that needs a left border
   flipped to right border in RTL contexts
   ================================================ */

/* Authority bar text — centered, no change needed */
/* Stats — centered, no change needed */
/* Problem cards — centered cards, no change needed */
/* Plan steps — centered layout, no change needed */