/* ========================================================= RTL overrides for Arabic + Sorani Kurdish. Loaded only when . English is unaffected. ========================================================= */ /* Arabic-script face (covers Arabic + Kurdish). Latin serifs do not render Arabic, so replace the display + body stacks wholesale. */ [dir="rtl"] body:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] input:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] textarea:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] select:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] button:not([dir="ltr"]):not([dir="ltr"] *) { /* One place to change the Arabic-script face — swap the first name to try another. The /_font_test.php page that previewed candidates against real copy was a scratch file and is not deployed. */ font-family: "Noto Naskh Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif; } [dir="rtl"] h1:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h3:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h4:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h5:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .logo-main:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hub h2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .section h2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .page-title:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .sub-hero h1:not([dir="ltr"]):not([dir="ltr"] *) { font-family: "Noto Naskh Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif !important; font-weight: 700; } /* Arabic script must not be letter-spaced (it breaks the joins) and reads right-aligned by default. */ [dir="rtl"] body:not([dir="ltr"]):not([dir="ltr"] *) { text-align: right; } [dir="rtl"] .eyebrow:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-kicker:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .nav-links a:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .btn:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .cta:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .services-pill:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .insight-category:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-lang-opt:not([dir="ltr"]):not([dir="ltr"] *) { letter-spacing: 0 !important; } /* Numerals and Latin brand tokens stay LTR inside RTL text. */ [dir="rtl"] .wm-ltr:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] [data-ltr]:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] time:not([dir="ltr"]):not([dir="ltr"] *) { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* --- Layout mirroring for the main chrome --- No flex-direction override here, deliberately. Under dir="rtl" a plain `flex-direction: row` already lays items out right-to-left, so the first item in the markup — Home — sits nearest the logo on the right, which is what a Kurdish or Arabic reader expects. Adding `row-reverse` reverses that a second time and cancels the RTL out: the menu read left-to-right again and Home was pushed to the far left, overflowing off-screen at x = -90px, as far from the wordmark as possible. */ [dir="rtl"] .nav-login svg:not([dir="ltr"]):not([dir="ltr"] *) { transform: scaleX(-1); } /* Hero + section copy align to the reading side. */ [dir="rtl"] .sub-hero:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .insights-hero-inner:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .services-hero-inner:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-tldr-inner:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .section-head:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .insights-section-head:not([dir="ltr"]):not([dir="ltr"] *) { text-align: right; } /* Flip the "read more" and bullet arrows that point by direction. */ [dir="rtl"] .insight-read svg:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .ia-body a svg:not([dir="ltr"]):not([dir="ltr"] *) { transform: scaleX(-1); } /* Bulleted lists: move the marker to the right. */ [dir="rtl"] .ia-body ul li:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-eco-feats span:not([dir="ltr"]):not([dir="ltr"] *) { padding-left: 0; padding-right: 26px; } [dir="rtl"] .ia-body ul li:not([dir="ltr"]):not([dir="ltr"] *)::before { left: auto; right: 4px; } [dir="rtl"] .wm-eco-feats span:not([dir="ltr"]):not([dir="ltr"] *)::before { left: auto; right: 0; } /* FAQ chevron + rows read from the right. */ [dir="rtl"] .faq-item summary:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-faq-item summary:not([dir="ltr"]):not([dir="ltr"] *) { flex-direction: row-reverse; } /* Comparison table headers align right. */ [dir="rtl"] .wm-compare thead th:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-compare tbody td:not([dir="ltr"]):not([dir="ltr"] *) { text-align: right; } [dir="rtl"] .wm-compare .yes:not([dir="ltr"]):not([dir="ltr"] *)::before { content: "" ; } [dir="rtl"] .wm-compare .yes:not([dir="ltr"]):not([dir="ltr"] *) { direction: rtl; } /* Breadcrumb reads right-to-left. */ [dir="rtl"] .ia-breadcrumb:not([dir="ltr"]):not([dir="ltr"] *) { flex-direction: row-reverse; justify-content: flex-end; } /* ========================================================= Arabic-script typography. The whole site is tuned for Latin display type: wide tracking on kickers, negative tracking on big headlines, uppercase everywhere, and line-heights near 1.0. Every one of those is wrong for Arabic and Kurdish, and together they are why the Kurdish header "does not sit right". letter-spacing is the serious one. Arabic script is cursive — letters join into a single connected form. Adding tracking forces gaps into those joins, so a word visually falls apart into loose pieces. Negative tracking does the opposite and crushes the joins together. Neither is a stylistic preference; both break the script. text-transform: uppercase is meaningless here — Arabic has no letter case — and line-heights around 1.0 clip the tall ascenders (ێ ڵ ژ ک) and the descenders that Kurdish uses heavily. Scoped to [dir="rtl"], so English keeps its Latin tuning exactly. ========================================================= */ [dir="rtl"] h1:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h3:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h4:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] p:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] a:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] span:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] li:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] button:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-label:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-title:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-title span:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-para:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-kicker:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-tag2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .eyebrow:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .nav-links a:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .nav-cta:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .cta:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .btn:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-scroll-hint:not([dir="ltr"]):not([dir="ltr"] *) { letter-spacing: normal !important; text-transform: none !important; } /* Headlines need room to breathe; 1.04 was clipping marks. */ [dir="rtl"] .wm-hero-title:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-title span:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h1:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .page-title:not([dir="ltr"]):not([dir="ltr"] *) { line-height: 1.42; } [dir="rtl"] h2:not([dir="ltr"]):not([dir="ltr"] *) { line-height: 1.38; } [dir="rtl"] h3:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h4:not([dir="ltr"]):not([dir="ltr"] *) { line-height: 1.45; } /* Body copy: Arabic reads better with a little more leading than Latin. */ [dir="rtl"] p:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-para:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] li:not([dir="ltr"]):not([dir="ltr"] *) { line-height: 1.85; } /* Small caps-style kickers lose uppercase, so they need weight and size to stay distinct from body copy instead. */ [dir="rtl"] .wm-hero-label:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-kicker:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .eyebrow:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-tag2:not([dir="ltr"]):not([dir="ltr"] *) { font-size: 15px; font-weight: 700; line-height: 1.6; } /* The display headline was sized for a condensed Latin serif. Arabic glyphs carry more width and vertical detail, so it comes down a step. */ [dir="rtl"] .wm-hero-title:not([dir="ltr"]):not([dir="ltr"] *) { font-size: clamp(38px, 6vw, 76px); font-weight: 700; } /* Latin brand names and acronyms inside RTL text keep their own direction, so "ERP & CRM" and "WE MANAGE" do not reorder mid-sentence. --------------------------------------------------------------------------- This was `plaintext`, which was the wrong tool and produced a real bug. `plaintext` sets the element's base direction from its FIRST STRONG CHARACTER rather than from the page. The Kurdish hero paragraph opens with "WE MANAGE" - a Latin W - so the whole paragraph flipped to a left-to-right base and began on the LEFT of an RTL page. Measured: the first word rendered at x 701 inside a 675-1325 box, i.e. hard against the wrong edge. Arabic escaped it only because its translation happens to start with an Arabic word. `isolate` is what was actually wanted: it isolates the element from the surrounding bidi context - which is what stops brand tokens reordering - while the element keeps the page's own `direction: rtl`. Latin runs INSIDE the paragraph still render left-to-right on their own; the Unicode bidi algorithm has always handled that, and never needed `plaintext` to do it. The copy no longer opens with a Latin token either, but this must not depend on that: any future edit starting with a Latin word would silently flip the paragraph again. */ [dir="rtl"] .wm-hero-para:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-sys-chips a:not([dir="ltr"]):not([dir="ltr"] *) { unicode-bidi: isolate; } /* ========================================================= Hero alignment. The hero column stayed text-align:left under RTL. The headline and paragraph still *read* right-to-left because the script forces it, but the kicker is an inline-flex chip, so it was pinned to the left edge of the column while the headline began at the right — the two sat at opposite ends of a 730px block with nothing connecting them. Aligning the column right puts the kicker directly above the first word of the headline, which is where a Kurdish or Arabic reader starts. ========================================================= */ [dir="rtl"] .wm-hero-left:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-stage:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-label:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-title:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-title span:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-para:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hero-actions:not([dir="ltr"]):not([dir="ltr"] *) { text-align: right; } /* The kicker is inline-flex, so text-align on the parent does not move it — it needs to be pushed to the start edge itself. */ [dir="rtl"] .wm-hero-label:not([dir="ltr"]):not([dir="ltr"] *) { margin-inline-start: auto; margin-inline-end: 0; } [dir="rtl"] .wm-hero-actions:not([dir="ltr"]):not([dir="ltr"] *) { justify-content: flex-start; } /* Body copy scales with the headline. Naskh runs optically smaller than a geometric sans at the same point size, so the whole RTL scale sits a step above the Latin one to read as equally present. */ [dir="rtl"] .wm-hero-para:not([dir="ltr"]):not([dir="ltr"] *) { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.9; } [dir="rtl"] .wm-lead:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .sub-hero p:not([dir="ltr"]):not([dir="ltr"] *) { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.9; } [dir="rtl"] .nav-links a:not([dir="ltr"]):not([dir="ltr"] *) { font-size: 13px; } [dir="rtl"] .wm-scroll-hint:not([dir="ltr"]):not([dir="ltr"] *) { font-size: 11px; } /* ========================================================= Line breaking. The Latin layout was set with headline text that happens to break evenly. Kurdish and Arabic words are longer and break differently, so headings kept dropping a single word onto a line of its own and paragraphs ended on a one-word orphan. text-wrap: balance evens out the lines of a heading so no line is left holding one word; text-wrap: pretty does the narrower job of preventing an orphaned last line in body copy. Both are layout-only - they change where the break falls, never the text. Scoped to [dir="rtl"], so the English line breaks are exactly as before. ========================================================= */ [dir="rtl"] h1:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h3:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] h4:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-hub h2:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .page-title:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .sub-hero h1:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-q-title:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-cta-band h2:not([dir="ltr"]):not([dir="ltr"] *) { text-wrap: balance; } [dir="rtl"] p:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-lead:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-build-sub:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .wm-q-hint:not([dir="ltr"]):not([dir="ltr"] *), [dir="rtl"] .ia-body li:not([dir="ltr"]):not([dir="ltr"] *) { text-wrap: pretty; } /* ========================================================= LTR islands inside an RTL page. The insights articles are published in English on purpose, so the sections holding them carry dir="ltr". Every rule above is guarded with :not([dir="ltr"]):not([dir="ltr"] *), so none of them reach inside and the page's own English styling simply applies — nothing has to be guessed at or restated here. Guards cannot stop inheritance, though. [dir="rtl"] body still sets the Arabic face and right alignment on , and inherited properties flow down into an island regardless of any selector guard. So the island root restates the inherited values the English actually computes to. Both selectors are wrapped in :where(), giving the rule zero specificity. An island root is often a styled element in its own right — .paper-dateline sets its own uppercase and tracking — and at normal specificity this block outranked those rules and flattened the design. At zero it supplies a default only where the page declares nothing, while still beating the inherited Arabic values. Verified by diffing every computed style of every element inside the islands against the English page at a matched viewport width. ========================================================= */ :where([dir="rtl"]) :where([dir="ltr"]) { direction: ltr; text-align: start; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: normal; text-transform: none; line-height: 1.55; } /* The dateline is an island root sitting inside the centred masthead, so it should keep inheriting that centring; the default above would start-align it and pull the Live / Erbil / edition row off centre. */ :where([dir="rtl"]) :where([dir="ltr"].paper-dateline) { text-align: inherit; }