/* ==========================================================================
   Clovantis — rtl.css
   Arabic / right-to-left overrides.
   The layout itself is built on CSS logical properties, so this file only
   corrects what genuinely differs: the script, its metrics, and the handful
   of physical transforms used for motion.
   ========================================================================== */

:root[dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-sans: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --measure: 62ch;
}

/* Arabic needs more leading and no negative tracking */
:root[dir="rtl"] body {
  line-height: 1.85;
  letter-spacing: 0;
  font-weight: 400;
}
:root[dir="rtl"] h1,
:root[dir="rtl"] h2,
:root[dir="rtl"] h3,
:root[dir="rtl"] h4,
:root[dir="rtl"] .display,
:root[dir="rtl"] .num,
:root[dir="rtl"] .stat__value,
:root[dir="rtl"] .hero__title,
:root[dir="rtl"] .nf__code,
:root[dir="rtl"] .footer__watermark {
  letter-spacing: 0;
  line-height: 1.32;
  font-weight: 600;
}
:root[dir="rtl"] .hero__title { line-height: 1.28; font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.4rem); }
:root[dir="rtl"] .display-xl { font-size: clamp(2.6rem, 1.4rem + 6vw, 6rem); }
:root[dir="rtl"] .footer__watermark { font-size: clamp(3rem, 1rem + 12vw, 11rem); line-height: 1.1; }
:root[dir="rtl"] .nf__code { line-height: 1.1; }

/* Italics do not exist in Arabic typography — render them upright and accented */
:root[dir="rtl"] .italic,
:root[dir="rtl"] em,
:root[dir="rtl"] .svc__claim,
:root[dir="rtl"] .hero__title em {
  font-style: normal;
  font-weight: 600;
}

/* Uppercase/letterspacing tricks are latin-only */
:root[dir="rtl"] .eyebrow,
:root[dir="rtl"] .pill,
:root[dir="rtl"] .crumbs,
:root[dir="rtl"] .scroll-cue,
:root[dir="rtl"] .footer__col h5,
:root[dir="rtl"] .map__col h4,
:root[dir="rtl"] .hero__meta span,
:root[dir="rtl"] .eng__tag span,
:root[dir="rtl"] .stat__label,
:root[dir="rtl"] .post__meta,
:root[dir="rtl"] .info-item b,
:root[dir="rtl"] .path__out b {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step--1);
}

/* Latin-only decorative numerals stay LTR so "01" does not flip */
:root[dir="rtl"] .path__num,
:root[dir="rtl"] .svc__no,
:root[dir="rtl"] .principle > i,
:root[dir="rtl"] .drawer__link i,
:root[dir="rtl"] .path__index li i {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
}

/* Mixed-direction content (emails, phone numbers, URLs) */
:root[dir="rtl"] .ltr,
:root[dir="rtl"] a[href^="mailto:"],
:root[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Brand lockup always reads left-to-right */
:root[dir="rtl"] .brand { direction: ltr; }

/* Motion fixes — these use physical axes by necessity */
:root[dir="rtl"] .eyebrow::before { background: linear-gradient(270deg, var(--accent), transparent); }
:root[dir="rtl"] .rule { background: linear-gradient(270deg, transparent, var(--hairline-loud) 22%, var(--hairline-loud) 78%, transparent); }
:root[dir="rtl"] .progress { transform-origin: right center; }
:root[dir="rtl"] .cta__beam { animation-name: beam-rtl; inset-inline-start: auto; inset-inline-end: 0; }
@keyframes beam-rtl { 0%, 100% { transform: translateX(30%); opacity: 0; } 50% { transform: translateX(-230%); opacity: 1; } }
:root[dir="rtl"] .marquee {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent);
}

/* Arcs and corridor diagram mirror as a whole */
:root[dir="rtl"] .corridor svg,
:root[dir="rtl"] .map__arcs svg { transform: scaleX(-1); }
:root[dir="rtl"] .corridor text,
:root[dir="rtl"] .map__arcs text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* Form select caret already handled in components.css */
:root[dir="rtl"] .eng__tag { text-align: start; }
:root[dir="rtl"] .ledger__row dd { text-align: start; }
:root[dir="rtl"] .mkt small { margin-inline-start: auto; }