/* ---------- Hamburger ---------- */
    .hamburger-menu {
        display: none;
        flex-direction: column;
        width: 35px;
        height: 35px;
        justify-content: center;
        border: none;
        background: #0175E2;
        cursor: pointer;
        padding: 7px;
        border-radius: 5px;
    }
    .hamburger-menu .bar {
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 2px;
        margin: 2px 0;
        transition: transform .25s ease, opacity .2s ease;
    }
    /* optional X animation when open */
    .hamburger-menu.is-active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .hamburger-menu.is-active .bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.is-active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* ---------- FIX 3: anchor the panel without touching the header's own positioning ----------
       Do NOT set position on .main-navbar-wrap — the theme makes it absolute on mobile so the
       header floats transparently over the hero banner. Overriding that pushes the banner down.
       The panel is fixed instead, and JS sets its top from the header's real bottom edge. */
    .nav-menu-mobile {
        display: none;
        background-color: #fff;
        position: fixed;
        top: var(--mobile-nav-top, 100px);   /* JS overrides this on open */
        left: 0;
        width: 100%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
        padding: 20px;
        z-index: 1050;        /* was missing -> panel slid under page content */
        max-height: var(--mobile-nav-maxh, calc(100vh - 100px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .nav-menu-mobile.open { display: block; }

    .nav-menu-mobile ul { list-style: none; padding: 0; margin: 0; }
    .nav-menu-mobile li { margin-bottom: 15px; display: block; text-align: center; }
    .nav-menu-mobile a { text-decoration: none; color: #333; font-size: 16px; display: block; padding: 4px 0; }

    /* Services submenu: class-driven instead of inline style */
    .nav-menu-mobile .mega-sub-menu {
        display: none;
        background: #f8f9fa;
        padding: 10px;
        border-radius: 8px;
        max-height: 55vh;
        overflow-y: auto;
        margin-top: 10px;
    }
    .nav-menu-mobile .has-submenu.submenu-open > .mega-sub-menu { display: block; }
    .nav-menu-mobile .services-toggle::after {
        content: "\25BE";
        display: inline-block;
        margin-left: 6px;
        transition: transform .2s ease;
    }
    .nav-menu-mobile .has-submenu.submenu-open > .services-toggle::after { transform: rotate(180deg); }

    /* ---------- FIX 1: scroll lock that does NOT break a sticky/fixed header ---------- */
    /* No position:fixed on body. Header stays exactly where it is. */
    html.menu-open, body.menu-open {
        overflow: hidden;
        touch-action: none;
    }

    /* IMPORTANT — why we target .main-navbar-wrap and NOT #header:
       Below 991px the theme hides #top (display:none), so the #header element becomes a
       ZERO-HEIGHT box. The visible white bar (.main-navbar-wrap) is position:absolute and
       sits OUTSIDE that box. So #header.getBoundingClientRect().bottom is 0, not 96 —
       measuring or pinning #header does nothing useful.
       jQuery Sticky already pins #header on scroll; we only guarantee the white bar is
       parked at the top of the viewport while the menu is open. */
    body.menu-open .main-navbar-wrap {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        transition: none !important;   /* theme has a 0.5s transition — stops it sliding */
    }

    @media (max-width: 991px) {
        .hamburger-menu { display: flex; }
        .nav-menu { display: none; }

        #header .mega-sub-menu,
        #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-46 > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
            padding: 10px !important;
        }
    }