/* =====================================================================
   RTL — Arabic (ar). Loaded last; every rule is gated on [dir="rtl"], which
   main.js stamps on <html> from applyLang(), so the five LTR locales are
   untouched.

   Most of the page mirrors for free: it is built from flex and grid rows,
   which follow the inline axis. What needs help is (a) type, (b) the few
   physical left/right offsets, and (c) the crop carousel, whose drag maths
   reads scrollLeft/offsetLeft and would invert inside an RTL scroll box.
   ===================================================================== */

/* ---- type ------------------------------------------------------------
   Font fallback is per glyph, so appending an Arabic face to the existing
   stacks is enough: Latin runs (ECOSABOR, EU · US, GRASP, the coordinates)
   still render in Archivo / Space Mono, and only the Arabic characters —
   which neither face carries — drop through to Noto Sans Arabic. main.js
   fetches that font the first time Arabic is picked; until it arrives the
   system Arabic faces stand in. */
:root[dir="rtl"]{
  --font-display:"Archivo","Noto Sans Arabic","Geeza Pro",Tahoma,-apple-system,system-ui,sans-serif;
  --font-mono:"Space Mono","SFMono-Regular",ui-monospace,"Noto Sans Arabic","Geeza Pro",Tahoma,monospace;
  --lang-origin:left;
}

/* ---- keep the window scrollbar on the right ------------------------------
   The browser draws the viewport scrollbar on whichever side the ROOT
   element's direction points, so dir="rtl" on <html> moves the whole page
   scrollbar to the left of the window. The attribute has to stay (every rule
   in this file keys off it, and it is what tells AT the page is Arabic), so
   the direction is moved down one level instead: the root lays out LTR — and
   nothing but the scrollbar lives there — while <body> and all the content
   below it are RTL exactly as before. */
:root[dir="rtl"]{direction:ltr}
:root[dir="rtl"] body{direction:rtl}

/* Arabic has no case, and letter-spacing pulls a joined script apart into
   loose glyphs. Both treatments are sprinkled across the Latin design (nav,
   buttons, eyebrows, section numbers, chips, stat captions, footer headings),
   so rather than chase each selector this clears them page-wide and the
   Latin-only runs below opt back in. */
:root[dir="rtl"] body,
:root[dir="rtl"] body *{letter-spacing:0;text-transform:none}

/* Arabic sits taller than the tight Latin display setting wants */
:root[dir="rtl"] .display,
:root[dir="rtl"] .h-xl,
:root[dir="rtl"] .h-lg{line-height:1.26}
:root[dir="rtl"] .lede{line-height:1.75}

/* Latin-only runs inside an RTL page: isolate them so bidi cannot reorder the
   punctuation around them, and give the brand marks their tracking back. */
:root[dir="rtl"] .brand,
:root[dir="rtl"] .brand small,
:root[dir="rtl"] .dr-sign,
:root[dir="rtl"] .lang-cur,
:root[dir="rtl"] .cnum,
:root[dir="rtl"] .ast-n,
:root[dir="rtl"] .num,
:root[dir="rtl"] .cc-idx,
:root[dir="rtl"] .fi,
:root[dir="rtl"] .idx,
:root[dir="rtl"] .ph-tag,
:root[dir="rtl"] .foot-grid a[href^="mailto:"],
:root[dir="rtl"] .foot-grid a[href^="tel:"]{direction:ltr;unicode-bidi:isolate;text-align:start}
:root[dir="rtl"] .brand small{letter-spacing:.34em;text-transform:uppercase}
:root[dir="rtl"] .ph-tag{letter-spacing:.18em;text-transform:uppercase}

/* the CTA arrow points the way the text runs */
:root[dir="rtl"] .btn .arr{transform:scaleX(-1)}
:root[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(5px)}

/* ---- crop carousel ---------------------------------------------------
   products.js drives the track with scrollLeft/offsetLeft. An RTL scroll
   container reports a negative scrollLeft, which would invert drag, the
   arrows and the centred-card detection. Pin the track to LTR geometry and
   give each card its own RTL context: the cards read correctly while the
   mechanics stay exactly as written.
   .cc-prev/.cc-next keep their physical sides — with the track forced LTR,
   "previous" really is the left-hand arrow. */
:root[dir="rtl"] .cc-track{direction:ltr}
:root[dir="rtl"] .cc-card{direction:rtl}
:root[dir="rtl"] .cc-idx{left:auto;right:13px}
/* the ‹ › glyphs are bidi-mirroring characters: in an RTL context the browser
   swaps them, so the left button would draw a right-pointing chevron. The
   track is LTR, so pin the arrows LTR too and they keep pointing the way they
   actually scroll. */
:root[dir="rtl"] .cc-nav{direction:ltr}

/* ---- chrome with physical offsets ----------------------------------- */
:root[dir="rtl"] .pf-choice label{margin:0 0 6px 6px}
:root[dir="rtl"] .pf-trap{left:auto;right:-9999px}
:root[dir="rtl"] .skip-link{left:auto;right:12px}
:root[dir="rtl"] .to-top{right:auto;left:clamp(16px,3vw,28px)}
:root[dir="rtl"] .net-legend{right:auto;left:var(--gut)}
:root[dir="rtl"] .ph-tag{left:auto;right:14px}

@media(max-width:880px){
  :root[dir="rtl"] .nav-links .lang-menu{align-self:flex-end}
}