/* ============================================================
   RTL OVERRIDES — Al Najm Al Thaqib
   ============================================================
   Applied when TranslatePress switches to Arabic.
   Body classes: .lang-ar .rtl
   HTML attributes: dir="rtl" lang="ar"

   RULES:
     - Arabic font: var(--font-ar)
     - text-align: right (NEVER justify — creates ugly word gaps)
     - No letter-spacing on Arabic (breaks connected letterforms)
     - Animations mirror slide directions
     - Component accent bars flip sides
     - Arrow icons rotate 180deg
   ============================================================ */


/* ─────────────────────────────────────────────
   1. BASE DIRECTION & FONT
   Applied to full page when Arabic is active.
   ───────────────────────────────────────────── */

body.rtl,
body.lang-ar {
  direction: rtl;
  font-family: var(--font-ar);
  text-align: right;
}

/* Ensure all descendants inherit direction */
body.rtl *,
body.lang-ar * {
  text-align: inherit;
}

/* Headings in Arabic */
body.rtl h1, body.rtl h2, body.rtl h3,
body.rtl h4, body.rtl h5, body.rtl h6,
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar h4, body.lang-ar h5, body.lang-ar h6 {
  font-family: var(--font-ar);
  letter-spacing: 0;  /* NEVER add letter-spacing to Arabic */
}

/* Paragraphs — looser leading for Arabic readability */
body.rtl p,
body.lang-ar p {
  line-height: var(--leading-loose);
  text-align: right;
}

/* Override centered elements to stay centered */
body.rtl .scene-label,
body.rtl .scene-heading,
body.rtl .section-subtitle,
body.lang-ar .scene-label,
body.lang-ar .scene-heading,
body.lang-ar .section-subtitle {
  text-align: center;
}


/* ─────────────────────────────────────────────
   2. NAVIGATION (RTL)
   Menu order reverses. Logo to right. CTA to left.
   ───────────────────────────────────────────── */

body.rtl .site-header {
  direction: rtl;
}

body.rtl .site-header .nav-menu,
body.rtl .site-header nav {
  flex-direction: row-reverse;
}

/* Logo container moves to the right */
body.rtl .site-header .site-branding,
body.rtl .site-header .custom-logo-link {
  margin-left: auto;
  margin-right: 0;
}

/* Nav CTA moves to the left end */
body.rtl .nav-cta {
  margin-right: auto;
  margin-left: 0;
}

/* Hamburger button flips to left side on mobile */
body.rtl .nav-hamburger {
  left: var(--space-4);
  right: auto;
}

/* Language toggle stays accessible */
body.rtl .lang-toggle {
  margin-left: 0;
  margin-right: var(--space-3);
}

/* Mobile overlay menu — text alignment */
body.rtl .nav-overlay {
  direction: rtl;
  text-align: right;
}


/* ─────────────────────────────────────────────
   3. SERVICE CARDS (RTL)
   Accent bar moves to right side.
   Border-radius flips.
   ───────────────────────────────────────────── */

body.rtl .service-card {
  text-align: right;
}

/* Accent bar: left → right */
body.rtl .service-card::before {
  left: auto;
  right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Icon aligns to the right */
body.rtl .service-icon {
  justify-content: flex-end;
}

/* Service link arrow flips */
body.rtl .service-link {
  flex-direction: row-reverse;
}

body.rtl .service-link svg {
  transform: rotate(180deg);
}

body.rtl .service-link:hover svg {
  transform: rotate(180deg) translateX(3px);
}

/* Service title Arabic — becomes primary in RTL */
body.rtl .service-title-ar {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--najm-ink);
}

body.rtl .service-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--najm-muted);
}


/* ─────────────────────────────────────────────
   4. HERO SECTION (RTL)
   Text alignment + CTA direction.
   ───────────────────────────────────────────── */

body.rtl .hero-content {
  text-align: right;
}

body.rtl .hero-headline {
  text-align: right;
  direction: rtl;
}

body.rtl .hero-headline .word {
  margin-right: 0;
  margin-left: 0.25em;
}

body.rtl .hero-tagline-en {
  text-align: right;
}

body.rtl .hero-tagline-ar {
  text-align: right;
}

