/* RTL overrides — loaded only when is_rtl is true (see the {% if is_rtl %}
   block in templates/marketing_base.html), currently just Arabic.

   Two jobs:
   1. Swap the Latin fonts (Inter / Space Grotesk / JetBrains Mono — none
      of which ship Arabic glyphs) for IBM Plex Sans Arabic everywhere.
   2. Mirror the handful of elements whose positioning is physical
      (left/right, or a hand-drawn arrow icon) instead of logical. Flexbox
      and Grid already reverse row order on their own under dir="rtl" —
      these are only the things that don't flip automatically. */

/* (1) Font swap. Every font-family declaration in app.css uses one of
   exactly three values (Inter, Space Grotesk, JetBrains Mono; verified by
   grepping the whole file), so one blanket rule can safely stand in for
   all of them. !important is deliberate here — this needs to beat
   selectors of every specificity app.css uses for text, and app.css
   itself only reaches for !important once, on `.decoding` (a scramble/
   reveal text-animation effect that should stay in its monospace font
   even when the resolved title is Arabic), which this rule explicitly
   carves out. */
[dir="rtl"] :not(.decoding) {
  font-family: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* (2a) Hand-drawn chevrons that point right in the source SVG path data.
   Grid/Flexbox already mirror the columns around them under dir="rtl";
   without this the arrow would still point the old "forward" direction
   even though "forward" (raw note -> structured output) now reads
   right-to-left. */
[dir="rtl"] .hero-tagline svg,
[dir="rtl"] .example-arrow svg,
[dir="rtl"] .compare-arrow svg {
  transform: scaleX(-1);
}

/* These two collapse to a vertical arrow on narrow screens (see app.css's
   own max-width: 720px rule) — re-apply the horizontal flip underneath
   that rotation so it doesn't cancel back out to pointing the wrong way. */
@media (max-width: 720px) {
  [dir="rtl"] .example-arrow { transform: rotate(90deg) scaleX(-1); }
}
@media (max-width: 720px) {
  [dir="rtl"] .compare-arrow { transform: rotate(90deg) scaleX(-1); }
}

/* (2b) Language switcher dropdown is anchored with `right: 0` so it hugs
   its toggle button — under RTL the toggle sits mirrored in the nav, so
   the menu needs to hang off the left edge instead. */
[dir="rtl"] .lang-switcher-menu {
  right: auto;
  left: 0;
}
@media (max-width: 480px) {
  [dir="rtl"] .lang-switcher-menu {
    left: -0.5rem;
    right: auto;
  }
}

/* (2c) The floating "Combined. More power." brand card in the hero is
   positioned with `left: calc(980px + ...)`, i.e. offset from the right
   edge of the 980px text column. Mirror it to the same offset off the
   text column's left edge so it still sits in the open space beside the
   headline instead of overlapping the (now right-aligned) text. */
[dir="rtl"] .hero-brand-lockup {
  left: auto;
  right: calc(980px + (100% - 980px) * 0.55);
  transform: translate(50%, -50%);
}