/* ============================================================
   arabic-type.css — Arabic typography.

   Loaded whenever the page is in Arabic, regardless of whether the
   layout is mirrored. Nothing in here is direction-dependent: it is
   about the script, not the reading order. The direction-specific
   rules (icon flips, form direction) live in rtl-extras.css and only
   load when $rtl_enabled is on.

   Loaded last, after every other stylesheet, so it wins on source
   order. See includes/head-tail.php.
   ============================================================ */

/* ---------------------------------------------------------------
   1. TYPEFACE

   Cairo replaces Outfit for Arabic. Outfit stays in the stack after
   it so any Latin that survives translation (product codes, "ATEX",
   "Wimac", "IECEx") still renders in the site's own face rather than
   in Cairo's Latin, which is a different colour on the page.
   --------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
  font-family: 'Cairo', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', 'Outfit', sans-serif;
}

/* ---------------------------------------------------------------
   2. LETTER-SPACING

   Arabic is a connected script. Positive letter-spacing pulls the
   joins apart and the word stops reading as a word, so the tracking
   the Latin design uses on eyebrows, buttons and nav has to go.

   Latin runs inside Arabic text keep their tracking — the .ltr
   helper at the bottom restores it where it matters.
   --------------------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, button, label, th, td,
[class*="eyebrow"],
[class*="__title"],
[class*="__label"],
[class*="__cta"],
[class*="nav-link"],
[class*="btn"] {
  letter-spacing: normal;
}

/* Arabic has no capital letters, so uppercasing is a no-op that only
   costs the browser work — but text-transform also affects any Latin
   caught in the same element, where it is usually unwanted here. */
[class*="eyebrow"],
[class*="__label"],
[class*="cert-item"] {
  text-transform: none;
}

/* Arabic needs a little more leading than Latin at the same size —
   ascenders and descenders are taller and the diacritics sit above. */
body {
  line-height: 1.8;
}

h1, h2, h3 {
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   3. NUMBERS, CODES AND MEASUREMENTS

   Numerals, model codes and units are written left-to-right even
   inside Arabic. The browser's bidi algorithm gets this right on its
   own for a bare number, but not for a run like "IP66 / Zone 21" or
   "II 2G Ex db IIB T6 Gb", where the mix of Latin, digits and
   punctuation can reorder visibly. Isolating those runs fixes it.

   This matters in a left-to-right layout too — bidi reordering is
   driven by the text's own direction, not the page's.
   --------------------------------------------------------------- */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  letter-spacing: normal;
}

/* Spec tables are mostly Latin values against Arabic labels. Isolating
   the value cell stops a trailing unit jumping to the wrong end. */
.ex-spec-table td:last-child,
.spec-table td:last-child {
  unicode-bidi: plaintext;
}

/* The numbered list markers in the nav dropdowns and product cards
   ("01", "02") are decorative Latin — keep them in the mono face and
   left-to-right. */
.wm-header__dd-num,
.wm-drawer__sub-num,
[class*="__num"] {
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone numbers and email addresses are always LTR. */
a[href^="tel:"],
a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}