/**
 * RTL overrides for the Arabic locale — the handful of things CSS logical properties
 * (margin-inline-start/end, border-inline-start/end, inset-inline-start/end, text-align:
 * start/end) can't express on their own: transform values, SVG icon mirroring, and
 * background-position. Everything else genuinely directional in the site's other
 * stylesheets was converted to logical properties directly at the source instead of
 * duplicated here, since those resolve identically to the old physical values when
 * dir="ltr" (zero behavior change for EN/FR) and correctly mirror for dir="rtl" with no
 * separate override needed. This file is the deliberate exception list, not a general
 * RTL dumping ground — before adding a new rule here, check whether a logical property
 * would actually solve it instead.
 *
 * Loaded unconditionally (last, after every other stylesheet) rather than only on /ar/ —
 * every selector here is scoped under html[dir="rtl"], so it's simply inert/never-matching
 * dead weight on English/French pages, which is simpler than a language-conditional
 * enqueue for a handful of small rules.
 */

/* Mobile nav drawer: inset-inline-end/border-inline-start in 02-layout-header.css already
   handle which edge it's anchored/bordered on. transform: translateX() isn't direction-aware
   though — in RTL the drawer is anchored to the LEFT edge, so its off-screen "closed" position
   must translate further LEFT (negative X), not right, or it would slide in from the wrong
   side / overlap the viewport instead of hiding off-screen. */
html[dir="rtl"] .mobile-nav-drawer {
    transform: translateX(-105%);
}

/* Same specificity as the rule above (one attribute selector + one class each) so, without
   this, load order alone decided the tie and the closed-state rule above was winning even
   when .is-open was present — the drawer never visibly opened in RTL. This selector is more
   specific (two classes + the attribute selector) so it correctly wins regardless of order. */
html[dir="rtl"] .mobile-nav-drawer.is-open {
    transform: translateX(0);
}

/* Forward-pointing arrow icons (Feather/Lucide "arrow-right" path, baked inline into these
   buttons/links across the theme — see inc/cpt-application.php, header.php, front-page.php,
   src/blocks/related-articles, src/blocks/blog-grid, src/blocks/hero) need to point the other
   way in RTL, since "forward" in reading order is right-to-left. Flipping the icon
   horizontally (rather than re-authoring every SVG) is safe here because each one is a simple
   directional chevron/arrow, not an asymmetric brand mark. The hero CTA button's arrow
   (src/blocks/hero/save.js) puts the `btn-arrow` class directly on the <svg> itself rather
   than on a wrapping element, so it needs the bare `svg.btn-arrow` form -- `.btn-arrow svg`
   (a descendant selector) never matched it, which is why it wasn't mirroring. */
html[dir="rtl"] .btn-sharp-primary svg,
html[dir="rtl"] .btn-field-detail svg,
html[dir="rtl"] .related-text-link svg,
html[dir="rtl"] .btn-read-article svg,
html[dir="rtl"] svg.btn-arrow,
html[dir="rtl"] .mega-view-all svg {
    transform: scaleX(-1);
}

/* Hover "slide forward" animations: these move the whole element (not just the icon) a few
   px in the reading direction on hover, hardcoded as a positive translateX for LTR. In RTL
   "forward" is leftward, so the sign needs to flip. .btn-field-detail's hover transform is on
   the parent span itself (a different element from the svg it mirrors above), so no
   composition concern there. .related-text-link's hover transform targets the SAME svg that's
   already mirrored via scaleX(-1) above -- using the standalone `translate` property (rather
   than a second function inside `transform`) avoids having to reason about transform-function
   composition order with the existing scaleX, since `translate` always applies as a plain
   screen-space offset regardless of `transform`. The base .related-text-link svg rule (in
   04-sections-blog.css) only transitions `transform` and `color`, so this standalone
   `translate` change had no matching transition and snapped instantly instead of sliding --
   adding it here, scoped to RTL, restores the smooth animation without touching the shared
   LTR rule (which never sets `translate` and so never needed to transition it). */
html[dir="rtl"] .btn-field-detail:hover {
    transform: translateX(-4px);
}
html[dir="rtl"] .related-text-link svg {
    transition: transform 0.2s ease, color 0.2s ease, translate 0.2s ease;
}
html[dir="rtl"] .related-text-link:hover svg {
    transform: scaleX(-1);
    translate: -3px;
}

/* Fluent Forms select-arrow icon (background-position has no logical/direction-aware
   equivalent in CSS) — padding itself already converted to padding-inline-end in
   06-page-overrides.css, this just moves the drawn arrow to match. */
html[dir="rtl"] .rbm-form-container select.ff-el-form-control {
    background-position: left 0.85rem center !important;
}

/* Cosmetic only: the brand-accent bar that wipes in on card hover reads more naturally
   growing from the trailing (right, in RTL) edge inward, matching reading direction.
   (field-card's own version of this effect was removed in 04-sections-homepage.css.) */
html[dir="rtl"] .product-card::before {
    transform-origin: right;
}

/* Greenshift accordion (used in the drip-irrigation blog article's "How It Works" section):
   the block's own "Align: right" Inspector setting bundles text-align with flex-direction:
   row-reverse (it hardcodes both together in its generated CSS -- confirmed by reading the
   plugin's own bundled JS, no separate icon-position attribute exists). That swap also
   relocates the +/- toggle icon to the wrong side. Left at its default "Align: left" in the
   editor (keeping the icon/toggle layout already correct for RTL) and overriding just the
   text-align here instead, so the two effects can be applied independently. !important is
   needed because Greenshift generates its own text-align rule scoped to the block's specific
   #gspb_accordion-id-XXXXXXX id, which otherwise outweighs this class-based selector. */
html[dir="rtl"] .gs-accordion-item__title {
    text-align: right !important;
}