/* ============================================================
   NORDEX AUTOSERVICES — RTL / ARABIC OVERRIDES
   Applied only on ar.html via <link rel="stylesheet" href="css/rtl.css">
   ============================================================ */

/* ---- Arabic Font System ---------------------------------- */
body {
  font-family: var(--font-ar);
  font-weight: 400;
}

/* Override English-specific fonts everywhere */
.hero-label,
.hero-headline,
.section-eyebrow,
.section-heading,
.service-title,
.pillar-title,
.stat-label,
.stat-suffix,
.hours-day,
.nav-cta,
.btn-primary,
.btn-secondary,
.whatsapp-link,
.cta-tagline,
.nav-lang,
.footer-lang,
.marquee-text,
.pillar-number,
.gallery-caption-title,
.parts-hook,
.step-text strong,
.loader-label {
  font-family: var(--font-ar);
}

.hero-agitate,
.hero-solution,
.section-sub,
.service-body,
.usp-before,
.usp-after,
.usp-bridge,
.pillar-body,
.parts-body,
.step-text,
.gallery-caption-sub,
.address-text,
.hours-time,
.cta-sub,
.footer-legal,
.footer-copy {
  font-family: var(--font-ar);
  font-weight: 300;
  letter-spacing: 0;
}

/* ---- Remove letter-spacing from Arabic elements ---------- */
/* Arabic doesn't use letter-spacing */
.hero-label,
.section-eyebrow,
.service-title,
.pillar-number,
.pillar-title,
.stat-label,
.hours-day,
.gallery-caption-title,
.nav-links a,
.nav-lang,
.nav-cta,
.btn-primary,
.whatsapp-link,
.footer-lang {
  letter-spacing: 0;
}

/* Hero headline — slightly larger for Arabic readability */
.hero-headline { font-size: clamp(3rem, 6.5vw, 6rem); }

/* Fix: Cairo font glyphs are tall and get clipped by overflow:hidden */
.hero-headline .word { overflow: visible; }
.hero-headline .word-inner { transform: none; display: inline; }

/* ---- Navigation RTL flip --------------------------------- */
.site-nav {
  flex-direction: row-reverse;
}
.nav-right {
  flex-direction: row-reverse;
}

/* ---- Hero content RTL ------------------------------------ */
.hero-content {
  align-items: flex-start;  /* flex-start = RIGHT in RTL column flex */
  text-align: right;
  padding: 0 64px;
}

.hero-agitate,
.hero-solution { text-align: right; }

/* No flex-direction override needed — dir="rtl" handles button order natively */

/* Scroll indicator stays centered — no change needed */

/* ---- Section header RTL ---------------------------------- */
.section-header { text-align: right; }
.section-header .section-sub { text-align: right; margin-left: auto; margin-right: 0; }

.red-line { margin-left: auto; margin-right: 0; }

/* ---- Service cards RTL ----------------------------------- */
.service-card { text-align: right; }

/* ---- USP Section RTL ------------------------------------- */
.usp-intro { text-align: right; margin-left: auto; margin-right: 0; }
.usp-bridge { text-align: right; }

/* ---- Parts Section RTL ----------------------------------- */
#parts::before {
  left: auto;
  right: 0;
}

.parts-inner {
  direction: rtl;
}

.parts-content { text-align: right; }
.parts-hook { text-align: right; }
.parts-body { text-align: right; }

.parts-step {
  flex-direction: row-reverse;
  text-align: right;
}

.parts-cta-wrap {
  align-items: flex-end;
}

/* ---- Location RTL ---------------------------------------- */
.location-inner { direction: rtl; }

.location-address {
  flex-direction: row-reverse;
  text-align: right;
}

.hours-row { flex-direction: row-reverse; }
.hours-time { text-align: left; }

/* ---- Gallery RTL ----------------------------------------- */
.gallery-caption { text-align: right; }

/* ---- Footer RTL ------------------------------------------ */
.footer-top { flex-direction: row-reverse; }
.footer-bottom { flex-direction: row-reverse; }
.footer-legal { text-align: right; }

/* ---- Stats RTL ------------------------------------------- */
.stat-item { text-align: right; }
.stat-value-wrap { flex-direction: row-reverse; justify-content: flex-end; }

/* ---- CTA Banner RTL -------------------------------------- */
#cta-banner { text-align: right; }
.cta-actions { flex-direction: row-reverse; justify-content: flex-end; }

/* ---- Arabic Typography Refinements ----------------------- */

/* Slightly increased line height for Arabic readability */
.hero-agitate,
.hero-solution,
.service-body,
.usp-before,
.usp-after,
.pillar-body,
.parts-body,
.step-text,
.address-text {
  line-height: 1.85;
}

/* Arabic display text heavier weight for visual parity with bold Latin */
.hero-headline { font-weight: 800; }
.section-heading { font-weight: 700; }
.service-title { font-weight: 700; }
.pillar-title { font-weight: 700; }
.parts-hook { font-weight: 800; }
.cta-tagline { font-weight: 800; }

/* Usp bridge Arabic */
.usp-bridge { text-align: right; }

/* ---- Mobile RTL adjustments ------------------------------ */
@media (max-width: 768px) {
  /* Center everything on mobile — same as LTR */
  .hero-content { align-items: center; padding: 0 24px; text-align: center; }
  .hero-agitate, .hero-solution { text-align: center; }
  .hero-cta-wrap { align-items: center; }
  .btn-primary, .btn-secondary { justify-content: center; text-align: center; }

  .nav-hamburger { order: -1; }

  .section-header { text-align: center; }
  .usp-intro { text-align: center; }
  .usp-before, .usp-after, .usp-bridge { text-align: center; }
  .usp-pillar { text-align: center; }
  .service-card { text-align: center; }
  .stat-value-wrap { flex-direction: row-reverse; justify-content: center; }

  .cta-actions { align-items: stretch; }

  .footer-top { align-items: center; text-align: center; }
  .footer-bottom { align-items: center; }
  .footer-legal { text-align: center; width: 100%; }
  .footer-socials { justify-content: center; }

  /* Floating WA — left side in Arabic/RTL */
  .float-wa { right: auto; left: 20px; }
}