/*
 * Zoffis sticky / fixed header v1.6.7
 *
 * Desktop: sticky.
 * Mobile: fixed, because mobile Safari/layout containers can prevent
 * position:sticky from remaining attached to the viewport.
 */

header.zf-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* No spacer is needed while the desktop header remains in document flow. */
.zf-mobile-fixed-header-spacer {
    display: none;
}

/*
 * WordPress admin bar offsets on desktop.
 */
body.admin-bar header.zf-header {
    top: 32px;
}

/*
 * Keep header-owned navigation controls above normal page content.
 */
header.zf-header .zf-navigation,
header.zf-header .zf-main-navigation,
header.zf-header .zf-mobile-navigation {
    z-index: 1210;
}

/*
 * MOBILE
 *
 * Use a true fixed viewport header rather than sticky.
 * The JS measures the real rendered height and updates the spacer so the
 * first section never disappears underneath the header.
 */
@media screen and (max-width: 760px) {
    header.zf-header {
        position: fixed !important;
        top: 0 !important;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 2147481000;
        overflow: visible;
        transform: none !important;
        will-change: auto;
    }

    .zf-mobile-fixed-header-spacer {
        display: block;
        width: 100%;
        height: var(--zf-mobile-fixed-header-height, 72px);
        pointer-events: none;
        visibility: hidden;
    }

    /*
     * WordPress itself reserves space for the admin bar in the page.
     * The fixed Zoffis header still needs its viewport top offset.
     */
    body.admin-bar header.zf-header {
        top: 46px !important;
    }

    /*
     * If the hamburger navigation uses an absolutely positioned panel,
     * anchor it to the fixed header rather than page content.
     */
    header.zf-header .zf-navigation {
        z-index: 2147481010;
    }
}

/* WordPress switches admin-bar height at 782px. */
@media screen and (min-width: 761px) and (max-width: 782px) {
    body.admin-bar header.zf-header {
        top: 46px;
    }
}