/* ═══════════════════════════════════════════════════════════════
   RTL (Right-to-Left) Overrides for Arabic Language
   ═══════════════════════════════════════════════════════════════ */

/* Base direction */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Flex layouts — reverse direction */
[dir="rtl"] .header__inner,
[dir="rtl"] .nav__menu,
[dir="rtl"] .hero__scope,
[dir="rtl"] .hero__actions,
[dir="rtl"] .hero__features,
[dir="rtl"] .footer__legal,
[dir="rtl"] .experience__logos,
[dir="rtl"] .experience__regions {
  flex-direction: row-reverse;
}

/* Logo — keep on right side */
[dir="rtl"] .logo {
  order: 2;
}
[dir="rtl"] .nav {
  order: 1;
}

/* Navigation alignment */
[dir="rtl"] .nav__menu {
  margin-right: 0;
  margin-left: auto;
}

/* Mega menu — mirror position */
[dir="rtl"] .megamenu {
  right: auto;
  left: 0;
}

/* Grid — keep LTR for visual consistency but mirror text */
[dir="rtl"] .footer__inner {
  direction: rtl;
}

/* Buttons — mirror icons */
[dir="rtl"] .btn svg,
[dir="rtl"] .hero__feature svg,
[dir="rtl"] .approach__icon {
  transform: scaleX(-1);
}

/* Approach diagram */
[dir="rtl"] .approach__visual {
  direction: rtl;
}

/* Contact info — align right */
[dir="rtl"] .cta__contacts {
  text-align: right;
}

/* Form labels */
[dir="rtl"] .form__label,
[dir="rtl"] .form__input,
[dir="rtl"] .form__textarea {
  text-align: right;
}

/* Mobile nav */
[dir="rtl"] .nav__mobile {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
[dir="rtl"] .nav__mobile.nav__mobile--open {
  transform: translateX(0);
}

/* Footer bottom */
[dir="rtl"] .footer__bottom {
  flex-direction: row-reverse;
}

/* Letter spacing — reduce for Arabic */
[dir="rtl"] .hero__badge,
[dir="rtl"] .section__eyebrow,
[dir="rtl"] .footer__column-title {
  letter-spacing: 0;
}

/* Pillar cards — mirror number */
[dir="rtl"] .pillar__number {
  right: auto;
  left: var(--space-lg);
}

/* Stats grid — keep centered */
[dir="rtl"] .hero__stats,
[dir="rtl"] .team__stats {
  direction: rtl;
}

/* Blog cards — mirror date alignment */
[dir="rtl"] .blog-card__meta {
  text-align: right;
}

/* Responsive RTL overrides */
@media (max-width: 768px) {
  [dir="rtl"] .footer__bottom {
    flex-direction: column;
    align-items: center;
  }

  [dir="rtl"] .nav__mobile {
    right: auto;
    left: 0;
  }

  [dir="rtl"] .hero__content,
  [dir="rtl"] .footer__legal {
    text-align: center;
  }
}