/*
 * Hand-authored RTL fixes for CTA buttons. NOT auto-generated — rtlcss can flip
 * CSS box properties but it cannot (a) mirror icon *glyphs* (SVG paths / icon
 * fonts) so "forward" carets keep pointing right, nor (b) fix cloned Elementor
 * buttons that still compute `direction: ltr`. Named without the `_inline-`
 * prefix so scripts/gen-rtl-css.mjs ignores it. Scoped narrowly (CTA button icons
 * + the mobile-nav back arrow) so unrelated arrows / accordion chevrons are untouched.
 *
 * Loaded after every other stylesheet on RTL pages (see [locale]/layout.tsx),
 * so these rules win. Everything is gated on [dir="rtl"].
 */

/* (b) Force RTL flow on button anchors whose cloned Elementor context leaked an
   LTR direction (e.g. the "Our Plan" button inside the Next Steps shortcode).
   Harmless on anchors that are already rtl. */
[dir="rtl"] .wcf__btn > a,
[dir="rtl"] .wc-btn-wrapper .wc-btn-primary {
  direction: rtl;
}

/* (a) Mirror the forward caret / arrow icons so they point with the RTL reading
   direction. Only the "-right" forward icons used in CTA buttons. */
[dir="rtl"] .wcf__btn .e-font-icon-svg.e-fas-caret-right,
[dir="rtl"] .wc-btn-wrapper .wc-btn-primary .e-font-icon-svg.e-fas-caret-right,
[dir="rtl"] .wcf__btn i.icon-wcf-arrow-right,
[dir="rtl"] .wc-btn-wrapper .wc-btn-primary i.icon-wcf-arrow-right,
[dir="rtl"] .wc-btn-wrapper .wc-btn-primary i.icon-wcf-angle-right {
  display: inline-block;
  transform: scaleX(-1);
}

/* Mobile submenu "Back" link uses e-fas-arrow-left (points left = "back" in LTR).
   On RTL the back direction mirrors, so flip it to point right — matching how the
   forward icons above are mirrored. Scoped to .nav-back-link so other left/back
   arrows and accordion chevrons stay untouched. */
[dir="rtl"] .nav-back-link .e-font-icon-svg.e-fas-arrow-left {
  display: inline-block;
  transform: scaleX(-1);
}

/* Global custom cursor (.wcf-cursor + .wcf-cursor-follower) is positioned by JS:
   GSAP applies translateX(e.clientX), and clientX is always measured from the
   LEFT edge. rtlcss mirrored its anchor from `left:0` to `right:0`, so a positive
   clientX pushed the cursor off-screen on RTL — it vanished on /ar. Re-anchor to
   the left (matches live, whose inline render_cursor() CSS keeps left:0 and is
   never processed by rtlcss). Must stay left:0 in BOTH directions. */
[dir="rtl"] .wcf-cursor,
[dir="rtl"] .wcf-cursor-follower {
  right: auto;
  left: 0;
}

/* Footer RTL padding/margin. The footer template (.elementor-8) is a faithful port
   of live's /ar element CSS, whose asymmetric --padding/--margin values assume
   Elementor's `body.rtl` *identity* mapping (inline-start = the --padding-RIGHT
   value). We deliberately do NOT set `body.rtl` globally: the rest of the page keeps
   its LTR --padding values and relies on the browser's DEFAULT flip to mirror them,
   so a global body.rtl mis-mirrors every home section (e.g. the About-Colab columns).
   Re-apply the identity mapping scoped to the footer ONLY, so the columns wrapper
   (a03e6f5) and its neighbours land on the same physical side as live. Wins on
   specificity ([dir=rtl] + .elementor-8 + .e-con) and load order (last file). */
[dir="rtl"] .elementor-8 .e-con {
  --padding-inline-start: var(--padding-right);
  --padding-inline-end: var(--padding-left);
  --margin-inline-start: var(--margin-right);
  --margin-inline-end: var(--margin-left);
}