/* ============================================================
   Al Qutad LLC — Arabic / RTL layer
   Loads after main.css. Only overrides what direction and the
   Arabic script actually require; every other token is shared,
   so both languages stay one design system.
   ============================================================ */

:root {
  /* Arabic text needs a touch more leading than Barlow's Latin */
  --line-body: 1.9;
  --line-head: 1.35;
}

body[dir="rtl"] {
  font-family: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  line-height: var(--line-body);
  font-size: 17px;
}

/* Arabic is a connected script: tracking breaks the joins.
   Reset every negative/positive letter-spacing inherited from the
   Latin scale, and give headings back some leading. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  letter-spacing: 0;
  line-height: var(--line-head);
  font-weight: 700;
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-kicker,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .proj-tag,
[dir="rtl"] .loc-card .loc-hq,
[dir="rtl"] .stat-value {
  letter-spacing: 0;
}

/* The wordmark tagline stays Latin — keep its original tracking.
   It also needs its own LTR context, or bidi resolves the trailing
   period as neutral and flips it to the visual left. */
[dir="rtl"] .brand-tag {
  letter-spacing: 0.28em;
  font-family: "Barlow", sans-serif;
  direction: ltr;
  text-align: right;
}
[dir="rtl"] .brand-name {
  letter-spacing: 0;
  font-size: 19px;
}

/* Numerals read left-to-right inside Arabic sentences. The LTR context is
   only for digit order — the block itself must still sit on the right, so
   `start` (which would resolve to left here) is overridden explicitly. */
[dir="rtl"] .stat-value {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Directional icons: arrows must point the way reading travels */
[dir="rtl"] .btn svg,
[dir="rtl"] .text-link svg {
  scale: -1 1;
}
[dir="rtl"] .btn:hover svg,
[dir="rtl"] .text-link:hover svg {
  translate: -3px 0;
}
/* Non-directional icons (pin, globe, shield, mail) must not flip */
[dir="rtl"] .loc-card h3 svg,
[dir="rtl"] .contact-list svg,
[dir="rtl"] .pillar svg {
  scale: 1 1;
}

/* The kicker rule sits on the reading-start side automatically
   via flex, but the em dash needs no mirroring — nothing to do. */

[dir="rtl"] .skip-link {
  left: auto;
  right: 16px;
}

/* Section numbering in the capability eyebrows reads LTR */
[dir="rtl"] .cap-index {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Arabic runs slightly larger at small sizes to stay legible */
@media (max-width: 560px) {
  body[dir="rtl"] { font-size: 16.5px; }
}