@charset "UTF-8";
/* ============================================================================
   RTL LAYER — Arabic only.
   styles.css is written entirely in logical properties (margin-inline,
   padding-inline-start, inset-inline, border-inline-end, text-align: start),
   so direction is handled there for free. This file carries ONLY the genuine
   exceptions: things that are physically directional and cannot flip logically.
   Loaded after styles.css on /ar/ pages.
   ============================================================================ */

/* 1. Physical-direction gradients. `to right` does not flip with dir. */
html[dir='rtl'] .ruled::before {
  background-image:
    repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(to left, var(--rule-soft) 0 1px, transparent 1px 25%);
}
html[dir='rtl'] .plate {
  background-image:
    repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 1.5rem),
    repeating-linear-gradient(to left, var(--rule-soft) 0 1px, transparent 1px 1.5rem);
}

/* 2. transform-origin takes physical keywords. */
html[dir='rtl'] .nav a::after { transform-origin: right; }

/* 3. Icons that point somewhere. Arrows mirror; marks and logos never do. */
html[dir='rtl'] .ico--dir,
html[dir='rtl'] .index-row__go { transform: scaleX(-1); }

/* 4. The hero reads text-first in every language: the fiche follows the words. */
html[dir='rtl'] .hero__grid > *:first-child { grid-column: 1; }

/* 5. Latin-only runs (phone numbers, emails, RC/ICE codes, SHHELP) must stay
      LTR or their digits reorder on screen.

      This is keyed on [data-ltr] ALONE — deliberately not on .num. `.num` is
      typographic (tabular figures) and lands on Arabic prose that happens to
      contain a year; forcing direction there would scramble the sentence.
      tools/build.mjs emits data-ltr only for values with no Arabic characters. */
html[dir='rtl'] [data-ltr] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* 6. Almarai sits lower on the line than Archivo; nudge the optical baseline
      where a glyph shares a row with a rule or an icon. */
html[dir='rtl'] .marker { align-items: center; }
html[dir='rtl'] .checklist li { align-items: center; }
html[dir='rtl'] .fiche__row { align-items: center; }

/* 7. Almarai has no expanded axis and no small-caps; the display voice comes
      from weight instead. Reset any inherited width/tracking work. */
html[dir='rtl'] :is(.display, h1, h2, h3, h4, .fact__v, .wordmark) {
  font-stretch: normal;
  letter-spacing: 0;
}
html[dir='rtl'] :is(h1, .h1) { font-weight: 800; }

/* 8. Arabic headlines run longer than French or English at the same point size;
      hold the display down a step so the hero never overflows. */
html[dir='rtl'] h1 { font-size: clamp(2.15rem, 5.4vw, 4.5rem); line-height: 1.3; }
html[dir='rtl'] h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.4; }
html[dir='rtl'] .index-row__name { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

/* 9. The select caret is a background image at a physical position. */
html[dir='rtl'] .field select {
  background-position: left 1rem center;
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
}