/* ============================================================
   Iraq Soft — shared bilingual typography and direction system.
   Loaded on every page. Direction-specific rules remain scoped to
   RTL; the small global rules below keep English and shared controls
   on the same metrics across the homepage and all internal pages.
   Do NOT scatter typography/RTL patches across component files.
   ============================================================ */

/* 0 — One English face everywhere, including native form controls and
   dynamically mounted components on internal pages. */
html:not([dir="rtl"]),
html:not([dir="rtl"]) body,
html:not([dir="rtl"]) button,
html:not([dir="rtl"]) input,
html:not([dir="rtl"]) textarea,
html:not([dir="rtl"]) select {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Safe Latin display metrics. Several legacy sections used .98/1.01,
   which clips large Manrope glyphs at browser zoom levels. */
html:not([dir="rtl"]) :where(h1, h2, [class*="__headline"], [class*="__title"]) {
  line-height: 1.08 !important;
}

/* 1 — Typeface. Tajawal is the Arabic face across the whole site. */
[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] .t-search input {
  font-family: 'Tajawal', system-ui, sans-serif;
}

/* 2 — Arabic script is connected; it must NEVER carry Latin tracking.
   Neutralise every inherited letter/word-spacing under RTL.            */
[dir="rtl"] * {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

/* 3 — Marketing copy and headings are never justified in Arabic. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] p, [dir="rtl"] li {
  text-align: start;
  text-wrap: pretty;
}

/* 4 — Line-height. Tajawal glyphs (dots, descenders, kashida) need more
   vertical room than the Latin defaults the layout was tuned for.       */

/* Display / hero / section headings — catches BEM __headline, __title,
   .t-h1/.t-h2, .dh-h2, plus bare h1/h2. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] [class*="__headline"],
[dir="rtl"] [class*="__title"],
[dir="rtl"] [class*="-h1"],
[dir="rtl"] [class*="-h2"] {
  line-height: 1.28 !important;
}

/* Sub-headings */
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] [class*="__subtitle"],
[dir="rtl"] [class*="__mini-title"] {
  line-height: 1.42 !important;
}

/* Body / lead / descriptive copy and list items */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] [class*="__description"],
[dir="rtl"] [class*="__lead"],
[dir="rtl"] [class*="__desc"],
[dir="rtl"] .t-lead {
  line-height: 1.85 !important;
}

/* 5 — Eyebrows / labels: no uppercase-style tracking, comfortable leading. */
[dir="rtl"] [class*="__eyebrow"],
[dir="rtl"] [class*="eyebrow"],
[dir="rtl"] [class*="__label"] {
  line-height: 1.5 !important;
}

/* 6 — Embedded Latin runs (acronyms, model numbers, URLs, emails, codes)
   keep their natural metrics and always render left-to-right.            */
[dir="rtl"] bdi,
[dir="rtl"] [dir="ltr"],
[dir="rtl"] .is-latin-token,
[dir="rtl"] [class*="wordmark"],
[dir="rtl"] code,
[dir="rtl"] [style*="ui-monospace"] {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  letter-spacing: normal !important;
  line-height: normal;
  unicode-bidi: isolate;
}

[dir="rtl"] .is-latin-token {
  direction: ltr;
  display: inline;
  text-transform: none;
}

/* Model codes and mixed Arabic/Latin labels select their own natural base
   direction without forcing the surrounding Arabic sentence to LTR. */
[dir="rtl"] :where([class*="__model"], [class*="__code"], [class*="__sku"]) {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  unicode-bidi: plaintext;
}

/* 7 — Clip-safety floor. Any heading-like element or gradient-clipped stat
   number must keep enough leading that Tajawal dots / descenders are never
   cropped by a tight line-height or an overflow:hidden ancestor. Root-cause
   fix — do NOT patch clipping per-section with fixed heights.              */
[dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] [class*="title"],
[dir="rtl"] [class*="heading"],
[dir="rtl"] [class*="headline"],
[dir="rtl"] [class*="__stat"],
[dir="rtl"] [class*="__number"],
[dir="rtl"] [data-count] {
  line-height: 1.28 !important;
}

/* 8 — Directional CTA arrows under RTL. The arrow points the reading way
   (←) by SWAPPING THE GLYPH — never by rotate()/scaleX() and never by
   mirroring the button. Button text is therefore always upright & readable.
   Root-cause fix for every → CTA arrow across the site.                    */
[dir="rtl"] .is-hero__primary span[aria-hidden="true"],
[dir="rtl"] .is-hemi__primary span[aria-hidden="true"],
[dir="rtl"] .is-odoo__primary span[aria-hidden="true"],
[dir="rtl"] .is-divisions__cta-arrow[aria-hidden="true"],
[dir="rtl"] .is-platforms__arrow[aria-hidden="true"],
[dir="rtl"] .is-biometric__arrow[aria-hidden="true"] {
  transform: none !important;
  font-size: 0 !important;
  line-height: 0;
}
[dir="rtl"] .is-hero__primary span[aria-hidden="true"]::before,
[dir="rtl"] .is-hemi__primary span[aria-hidden="true"]::before,
[dir="rtl"] .is-odoo__primary span[aria-hidden="true"]::before,
[dir="rtl"] .is-divisions__cta-arrow[aria-hidden="true"]::before,
[dir="rtl"] .is-platforms__arrow[aria-hidden="true"]::before,
[dir="rtl"] .is-biometric__arrow[aria-hidden="true"]::before {
  content: "\2190";           /* ← left arrow */
  font-size: 15px;
  line-height: 1;
  display: inline-block;
}

/* 9 — Belt-and-braces: CTA / button TEXT must never be rotated or mirrored
   under RTL, whatever a section tries. Directional glyphs are handled above. */
[dir="rtl"] a[class*="__primary"],
[dir="rtl"] a[class*="__secondary"],
[dir="rtl"] a[class*="__cta"],
[dir="rtl"] button[class*="__cta"] {
  transform: none !important;
  writing-mode: horizontal-tb;
}

/* 10 — GLOBAL (both directions, not RTL-only): every anchored section clears
   the sticky header when it's navigated to, so a section heading never lands
   hidden underneath the header. Root-cause fix for "clicking nav hides the
   title" across the whole site.                                            */
:where(section[id], [id][data-scroll-anchor], footer[id]) {
  /* The document-level scroll padding owns the sticky-header offset.
     Keeping a second scroll-margin here makes browsers add both values. */
  scroll-margin-top: 0;
}

html { scroll-padding-top: var(--isoft-header-offset, 120px); }

/* 11 — GLOBAL: the page never scrolls horizontally. Decorative absolutely-
   positioned glows and oversized product art must not create page overflow.
   `clip` (not `hidden`) so it never turns the body into a scroll container
   and never breaks the sticky header. Inner rails keep their own overflow. */
html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 620px) {
  .is-hero__title-line { white-space: normal; }
  .is-hero__title { line-height: 1.1 !important; }
}