/* ==========================================================================
   Arabic / RTL layer — load AFTER css/styles.css on pages with dir="rtl".
   Only the things direction cannot flip on its own live here.
   ========================================================================== */

:root {
  /* Arabic type: Noto Kufi Arabic carries the display voice, Noto Sans Arabic
     the body copy. Latin fragments (numbers, e-mail) fall back to Saira. */
  --font-core: "Noto Sans Arabic", "Saira", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Noto Kufi Arabic", "Saira Condensed", "Saira", Tahoma, sans-serif;

  /* Arabic display type has no uppercase and taller ascenders — it needs a
     slightly smaller headline scale and more line height than the Latin set. */
  --size-hero: 4.5rem;
  --size-section: 2.75rem;
  --size-subsection: 2.125rem;
}

/* No uppercasing or letter-spacing in Arabic — both break the script. */
.eyebrow,
.heading-section,
.heading-sub,
.hero__title,
.card-title,
.menu-column h2,
.menu-column a,
.footer-col h2,
.footer-legal p,
.note,
.caption,
.badge,
.btn,
.menu-button,
.lang-link,
.tab,
.field label,
.spec-table th,
.panel-label,
.client-tile span,
.city-tile,
.stat__label,
.text-link,
.logo-tile {
  text-transform: none;
  letter-spacing: 0;
}

.hero__title { line-height: 1.15; }
.heading-section { line-height: 1.3; }
.heading-sub,
.card-title { line-height: 1.35; }

/* Latin runs inside Arabic text (phone numbers, e-mail, brand names). */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Dividers and rules that were pinned to one physical side. */
.stat + .stat { border-left: 0; border-right: 1px solid var(--border-divider); }
.spec-table th,
.spec-table td { text-align: right; }

/* Arrow glyphs point the other way in RTL. */
.text-link .icon svg,
.btn .icon svg { transform: scaleX(-1); }

/* The logo rail reads right-to-left. In RTL the track is right-aligned, so it
   needs its own positive-direction keyframes — reversing the LTR ones would
   slide the tiles out of view. */
.client-marquee__track {
  animation-name: client-scroll-rtl;
  animation-direction: normal;
}
@keyframes client-scroll-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* Floating WhatsApp button moves to the left edge; its label to the right. */
.wa-fab { right: auto; left: var(--section-x); }
.wa-fab__label { right: auto; left: calc(100% + var(--space-12)); }

@media (max-width: 1024px) {
  :root {
    --size-hero: 3rem;
    --size-section: 2.125rem;
    --size-subsection: 1.75rem;
  }
}

@media (max-width: 640px) {
  :root {
    --size-hero: 2.125rem;
    --size-section: 1.625rem;
    --size-subsection: 1.375rem;
  }
  .stat + .stat { border-right: 0; border-top: 1px solid var(--border-divider); }
}