/* =========================================================
   ModernXscapes — Global Responsive Layer
   Minimal-only. Per-widget fixes live inside each widget's
   own PHP <style> block to avoid cross-contamination.
   ========================================================= */

/* ----- Universal anti-overflow ----- */
html, body { max-width: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }
img, video, picture, iframe, svg, canvas {
    max-width: 100%;
}
@media (max-width: 767px) {
    html, body { width: 100%; }
    /* Catch any rogue child that escapes the viewport on mobile */
    .mx-header,
    .mx-footer,
    section.elementor-section,
    .elementor-widget-wrap,
    [class*="mx-"][class*="__inner"],
    [class*="mx-"][class*="__container"] {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* ----- Hide theme/Astra default mobile menu (we have our own drawer) ----- */
.ast-mobile-menu-buttons,
.ast-mobile-menu-trigger,
.ast-menu-toggle,
.main-header-menu-toggle,
.ast-mobile-menu-wrap,
.ast-mobile-header-wrap,
.ast-builder-menu-mobile,
.ast-header-mobile-toggle,
.ast-mobile-popup-drawer,
#ast-mobile-header { display: none !important; }

/* ----- Sticky header pill — only inset adjustment ----- */
@media (max-width: 1199px) {
    .mx-header.is-scrolled { padding-inline: 16px !important; }
}
@media (max-width: 767px) {
    .mx-header.is-scrolled { padding-inline: 12px !important; }
    .mx-header.is-scrolled .mx-header__inner {
        padding: 10px 16px !important;
        border-radius: 999px !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
    }
    .mx-header.is-scrolled .mx-header__logo svg { height: 44px !important; }
}

/* ----- iOS form fields no-zoom ----- */
@media (max-width: 767px) {
    input, textarea, select { font-size: 16px; }
}

/* ===================================================
   STORY-INTRO + QUALITY-TRIO BANNERS — mobile stack
   =================================================== */
@media (max-width: 767px) {
    /* Banner with X mark + tagline (above and below variants) */
    .mx-story-intro__banner,
    .mx-qt__banner {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 22px 16px !important;
        text-align: center !important;
        flex-wrap: wrap !important;
    }
    .mx-story-intro__banner-mark,
    .mx-qt__banner-mark {
        transform: none !important;
        margin: 0 auto !important;
        width: 30px !important;
        height: 34px !important;
    }
    .mx-story-intro__banner-text,
    .mx-qt__banner-text {
        white-space: normal !important;
        font-size: 15px !important;
        letter-spacing: 1.2px !important;
        text-align: center !important;
        transform: none !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* Story-intro eyebrow — left-aligned stack */
    .mx-story-intro__eyebrow {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 17px !important;
        text-align: left !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .mx-story-intro__eyebrow-icon {
        transform: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-self: flex-start !important;
    }
    .mx-story-intro__eyebrow-text {
        text-align: left !important;
        white-space: normal !important;
        font-size: 15px !important;
        letter-spacing: 1.2px !important;
        line-height: 1.45 !important;
        max-width: 28ch !important;
        overflow-wrap: break-word !important;
    }

    /* Story-intro compact eyebrow (bottom, near CTA) — centered stack */
    .mx-story-intro__compact-eyebrow {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .mx-story-intro__compact-eyebrow-icon {
        transform: none !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-self: center !important;
    }
    .mx-story-intro__compact-eyebrow-text {
        text-align: center !important;
        white-space: normal !important;
        font-size: 15px !important;
        letter-spacing: 1.2px !important;
        line-height: 1.45 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        align-self: center !important;
    }
}

/* =========================================================
   UNIFORM SLIDER/CAROUSEL ARROWS — site-wide
   Match the testimonials-slider style: 56x56 lime-outlined circle
   ========================================================= */
/* Keep arrow CONTAINERS from collapsing — they hold 2 arrows side-by-side */
.mx-tst__arrows,
[class*="mx-"][class*="__arrows"] {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 16px !important;
    width: auto !important;
    align-items: center !important;
}
.mx-tst__arrows > *,
[class*="mx-"][class*="__arrows"] > * {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.mx-tst__arrow,
.mx-spas__arrow,
.mx-spa__arrow,
.mx-spaf__arrow,
.mx-spas__nav-btn,
.mx-pool__arrow,
.mx-pool__nav-btn,
.mx-scs__arrow,
.mx-scs__nav-btn,
.mx-qc__arrow,
.mx-qc__nav-btn,
.mx-pwave__arrow,
.mx-pwave__nav-btn,
.mx-plup__arrow,
.mx-plup__nav-btn,
.mx-cs__arrow,
.mx-cs__nav-btn,
.mx-dtier__arrow,
.mx-dtier__nav-btn,
.mx-drail__arrow,
.mx-drail__nav-btn,
.mx-dcol__arrow,
.mx-dcol__nav-btn,
.mx-ctech__arrow,
.mx-ctech__nav-btn,
.mx-cfin__arrow,
.mx-cfin__nav-btn,
.mx-ce__arrow,
.mx-ce__nav-btn,
.mx-br__arrow,
.mx-br__nav-btn,
button[class*="mx-"][class*="__arrow"]:not([class*="__arrows"]),
button[class*="mx-"][class*="__nav-btn"],
button[class*="mx-"][class*="__slider-prev"],
button[class*="mx-"][class*="__slider-next"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    border: 1.5px solid #77B733 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    color: #77B733 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background 200ms ease, border-color 200ms ease;
}
.mx-tst__arrow:hover,
.mx-tst__arrow:focus-visible,
button[class*="mx-"][class*="__arrow"]:not([class*="__arrows"]):hover,
button[class*="mx-"][class*="__arrow"]:not([class*="__arrows"]):focus-visible,
button[class*="mx-"][class*="__nav-btn"]:hover,
button[class*="mx-"][class*="__nav-btn"]:focus-visible {
    border-color: #77bc1e !important;
    background: rgba(197, 255, 136, 0.08) !important;
}
button[class*="mx-"][class*="__arrow"]:not([class*="__arrows"]) svg,
button[class*="mx-"][class*="__nav-btn"] svg {
    width: 22px !important;
    height: 18px !important;
    stroke: #77B733 !important;
    fill: none !important;
}
/* On dark backgrounds, switch back to lime */
.mx-tst button[class*="__arrow"],
.mx-tst button[class*="__arrow"] svg,
[class*="--dark"] button[class*="__arrow"],
[class*="--dark"] button[class*="__arrow"] svg {
    border-color: #c5ff88 !important;
    stroke: #c5ff88 !important;
    color: #c5ff88 !important;
}
@media (max-width: 600px) {
    button[class*="mx-"][class*="__arrow"]:not([class*="__arrows"]),
    button[class*="mx-"][class*="__nav-btn"] {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    button[class*="mx-"][class*="__arrow"]:not([class*="__arrows"]) svg,
    button[class*="mx-"][class*="__nav-btn"] svg {
        width: 18px !important;
        height: 14px !important;
    }
}