/* ==========================================================================
   UXUI — Arabic / RTL layer
   Loaded only on /ar/. Overrides direction-sensitive rules in style.css
   and swaps the type stack to Cairo.
   ========================================================================== */

/* ---------- Typography ----------
   Scoped to [dir=rtl] so this file is harmless if ever loaded on the
   English page — it must never redefine --font globally. */
html[dir="rtl"]{
  --font:'Cairo','Segoe UI',Tahoma,'Noto Naskh Arabic',Arial,sans-serif;
}

html[dir="rtl"] body{
  font-family:var(--font);
  line-height:1.85;              /* Arabic needs more leading than Latin */
  letter-spacing:normal;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{
  letter-spacing:normal;          /* CRITICAL: letter-spacing breaks Arabic joins */
  line-height:1.42;
  font-weight:700;
}
html[dir="rtl"] h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.32;}
html[dir="rtl"] h2{font-size:clamp(1.7rem,3.5vw,2.6rem);}

/* Anything that used tracked-out uppercase in English must not be tracked in Arabic */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .brand__tag,
html[dir="rtl"] .horizon__tag,
html[dir="rtl"] .contact__meta dt,
html[dir="rtl"] .footer h4,
html[dir="rtl"] .link-rel,
html[dir="rtl"] .phase__num,
html[dir="rtl"] .stack-col__head span,
html[dir="rtl"] .ship__kicker,
html[dir="rtl"] .hero__badge,
html[dir="rtl"] .field label{
  letter-spacing:normal;
  font-family:var(--font);
  font-weight:600;
}
html[dir="rtl"] .eyebrow{font-size:.82rem;}
html[dir="rtl"] .hero__badge{font-size:.78rem;}
html[dir="rtl"] .footer h4{font-size:.86rem;}
html[dir="rtl"] .contact__meta dt{font-size:.78rem;}
html[dir="rtl"] .phase__num{font-size:.8rem;}
html[dir="rtl"] .horizon__tag{font-size:.8rem;}
html[dir="rtl"] .link-rel{font-size:.85rem;}
html[dir="rtl"] .ship__kicker{font-size:.8rem;}
html[dir="rtl"] .stack-col__head span{font-size:.8rem;}
html[dir="rtl"] .lede{line-height:1.9;}
html[dir="rtl"] .svc p,
html[dir="rtl"] .practice p,
html[dir="rtl"] .why p,
html[dir="rtl"] .step p,
html[dir="rtl"] .case-feat p{line-height:1.85;}

/* ---------- Islands that must stay left-to-right ---------- */
html[dir="rtl"] .code-lines,
html[dir="rtl"] .win{
  direction:ltr;
}
html[dir="rtl"] .code-lines{text-align:left;font-family:var(--mono);}

/* ---------- Brand lockup, mirrored ----------
   The whole lockup flows right-to-left: the mark sits on the RIGHT, with the
   wordmark and tagline to its left, both aligned to the right edge (the
   reading start in RTL). Only the Latin "UXUI" itself stays an LTR run. */
html[dir="rtl"] .brand{direction:rtl;}
html[dir="rtl"] .brand__text{text-align:right;}
html[dir="rtl"] .brand__name{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
}

/* The "UXUI" wordmark stays Latin (standard for tech brands in the region),
   but the tagline below it is Arabic — Cairo, no letter-spacing, right-aligned
   under the wordmark so both share the same right edge. */
html[dir="rtl"] .brand__tag--ar{
  font-family:var(--font);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
  direction:rtl;
  text-align:right;
  margin-top:3px;
  line-height:1.5;
  white-space:nowrap;
}

/* The chip row itself flows right-to-left with the page; each chip's own
   Latin text is isolated so "GPT-4o" and "QuickChart API" read correctly. */
html[dir="rtl"] .chips{direction:rtl;}
html[dir="rtl"] .chip{direction:ltr;unicode-bidi:isolate;font-family:var(--mono);}

/* Latin runs inside Arabic prose (React, NestJS, GPT-4o, ISO 27001 …).
   `isolate` is what keeps neutral characters — slashes, %, parentheses,
   dashes — from being reordered by the bidi algorithm. Do NOT use
   inline-block here: it breaks line-wrapping mid-sentence. */
html[dir="rtl"] .ltr{
  direction:ltr;
  unicode-bidi:isolate;
}

/* Tech names in the stack columns stay Latin and LTR */
html[dir="rtl"] .stack-col li strong{direction:ltr;text-align:right;font-family:var(--font);}

/* ---------- Nav ----------
   Arabic labels run much wider than their English equivalents
   ("الذكاء الاصطناعي" vs "AI"), so the bar gets slightly tighter type and
   padding. Combined with the 1100px collapse breakpoint in style.css this
   keeps every label on one line. */
html[dir="rtl"] .nav__links a{
  font-size:.86rem;
  padding:9px 10px;
  white-space:nowrap;
}
html[dir="rtl"] .nav__cta{padding:11px 18px;font-size:.86rem;}
html[dir="rtl"] .lang-switch{padding:8px 12px;}

/* In the collapsed menu the labels get room again */
@media (max-width:1100px){
  html[dir="rtl"] .nav__links a{font-size:.97rem;padding:13px 14px;}
}

/* ---------- Hero ---------- */
html[dir="rtl"] .hero::before{left:auto;right:-260px;}
html[dir="rtl"] .hero::after{right:auto;left:-200px;}
html[dir="rtl"] .hero__lede{line-height:1.95;}

/* ---------- Bulleted lists ---------- */
html[dir="rtl"] .ship li{padding-left:0;padding-right:24px;}
html[dir="rtl"] .ship li::before{left:auto;right:0;}

html[dir="rtl"] .horizon li{padding-left:0;padding-right:22px;}
html[dir="rtl"] .horizon li::before{left:auto;right:0;content:'←';}

/* ---------- Architecture layers ---------- */
html[dir="rtl"] .layer{
  border-left:1px solid rgba(255,255,255,.11);
  border-right:4px solid var(--accent,var(--indigo));
}
html[dir="rtl"] .layer:hover{transform:translateX(-5px);}

/* ---------- Form ---------- */
html[dir="rtl"] .field select{
  background-position:left 16px center;
  padding-right:16px;
  padding-left:42px;
}
html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea{text-align:right;}
/* email + URLs read better LTR even on an Arabic page */
html[dir="rtl"] .field input[type="email"]{direction:ltr;text-align:right;}
html[dir="rtl"] .hp{left:auto!important;right:-9999px!important;}

/* ---------- Floating button ---------- */
html[dir="rtl"] .to-top{right:auto;left:22px;}

/* ---------- Footer ---------- */
html[dir="rtl"] .footer__about p{max-width:340px;}

/* ---------- Print ---------- */
@media print{
  html[dir="rtl"] body{font-family:var(--font);}
}