/* =====================================================================
   rtl.css — Arabic / right-to-left layer.
   Loaded ONLY by pages under /ar/, after the three English stylesheets.

   The base sheets use physical properties (padding-left, border-left,
   text-align:left). Rewriting them as logical properties would touch every
   English page, so instead this file mirrors the 67 rules that actually
   read wrong when the document direction flips. Everything symmetrical
   (left:0;right:0, centred text, flex centring) is left alone.
   ===================================================================== */

/* ---------- typography ----------
   Space Grotesk, Questrial and IBM Plex Mono have no Arabic coverage, so
   Arabic text would fall back to whatever the OS offers and look unrelated
   to the brand. IBM Plex Sans Arabic is the natural partner: same
   superfamily as the IBM Plex Mono already used for labels. */
:root{
  --sans-ar:'IBM Plex Sans Arabic', 'Noto Kufi Arabic', system-ui, sans-serif;
}
[dir="rtl"] body,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,
[dir="rtl"] .lead,[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] .btn,
[dir="rtl"] .navlinks a,[dir="rtl"] .dropk,[dir="rtl"] .drop a{
  font-family:var(--sans-ar);
  letter-spacing:0;               /* Arabic must never be letter-spaced */
}
/* Arabic headlines need a little more line height than the Latin scale. */
[dir="rtl"] h1{line-height:1.22}
[dir="rtl"] h2{line-height:1.28}
[dir="rtl"] h3{line-height:1.4}
/* The mono eyebrow/label role stays Latin-mono for numerals and code, but
   Arabic label text needs the Arabic face. */
[dir="rtl"] .eyebrow,[dir="rtl"] .lockup-label,[dir="rtl"] .caption,
[dir="rtl"] .tag,[dir="rtl"] .chip,[dir="rtl"] .sidelabel{
  font-family:var(--sans-ar);letter-spacing:0;
}
/* '//' is a Latin device; in RTL it must sit on the right of the label. */
[dir="rtl"] .eyebrow::before{content:"" ; margin:0}
[dir="rtl"] .eyebrow::after{content:" //";color:var(--ink)}
[dir="rtl"] .card--dark .eyebrow::after,
[dir="rtl"] .dark .eyebrow::after{color:#F3F1EC}

/* ---------- nav ---------- */
[dir="rtl"] .navlinks{margin-left:0;margin-right:var(--s-2)}
[dir="rtl"] .topbar .btn{margin-left:0;margin-right:6px}
[dir="rtl"] .drop--right{left:0;right:auto}
[dir="rtl"] .drop--mega{left:auto;right:0}
[dir="rtl"] .caret{margin-left:0;margin-right:7px}
[dir="rtl"] .skiplink{left:auto;right:12px}

/* ---------- lists with a leading marker ---------- */
[dir="rtl"] .plist li{padding-left:0;padding-right:var(--s-5)}
[dir="rtl"] .plist li::before{left:auto;right:2px}
[dir="rtl"] .svcrow .plist li::before,
[dir="rtl"] .svcacc-body .plist li::before,
[dir="rtl"] .spine-gets li::before,
[dir="rtl"] .ba-col li::before{left:auto;right:0}
[dir="rtl"] .svcacc-body .plist li{padding-left:0;padding-right:20px}
[dir="rtl"] .spine-gets li{padding-left:0;padding-right:var(--sp-6)}
[dir="rtl"] .ba-col li{padding-left:0;padding-right:20px}

/* ---------- divided stat rows ---------- */
[dir="rtl"] .stats div{text-align:right}
[dir="rtl"] .stats div:first-child{padding-left:0;padding-right:6px}
[dir="rtl"] .stats div+div{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .proof .it{border-left:0;border-right:1px solid rgba(250,249,246,.16)}
[dir="rtl"] .proof .it:first-child{border-right:0}

/* ---------- cards, callouts, accents ---------- */
[dir="rtl"] .callout{border-left:0;border-right:2px solid var(--ink)}
[dir="rtl"] .pcard-head .tag{text-align:left}
[dir="rtl"] .cs-tile{text-align:right}
[dir="rtl"] .cs-tile .icon{margin-left:auto;margin-right:0}
[dir="rtl"] .req{margin-left:0;margin-right:3px}

/* ---------- hover nudges must travel inward, not left ---------- */
[dir="rtl"] .svc a:hover,
[dir="rtl"] .posts a:hover{padding-left:0;padding-right:var(--s-4)}
[dir="rtl"] .duo-col .plist a:hover{padding-left:0;padding-right:var(--gap)}
[dir="rtl"] .svcacc>summary:hover{padding-left:0;padding-right:clamp(18px,2.2vw,30px)}

/* ---------- code window: line numbers move to the right ----------
   The pane itself stays LTR — code and shell output are not Arabic. */
[dir="rtl"] .codewin,[dir="rtl"] .gsterm,[dir="rtl"] .tlines{direction:ltr;text-align:left}
[dir="rtl"] .codewin .bar span{margin-left:0;margin-right:var(--s-2)}

/* ---------- forms ---------- */
[dir="rtl"] .field select{
  padding-right:var(--sp-4);
  padding-left:calc(var(--sp-4) + 22px);
  background-position:left var(--sp-4) center;
}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right}

/* ---------- the spine layout (services page) ---------- */
[dir="rtl"] .spine-lead{margin-left:0;margin-right:calc(var(--spine-rail) + var(--spine-gut))}
[dir="rtl"] .spine-rung::before{left:auto;right:var(--spine-x);border-left:0;border-right:1px solid var(--spine-rule)}
[dir="rtl"] .spine-ladder::after{left:auto;right:calc(var(--spine-x) - var(--sp-3))}
[dir="rtl"] .spine-title,[dir="rtl"] .spine-suitswrap{text-align:left}
[dir="rtl"] .spine-ico{margin-left:0;margin-right:auto}

/* ---------- arrows point the other way ----------
   Latin '→' means forward; in RTL forward is '←'. Content uses ← directly,
   but CSS-drawn arrows and the slider chevrons need flipping. */
[dir="rtl"] .arrlink svg,
[dir="rtl"] .seemore svg{transform:scaleX(-1)}
[dir="rtl"] .indslider::after{right:auto;left:-4px}

/* The .langswitch component lives in site.css, not here: the English pages
   carry the same control and they never load rtl.css. */


/* ---------- number and date rendering ----------
   Arabic body text with Western digits is standard in Qatari business
   writing; forcing Eastern Arabic numerals here would be inconsistent with
   the client logos, prices and phone numbers used across the site. */
[dir="rtl"] .count,[dir="rtl"] .n,[dir="rtl"] time,[dir="rtl"] .stats b{
  direction:ltr;unicode-bidi:embed;display:inline-block;
}

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