/* Right-to-left pass for the Arabic version (25 Sep 2026).
   The layout is flex/grid throughout, so most of it mirrors itself once direction flips.
   What is left here is the handful of places that were hard-anchored to one side. */

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .sf-page,
html[dir="rtl"] .sf-site-footer { text-align: right; }

/* Accent rules and quote bars were drawn on the left edge. */
html[dir="rtl"] .sf-cf-answer { border-left: 0; border-right: 3px solid #c8102e; padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .sf-qc-kicker::before,
html[dir="rtl"] .sf-guide-kicker::before { margin-right: 0; margin-left: 10px; }

/* Lists: the custom markers sat on the left. */
html[dir="rtl"] .sf-dg-treat__arm li,
html[dir="rtl"] .sf-dg-treat__void li,
html[dir="rtl"] .sf-dg-check li { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .sf-dg-treat__arm li::before,
html[dir="rtl"] .sf-dg-treat__void li::before,
html[dir="rtl"] .sf-dg-check li::before { left: auto; right: 0; }

/* Breadcrumbs and the timeline spine. */
html[dir="rtl"] .sf-dg-crumbs,
html[dir="rtl"] .sf-fi-crumbs,
html[dir="rtl"] .sf-trust-crumbs,
html[dir="rtl"] .breadcrumbs { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] .sf-dg-status li { grid-template-columns: minmax(0, 1fr) 120px; }
html[dir="rtl"] .sf-dg-status time { text-align: left; padding-right: 0; padding-left: 20px; }
html[dir="rtl"] .sf-dg-status li::before { left: auto; right: 112px; }
html[dir="rtl"] .sf-dg-status li::after { left: auto; right: 108px; }

/* Numbers, codes and URLs stay left-to-right inside right-to-left text. */
html[dir="rtl"] time,
html[dir="rtl"] .sf-ct-glance b,
html[dir="rtl"] .sf-dg-stack__key b,
html[dir="rtl"] .sf-dg-vol__sum,
html[dir="rtl"] .sf-lang__code { direction: ltr; unicode-bidi: embed; }

/* The header control and its menu. */
html[dir="rtl"] .sf-lang__menu { right: auto; left: 0; }
html[dir="rtl"] .sf-header .sf-lang--header { margin-left: 0; margin-right: auto; }

@media (max-width: 900px) {
  html[dir="rtl"] .sf-header .sf-mobile-toggle { margin-left: 0 !important; margin-right: 10px; }
}