.site-header.sticky-header {
    --header-filter: blur(20px);
}

/*
 * Blur on ::before only: backdrop-filter on the nav row clips dropdowns/off-canvas
 * in Chromium/WebKit. The row stays overflow-visible.
 */
.site-header.sticky-header .ekit-template-content-header > .elementor > .e-con.e-flex:last-child,
.site-header.sticky-header .elementor > .e-con.e-flex:last-child {
    position: relative;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-header.sticky-header .ekit-template-content-header > .elementor > .e-con.e-flex:last-child::before,
.site-header.sticky-header .elementor > .e-con.e-flex:last-child::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    -webkit-backdrop-filter: var(--header-filter, none);
    backdrop-filter: var(--header-filter, none);
}

.site-header.sticky-header .ekit-template-content-header > .elementor > .e-con.e-flex:last-child > *,
.site-header.sticky-header .elementor > .e-con.e-flex:last-child > * {
    position: relative;
    z-index: 1;
}

/*
 * ElementsKit: .elementskit-navbar-nav-default.elementskit-menu-container uses a
 * fixed bar height; .elementskit-menu-offcanvas-elements sets height:100% !important,
 * which resolves to that short header strip—not the viewport. Tie open panels to the
 * viewport when Keystone syncs #site-header.mobile-menu-active (see keystone-framework.js).
 */
@media (max-width: 1024.02px) {
    #site-header.mobile-menu-active .elementskit-navbar-nav-default.elementskit-menu-container.elementskit-menu-offcanvas-elements {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    body.admin-bar #site-header.mobile-menu-active .elementskit-navbar-nav-default.elementskit-menu-container.elementskit-menu-offcanvas-elements {
        height: calc(100vh - 32px) !important;
        height: calc(100dvh - 32px) !important;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar #site-header.mobile-menu-active .elementskit-navbar-nav-default.elementskit-menu-container.elementskit-menu-offcanvas-elements {
            height: calc(100vh - 46px) !important;
            height: calc(100dvh - 46px) !important;
        }
    }

    /* Elementor columns can clip the sliding panel; allow it to extend while open */
    #site-header.mobile-menu-active .site-header .elementor-widget-wrap,
    #site-header.mobile-menu-active .site-header .elementor-widget-container {
        overflow: visible;
    }
}

@media (min-width: 1024.02px) {
    .site-header.sticky-header:not(.scrolled) .elementor > .e-con.e-flex:last-child,
    .site-header.sticky-header:not(.scrolled) .ekit-template-content-header > .elementor > .e-con.e-flex:last-child {
        padding-top: var(--transparent-navigation-padding, 16px);
        padding-bottom: var(--transparent-navigation-padding, 16px);
    }
}

.site-header.sticky-header:not(.scrolled) .ekit-template-content-header > .elementor > .e-con.e-flex:last-child,
.site-header.sticky-header:not(.scrolled) .elementor > .e-con.e-flex:last-child {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.site-header.sticky-header.scrolled .ekit-template-content-header > .elementor > .e-con.e-flex:last-child,
.site-header.sticky-header.scrolled .elementor > .e-con.e-flex:last-child {
    background-color: #0000004d;
}