/* Arabic / RTL overrides — loaded only on pages under /ar/. Letter-spacing and
   uppercase are LTR-script conventions that break Arabic's joined letterforms,
   so they're zeroed out here rather than in the shared design system.
   IBM Plex Sans Arabic carries both body and headings (the sans partner of the
   Montserrat + IBM Plex system); Montserrat still renders any Latin in headings. */

[dir="rtl"] body {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", Arial, sans-serif;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .btn, [dir="rtl"] nav.primary-nav a,
[dir="rtl"] nav.primary-nav > ul > li.dropdown > button {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: normal;
}

[dir="rtl"] .mono,
[dir="rtl"] .eyebrow,
[dir="rtl"] .mega-col-title,
[dir="rtl"] .footer-grid h2,
[dir="rtl"] .footer-grid h4 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: .85rem;
}

/* mirror the cut corner and the gold rule for right-to-left reading */
[dir="rtl"] .btn { clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px); }
[dir="rtl"] .btn--ghost { clip-path: none; }
[dir="rtl"] .pillar,
[dir="rtl"] .plate { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
[dir="rtl"] .hero::before,
[dir="rtl"] .cta-band::before { background: linear-gradient(270deg, var(--navy) 0%, rgba(7,49,71,.6) 55%, rgba(7,49,71,0) 100%), var(--ascent); }
[dir="rtl"] .hero-media { inset: 0 auto 0 0; }
[dir="rtl"] .hero-media::after { background: linear-gradient(270deg, var(--navy) 0%, rgba(7,49,71,.35) 60%, rgba(7,49,71,.15) 100%); }
[dir="rtl"] .callout { border-left: 0; border-right: 3px solid var(--gold); }

/* SVG diagram labels: the mono/display classes carry Latin letter-spacing and fonts
   that pull Arabic letters apart. */
[dir="rtl"] .g-t, [dir="rtl"] .g-m, [dir="rtl"] .g-b {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: normal;
}
[dir="rtl"] .flow .tag, [dir="rtl"] .ho-core .fam, [dir="rtl"] .g-runs-tag,
[dir="rtl"] .stack .layer h3 small, [dir="rtl"] .matrix thead th {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
[dir="rtl"] .matrix th, [dir="rtl"] .matrix td { text-align: right; }

/* step flow: connectors run right-to-left */
[dir="rtl"] .flow > li { padding: 0 0 0 22px; }
[dir="rtl"] .flow > li .k i::after { right: auto; left: 0; }
[dir="rtl"] .flow > li.out .k b { clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
@media (max-width: 860px) {
  [dir="rtl"] .flow > li { padding: 0 60px 22px 0; }
  [dir="rtl"] .flow > li .k { left: auto; right: 0; }
  [dir="rtl"] .flow > li .k i::after { left: auto; right: -3.25px; }
}
[dir="rtl"] .stack .layer.top { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }

/* "Works with" handover diagram, mirrored */
[dir="rtl"] .ho-core { clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
[dir="rtl"] .ho-core p { border-left: 0; padding-left: 0; border-right: 3px solid var(--gold); padding-right: 12px; }
[dir="rtl"] .ho-links { margin: 0 40px 0 0; padding: 0 28px 0 0; }
[dir="rtl"] .ho-links::before { left: auto; right: -42px; }
[dir="rtl"] .ho-links li::before { left: auto; right: -28px;
  background: linear-gradient(var(--navy), var(--navy)) 0 50% / 100% 1.5px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1.5px 100% no-repeat; }
[dir="rtl"] .ho-links li:first-child::before { background: linear-gradient(var(--navy), var(--navy)) 0 50% / 100% 1.5px no-repeat, linear-gradient(to bottom, transparent 50%, var(--navy) 50%) 100% 0 / 1.5px 100% no-repeat; }
[dir="rtl"] .ho-links li:last-child::before { background: linear-gradient(var(--navy), var(--navy)) 0 50% / 100% 1.5px no-repeat, linear-gradient(to bottom, var(--navy) 50%, transparent 50%) 100% 0 / 1.5px 100% no-repeat; }
[dir="rtl"] .ho-links li:only-child::before { background: linear-gradient(var(--navy), var(--navy)) 0 50% / 100% 1.5px no-repeat; }
[dir="rtl"] .ho-links li::after { left: auto; right: -8px; }
[dir="rtl"] .ho-links a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--gold); }
[dir="rtl"] .ho-links a b::after { content: " ←"; }
@media (max-width: 860px) {
  [dir="rtl"] .ho-links { margin: 0 24px 0 0; }
  [dir="rtl"] .ho-links::before { left: auto; right: 0; }
  [dir="rtl"] .ho-links li:first-child::before { background: linear-gradient(var(--navy), var(--navy)) 0 calc(50% + 9px) / 100% 1.5px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1.5px 100% no-repeat; }
}

/* Small "mono" labels (map node families, step numbers, tags, levels) use IBM Plex Mono
   with wide tracking, which breaks Arabic joining. Swap the token and kill tracking
   everywhere on Arabic pages: letter-spacing is never right for Arabic script. */
[dir="rtl"] { --mono: "IBM Plex Sans Arabic", "IBM Plex Mono", monospace; }
[dir="rtl"] body * { letter-spacing: normal !important; }