header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--bg);
    display: flex;

    h1 {
        margin: 0px 10px;
        width: fit-content;
        align-self: center;
    }

    .logo {
        height: 4rem;
        max-height: 4rem;
        width: auto;
        cursor: pointer;
    }

    & > nav {
        display: none;
    }

    details {
        margin: auto 10px auto auto;
        text-align: right;
        & > summary {
            cursor: pointer;
            list-style: none;
            display: inline-flex;
            &::marker, &::-webkit-details-marker {
                display: none;
            }
            &::after {
                background-color: var(--font);
                content: "";
                height: 2em;
                -webkit-mask-image: url(/img/menu.svg);
                mask-image: url(/img/menu.svg);
                -webkit-mask-size: cover;
                mask-size: cover;
                width: 2em;
                transition: transform 0.3s ease, opacity 0.15s ease;
            }
        }
    }
    details[open] {
        & > summary::after {
            -webkit-mask-image: url(/img/close.svg);
            mask-image: url(/img/close.svg);
            transform: rotate(90deg);
        }
    }

    nav {
        position: absolute;
        text-align: right;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0px var(--border-radius) calc(var(--border-radius) / 2) rgba(0, 0, 0, 0.4);
        background: var(--bg);

    
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li {
            margin-bottom: 1em;
            margin-right: 1em;
    
            a {
                transition: color var(--transition-fast) ease-in-out;
                color: var(--font-reduced);
                text-decoration: none;
                font-size: 1.2rem;
                text-transform: uppercase;
                cursor: pointer;
    
                &.current {
                    color: var(--font);
                }
                &:hover, &:focus {
                    color: var(--font);
                }
            }
        }
    }
}

@media prefers-reduced-motion {
    nav > li > a{
        transition: none;
    }
    header {
        details > summary::after {
            transition: none;
        }
        details[open] > summary::after {
            transform: none;
        }
    }
}

@media screen and (min-width: 800px) {
    header {
        grid-column: 2 / span 1;
        padding: var(--padding) 0px;
        display: grid;
        grid-template-columns: auto auto minmax(400px, 3fr);

        .logo {
            grid-column: 1 / span 1;
            border-radius: calc(var(--border-radius) - .1rem);
        }

        & > details {
            display: none;
        }

        & > nav {
            all: unset;
            grid-column: 3 / span 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            ul {
                display: flex;
                justify-content: flex-end;
            }
            li {
                margin-bottom: 0;
            }
        }
    }
}