header {
    color: light-dark(var(--color-dark), var(--color-light));
    width: 100vw;
    height: 10vh;
    position: sticky;
    z-index: 999;
    top: 0;
    color: #eee;
    background-color: var(--color-dark-translucent);
    animation: stickyNav linear forwards;
}

@keyframes stickyNav {

    100% {
        background-color: var(--color-dark-translucent);
    }
}

header nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: unset;
    width: 90vw;
    height: 10vh;
    max-width: var(--grid-max);
    margin: 0 auto;
}

    header nav #logo,
    header nav #hamburger {
        z-index: 999;
    }


header > nav > *:first-child {
    align-self: center;
    justify-self: start;
}

header > nav > *:nth-child(2) {
    align-self: center;
    justify-self: center;
}

header > nav > *:last-child {
    align-self: center;
    justify-self: end;
}

header nav a {
    text-decoration-line: none;
    background: none;
    color: #eee;
}

    header nav a:hover {
        color: var(--color-orange);
        transition: none;
    }

    header nav a[active] {
        color: var(--color-orange);
    }

header nav ul {
    display: flex;
    flex-direction: row;
    gap: var(--s1);
    list-style-type: none;
}

header nav #logo svg {
    height: 4.5vh;
}

header button {
    border: none;
    background-color: transparent;
    margin-top: 0;
    padding: 0;
}

    header button:hover {
        background-color: unset;
        color: light-dark(var(--color-dark), var(--color-light));
    }


/* Logo SVG colouring */
header nav #logo svg .cls-1 {
    fill: none;
}

header nav #logo svg .cls-2 {
    fill: var(--color-motion-orange);
}

header nav #logo svg .cls-3 {
    fill: var(--color-light);
}


/* Menu setup */
header .menu-container {
    position: absolute;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    left: 0;
    top: 0;
    background-color: var(--color-dark-translucent);
    backdrop-filter: var(--blur-filter);
    display: none;
}

header .menucheckbox {
    display: none;
}

header .hamburger {
    position: absolute;
    top: 3vh;
}

header .menucheckbox:checked ~ .menu-container {
    display: block;
}

@keyframes showMenu {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

header .menu ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style-type: none;
    width: 90vw;
    max-width: var(--grid-max);
    margin: 15vh auto;
    padding-left: 0;
}

header .menu li {
    padding: var(--s1) 0;
}

    header .menu li .menu-item {
        display: flex;
        justify-content: space-between;
    }
/*header .menu li .menu-item:first-child {
width: 23vw;
}*/
header .menu ul a {
    color: var(--color-light);
}

header .menu ul li {
    font-family: 'GothamExtraLight', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: var(--s2);
    cursor: pointer;
    color: light-dark(var(--color-dark), var(--color-light));
}

    header .menu ul li .menu-item a {
        border-left: 6px solid transparent;
        padding-left: 1rem;
        transition: border-left .1s ease-in-out;
    }

    header .menu ul li:hover .menu-item {
        color: var(--color-motion-orange);
    }

        header .menu ul li:hover .menu-item a {
            border-color: var(--color-motion-orange);
            color: var(--color-motion-orange);
        }


header .menu .sub-menu {
    position: absolute;
    background-color: transparent;
    height: 90vh;
    height: 90dvh;
    left: 30vw;
    top: 10vh;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    list-style-type: none;
    display: none;
}

    header .menu .sub-menu ul {
        margin-top: 5vh;
    }

    header .menu .sub-menu a {
        color: var(--color-light);
    }

    header .menu .sub-menu li {
        font-family: 'GothamExtraLight', Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: var(--s2);
        cursor: pointer;
        background-color: unset;
        color: light-dark(var(--color-dark), var(--color-light));
        transition: border-left .1s ease-in-out, padding .1s ease-in-out;
    }

        header .menu .sub-menu li a {
            border-left: 4px solid transparent;
            padding-left: 1rem;
            /*margin-left: 2rem;*/
            transition: border-left .1s ease-in-out;
        }

        header .menu .sub-menu li:hover a {
            border-color: var(--color-motion-orange);
            color: var(--color-motion-orange);
        }


/* decorate after link if item has a submenu */
/*header .menu li:has(div)::after {
content: '>';
margin-left:2rem; 
} */

header .menu .parent:hover > .sub-menu {
    display: inline-block;
}

header #headerContactButton::before {
    content: 'Get in touch';
}

@media (max-width: 650px) {

    header #headerContactButton::before {
        content: '';
        display: inline-block;
        width: 36px;
        height: 36px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /> </svg>') center center no-repeat;
    }

    header .menu .sub-menu {
        /*background-color: var(--color-motion-dark-grey) !important;*/
    }

        header .menu ul li, header .menu .sub-menu li {
            font-size: var(--s1);
        }


    header .menu .sub-menu {
        left: 40vw;
    }

    header nav {
        padding-top: 0;
    }

    header .hamburger {
        top: 2.3vh;
    }
}