/* ==========================================================================
   London Gulf Nexus — RTL / Arabic overrides
   Loaded ONLY on Arabic pages (/ar/*.html) after ds/styles.css + css/styles.css.
   Scoped under html[dir="rtl"] so it can never affect the English site.
   Most flex/grid layout mirrors automatically under dir="rtl"; this file only
   handles what doesn't: the Arabic webfont, letter-spacing (which breaks Arabic
   letter-joining), and the handful of *physical* offsets in the shared chrome.
   ========================================================================== */

/* ---- Arabic webfont (Latin brand words fall back gracefully) ---- */
html[dir="rtl"] {
  --font-display: 'Tajawal', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Tajawal', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Arabic script must not be letter-spaced (it disconnects the cursive
        joins). The English site leans on letter-spacing for eyebrows; reset it
        site-wide for Arabic. text-transform:uppercase is a harmless no-op. ---- */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  letter-spacing: normal !important;
}

/* ---- Shared header mega-menu: mirror the physical borders + paddings that the
        inline <style> in layout.js sets with left/right values. ---- */
html[dir="rtl"] .lgn-mega-col:not(:first-child) {
  border-left: none;
  border-right: 1px solid var(--border-subtle);
}
html[dir="rtl"] .lgn-mega-fitem:not(:first-child) {
  border-left: none;
  border-right: 1px solid var(--border-subtle);
}
html[dir="rtl"] .lgn-mega-sub {
  padding: 8px 2px 8px 0;
}
html[dir="rtl"] .lgn-mega-sub:hover {
  box-shadow: inset -2px 0 0 var(--gold-500);
  padding-left: 2px;
  padding-right: 9px;
}
html[dir="rtl"] .lgn-mega-sub.is-soon:hover {
  box-shadow: inset -2px 0 0 transparent;
  padding-right: 2px;
}
/* Mobile methodology sub-indents (layout.js sets padding-left !important) */
html[dir="rtl"] .lgn-m-sub  { padding-left: 0 !important; padding-right: 14px !important; }
html[dir="rtl"] .lgn-m-sub2 { padding-left: 0 !important; padding-right: 30px !important; }

/* The mega-menu accent bar uses a 90deg gradient; flip it so the bright centre
   stays centred visually (harmless either way, kept for polish). */
html[dir="rtl"] .lgn-mega-panel::after {
  background: linear-gradient(270deg, transparent, var(--gold-500) 16%, var(--gold-bright) 50%, var(--gold-500) 84%, transparent);
}

/* ---- Footer: the mega-foot arrow points → in English; flip to ← for RTL. ---- */
html[dir="rtl"] .lgn-mega-farrow { transform: scaleX(-1); }
html[dir="rtl"] .lgn-mega-fitem:hover .lgn-mega-farrow { transform: scaleX(-1) translateX(4px); }

/* ==========================================================================
   Bullet lists — the inline styles hard-code the marker at left:0 and reserve
   space with padding-left, neither of which mirror under dir="rtl". Move the
   marker to the start (right) edge and swap the reserved space to the right.
   The li padding value varies (18/22/24/26px) so each is matched exactly.
   ========================================================================== */
html[dir="rtl"] li[style*="padding-left: 18px"] { padding-left: 0 !important; padding-right: 18px !important; }
html[dir="rtl"] li[style*="padding-left: 22px"] { padding-left: 0 !important; padding-right: 22px !important; }
html[dir="rtl"] li[style*="padding-left: 24px"] { padding-left: 0 !important; padding-right: 24px !important; }
html[dir="rtl"] li[style*="padding-left: 26px"] { padding-left: 0 !important; padding-right: 26px !important; }
html[dir="rtl"] li[style*="padding-left"] > span[style*="position: absolute"][style*="left: 0"] {
  left: auto !important;
  right: 0 !important;
}
/* Directional arrow markers (→) point into the text; mirror them to ← for RTL.
   Square-dot markers carry a width; arrows don't — so :not([style*="width"])
   selects only the arrows. */
html[dir="rtl"] li[style*="padding-left"] > span[style*="left: 0"]:not([style*="width"]) {
  transform: scaleX(-1);
  transform-origin: center;
}

/* ==========================================================================
   UPGRADE / LEAD acronym strips — these are CSS grids whose column order
   follows the writing direction, so under RTL the letters reverse (E-D-A-R-G-P-U
   instead of U-P-G-R-A-D-E). Force LTR on the strip so the acronym always reads
   left-to-right; the Arabic labels inside each cell still shape correctly via
   the Unicode bidi algorithm because they're centred.
   ========================================================================== */
html[dir="rtl"] .upg-strip,
html[dir="rtl"] .ld-ribbon { direction: ltr; }
/* The LEAD hero chip row (L·E·A·D) is an inline flex row; keep the acronym
   left-to-right but anchor it to the start (right) edge of the RTL box. */
html[dir="rtl"] .ld-chips { direction: ltr; justify-content: flex-end; }