header {
    /* opacity: 0; translate: 0 -100px; */
    background: #fff0;
    &.loaded{ opacity: 1; translate: 0 0px; background: #fffa; box-shadow: 0 -2px 3px 3px #0003; }
    transition: all 0.4s ease-in-out;
    backdrop-filter: blur(8px);
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 0;
    color: var(--clr1);
    ul.wp-block-navigation__container > li > a > span, a.wp-element-button { text-transform: uppercase; }
    &: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 {
        color: #fff;
        background: #fff0;
        backdrop-filter: blur(0px);
        box-shadow: 0 0 0 0 #0000, inset 0 80px 80px -80px #000c;
        a.custom-logo-link { img { filter: grayscale(1) invert(1) brightness(2); } }
        button[aria-label="Open menu"]{ svg * { fill: #fff; } }
        .wp-block-buttons .wp-block-button { 
            a.wp-block-button__link { color: #fff; border: 2px solid #fffa; }
        }
        .investor-button a.wp-block-button__link::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75S22.75 17.937 22.75 12S17.937 1.25 12 1.25M2.75 12a9.25 9.25 0 1 1 16.282 6.01a4.84 4.84 0 0 0-1.17-2.034c-.782-.813-1.76-1.286-2.608-1.55c-.626-.195-1.216.03-1.604.293c-.36.242-.94.531-1.65.531s-1.29-.29-1.65-.531c-.388-.262-.978-.488-1.604-.293c-.849.264-1.826.737-2.608 1.55a4.84 4.84 0 0 0-1.17 2.033A9.2 9.2 0 0 1 2.75 12m3.513 7.256c.076-1.011.46-1.724.957-2.241c.553-.576 1.28-.941 1.972-1.157a.2.2 0 0 1 .103.003a.7.7 0 0 1 .216.101c.501.338 1.374.788 2.489.788s1.988-.45 2.489-.788a.7.7 0 0 1 .216-.1a.2.2 0 0 1 .103-.004c.692.216 1.419.581 1.972 1.157c.497.517.88 1.23.957 2.241A9.2 9.2 0 0 1 12 21.25a9.2 9.2 0 0 1-5.737-1.994M9.75 10c0-1.25.97-2.25 2.25-2.25s2.25 1 2.25 2.25s-.97 2.25-2.25 2.25s-2.25-1-2.25-2.25M12 6.25A3.72 3.72 0 0 0 8.25 10A3.72 3.72 0 0 0 12 13.75A3.72 3.72 0 0 0 15.75 10A3.72 3.72 0 0 0 12 6.25'/%3E%3C/svg%3E");
        }
        .wp-block-social-links li { color: #fff !important; border: 2px solid #fffa; }
        .wp-block-navigation__container.is-responsive.wp-block-navigation {
            > li > a:hover { color: #fffa !important; }
            button {
                &::after {
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M442.2 93.1L256 279.3L69.8 93.1L0 162.9l256 256l256-256z'/%3E%3C/svg%3E");
                }
                &[aria-expanded="true"]::after {
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231e1e1e' d='M442.2 93.1L256 279.3L69.8 93.1L0 162.9l256 256l256-256z'/%3E%3C/svg%3E");
                }
            }
        }
        ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
            background: hsl(from  var(--clr2)  h s l / 0.864) !important;
            box-shadow: 0 0 0 1px #fff2;
            li { 
                box-shadow: 1px 0 0 0 #485f75, -1px 0 0 0 #485f75;
                &:hover { background: var(--clr3); }
            }
            
        }
    }

    @media screen and (min-width: 600px) {
        .header-right { gap: 0.4rem; }
        a.custom-logo-link {
            margin: 1em 0;
            img {}
        }
        .investor-button a::after {
            display: inline-block;
            width: 1.42em;
            height: 1.42em;
            vertical-align: -0.364em;
            margin-left: 0.42em;
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231e1e1e' d='M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75S22.75 17.937 22.75 12S17.937 1.25 12 1.25M2.75 12a9.25 9.25 0 1 1 16.282 6.01a4.84 4.84 0 0 0-1.17-2.034c-.782-.813-1.76-1.286-2.608-1.55c-.626-.195-1.216.03-1.604.293c-.36.242-.94.531-1.65.531s-1.29-.29-1.65-.531c-.388-.262-.978-.488-1.604-.293c-.849.264-1.826.737-2.608 1.55a4.84 4.84 0 0 0-1.17 2.033A9.2 9.2 0 0 1 2.75 12m3.513 7.256c.076-1.011.46-1.724.957-2.241c.553-.576 1.28-.941 1.972-1.157a.2.2 0 0 1 .103.003a.7.7 0 0 1 .216.101c.501.338 1.374.788 2.489.788s1.988-.45 2.489-.788a.7.7 0 0 1 .216-.1a.2.2 0 0 1 .103-.004c.692.216 1.419.581 1.972 1.157c.497.517.88 1.23.957 2.241A9.2 9.2 0 0 1 12 21.25a9.2 9.2 0 0 1-5.737-1.994M9.75 10c0-1.25.97-2.25 2.25-2.25s2.25 1 2.25 2.25s-.97 2.25-2.25 2.25s-2.25-1-2.25-2.25M12 6.25A3.72 3.72 0 0 0 8.25 10A3.72 3.72 0 0 0 12 13.75A3.72 3.72 0 0 0 15.75 10A3.72 3.72 0 0 0 12 6.25'/%3E%3C/svg%3E");
        }
        .investor-button a.wp-block-button__link:hover::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75S22.75 17.937 22.75 12S17.937 1.25 12 1.25M2.75 12a9.25 9.25 0 1 1 16.282 6.01a4.84 4.84 0 0 0-1.17-2.034c-.782-.813-1.76-1.286-2.608-1.55c-.626-.195-1.216.03-1.604.293c-.36.242-.94.531-1.65.531s-1.29-.29-1.65-.531c-.388-.262-.978-.488-1.604-.293c-.849.264-1.826.737-2.608 1.55a4.84 4.84 0 0 0-1.17 2.033A9.2 9.2 0 0 1 2.75 12m3.513 7.256c.076-1.011.46-1.724.957-2.241c.553-.576 1.28-.941 1.972-1.157a.2.2 0 0 1 .103.003a.7.7 0 0 1 .216.101c.501.338 1.374.788 2.489.788s1.988-.45 2.489-.788a.7.7 0 0 1 .216-.1a.2.2 0 0 1 .103-.004c.692.216 1.419.581 1.972 1.157c.497.517.88 1.23.957 2.241A9.2 9.2 0 0 1 12 21.25a9.2 9.2 0 0 1-5.737-1.994M9.75 10c0-1.25.97-2.25 2.25-2.25s2.25 1 2.25 2.25s-.97 2.25-2.25 2.25s-2.25-1-2.25-2.25M12 6.25A3.72 3.72 0 0 0 8.25 10A3.72 3.72 0 0 0 12 13.75A3.72 3.72 0 0 0 15.75 10A3.72 3.72 0 0 0 12 6.25'/%3E%3C/svg%3E");
        }
        .wp-block-navigation__container.is-responsive.wp-block-navigation {
            gap: 0;
            > li > a { padding: 1.8em 0.6em; }
            > li > a:hover { color: var(--clr3) !important; }
            button {
                margin: 0 0.4em 0 0;
                margin-left: -0.64em;
                padding: 1em;
                position: relative;
                transition: all 0.2s ease-in-out;
                svg { display: none; }
                &[aria-expanded="true"] {
                    background: #fff8;
                    box-shadow: 0 0 0 1px #0002;
                    margin-left: 0;
                    &:hover { background: #fff; }
                }
                &::after {
                    display: inline-block;
                    position: absolute;
                    left: 0; right: 0;
                    top: 0.2em; bottom: 0;
                    margin: auto;
                    width: 0.64em;
                    height: 0.64em;
                    vertical-align: -0.125em;
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231e1e1e' d='M442.2 93.1L256 279.3L69.8 93.1L0 162.9l256 256l256-256z'/%3E%3C/svg%3E");
                }
            }
        }
        .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=false]~.wp-block-navigation__submenu-container { transform: translateY(-0.4em); }
        .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
            z-index: 999999;
            transform: translateY(0px);
            transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        }
        .wp-block-buttons .wp-block-button { 
            a.wp-block-button__link { 
                background: transparent; 
                color: var(--clr1);
                border: 2px solid var(--clr1);
                padding: 0.6em 1em; 
            }
            a.wp-block-button__link:hover {
                background: var(--clr1) !important;
                color: #fff !important;
            }
        }
        .wp-block-social-links {
            gap: 0.4rem;
            li {
                border-radius: 0;
                border: 2px solid var(--clr1);
                background: transparent !important;
                color: var(--clr1) !important;
                a { 
                    height: 2.6rem; 
                    width: 2.6rem; 
                    display: grid; 
                    place-items: center;
                    svg { width: 100% !important; height: 100% !important;}
                }
            }
            li:hover { 
                transform: scale(1);
                background: var(--clr1) !important;
                color: #fff !important;
            }
        }
        .wp-block-navigation__responsive-container-content {
            margin-right: 1.64rem;
        }

        ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
            display: flex; flex-direction: column !important;
            justify-content: center;
            background: var(--clr2) !important;
            box-shadow: 0 0 0 1px #fff2;
            position: absolute;
            width: fit-content !important;
            top: 4.8em !important;
            li { 
                color: #fff; 
                white-space: nowrap;
                box-shadow: inset 0 -1px 0 0 #fff3;
                &:hover { background: var(--clr3); }
            }
        }
    }
    @media screen and (min-width: 600px) and (max-width: 1000px) {
        .wp-block-social-links { display: none !important; }
        .wp-block-buttons .wp-block-button.investor-button { display: none; }
    }
    @media screen and (max-width: 600px) {
        .wp-block-social-links { display: none; }
        .wp-block-group:has( > .wp-block-buttons .wp-block-button.investor-button ){ display: none; }
        
        a.custom-logo-link {
            margin: 1em 0;
            img { height: 36px; width: auto; }
        }
        &:has( .wp-block-navigation__responsive-container.has-modal-open ) a.custom-logo-link { 
            position: absolute; z-index: 999999; top: 0;
            img { filter: grayscale(1) invert(1) brightness(2); }
        } 
        &:has( .wp-block-navigation__responsive-container.has-modal-open ) .wp-block-group:has( > .wp-block-buttons .wp-block-button.investor-button ){ 
            display: block; 
            position: absolute; 
            z-index: 999999; 
            left: 0; right: 0; top: calc( 100svh - 8em); margin: auto;
            .wp-block-button.investor-button {
                width: 50%; margin: auto;
                border: 1px solid #fff7;
                a { 
                    width: 100%; 
                    &::after {
                        display: inline-block;
                        width: 1.42em;
                        height: 1.42em;
                        vertical-align: -0.264em;
                        margin-left: 1em;
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75S22.75 17.937 22.75 12S17.937 1.25 12 1.25M2.75 12a9.25 9.25 0 1 1 16.282 6.01a4.84 4.84 0 0 0-1.17-2.034c-.782-.813-1.76-1.286-2.608-1.55c-.626-.195-1.216.03-1.604.293c-.36.242-.94.531-1.65.531s-1.29-.29-1.65-.531c-.388-.262-.978-.488-1.604-.293c-.849.264-1.826.737-2.608 1.55a4.84 4.84 0 0 0-1.17 2.033A9.2 9.2 0 0 1 2.75 12m3.513 7.256c.076-1.011.46-1.724.957-2.241c.553-.576 1.28-.941 1.972-1.157a.2.2 0 0 1 .103.003a.7.7 0 0 1 .216.101c.501.338 1.374.788 2.489.788s1.988-.45 2.489-.788a.7.7 0 0 1 .216-.1a.2.2 0 0 1 .103-.004c.692.216 1.419.581 1.972 1.157c.497.517.88 1.23.957 2.241A9.2 9.2 0 0 1 12 21.25a9.2 9.2 0 0 1-5.737-1.994M9.75 10c0-1.25.97-2.25 2.25-2.25s2.25 1 2.25 2.25s-.97 2.25-2.25 2.25s-2.25-1-2.25-2.25M12 6.25A3.72 3.72 0 0 0 8.25 10A3.72 3.72 0 0 0 12 13.75A3.72 3.72 0 0 0 15.75 10A3.72 3.72 0 0 0 12 6.25'/%3E%3C/svg%3E");
                    }
                }
            }
        }
    
        .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;
                        > ul > li {
                            font-weight: normal;
                            font-size: 1.2rem;
                            text-transform: none;
                            a {
                                background: #0002;
                                border-top: none;
                                border-bottom: 1px solid #444;
                            }
                        }
                        a {
                            width: 100%;
                            text-align: center;
                            justify-content: center;
                            padding: 12px !important;
                            border-top: 1px solid #555;
                            border-bottom: 1px solid #555;
                            &:hover { background: #fff2; }
                        }
                    }
                }
            }
        }
    }
}

/* prevents background scroll on mobile hamburger menu overlay open */
html:has( .wp-block-navigation__responsive-container.has-modal-open ),
body:has( .wp-block-navigation__responsive-container.has-modal-open )  { overflow: hidden; }