/* ============================================
   DRIVE LINE MOTORS — Arabic / RTL Overrides
   ============================================
   Applied on all Arabic pages via arabic.css
   Overrides font stacks and directional styles.
   ============================================ */

/* ── Arabic Typography ────────────────────── */
[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'DM Sans', Tahoma, Arial, sans-serif;
  letter-spacing: 0; /* Arabic doesn't use letter-spacing */
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .logo-wordmark,
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .page-hero-title,
[dir="rtl"] .footer-logo {
  font-family: 'Noto Serif Arabic', Georgia, serif;
  letter-spacing: 0;
}

[dir="rtl"] .section-label,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .logo-tagline,
[dir="rtl"] .stat-label,
[dir="rtl"] .car-card-brand,
[dir="rtl"] .nav-num,
[dir="rtl"] .btn,
[dir="rtl"] .preorder-btn,
[dir="rtl"] .form-label,
[dir="rtl"] .contact-item-label {
  letter-spacing: 0;
  font-family: 'Noto Sans Arabic', Arial, sans-serif;
}

/* Remove text-transform on Arabic labels (makes no sense in Arabic) */
[dir="rtl"] .section-label,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .logo-tagline,
[dir="rtl"] .stat-label,
[dir="rtl"] .nav-link,
[dir="rtl"] .footer-links a,
[dir="rtl"] .car-card-brand,
[dir="rtl"] .btn,
[dir="rtl"] .preorder-btn,
[dir="rtl"] .form-label,
[dir="rtl"] .contact-item-label {
  text-transform: none;
}

/* ── Navbar RTL ───────────────────────────── */
/* The browser RTL engine flips flex space-between so the last
   DOM child (lang-switcher) ends up on the LEFT and the first
   (hamburger) on the RIGHT — the opposite of English.
   Setting direction:ltr on navbar-inner alone fixes this:
   it locks the flex axis to left-to-right so space-between
   places hamburger on the LEFT and lang-btn on the RIGHT,
   identical to the English layout. The rest of the page
   remains fully RTL. */
[dir="rtl"] .navbar-inner {
  direction: ltr;
}

/* Restore RTL direction for text content inside the navbar
   so Arabic logo text, lang label etc. still render correctly */
[dir="rtl"] .navbar-inner .navbar-logo,
[dir="rtl"] .navbar-inner .lang-btn,
[dir="rtl"] .navbar-inner .lang-dropdown {
  direction: rtl;
}

/* lang-dropdown aligns to right edge of lang-btn */
[dir="rtl"] .lang-dropdown {
  right: 0;
  left: auto;
  text-align: center;
}

/* ── Nav Menu RTL ─────────────────────────── */
/* Menu slides from LEFT to match hamburger position */
[dir="rtl"] .nav-menu {
  left: 0;
  right: auto;
  transform: translateX(-100%);
  border-right: 1px solid var(--c-border);
  border-left: none;
}

[dir="rtl"] .nav-menu.open {
  transform: translateX(0);
}

[dir="rtl"] .nav-links-list a {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-links-list a:hover,
[dir="rtl"] .nav-links-list a.active {
  padding-left: 16px;
  padding-right: 20px;
}

/* ── Hero RTL ─────────────────────────────── */
[dir="rtl"] .hero-title em {
  direction: rtl;
}

/* ── Pre-order button ─────────────────────── */
[dir="rtl"] .preorder-btn {
  right: auto;
  left: var(--space-md);
}

/* ── Scroll to top ────────────────────────── */
[dir="rtl"] .scroll-top {
  left: auto;
  right: var(--space-md);
}

/* ── Contact items ────────────────────────── */
[dir="rtl"] .contact-item {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── Search icon ──────────────────────────── */
[dir="rtl"] .search-icon {
  left: auto;
  right: 14px;
}

[dir="rtl"] .search-input {
  padding: 0 42px 0 16px;
}

/* ── Filter select arrow ──────────────────── */
[dir="rtl"] .filter-select {
  background-position: left 10px center;
  padding: 0 14px 0 32px;
}

/* ── Form select ──────────────────────────── */
[dir="rtl"] .form-select {
  background-position: left 14px center;
  padding-right: 16px;
  padding-left: 36px;
}

/* ── Social links ─────────────────────────── */
[dir="rtl"] .social-link {
  flex-direction: row-reverse;
}

[dir="rtl"] .social-arrow {
  transform: rotate(180deg) translateX(-4px);
}

[dir="rtl"] .social-link:hover .social-arrow {
  transform: rotate(180deg) translateX(0);
}

/* ── Story text left-align fix ────────────── */
[dir="rtl"] .story-text { text-align: right; }
[dir="rtl"] .story-pillars { justify-content: flex-start; }
[dir="rtl"] .divider { margin-right: 0; }

/* ── Card footer ──────────────────────────── */
[dir="rtl"] .car-card-cta {
  flex-direction: row-reverse;
}

/* ── Modal specs ──────────────────────────── */
[dir="rtl"] .modal-footer {
  flex-direction: row-reverse;
}

/* ── Stat units ───────────────────────────── */
[dir="rtl"] .stat-unit {
  font-family: 'Noto Sans Arabic', Arial, sans-serif;
}

/* ── Why grid items ───────────────────────── */
[dir="rtl"] .why-item { text-align: center; }

/* ── Hero actions ─────────────────────────── */
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
[dir="rtl"] .cta-actions { flex-direction: row-reverse; }

/* ── Page hero line ───────────────────────── */
[dir="rtl"] .page-hero-line {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ── Mobile adjustments ───────────────────── */
@media (max-width: 768px) {
  [dir="rtl"] .preorder-btn {
    left: 16px;
    right: auto;
  }
  [dir="rtl"] .scroll-top {
    right: 16px;
    left: auto;
  }
}