/* ============================================================================
   Plementus — Arabic / RTL override layer.
   Loaded only on Arabic pages (after site.css), scoped to [dir="rtl"].
   Flips the physical-direction rules of site.css; site.css itself is untouched.
   ========================================================================== */

/* Arabic typeface (Plus Jakarta Sans has no Arabic glyphs). */
html[lang="ar"],
html[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* --- Header / navigation ------------------------------------------------- */
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-links a::after { left: auto; right: 0; }
[dir="rtl"] .burger { margin-left: 0; margin-right: auto; }
[dir="rtl"] .brand:hover .tagline {
  margin-left: 0; margin-right: 3px;
  padding-left: 0; padding-right: 14px;
  border-left: 0; border-right: 1px solid rgba(136, 183, 247, .4);
}
[dir="rtl"] .lang-switch { letter-spacing: 0; }

/* Floating action cluster: bottom-right -> bottom-left. */
[dir="rtl"] .nav-actions { right: auto; left: clamp(16px, 3.5vw, 34px); }

/* Skip link: slides in from the right. */
[dir="rtl"] .skip { left: auto; right: -9999px; border-radius: 0 0 0 12px; }
[dir="rtl"] .skip:focus { right: 0; }

/* --- Decorative / positioned elements ------------------------------------ */
[dir="rtl"] .hero .gmark { right: auto; left: -160px; }
[dir="rtl"] .jx-sticky .gmark { right: auto; left: -120px; }
[dir="rtl"] .bs::before { left: auto; right: -20px; }
[dir="rtl"] .wwd-feat::after { right: auto; left: -90px; }

/* Timeline progress fills from the start edge (right in RTL). */
[dir="rtl"] .tl::after { left: auto; right: 3%; }

/* --- Hover paddings / shifts (direction-sensitive) ----------------------- */
[dir="rtl"] .reason { transition: padding-right .55s var(--e), background .55s var(--e); }
[dir="rtl"] .reason:hover { padding-left: 12px; padding-right: 26px; }
[dir="rtl"] .wwd-item { transition: background .4s var(--e), padding-right .4s var(--e); }
[dir="rtl"] .wwd-item:hover { padding-left: 16px; padding-right: 22px; }
[dir="rtl"] .svc:hover { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .office:hover { transform: translateX(-6px); }
[dir="rtl"] .office .r { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hstat { padding-right: 0; padding-left: 24px; }
[dir="rtl"] .lr .pc { text-align: left; }

/* --- Arrow glyphs: mirror, and move the correct way on hover ------------- */
[dir="rtl"] .ar,
[dir="rtl"] .go,
[dir="rtl"] .bc-go { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ar,
[dir="rtl"] .htool:hover .tt-go .ar,
[dir="rtl"] .htool-sub:hover .ar,
[dir="rtl"] .wwd-feat:hover .flnk .ar { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .wwd-item .ar { transform: scaleX(-1) translateX(8px); }
[dir="rtl"] .svc .go { transform: scaleX(-1) translateX(10px); }

/* --- Generic safety: list bullets + any explicit left padding/border ----- */
[dir="rtl"] ul li::before,
[dir="rtl"] .sdetail li::before { left: auto; right: 0; }
[dir="rtl"] .sdetail ul,
[dir="rtl"] .sdetail ol { padding-left: 0; padding-right: 26px; }

/* Geo banner reads LTR in its own block already (dir="ltr" inline). */