/**
 * RTL layout overrides.
 *
 * Enqueued only when is_rtl() is true (see hhfeu_scripts() in functions.php).
 * Most directional CSS in this theme lives in <style> blocks embedded per
 * ACF block template, rendered in <body> after this stylesheet's <head>
 * position — so rules here use !important to win regardless of DOM order,
 * and target the stable block class (e.g. .block-hero-home) rather than the
 * per-instance #id used inside those embedded blocks.
 */

/* Generic "find out more"-style arrow buttons, used across many block templates. */
[dir="rtl"] .btn-with-arrow::after {
    content: '←' !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .btn-with-arrow:hover::after,
[dir="rtl"] .btn-with-arrow:focus-visible::after {
    transform: translateX(-4px) !important;
}

/* Back button icon (template-parts/blocks/page-header.php) and breadcrumb
   ">" separators — mirrored horizontally so they point/read the right way. */
[dir="rtl"] .back-button svg {
    transform: scaleX(-1);
}

[dir="rtl"] .breadcrumbs .mx-2 {
    display: inline-block;
    transform: scaleX(-1);
}

/* Hero (Home) block: text column padding/alignment was only ever written
   for LTR (padding-left, text-align: left), so it needs an explicit RTL
   counterpart instead of relying on the mirrored flex row alone. */
@media (min-width: 1024px) {
    [dir="rtl"] .block-hero-home .hero-left {
        padding-left: 0 !important;
        padding-right: 6.7vw !important;
    }

    [dir="rtl"] .block-hero-home .hero-left:not(.has-user-alignment) {
        text-align: right !important;
    }
}

/* The captcha wrapper is scaled down 0.8x with transform-origin "0 0" (the
   physical top-left corner), which is direction-agnostic: it always shrinks
   the box toward the left, even under dir="rtl" where the CSS spec's
   over-constrained-margin rule already pushes the (unscaled) box flush against
   the RIGHT edge to match the newsletter input/heading above it. Left-anchored
   shrinking then eats 20% of the width off the wrong (right) side, leaving the
   widget short of that edge -- re-anchoring to the top-right fixes it. */
[dir="rtl"] .block-hero-home .hero-captcha-wrapper {
    transform-origin: 100% 0 !important;
}

/* Split Content Banner (the half-color / half-image "subscribe" block):
   the image intentionally "bleeds" past its column via a fixed transform;
   the bleed direction must flip along with the mirrored column order. */
[dir="rtl"] .block-split-content-banner .image-column img {
    transform: translateX(7%) !important;
}

/* Same scaled-captcha issue as the hero block above: the newsletter form here
   is width:100% of .text-column, so its right edge already sits flush with the
   column's right padding edge under RTL. The captcha wrapper is width:100% too,
   but transform-origin "0 0" shrinks it away from that edge instead of toward
   it -- re-anchor to the top-right so it stays flush with the form. */
[dir="rtl"] .block-split-content-banner .split-captcha-wrapper {
    transform-origin: 100% 0 !important;
}

[dir="rtl"] .block-split-content-banner .newsletter-error-message {
    text-align: right !important;
}

/* ---------------------------------------------------------------------------
   Newsletter dialogs (dialog-newsletter.php / dialog-header.php).
   Both ship their own <style> blocks with physical-direction rules, plus inline
   margins on the arrow spans, so everything here needs !important. An author
   !important declaration also beats a non-important inline style, which is what
   lets us swap those inline arrow margins.
   --------------------------------------------------------------------------- */

/* Close button sits on the far side of the reading direction. */
[dir="rtl"] .dialog-close-btn {
    right: auto !important;
    left: 0.5rem !important;
}

/* Progress bar fills right-to-left. */
[dir="rtl"] .progress-line {
    left: auto !important;
    right: 0 !important;
}

/* The arrow glyphs (&rarr; / &larr;) and the back-arrow SVG are literal, so
   mirror them. The hover nudge is re-declared because scaleX(-1) also reverses
   the direction of translateX. */
[dir="rtl"] .dialog-arrow {
    display: inline-block;
    transform: scaleX(-1) !important;
}

[dir="rtl"] .dialog-button:hover .dialog-arrow--right,
[dir="rtl"] .dialog-button:focus-visible .dialog-arrow--right {
    transform: scaleX(-1) translateX(4px) !important;
}

[dir="rtl"] .dialog-button-prev:hover .dialog-arrow--left,
[dir="rtl"] .dialog-button-prev:focus-visible .dialog-arrow--left {
    transform: scaleX(-1) translateX(-4px) !important;
}

/* Arrow spacing: swap the inline margin-left/right. */
[dir="rtl"] .dialog-arrow--right {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .dialog-arrow--left {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .dialog-button svg {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .dialog-button-prev svg {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* hCaptcha is scaled down; anchor the scale to the reading-start edge. */
[dir="rtl"] .dialog-captcha-wrapper {
    transform-origin: 100% 0 !important;
}

/* Cookie consent sidebar (inc/cookie-consent.php): the category expand chevron
   is a literal "›" character that always points right when collapsed, reading
   backwards in RTL where it should point toward the start of the line (left).
   Using rotate(180deg) rather than a horizontal flip keeps the expanded state's
   rotate(90deg) meaning "pointing down" unchanged in both directions -- a
   180°-rotated "›" is visually a "‹" for this glyph, so no scaleX is needed. */
[dir="rtl"] .hhfeu-cookie-category__arrow {
    transform: rotate(180deg) !important;
}

[dir="rtl"] .hhfeu-cookie-category.hhfeu-cookie-category--expanded .hhfeu-cookie-category__arrow {
    transform: rotate(90deg) !important;
}