/* ==========================================================================
   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: 'IBM Plex Sans Arabic', 'Tajawal', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', '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); }