/* ================================================
   MENU FIX - Standalone CSS for static HTML sites
   ================================================ */

/* --- Make outer header sticky with white background ---
   Prevents hero image bleeding through on scroll.
   White matches both inner headers (--e-global-color-3a5618a = #FFFFFF) */
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
}

/* --- DESKTOP: Show submenu on hover (1025px+) --- */
@media (min-width: 1025px) {
    .elementor-nav-menu--main .menu-item-has-children {
        position: relative;
    }
    .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        min-width: 200px;
        width: max-content;
    }
}

/* --- MOBILE/TABLET: Full-width dropdown via fixed positioning ---
   position:fixed + 100vw guarantees full width regardless of DOM nesting.
   top is set by JS using toggle.getBoundingClientRect().bottom.
   Since header is sticky, toggle Y never changes = no scroll handler needed. */
@media (max-width: 1024px) {
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important;
        left: 0 !important;
        width: 100vw !important;
        z-index: 9998 !important;
        transform-origin: top center !important;
        box-sizing: border-box !important;
    }
    .elementor-nav-menu--dropdown .menu-item-has-children.sub-open > .sub-menu {
        display: block !important;
    }
}

/* --- HAMBURGER OPEN STATE --- */
.elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    max-height: 100vh !important;
    transform: scaleY(1) !important;
    overflow-y: auto !important;
}

/* --- HAMBURGER CLOSED STATE --- */
.elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
    max-height: 0 !important;
    transform: scaleY(0) !important;
    overflow: hidden !important;
}

/* --- ICON SWAP --- */
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open { display: none !important; }
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close { display: flex !important; }
.elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--close { display: none !important; }
.elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open { display: flex !important; }

/* --- CARET ICON --- */
.menu-caret-icon {
    width: 0.55em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-block;
    flex-shrink: 0;
}

/* --- CALL BAR AND CHAT BUBBLE (phones, where the call bar shows) ---
   The call-now bar is 60px, fixed to the bottom, and sat on the same top
   layer as the chat widget (both 2147483647), with nothing reserving its
   space: it covered the footer and fought the chat bubble for the corner.
   - the page keeps 60px clear at the bottom, so the footer is reachable;
   - the bar drops one layer, so an OPEN chat panel covers it;
   - a closed chat (its bubble showing) sits above the bar, not under it.
   The chat widget has no id or class; its bubble is the only element with
   this aria-label. Pages without the widget are unaffected by that rule. */
@media screen and (max-width: 650px) {
    body:has(#callnowbutton) {
        padding-bottom: 60px;
    }
    #callnowbutton.cnb-full {
        z-index: 2147483646 !important;
    }
    body > div:has(> button[aria-label="Get a free quote"][style*="display: flex"]) {
        bottom: 60px !important;
    }
}

/* --- HEADER CALL BUTTON: at least 48px tall, the touch-target minimum --- */
.elementor-location-header a.elementor-button[href^="tel:"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}