header {
    position: sticky; top: 0;
    background: var(--wp--preset--color--custom-slate);
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 3px 3px #0003;
    z-index: 100;
    width: 100%;
    transition: 
        transform 0.4s ease-in-out,
        background 0.4s ease-in-out,
        backdrop-filter 0.4s ease-in-out,
        box-shadow 0.4s ease-in-out;
    height: 80px;
    color: #fff;

    display: flex;
    justify-content: space-between;
    align-items: center;
    > .wp-block-group {
        width: 100%;
    }
    img {
        height: 64px;
        width: auto;
    }

    ul.wp-block-navigation__submenu-container {
        top: 54px !important;
        > li a {
            color: var(--wp--preset--color--custom-slate) !important;
            white-space: nowrap;
            &:hover { background: #0002; }
            border-bottom: 1px solid #0001;
        }
    }
}
body.home header {
    margin-bottom: -80px;
        &::before {
        content: ''; display: block;
        background: linear-gradient(#1e1e1e44, #1110);
        width: 100%; height: 100%;
        position: absolute;
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    }
    &.at-top {
        background: #0000;
        backdrop-filter: blur(0px);
        box-shadow: 0 -2px 3px 3px #0000;
        &::before { opacity: 1; }
    }
}
/* mobile styles */
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
    padding: 1em 0;
    height: 100vh;
    button.wp-block-navigation__responsive-container-close {
        padding: 0.5em 1em;
    }
    ul, li {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
    }
    ul.wp-block-navigation__container.is-responsive.wp-block-navigation {
        gap: 0;
    }
    li > a.wp-block-navigation-item__content {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        background: rgba(176,176,176,.42);
        border-bottom: 1px solid #0002;
        &:hover { background: #0002; }
        >span {
            width: 100%;
            text-align: center;
        }
    }
    button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle { display: none; }
}

#promo-banner {
    text-align: center;
    background: #1e1e1e;
    color: #fff;
    font-weight: 600;
    margin: 0;
    padding: 4px 16px;
    transition: all 0.2s ease-in-out;
    a {
        color: #fffb;
        font-weight: 400;
        margin-left: 1em;
        &:hover {
            color: #fff;
        }
    }
}
@media screen and (max-width: 767px) {
    #promo-banner {
        font-size: 0.8em;
        font-weight: 400;
        padding: 8px 16px;
        color: #fffc;
    }
}

.hide-header {
  transform: translateY(-100%);
  opacity: 0;
}