/* ============================================================================
   RANCO — Arabic / RTL layer
   Loaded ONLY on /ar/ pages, after every other stylesheet.

   The approved Immersive design shipped English-only (owner, 2026-08-04:
   "remove arabic as there is no need for now"), so its Latin display face has
   no Arabic glyphs and nothing in it was ever mirrored. This file is that
   missing half. Every rule below is one of the RTL non-negotiables in
   PLAYBOOK "Bilingual EN/AR rules" — each has cost us a bug before.
   ========================================================================= */

/* --- 1 · the Arabic face ------------------------------------------------ */
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* Schibsted Grotesk and Figtree have NO Arabic glyphs. If they stay in the
   stack the browser silently falls back per-glyph and the page renders in a
   different face than intended, with wrong metrics. Swap BOTH roles. */
html[dir=rtl]{
  --body-latin:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --display-latin:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --display:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --lh-display:1.35;   /* Arabic needs more leading than a 1.05 Latin display */
  --lh-latin:1.8;
}
html[dir=rtl] body,
html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3,
html[dir=rtl] .hero-h, html[dir=rtl] .stmt-h, html[dir=rtl] .con-h,
html[dir=rtl] .page-hero h1, html[dir=rtl] .cta-band h2{
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

/* --- 2 · letter-spacing BREAKS Arabic letter joining -------------------- */
/* Non-negotiable. Tracking on a joined script splits the word into pieces. */
[dir=rtl] *{ letter-spacing:normal !important }
/* the mono/eyebrow labels lean on tracking for their look — give them back a
   little word-spacing instead so they stay distinct without breaking glyphs */
[dir=rtl] .kicker, [dir=rtl] .sd-ix, [dir=rtl] .dc-div,
[dir=rtl] .sdc-h, [dir=rtl] .capband-ix, [dir=rtl] .hero-eyebrow{
  word-spacing:.06em;
}

/* --- 3 · Arabic display type wants slightly less size ------------------- */
html[dir=rtl] .hero-h{ font-size:clamp(2rem, 7vw, 4.2rem) }
html[dir=rtl] .page-hero h1{ font-size:var(--step-4) }

/* --- 4 · things that must FLIP ------------------------------------------ */
[dir=rtl] .cap-list li, [dir=rtl] .equip-col li{ padding-inline-start:22px }
[dir=rtl] .legal-body ul{ padding-inline-start:20px; padding-inline-end:0 }

/* the numeral / index rails and ghost numerals sit on the wrong edge */
[dir=rtl] .svc-ghost{ left:auto; right:0 }
[dir=rtl] .svc-rail{ left:auto; right:0 }

/* footer + header alignment */
[dir=rtl] .foot-grid, [dir=rtl] .foot-col, [dir=rtl] .foot-brand{ text-align:right }
[dir=rtl] .foot-legal-row{ flex-direction:row-reverse }

/* --- 5 · the horizontal gallery keeps LTR GEOMETRY ---------------------- */
/* A scroll-snap track inverts its scroll origin under RTL and the panels come
   out reversed and un-draggable. Track stays LTR; the CARD CONTENT is RTL. */
[dir=rtl] .h-track{ direction:ltr }
[dir=rtl] .h-panel{ direction:rtl }
[dir=rtl] .h-panel figcaption{ flex-direction:row-reverse }
[dir=rtl] .marquee-track{ direction:ltr }

/* --- 6 · Latin runs inside Arabic text ---------------------------------- */
/* Company names, ISO numbers, phone numbers and "RANCO" itself are Latin and
   must not be reordered by the bidi algorithm. */
[dir=rtl] .num, [dir=rtl] bdi, [dir=rtl] .dc-tel, [dir=rtl] .foot-link-plain{
  direction:ltr; unicode-bidi:isolate; display:inline-block;
}
[dir=rtl] .stat-g b, [dir=rtl] .hero-strip b{ direction:ltr; unicode-bidi:isolate }

/* --- 7 · form controls -------------------------------------------------- */
[dir=rtl] .field input, [dir=rtl] .field select, [dir=rtl] .field textarea{
  text-align:right;
}
/* the select's arrow background sits on the wrong side once the box flips */
[dir=rtl] .field select{ background-position:left 14px center }

/* --- 8 · buttons and inline arrows -------------------------------------- */
[dir=rtl] .h-hint .off-pin::after, [dir=rtl] .h-hint .on-pin::after{ content:" ←" }
[dir=rtl] .jump{ justify-content:flex-start }