header {
    position: sticky; top: 0;
    background: #fff;
    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: #1e1e1e;

    display: flex;
    justify-content: space-between;
    align-items: center;

    > .wp-block-group { width: min(1400px, calc(100% - 32px)); margin: auto; }

    ul.wp-block-navigation {
        flex-wrap: nowrap !important;
    } 
    ul.wp-block-navigation > li a { 
        font-size: 1rem;
        box-shadow: 0 0 0 0 #2F726C00;
        transition: box-shadow 0.2s ease-in-out;
        white-space: nowrap;
    }
    ul.wp-block-navigation > li:not(.alt) > a:hover {
        background: #2F726C14;
        box-shadow: 0 0 0 6px #2F726C14;
    } 
    ul > li.alt a {
        background: #2F726C;
        color: #fff !important;
        padding: 6px 24px 8px 24px;
        &:hover { background: #1e1e1e; }
    }
    
    ul.wp-block-navigation__submenu-container {
        > li {
            translate: 0 64px; opacity: 0;
            transition: all 0.24s ease-out !important;
        }
        > li:nth-child(1) { transition-delay: 0 !important;}
        > li:nth-child(2) { transition-delay: 0.1s !important;}
        > li:nth-child(3) { transition-delay: 0.2s !important;}
        > li:nth-child(4) { transition-delay: 0.3s !important;}
        > li a {
            color: #444 !important;
            white-space: nowrap;
            &:hover { background: #0002; }
            border-bottom: 1px solid #0001;
        }
    }
    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
        li {
            translate: 0 0; opacity: 1;
        }
    }
}
body.home header {
    margin-bottom: -80px;
    &::before {
        content: ''; display: block;
        background: linear-gradient(#fff5, #fff0);
        width: 100%; height: 164%;
        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 */
@media screen and (max-width: 1000px) {
    body:has( header.open-header) { overflow: hidden;} /* prevents scroll when nav overlay is open */
    header {
        &.open-header nav.wp-block-navigation {
            position: fixed;
            top: 0; left: 0; right: 0;
            width: 100vw; height: 100vh;
            background: #fff;
            ul {
                flex-direction: column;
                height: 100vh; width: 100%;
                position: absolute; top: 0;
                justify-content: start; align-items: center;
                gap: 4px;
                padding-top: 80px;
                li:not(.nav-tog) {
                    width: calc(100% - 32px);
                    a {
                        width: 100%;
                        text-align: center;
                        background: #eee;
                        padding: 16px;
                        font-size: 1.2rem;
                        &:hover {
                            box-shadow: none;
                        }
                    }
                }
            }
            .nav-tog {
                position: absolute;
                top: 14px; right: 16px;
                &::after {
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z'/%3E%3C/svg%3E");
                }
            }
        }
        &:not(.open-header) ul li:not(.nav-tog) { display: none; }
        nav.wp-block-navigation {
            .nav-tog {
                width: 54px; height: 54px; background: #2f726c;
                a { display: none; }
                &::after {
                    display: inline-block; margin: auto;
                    width: 2.2rem;
                    height: 2.2rem;
                    vertical-align: -0.125em;
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z'/%3E%3C/svg%3E");
                }
            }
        }
        .wp-block-navigation-item.has-child {
            button { display: none !important; }
            ul.wp-block-navigation__submenu-container {
                display: none !important;
                position: relative !important;
            }
        }
    }
}

#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;
}