/* ============================================================
   HAANK — Arabic / RTL layer (loaded only on /ar)
   Sits on top of styles.css. Prose → Arabic type; physical
   left/right rules mirrored for dir="rtl". Code-tag labels,
   the import line and the architecture graph stay Latin/LTR.
   ============================================================ */

/* ---- Arabic type ---- */
body{font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
h1,h2,h3{font-family:'Tajawal','Space Grotesk',sans-serif;letter-spacing:0;line-height:1.18}
.hero-h1{line-height:1.16;letter-spacing:0}
.stmt{line-height:1.5}
.pname{font-family:'Tajawal','Space Grotesk',sans-serif;letter-spacing:0;line-height:1.1}
/* Arabic reads better with a touch more leading */
.hero-sub,.sec-lede,.desc,.cap p,.stage p,.contact-lead,.contact-sub,.slabel{line-height:1.9}

/* ---- Keep the code aesthetic Latin + LTR ---- */
.label,.eyebrow,.caps-code,.graph-hint,.foot-status{direction:ltr;unicode-bidi:isolate;text-align:start}

/* ---- RTL physical-direction fixes ---- */
.skip{left:auto;right:12px}
.nav-links a[data-nav]::after{left:auto;right:0;transform-origin:right}
.accent::after{transform-origin:right}
.btn-gold::before{transform:translateX(101%)}
.btn-gold:hover .caret{transform:translateX(-4px)}
.stat{border-left:none;border-right:2px solid var(--hair);padding-left:0;padding-right:22px}
.fig::after{left:auto;right:0}
.stage .chk{left:auto;right:0}
.foot-status{margin-left:0;margin-right:auto}
.progress{transform-origin:right}
.go{transform:translateX(6px)}
.preview{right:auto;left:8px;transform:translateY(-50%) translateX(-20px)}
@media(hover:hover) and (min-width:820px){
  .row:hover .preview,.row:focus-within .preview{transform:translateY(-50%) translateX(0)}
}

/* caret in RTL points the other way */
.btn-gold .caret{display:inline-block;transform:scaleX(-1)}