/**
 * MyVox theme RTL overrides (Arabic / Hebrew).
 * Loaded when WordPress is_rtl() is true (AI Translate syncs text_direction for ar/he).
 */

.header .logo {
    margin-left: 0;
    margin-right: 13px;
}

.navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar-nav > li {
    margin-right: 0;
    margin-left: 20px;
}

.my-account .dropdown-menu a {
    padding-left: 0;
    padding-right: 10px;
}

/* Theme Bootstrap4 reboot sets text-align:left on body; it inherits everywhere
   (direction:rtl alone does NOT override an explicit inherited "left") */
html[dir="rtl"] body {
    text-align: right;
}

/* Arabic glyphs render visually smaller per em than Latin at the same px.
   Compensate ~15% so Arabic text reads at the same size as Dutch. */
html[dir="rtl"] body {
    font-size: 16px;
}

/* Hero heading: Mighty Builder pins 27px inline; Arabic needs ~31px for the
   same visual size. Scoped to the homepage hero only. */
html[dir="rtl"] section.home.first h1 {
    font-size: 31px !important;
}

/* Hero: mirror of the LTR composition. Below 992px the columns stack full-
   width; scale the whole skyline down (cover) so text sits over a calm image.
   From 992px the text column sits right; the raw 1:1 crop from the LEFT edge
   (0% mirrors LTR's 100%) puts that column over the same calm sky as Dutch.
   From 1900px keep the theme's own full-width scaling. */
html[dir="rtl"] section.home.first {
    background-size: cover;
    background-position: center top;
}

@media (min-width: 992px) {
    html[dir="rtl"] section.home.first {
        background-size: auto;
        background-position: 0% 30%;
    }
}

@media (min-width: 1900px) {
    html[dir="rtl"] section.home.first {
        background-size: 100% auto;
    }
}

/* Theme hardcodes left alignment — restore natural RTL alignment */
.col-md-6,
.col-md-12 {
    text-align: right;
}

section.home .col-md-12.center,
section.home .col-md-4 {
    text-align: center;
}

section.home .col-md-4 p {
    text-align: justify;
}

/* Homepage laptop column is absolutely pinned to the right in LTR
   (.home_big .col-md-6:nth-child(4) { right:0 }). Mirror to the left
   so text (right) and image (left) no longer overlap. */
html[dir="rtl"] .home_big .col-md-6:nth-child(4) {
    right: auto;
    left: 0;
}

/* Flip decorative floats that were pinned to the right in LTR */
.big,
section.home img.big {
    float: left;
}

.myvox-menu-footer.myvox-menu-footer-default {
    float: left;
}

div[class*="mauticform-field"]:last-child {
    text-align: right;
}

/* Mighty Builder / inline left alignment baked into post content */
body.rtl [style*="text-align: left"],
body.rtl [style*="text-align:left"],
html[dir="rtl"] [style*="text-align: left"],
html[dir="rtl"] [style*="text-align:left"] {
    text-align: right !important;
}

@media (max-width: 992px) {
    .big {
        right: auto;
        left: 0;
    }
}

@media (max-width: 768px) {
    button.navbar-toggler {
        float: left;
        margin-right: 0;
        margin-left: 35px;
    }

    section:nth-child(6) .col-md-6 img {
        right: auto;
        left: 0;
    }
}

/* Inline custom-css / price tables on pages */
body.rtl .price_table tbody tr td {
    text-align: right;
}

/* Bootstrap floats do not mirror with dir=rtl — navbar items stay LTR otherwise */
@media (min-width: 768px) {
    .navbar-nav > li {
        float: right;
    }

    .navbar-right {
        float: left !important;
    }
}