/* ============================================================
   Sukoon Studio — Arabic / RTL layer.
   Loaded ONLY by /ar/* pages, AFTER site.css.
   Strategy: dir="rtl" flips flex/grid for free; here we (1) switch the
   type to the Arabic stack, (2) neutralise Latin tracking/uppercase that
   break Arabic shaping, (3) mirror the few physical-direction rules and
   absolute badges, (4) keep numerals + phone runs LTR + sans tabular.
   ============================================================ */

/* 1 — Arabic type. The --arabic stack (SF Arabic / Geeza / Noto Naskh) is a
   refined naskh that carries both display and body, mirroring the EN
   serif-display + sans-body contrast through weight, not face. */
html[dir="rtl"] body { font-family: var(--arabic); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .display, html[dir="rtl"] .lane__title,
html[dir="rtl"] .btn, html[dir="rtl"] .eyebrow, html[dir="rtl"] .ar-mark,
html[dir="rtl"] .brand__studio, html[dir="rtl"] .hero__vbadge,
html[dir="rtl"] .pin, html[dir="rtl"] .tcap, html[dir="rtl"] .ksmall,
html[dir="rtl"] .input, html[dir="rtl"] .select, html[dir="rtl"] .textarea,
html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea,
html[dir="rtl"] blockquote, html[dir="rtl"] h4 { font-family: var(--arabic); }

/* 2 — neutralise Latin tracking + uppercasing (no-ops/harmful in Arabic).
   Slightly looser line-height: naskh ascenders/descenders need air. */
html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] .display, html[dir="rtl"] .btn,
html[dir="rtl"] .eyebrow, html[dir="rtl"] .ar-mark, html[dir="rtl"] .lane__title,
html[dir="rtl"] .brand__studio, html[dir="rtl"] .hero__vbadge, html[dir="rtl"] .pin,
html[dir="rtl"] .tcap, html[dir="rtl"] .ksmall, html[dir="rtl"] .eyebrow,
html[dir="rtl"] .foot h4 { letter-spacing: normal; text-transform: none; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .display { line-height: 1.18; }

/* 3 — numerals + Latin runs (ratings, phone, @handles, email, prices) stay
   LTR and sans tabular, per the brand numeral rule. Wrap such runs in
   <span class="ltr"> or <bdi> in the markup. */
html[dir="rtl"] .num { font-family: var(--sans); direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
html[dir="rtl"] .stars { direction: ltr; unicode-bidi: isolate; }

/* 4 — mirror physical-direction rules from site.css */
html[dir="rtl"] .brand { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .brand__studio { padding-left: 0; padding-right: 11px; border-left: 0; border-right: 1px solid var(--line); }
html[dir="rtl"] .select { background-position: left 14px center; padding-right: 16px; padding-left: 38px; }
html[dir="rtl"] .faq summary::after { border-right: 0; border-bottom: 2px solid var(--ink-3); border-left: 2px solid var(--ink-3); }

/* 5 — mirror absolute-positioned single-side badges (left <-> right) */
html[dir="rtl"] .hero__vbadge { left: auto; right: 14px; }
html[dir="rtl"] .marquee figcaption { left: auto; right: 14px; }
html[dir="rtl"] .visit__map .pin, html[dir="rtl"] .pin { left: auto; right: 14px; }
html[dir="rtl"] .passcard__dim { right: auto; left: 10px; }

/* 6 — reverse the portfolio marquee drift for RTL reading flow */
@keyframes drift-rtl { to { transform: translateX(50%); } }
html[dir="rtl"] .marquee__track { animation-name: drift-rtl; }

/* 7 — language switcher: base lives in site.css (loads on EN too); RTL tweak only */
html[dir="rtl"] .lang { font-family: var(--sans); letter-spacing: 0; }

/* 8 — honeypot: site.css parks .hp at left:-9999px which inflates RTL scroll
   width (sideways scroll). It is already 1px + overflow:hidden, so drop the
   off-screen push and clip instead. Stays a functional, invisible spam trap. */
html[dir="rtl"] .hp { left: auto; right: auto; margin: -1px; padding: 0; border: 0; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }