/* ═══════════════════════════════════════
   RTL OVERRIDES — Arabic Layout
   ═══════════════════════════════════════ */

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

/* ── Navigation ── */
[dir="rtl"] .nav__link::after {
  left: auto;
  right: 0;
}

/* ── Hero ── */
[dir="rtl"] .hero__content {
  text-align: right !important;
}

[dir="rtl"] .hero__subtitle {
  text-align: right !important;
  margin-inline: 0 !important;
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .hero__actions {
  justify-content: flex-start;
}

[dir="rtl"] .hero__label,
[dir="rtl"] .label {
  text-align: right;
}

/* ── Sections & Content ── */
[dir="rtl"] .section h2,
[dir="rtl"] .section h3,
[dir="rtl"] .section p {
  text-align: right;
}

[dir="rtl"] .section > .container > div[style*="text-align: center"] {
  text-align: right !important;
}

[dir="rtl"] .reveal {
  text-align: right;
}

/* ── Grid & Cards ── */
[dir="rtl"] .grid {
  direction: rtl;
}

[dir="rtl"] .card {
  text-align: right;
}

[dir="rtl"] .card__title,
[dir="rtl"] .card__text {
  text-align: right;
}

[dir="rtl"] .brand-card__link {
  flex-direction: row-reverse;
}

/* ── Stats ── */
[dir="rtl"] .stats {
  direction: rtl;
}

/* ── Timeline ── */
[dir="rtl"] .timeline {
  padding-left: 0;
  padding-right: var(--space-xl);
}

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

[dir="rtl"] .timeline__item::before {
  left: auto;
  right: calc(-1 * var(--space-xl) - 5px);
}

/* ── Forms ── */
[dir="rtl"] .form-select {
  background-position: left 1rem center;
  padding-right: 1rem;
  padding-left: 2.5rem;
}

[dir="rtl"] .form-label {
  text-align: right;
}

[dir="rtl"] .form-input,
[dir="rtl"] .form-textarea,
[dir="rtl"] .form-select {
  text-align: right;
}

/* ── Footer ── */
[dir="rtl"] .footer__grid {
  direction: rtl;
}

[dir="rtl"] .footer__heading {
  text-align: right;
}

[dir="rtl"] .footer__link {
  text-align: right;
}

[dir="rtl"] .footer__bottom {
  text-align: right;
}

[dir="rtl"] .footer__brand-text {
  text-align: right;
}

/* ── Buttons ── */
[dir="rtl"] .btn svg {
  margin-right: 0;
  margin-left: 0.25rem;
  transform: scaleX(-1);
}

/* ── News ── */
[dir="rtl"] .news-card__content {
  text-align: right;
}

[dir="rtl"] .news-card__meta {
  text-align: right;
}

[dir="rtl"] .job-card__meta {
  flex-direction: row-reverse;
}

/* ── Newsletter popup ── */
[dir="rtl"] .newsletter-popup {
  right: auto;
  left: var(--space-lg);
}

/* ── Map Hero (index) ── */
[dir="rtl"] .map-hero__text {
  text-align: right !important;
}

[dir="rtl"] .map-hero__content {
  direction: rtl;
}

[dir="rtl"] .map-hero__text h1,
[dir="rtl"] .map-hero__text p,
[dir="rtl"] .map-hero__eyebrow {
  text-align: right !important;
}

[dir="rtl"] .map-hero__actions {
  justify-content: flex-start !important;
}

/* ── Split sections ── */
[dir="rtl"] .split {
  direction: rtl;
}

[dir="rtl"] .split__text {
  text-align: right !important;
}

/* ── Brand showcase ── */
[dir="rtl"] .brand-showcase__text {
  text-align: right !important;
}

[dir="rtl"] .brand-showcase__text h2,
[dir="rtl"] .brand-showcase__text p {
  text-align: right !important;
}

/* ── CTA section ── */
[dir="rtl"] .cta-immersive {
  text-align: right !important;
}

[dir="rtl"] .cta-immersive h2,
[dir="rtl"] .cta-immersive p {
  text-align: right !important;
}

/* ── News strip ── */
[dir="rtl"] .news-strip__card {
  text-align: right;
}

/* ── Product cards ── */
[dir="rtl"] .product-card {
  text-align: right;
}

/* ── Certifications ── */
[dir="rtl"] .cert-card {
  text-align: right;
}

/* ── Filter tags ── */
[dir="rtl"] .filter-tags {
  direction: rtl;
}

/* ── Accessibility ── */
[dir="rtl"] .skip-link {
  right: 0;
  left: auto;
}

/* ── Mobile overrides ── */
@media (max-width: 480px) {
  [dir="rtl"] .newsletter-popup {
    left: 0;
  }
}

@media (max-width: 1024px) {
  [dir="rtl"] .nav__links {
    right: auto;
    left: -100%;
    transition: left var(--transition-base);
    overflow: hidden;
  }

  [dir="rtl"] .nav__links.is-open {
    left: 0;
    right: auto;
  }
}

/* Retail marquee — reverse travel so it reads naturally in RTL */
[dir="rtl"] .clients__row { animation-direction: reverse; }
[dir="rtl"] .clients__row--reverse { animation-direction: normal; }

/* ═══════════════════════════════════════════════════════
   Arabic typography — letter-spacing
   Arabic script is cursive: letters join to their neighbours. Any tracking,
   whether the wide 0.2em on .label or the tight negative tracking on display
   headings, breaks those joins and renders words as disconnected glyphs.
   Latin tracking must never reach Arabic text.

   !important is deliberate here — several elements carry inline
   letter-spacing, which a normal rule cannot override.
   ═══════════════════════════════════════════════════════ */

[dir="rtl"],
[dir="rtl"] *:not(.latin) {
  letter-spacing: normal !important;
}

/* Uppercase has no meaning in Arabic script. */
[dir="rtl"] .label,
[dir="rtl"] .hero__label,
[dir="rtl"] .brand-card__badge,
[dir="rtl"] .btn {
  text-transform: none;
}

/* Opt-out for Latin words inside Arabic pages (brand names, ISO, SKUs):
   add class="latin" to keep their intended tracking. */
.latin {
  letter-spacing: 0.1em;
}
