/**
 * NetCare theme RTL overrides (Arabic / Hebrew).
 * Loaded when WordPress is_rtl() is true (AI Translate syncs text_direction for ar/he).
 *
 * LTR artikel/side layout: image absolute on the left, content float:right.
 * With dir=rtl the sole image div is both :first-child and :last-child, so
 * left:0 and right:0 are over-constrained — CSS then ignores left and the
 * image jumps to the right while content still floats right → overlap.
 * Mirror both sides for RTL.
 *
 * keep-innovating.webp is left-heavy; flip after moving to the right edge so the
 * cutout still faces the text. Desktop min-height keeps bleed comparable to LTR.
 *
 * Do not raise z-index on section.team: that creates a stacking context over the
 * whole block and clips the decorative bleed. Only lift the product cards.
 * Never use z-index:-1 on the decorative image (it disappears behind body).
 */

html[dir="rtl"] section.artikel .content,
html[dir="rtl"] section.side .col-md-6.content {
    float: left;
}

html[dir="rtl"] section.artikel .col-md-3.images div:first-child img,
html[dir="rtl"] section.artikel .col-md-6.images div:first-child img {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

html[dir="rtl"] section.artikel .col-md-3.images div:last-child:not(:first-child) img,
html[dir="rtl"] section.artikel .col-md-6.images div:last-child:not(:first-child) img {
    right: auto;
    left: 0;
}

/* Heading underline sits under the start of the title */
html[dir="rtl"] section.artikel h2:before,
html[dir="rtl"] section.side h2:before {
    margin-left: auto;
    margin-right: 0;
}

/* Match LTR artikel height so absolute image bleed does not grow when copy is shorter */
@media (min-width: 993px) {
    html[dir="rtl"] section.artikel {
        min-height: 402px;
    }
}

/* Cards above the decorative bleed; section itself stays transparent to the tip */
html[dir="rtl"] section.team .col-md-4.product {
    position: relative;
    z-index: 2;
}

/* Page-builder / theme "left" content sections bake LTR alignment */
html[dir="rtl"] section.normal.left h2,
html[dir="rtl"] section.normal.left h3,
html[dir="rtl"] section.normal.left p,
html[dir="rtl"] section.normal.left ul {
    text-align: right;
}