@layer components {
    header.site {
        background-color: var(--color--brand);
        display: flex;
        height: 5.2rem;
        align-items: stretch;
        color: var(--color--brand--white);
        border-bottom: solid 6px var(--color--brand--highlight);

        & a {
            &, &:hover, &:visited, &:active {
                color: var(--color--header--text);
            }

            text-decoration: none;
        }

        &.site {
            & nav {
                display: flex;
                flex-grow: 1;
                border: none;
                color: var(--color--header--text);
                background: none;
                align-self: center;
                border-block: solid var(--size--border) var(--color--brand--contrast);
                justify-content: end;
                text-align: center;
                margin: 0;
                padding-right: var(--space-s);
                height: 38%;

                font-family: var(--font--title--family--xxsmall--all-caps);
                font-size: var(--font--title--size--xxsmall--all-caps);
                font-weight: var(--font--title--weight--xxsmall--all-caps);
                line-height: var(--font--title--line-height--xxsmall--all-caps);
                letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
                text-transform: var(--font--title--casing--xxsmall--all-caps);

                & ul {
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    margin: 0;

                    list-style-type: none;

                    & li {
                        display: flex;
                        align-items: center;
                        border-left: solid var(--nav--size--border) var(--nav--color--border);
                        -webkit-font-smoothing: antialiased;

                        &:not(:last-of-type)::after {
                            content: "❯";
                            display: block;
                            color: var(--color--brand--highlight);
                        }
                    }
                }

                & a {
                    &, &:hover, &:visited, &:active {
                        color: var(--color--header--text);
                        -webkit-font-smoothing: antialiased;
                    }

                    text-decoration: none;
                }
            }
        }
    }

    a.brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: solid var(--size--border) var(--color--brand--contrast);
        width: 13rem;

        & svg {
            height: 2.5rem;
            fill: var(--color--header--text);

            & .cls-2 {
                fill: var(--color--brand--highlight) !important;
            }
        }
    }

    button.menu {
        flex-grow: 1;
        border: none;
        color: var(--nav--color--text);
        background: none;
        align-self: center;
        text-align: right;
        display: inline;
        height: auto;
        min-width: 0;

        font-family: var(--font--title--family--xxsmall--all-caps);
        font-size: var(--font--title--size--xxsmall--all-caps);
        font-weight: var(--font--title--weight--xxsmall--all-caps);
        line-height: var(--font--title--line-height--xxsmall--all-caps);
        letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
        text-transform: var(--font--title--casing--xxsmall--all-caps);
    }

    body.hide-nav header.site button.menu {
        display: none;
    }

    .light-brand {
        & a.brand svg {
            height: 2.5rem;

            & .cls-1 {
                fill: var(--color--header--text) !important;
            }
        }

        button.menu {
            color: var(--color--header--text);
        }
    }

    nav#nav-menu {
        position: fixed;
        top: 5rem;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 5rem);
        border: none;

    }
    @media screen and (min-width: 600px) {
        a.brand {
            width: 16rem;
        }
    }

    @media screen and (min-width: 1000px) {
        header.site {
            display: grid;
            grid-template-columns: subgrid;

            & nav {
                grid-column: span 2;
            }
        }
    }
}


/* TODO: Header paragaraph margin: space-l */