/* ============================================================================
   rtl-demo.css — TEMPORARY RIGHT-TO-LEFT DEMO LAYER (735-190)
   ----------------------------------------------------------------------------
   Additive, deletable, and scoped ENTIRELY to [dir="rtl"] (set on <html> for
   Arabic only, via public.services.lang.localize_html). It SUPERSEDES NOTHING:
   it does not edit the existing LTR CSS, it only overrides the ~physical
   directional declarations (margin/padding left-right, positioned left/right,
   border-left/right, text-align, float) for the demo so an Arabic page reads
   right-to-left.

   This is a DEMO layer to be replaced by proper CSS logical properties
   (margin-inline, padding-inline, inset-inline, text-align: start/end) later.
   Deleting this file returns the site to LTR-only with zero side effects.

   Loaded ONLY on RTL pages (public.services.lang.inject_rtl_stylesheet), so it
   never weighs on the LTR languages.
   ========================================================================== */

/* ── Base flow + type scale (c) ─────────────────────────────────────────────
   direction:rtl makes the browser mirror inline text flow and default
   alignment automatically; only the physical props below need explicit flips.
   Arabic needs more vertical room than Latin, so body text is ~1.1× with a
   looser line-height. */
[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-size: 1.1em;
  line-height: 1.9;
}
[dir="rtl"] { text-align: right; }

/* Latin-script blocks (code, mono eyebrows, versioned build strings) stay LTR
   so numbers/URLs don't reverse. */
[dir="rtl"] code,
[dir="rtl"] .mono,
[dir="rtl"] [style*="monospace"] { direction: ltr; }

/* ── text-align flips ───────────────────────────────────────────────────────*/
[dir="rtl"] .masthead-stats { text-align: left; }
[dir="rtl"] .banner-dbg-box { text-align: right; }
[dir="rtl"] .bm-card-menu button,
[dir="rtl"] .bm-card-menu .bm-menu-item { text-align: right; }

/* ── margin flips ───────────────────────────────────────────────────────────*/
[dir="rtl"] .nav-logo img { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .nav-beta sup { margin-left: 0; margin-right: 1px; }
[dir="rtl"] .facet-controls,
[dir="rtl"] .filter-reset,
[dir="rtl"] .year-count { margin-left: 0; margin-right: auto; }

/* ── border-left/right flips (vertical dividers) ────────────────────────────*/
[dir="rtl"] .stats-cell {
  border-right: 0;
  border-left: 1px solid var(--border);
}
[dir="rtl"] .stats-cell:last-child {
  border-left: 0;
}
[dir="rtl"] .company-tag-teaser {
  border-left: 0;
  border-right: 3px solid var(--forest, #1F3D2E);
}

/* ── positioned left/right flips (corners, badges, overlays) ────────────────*/
[dir="rtl"] .banner-dbg-box { right: auto; left: 0; }
[dir="rtl"] .home-article-sponsored-flag { left: auto; right: -3px; }
[dir="rtl"] .heat-legend { right: auto; left: 12px; }
[dir="rtl"] .bm-card-corner { right: auto; left: 8px; }
[dir="rtl"] .bm-overlay { right: auto; left: 8px; }
[dir="rtl"] .img-credit { left: auto; right: 6px; }
[dir="rtl"] .img-caption-toggle { right: auto; left: 6px; }

/* ── Tailwind directional utilities used by the demo templates (homepage,
   project page, listings, studio page). Curated set — the ones that actually
   appear; additive so a missing utility simply isn't flipped. ───────────────*/
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }