/* ============================================================
   RTL adjustments — applied to Arabic pages (lang="ar" dir="rtl")
   Layered after styles.css / styles-dark.css / styles-profile.css
   ============================================================ */
html[lang="ar"] body{
  font-family:'Cairo','Inter',system-ui,Arial,sans-serif;
  line-height:1.75;
}

/* ===========================================================
   Site-wide Bidi safety net
   ----------------------------------------------------------
   Every text-bearing element gets `unicode-bidi: isolate` so
   embedded LTR runs (BIM, ISO, LEED, BSI, Green Horizon, GHEPMCO,
   email addresses, URLs, etc.) don't reorder the surrounding
   Arabic words. Also enforces `text-align: right` on prose so
   paragraphs flow from the right edge.
   =========================================================== */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] dt,
html[lang="ar"] dd,
html[lang="ar"] blockquote,
html[lang="ar"] figcaption,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] label,
html[lang="ar"] summary{
  /* `isolate` creates a new bidi context. We MUST also force `direction: rtl`
     here — otherwise an isolated paragraph that starts with a strong-LTR
     character (e.g. "ISO 9001") gets its base direction re-resolved to LTR,
     flipping the whole word order. */
  direction:rtl;
  unicode-bidi:isolate;
}

/* Rich-text container divs — also lock RTL so any direct text or stray Bidi
   weak characters (commas, hyphens, parentheses) resolve in RTL context. */
html[lang="ar"] .article-body,
html[lang="ar"] .article-body div,
html[lang="ar"] .job-detail,
html[lang="ar"] .member-bio,
html[lang="ar"] .col-text,
html[lang="ar"] .feature-inner,
html[lang="ar"] .member-feature-body,
html[lang="ar"] .news-card-body,
html[lang="ar"] .job-card,
html[lang="ar"] .career-card{direction:rtl}

/* Prose blocks (paragraphs, list items, table cells) right-align by default */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] dd,
html[lang="ar"] td,
html[lang="ar"] blockquote{text-align:right}

/* Headings — keep their per-component alignment but stay RTL */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4{text-align:right}

/* Lists: bullets/numbers belong on the right edge of the item */
html[lang="ar"] ul,
html[lang="ar"] ol{padding-left:0;padding-right:20px}

/* Reset list indentation for navigational / layout-grid lists where the bullet
   space would push content into the wrong place. (Each component owns its own
   bullet handling — see .member-bio, .iso-row, .contact-list, etc.) */
html[lang="ar"] .nav ul,
html[lang="ar"] .mega-menu ul,
html[lang="ar"] .foot-grid ul,
html[lang="ar"] .iso-row,
html[lang="ar"] .contact-list,
html[lang="ar"] .stats-grid ul,
html[lang="ar"] .team-grid ul,
html[lang="ar"] .news-grid ul,
html[lang="ar"] .job-grid ul,
html[lang="ar"] .aud-grid ul,
html[lang="ar"] .road-grid ul{padding-right:0}

/* Compact team-member cards stay center-aligned in all cultures */
html[lang="ar"] .member,
html[lang="ar"] .member h3,
html[lang="ar"] .member span{text-align:center}

/* Arabic glyphs render wider than `ch` units measured against the body font.
   Relax max-width constraints on headings so titles don't wrap awkwardly
   and strand punctuation onto a new line. */
html[lang="ar"] .section-title{max-width:none}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4{
  font-family:'Cairo','Archivo',sans-serif;
  letter-spacing:0;
  line-height:1.3;
}
html[lang="ar"] .logo-wm{font-family:'Cairo',sans-serif;font-size:16px;letter-spacing:0}
html[lang="ar"] .logo-wm small{letter-spacing:.15em;font-size:11px}
html[lang="ar"] .kicker,
html[lang="ar"] .eyebrow,
html[lang="ar"] .lbl,
html[lang="ar"] .issuer,
html[lang="ar"] .phase{letter-spacing:0;font-family:'Cairo',sans-serif}

/* Flip directional layout */
html[lang="ar"] .two-col.reverse{direction:rtl}
html[lang="ar"] .nav-tools{margin-left:0;margin-right:6px}
html[lang="ar"] .stats-grid div{border-left:0;border-right:2px solid rgba(255,255,255,.14)}
html[lang="ar"] .stats-grid div:first-child{border-right:0}
/* Flip the grid itself so source order [Vision, Mission, Values] flows R→L
   (Vision rightmost, Values leftmost) — the existing :first-child border/padding
   rules assume this orientation. */
html[lang="ar"] .vm-grid,
html[lang="ar"] .road-grid,
html[lang="ar"] .aud-grid,
html[lang="ar"] .svc-grid,
html[lang="ar"] .cert-grid,
html[lang="ar"] .news-grid,
html[lang="ar"] .job-grid,
html[lang="ar"] .team-grid,
html[lang="ar"] .stats-grid{direction:rtl}
/* Two-column content blocks: force RTL direction + right-alignment on text
   so mixed-language paragraphs (Arabic with embedded BIM / LEED / ISO etc.)
   don't get re-ordered into LTR source order by the Bidi algorithm. */
html[lang="ar"] .col-text{direction:rtl;text-align:right}
html[lang="ar"] .col-text h2,
html[lang="ar"] .col-text h3,
html[lang="ar"] .col-text p,
html[lang="ar"] .col-text li{unicode-bidi:isolate}
html[lang="ar"] .col-text ul,
html[lang="ar"] .col-text ol{padding-left:0;padding-right:20px}
html[lang="ar"] .vm-grid article{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:24px}
html[lang="ar"] .vm-grid article:first-child{border-right:0;padding-right:0}
/* Bullets on Core Values flip to right-edge of each item */
html[lang="ar"] .vm-grid .values li{padding:6px 22px 6px 0}
html[lang="ar"] .vm-grid .values li::before{left:auto;right:0}
html[lang="ar"] .check li{padding-left:0;padding-right:38px}
html[lang="ar"] .check li::before{left:auto;right:0}
html[lang="ar"] .contact-list li span{display:block}
html[lang="ar"] .signature{text-align:right}

/* Hero/page-hero — keep text aligned to right naturally; arrow flips */
html[lang="ar"] .btn::after,
html[lang="ar"] .btn::before{transform:scaleX(-1)}
html[lang="ar"] .btn:hover::after{transform:scaleX(-1) translateX(4px)}

/* Footer columns flow naturally with RTL */
html[lang="ar"] .foot-grid a{display:block}

/* Profile theme aligns hero + section titles to center — that reads as broken
   in RTL, where text expects to flow right→left from the right margin. Pin
   everything back to text-align:right when both profile theme + AR are on. */
html[lang="ar"][data-theme="profile"] .page-hero .eyebrow,
html[lang="ar"][data-theme="profile"] .page-hero h1,
html[lang="ar"][data-theme="profile"] .page-hero .page-sub,
html[lang="ar"][data-theme="profile"] .section-title,
html[lang="ar"][data-theme="profile"] .roadmap .kicker,
html[lang="ar"][data-theme="profile"] .services .kicker,
html[lang="ar"][data-theme="profile"] .team .kicker,
html[lang="ar"][data-theme="profile"] .audience .kicker,
html[lang="ar"][data-theme="profile"] .certs .kicker{text-align:right}

html[lang="ar"][data-theme="profile"] .page-hero .page-sub{margin-left:0;margin-right:0}

@media (max-width:960px){
  html[lang="ar"] .nav-tools{margin-right:0}
}