/* ==========================================================================
   Arabic overrides. Loaded only by /ar/ pages, after site.css.
   Direction itself is handled by dir="rtl" plus the logical properties in
   site.css — this file only fixes what is genuinely script-specific.
   ========================================================================== */

:root {
  /* One family across the whole page. IBM Plex Sans Arabic is metrically
     designed alongside IBM Plex, so it sits correctly next to the Latin
     brand name and the technology terms that stay in Latin script. */
  --f-display: "IBM Plex Sans Arabic", "Schibsted Grotesk", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans Arabic", "Hanken Grotesk", system-ui, sans-serif;
  --f-mono:    "IBM Plex Sans Arabic", "IBM Plex Mono", ui-monospace, monospace;
}

/* Arabic is a connected script: any letter-spacing pulls the joins apart and
   makes text look broken. The Latin design leans on negative tracking, so
   every one of those declarations has to be neutralised here. */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
[lang="ar"] .brand__name, [lang="ar"] .about-lede,
[lang="ar"] .footer__claim, [lang="ar"] .stat__n,
[lang="ar"] .faq__q, [lang="ar"] .page-hero h1 {
  letter-spacing: 0;
}

/* Uppercase and wide tracking are Latin typographic devices with no Arabic
   equivalent — applied to Arabic they are simply wrong. Keep the size and
   colour cues, drop the casing. */
[lang="ar"] .eyebrow,
[lang="ar"] .brand__tag,
[lang="ar"] .pill,
[lang="ar"] .step__k,
[lang="ar"] .method__label,
[lang="ar"] .field label,
[lang="ar"] .footer__col h2,
[lang="ar"] .footer__bottom,
[lang="ar"] .breadcrumb,
[lang="ar"] .work-item h3 span,
[lang="ar"] .pipeline__flow span:not(.arrow) {
  text-transform: none;
  letter-spacing: 0;
}

/* Arabic has no italic. Emphasis carries through colour and weight instead —
   a synthesised oblique is a Latin convention and reads as a rendering bug. */
[lang="ar"] em { font-style: normal; font-weight: 600; }
[lang="ar"] h1 em { font-weight: 700; }

/* Slightly more leading: Arabic ascenders/descenders and diacritics need it. */
[lang="ar"] body { line-height: 1.75; }
[lang="ar"] h1, [lang="ar"] h2 { line-height: 1.3; }
[lang="ar"] h3 { line-height: 1.4; }

/* Latin-script fragments inside Arabic prose (.NET Core, React, WhatsApp
   numbers) must not inherit RTL ordering. */
[lang="ar"] .tag,
[lang="ar"] .marquee__track > span,
[lang="ar"] .method__value,
[lang="ar"] code, [lang="ar"] .ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone numbers read left-to-right even in an RTL block. */
[lang="ar"] .method__value { text-align: start; }

/* The hand-drawn underline SVG is mirrored by inset-inline-start in site.css;
   flip the stroke itself so the pen direction still reads naturally. */
[dir="rtl"] .mark svg { transform: scaleX(-1); }

/* Arrow glyphs point the wrong way once the page is mirrored. */
[dir="rtl"] .pipeline__flow .arrow,
[dir="rtl"] .method__arrow,
[dir="rtl"] .work-item__arrow svg,
[dir="rtl"] .checklist li::before {
  transform: scaleX(-1);
}
[dir="rtl"] .work-item:hover .work-item__arrow { transform: translateX(-4px); }