/*
 * CGP RTL — overrides that logical properties cannot solve.
 * Auto-loaded by WordPress when is_rtl() is true.
 * Most layout uses logical properties, so this file stays minimal.
 */

/* 1. "View All" arrow glyphs (&rarr;, U+2192) in .cgp-btn-link spans
   (gallery / blog / slider header links) point right in LTR. In RTL they
   must point LEFT — mirror the glyph. display: inline-block is required
   because transforms do not apply to inline boxes. */
[dir="rtl"] .cgp-btn-link span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* 2. Showcase case-study link uses the arrow-up-right SVG icon inside
   .cgp-btn-link. In RTL the diagonal must point up-LEFT — mirror it. */
[dir="rtl"] .cgp-btn-link .cgp-icon {
  transform: scaleX(-1);
}

/* 3. Slider carets: the Previous button renders caret-left and Next
   renders caret-right. In RTL, Previous must point RIGHT and Next must
   point LEFT — mirroring both icons swaps them. */
[dir="rtl"] .cgp-slider-arrow .cgp-icon {
  transform: scaleX(-1);
}

/* 4. Footer link arrows (&rarr;) — same glyph mirror as #1. */
[dir="rtl"] .cgp-footer-nav-list a::before {
  transform: scaleX(-1);
}

/* 5. Footer arrow hover slide uses physical translateX(2px)
   (components/footer/footer.css) — the only physical-direction leftover
   in the theme CSS. In RTL the arrow slides toward the content on the
   LEFT, so mirror the offset. Specificity matches the base hover rule;
   rtl.css loads after the main stylesheet, so this wins. */
[dir="rtl"] .cgp-footer-nav-list a:hover::before {
  transform: scaleX(-1) translateX(-2px);
}

/* 6. Post reading-progress hairline (.cgp-post-progress-fill in
   pages/post/post.css). The base rule sets transform-origin: left center;
   in RTL the bar must grow from the RIGHT. Logical properties cannot
   express transform-origin, so this physical override lives here. */
[dir="rtl"] .cgp-post-progress-fill {
  transform-origin: right center;
}

/* 7. Mega menu arrow-up-right SVG icon (components/navbar/). In RTL the
   diagonal must point up-LEFT — mirror it. The mega/drawer carets are
   direction-neutral (rotated 90deg in CSS), so no rule is needed. */
[dir="rtl"] .cgp-mega-arrow {
  transform: scaleX(-1);
}

/* 8. Mega panel centers on the island via translate: -50% 0
   (components/navbar/navbar-mega.css). Logical properties cannot express
   translate direction, so mirror the offset in RTL. */
[dir="rtl"] .cgp-mega-panel {
  translate: 50% 0;
}

/* 9. Product lightbox nav carets (single-product pages). Same pattern as
   the slider carets (#3): both Previous/Next carets are mirrored, so the
   pair swaps sides and points toward the content in RTL. */
[dir="rtl"] .cgp-lightbox-nav .cgp-icon {
  transform: scaleX(-1);
}

/* 10. Filter-bar pills (pages/shop/partials/filter-bar.php). The pill
   count is letter-spaced + uppercased in LTR; Arabic text must not be
   letter-spaced or uppercased (breaks connected script). */
[dir="rtl"] .cgp-pill {
  letter-spacing: 0;
  text-transform: none;
}
