.wh-header{
    --header-offset:2rem;
    --wh-glass-r:248;
    --wh-glass-g:246;
    --wh-glass-b:239;
    --wh-glass-opacity:.25;
    --wh-glass-blur:18px;
    --wh-glass-saturation:140%;
    --wh-glass-border-opacity:.45;
    --wh-shadow-opacity:.10;

    position:relative;
    z-index:9999;
    overflow:visible!important;
    transform:translateY(var(--header-offset));
    transition:transform .34s ease;
}

.wh-header::before{
    content:"";
    position:absolute;
    inset-block:0;
    inset-inline-start:50%;
    width:100vw;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;

    opacity:0;
    background-color:transparent;
    border-bottom:1px solid transparent;
    box-shadow:none;

    transition:
        opacity .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease;
}

.wh-header > *{
    position:relative;
    z-index:1;
}

/* Difference is enabled only after the glass layer has fully disappeared. */
.wh-header.wh-diff .wh-header-logo,
.wh-header.wh-diff .wh-header-nav{
    mix-blend-mode:difference;
}

.wh-header.wh-diff .wh-header-nav,
.wh-header.wh-diff .wh-header-nav a,
.wh-header.wh-diff .wh-header-nav button,
.wh-header.wh-diff .wh-header-nav .elementor-item,
.wh-header.wh-diff .wh-header-nav .e-n-menu-title-text,
.wh-header.wh-diff .wh-header-nav .elementor-menu-toggle{
    color:#fff!important;
}

.wh-header.wh-diff .wh-header-logo img{
    filter:brightness(0) saturate(100%) invert(1)!important;
}

.wh-header.is-scrolled{
    transform:translateY(0);
}

.wh-header.is-scrolled::before{
    opacity:1;

    /* Important: no opaque gradient overlay. The configured opacity now controls
       the complete glass surface, including Safari. */
    background-color:rgba(
        var(--wh-glass-r),
        var(--wh-glass-g),
        var(--wh-glass-b),
        var(--wh-glass-opacity)
    );

    -webkit-backdrop-filter:
        blur(var(--wh-glass-blur))
        saturate(var(--wh-glass-saturation));
    backdrop-filter:
        blur(var(--wh-glass-blur))
        saturate(var(--wh-glass-saturation));

    border-bottom-color:rgba(
        255,
        255,
        255,
        var(--wh-glass-border-opacity)
    );

    box-shadow:
        0 .75rem 2.5rem rgba(
            31,
            38,
            26,
            var(--wh-shadow-opacity)
        ),
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            calc(var(--wh-glass-border-opacity) * .8)
        );
}

.wh-header.is-scrolled .wh-header-nav,
.wh-header.is-scrolled .wh-header-nav a,
.wh-header.is-scrolled .wh-header-nav button,
.wh-header.is-scrolled .wh-header-nav .elementor-item,
.wh-header.is-scrolled .wh-header-nav .e-n-menu-title-text,
.wh-header.is-scrolled .wh-header-nav .elementor-menu-toggle{
    color:#20271a!important;
}

.wh-header.is-scrolled .wh-header-logo img{
    filter:brightness(0) saturate(100%)!important;
}

.wh-header .wh-header-nav svg,
.wh-header .wh-header-nav svg *{
    fill:currentColor;
    stroke:currentColor;
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .wh-header.is-scrolled::before{
        background-color:rgba(
            var(--wh-glass-r),
            var(--wh-glass-g),
            var(--wh-glass-b),
            min(1, calc(var(--wh-glass-opacity) + .35))
        );
    }
}

@media (prefers-reduced-motion:reduce){
    .wh-header,
    .wh-header::before{
        transition:none;
    }
}