header {
    background: var(--clr2); color: #fff;
    &.loaded{ opacity: 1; translate: 0 -1px; background: var(--clr2); }
    transition: all 0.4s ease-in-out;
    z-index: 100;
    position: sticky;
    width: 100%;
    top: 0;
    height: 80px; margin-bottom: -80px;
    display: flex;
    margin-top: 0;

    > div { width: 100%;}
    &:not( .at-top ) { 
        transition: color 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
    }
    &.at-top { }
    > div { margin: auto; max-width: min(calc(100% - 2em), 1400px); 
        > div.wp-block-group-is-layout-flex { flex-wrap: nowrap; }
    }
    nav a strong { color: var(--clr3); }
    nav .btn a { background: var(--clr3) !important; display: inline-block; padding: 8px 32px; border-radius: 100px; box-shadow: 0 0 0 8px rgb( from var(--clr3) r g b / 0.42); transition: 0.4s ease; }
    nav .btn a:hover { box-shadow: 0 0 0 0 rgb( from var(--clr3) r g b / 1); }

    /* mobile nav styles */
    @media screen and (max-width: 600px) {
        &:has( .wp-block-navigation__responsive-container.has-modal-open ) a.custom-logo-link { 
            position: absolute; z-index: 999999; top: -11px;
        } 
        .wp-block-navigation__responsive-container.has-modal-open {
            height: 100vh;
            background: var(--clr2) !important;
            padding: 0;
            a { color: #fff !important; }
            button[aria-label="Close menu"]{ 
                background: #fff1;
                padding: 1em;
                margin: 1em;
                svg { path { fill: #fff; }}
                box-shadow: 0 0 0 1px #fff3;
            }
            .wp-block-navigation__responsive-container-content {
                font-size: 1.6rem;
                padding-top: 7rem;
                ul {
                    width: 100% !important;
                    padding: 0 !important; 
                    gap: 0 !important;
                    li {
                        width: 100%;
                        font-weight: bold;
                        text-transform: uppercase;
                        a {
                            width: 100%;
                            text-align: center;
                            justify-content: center;
                            padding: 12px !important;
                            border-bottom: 1px solid #555;
                            &:hover { background: #fff2; }
                        }
                    }
                    li:nth-child(1) a { border-top: 1px solid #555; } 
                    li.btn a { max-width: 142px; margin: 2rem auto;}
                }
            }
        }
    }
}