/* CTA row reverses — Arabic primary CTA should be rightmost */
body.rtl .hero-cta {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* Hero CTA arrow in primary button flips */
body.rtl .hero-cta .btn-primary svg {
  transform: rotate(180deg);
}


/* ─────────────────────────────────────────────
   5. STATS BAR (RTL)
   Grid direction reverses. Dividers stay correct.
   ───────────────────────────────────────────── */

body.rtl .stats-bar {
  direction: rtl;
}

body.rtl .stat-item {
  text-align: center;
}

body.rtl .stat-item .stat-label {
  /* Arabic labels — use Arabic font, no letter-spacing */
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* Numbers always use English font even in RTL */
body.rtl .stat-item .stat-number {
  font-family: var(--font-en);
  direction: ltr;
  display: inline-block;
}


/* ─────────────────────────────────────────────
   6. METHODOLOGY TIMELINE (RTL)
   Timeline flows right-to-left on desktop.
   Connector lines flip sides on mobile.
   Step numbers on right side.
   ───────────────────────────────────────────── */

body.rtl .methodology-timeline {
  direction: rtl;
}

body.rtl .methodology-step {
  text-align: center;
}

/* Desktop: connector line flips direction */
body.rtl .methodology-step .step-connector {
  left: auto;
  right: calc(50% + 24px);
  left: calc(-50% + 24px);
}

/* Mobile: vertical timeline — connector on right, content on left */
@media (max-width: 1024px) {
  body.rtl .methodology-step {
    flex-direction: row-reverse;
    text-align: right;
  }

  body.rtl .methodology-step .step-connector {
    left: auto;
    right: 24px;
    width: 1px;
    height: calc(100% + var(--space-8));
  }

  body.rtl .step-content {
    text-align: right;
  }
}

body.rtl .step-subtitle {
  letter-spacing: 0;  /* No letter-spacing on Arabic */
  font-family: var(--font-ar);
}

body.rtl .step-description {
  text-align: center;
}

@media (max-width: 1024px) {
  body.rtl .step-description {
    text-align: right;
  }
}


/* ─────────────────────────────────────────────
   7. SCROLL INDICATOR (RTL)
   Stays centered — no flip needed.
   Text uses Arabic label.
   ───────────────────────────────────────────── */

body.rtl .scroll-indicator {
  /* Stays centered (left: 50%, transform: translateX(-50%)) */
  /* No positional flip needed */
}

body.rtl .scroll-indicator-text {
  font-family: var(--font-ar);
  letter-spacing: 0;
}


/* ─────────────────────────────────────────────
   8. BUTTONS & LINKS — Arrow Icons Flip (RTL)
   All directional arrows rotate 180deg.
   ───────────────────────────────────────────── */

/* Primary button arrow */
body.rtl .btn-primary svg {
  transform: rotate(180deg);
}

/* Ghost button arrow */
body.rtl .btn-ghost svg,
body.rtl .btn-ghost-light svg {
  transform: rotate(180deg);
}

/* CTA section buttons */
body.rtl .cta-actions {
  flex-direction: row-reverse;
}

body.rtl .cta-headline-ar {
  /* Already RTL — but ensure it's primary in Arabic mode */
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--najm-white);
}

body.rtl .cta-headline {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--najm-silver-shine);
}

body.rtl .cta-description {
  text-align: right;
}

body.rtl .cta-trust {
  text-align: center;
}


/* ─────────────────────────────────────────────
   QUOTE SECTION (RTL)
   Arabic quote becomes primary. Attribution flips.
   ───────────────────────────────────────────── */

body.rtl .quote-container {
  text-align: center;
}

/* In RTL: Arabic quote is primary (larger), English is secondary */
body.rtl .md-quote-ar p {
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--najm-dark-text);
}

body.rtl .md-quote-en p {
  font-size: var(--text-2xl);
  color: var(--najm-silver-shine);
}

/* Swap visual order: Arabic first, then English */
body.rtl .md-quote-ar {
  order: -1;
  margin-bottom: var(--space-8);
}

body.rtl .md-quote-en {
  order: 0;
  margin-bottom: var(--space-6);
}

/* Attribution in Arabic font */
body.rtl .quote-author {
  font-family: var(--font-ar);
}

body.rtl .quote-org {
  font-family: var(--font-ar);
}

/* Motto — Arabic becomes primary */
body.rtl .motto-ar {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--najm-white);
}

body.rtl .motto-en {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--najm-silver-shine);
}

body.rtl .motto-sub {
  font-family: var(--font-ar);
  letter-spacing: 0;
}


/* ─────────────────────────────────────────────
   CLIENTS SECTION (RTL)
   Marquee stays the same — scrolls both directions already.
   ───────────────────────────────────────────── */

body.rtl .section-clients {
  direction: rtl;
}

/* Marquee is direction-agnostic, no changes needed */


/* ─────────────────────────────────────────────
   FOOTER (RTL)
   ───────────────────────────────────────────── */

body.rtl .site-footer {
  direction: rtl;
  text-align: right;
}

body.rtl .site-footer a {
  font-family: var(--font-ar);
}