/* ──────────────────────────────────────────────────────────────────
   RTL hand-tuned overrides — applied on top of the auto-flipped
   *-rtl.css files. Loaded only when is_rtl() (see inc/enqueue.php).
   The auto-flipper handles directional CSS; this file fixes things
   the flipper cannot infer:
     • SVG icons that have intrinsic horizontal direction
     • Chevron glyphs drawn with rotate()
     • Decorative arrows drawn from external SVG masks
     • Font stack — Tajawal for Arabic
   ────────────────────────────────────────────────────────────────── */

/* Font stack: Montserrat for Latin, Tajawal for Arabic.
   Tajawal's @font-face is constrained to the Arabic unicode-range, so Latin
   glyphs use Montserrat (first in the stack) and only Arabic codepoints fall
   through to Tajawal. */
:root {
	--text: Montserrat, 'Tajawal', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Flip the icons that point left/right. theme_icon() now emits the
   icon id as a class (e.g. "ic ic-arrow-right"), so we can scope precisely.
   Only flip horizontally-directional arrows — `ic-arrow-up`, `ic-arrow-down`,
   `ic-download-arrow` and `ic-expand-arrow` are vertical and must NOT flip. */
[dir="rtl"] svg.ic-arrow-left,
[dir="rtl"] svg.ic-arrow-right,
[dir="rtl"] svg.ic-arrow-long-left,
[dir="rtl"] svg.ic-arrow-long-right {
	transform: scaleX(-1);
}

/* Search-form submit arrow: the button has its own translateX animation
   (slides in/out on input focus) at higher specificity, which clobbers the
   generic scaleX(-1) flip above. Compose both transforms explicitly. */
[dir="rtl"] .apk-search-btn .ic { transform: translateX(2px) scaleX(-1); }
[dir="rtl"] .apk-search-input:focus ~ .apk-search-btn .ic { transform: translateX(0) scaleX(-1); }

/* `.ic-circle-arrow` is a CSS-only "circle with chevron" element (an <i>, not an SVG).
   Its chevron is drawn from arrow-mini.svg via mask-image. Flip the parent so the
   chevron points the right way. The auto-flipper already mirrored the slide
   animation translateX values, so applying scaleX on the parent re-mirrors child
   transforms — which keeps the slide direction matching reading direction. */
[dir="rtl"] .ic-circle-arrow { transform: scaleX(-1); }

/* Lightbox prev/next chevrons. The chevron is drawn as a 12x12 box with
   `border-top + border-right` (an L-shape pointing top-right ↗) that's
   rotated to face left or right. The auto-flipper swapped that
   `border-right` for `border-left`, which flips the L to top-left ↖ and
   makes the rotated result point up/down instead of left/right.
   Restore the original border-right and remove the spurious border-left,
   then pick rotations so prev (now on the right edge) points right and
   next (now on the left edge) points left. */
[dir="rtl"] .lightbox-prev::before,
[dir="rtl"] .lightbox-next::before {
	border-right: 2px solid #fff;
	border-left: 0;
}
[dir="rtl"] .lightbox-prev::before { transform: rotate(45deg); }
[dir="rtl"] .lightbox-next::before { transform: rotate(-135deg); }

/* card-line-arrow uses arrow-right.svg as a mask-image. Flip horizontally. */
[dir="rtl"] .card-line-arrow::after { transform: scaleX(-1); }

/* The breadcrumb separator (var(--bcrumb-sep)) is a chevron-right SVG.
   Flip it so it points the right way in RTL. */
[dir="rtl"] .breadcrumb > li::before { transform: scaleX(-1); }

/* TOC bullet uses mask-image: var(--toc-arrow), a right-pointing arrow.
   Flip horizontally so it points the right way in RTL. */
[dir="rtl"] .toc-list > li::before { transform: scaleX(-1); }

/* tab-menu arrows that animate translateY on hover are vertical — leave alone. */

/* "Back" and "next post" arrow links in single-blog_post and template-tags
   already pull arrow-long-left / arrow-long-right via theme_icon, which is
   covered by the icon flip above. No extra rule needed. */

/* tag-list pill arrow ::before, if any, would be a chevron — covered by the
   generic icon class flip when we know the class. */

/* The animated mobile-menu hamburger -> X glyph rotates path:nth-child(1)
   to rotate(-135deg) and path:nth-child(3) to rotate(135deg). Auto-flipper
   left these alone; rotate(-135deg) and rotate(135deg) form an X regardless
   of direction so no fix needed.

   Same goes for `transform: rotate(180deg)` on tags-expand chevron. */

/* Numeric sprite "rate-nums" uses mask-position:left -<n>px on each
   nth-child. Auto-flipper turned that into `right -<n>px`, which flips the
   anchor edge but the sprite layout is identical (each row of numbers spans
   the full width). No additional fix needed. */