@layer component {
    body > header {
        position: relative;
        z-index: 1000;

        color: var(--color-text-light);
        background-color: var(--color-brand-blue);

        accent-color: var(--color-light);

        .site-container {
            display: grid;

            --spacing-block: calc(calc(var(--size-2) * 1.5));
            --spacing-inline: var(--size-2);

            grid-template-columns: max-content auto max-content max-content;
            grid-template-rows: 32px 32px;
            grid-template-areas: "nav logo account cart" "search search search search";
            gap: var(--spacing-block);

            padding: var(--spacing-block) var(--spacing-inline);

            justify-content: space-between;
            align-items: center;

            /* tablet */
            @media screen and (min-width: 768px) {
                --spacing-inline: calc(var(--size-1) * 2.5);

                justify-content: stretch;
            }

            /* desktop */
            @media screen and (min-width: 960px) {
                --spacing-block: var(--size-4);
                --spacing-inline: var(--size-4);

                padding-bottom: 0;

                column-gap: var(--size-10);

                grid-template-columns: max-content auto min-content min-content;
                grid-template-areas: "logo search account cart" "nav tabnav tabnav tabnav";
                justify-content: stretch;
                grid-template-rows: 32px 42px;
            }

            /* large screen */
            @media screen and (min-width: 1024px) {

                max-width: unset;
            }
        }

        .logo {
            grid-area: logo / span 2;
            justify-self: center;

            /* tablet */
            @media screen and (min-width: 768px) {
                grid-area: logo;
                grid-column: 1 / -1;
            }

            /* desktop */
            @media screen and (min-width: 960px) {
                grid-column: unset;
            }
        }

        search {
            grid-area: search;
        }

        .account {
            grid-area: account;
            display: none;
            gap: var(--size-3);
            align-items: center;
            justify-self: end;

            font-size: var(--font-size-1);
            font-weight: var(--font-weight-5);
            line-height: var(--size-4);
            white-space: nowrap;

            p {
                margin: 0;
            }

            span {
                display: none;
            }

            /* desktop */
            @media screen and (min-width: 960px) {
                display: flex;

                p {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 110px;

                    font-size: var(--font-size-00);
                    font-weight: var(--font-weight-3);
                }

                span {
                    display: initial;
                }
            }
        }

        cart-basket {
            grid-area: cart;
            justify-self: end;
            /* margin to make room for top right quantity badge */
            margin-right: var(--size-3);

            /* tablet */
            @media screen and (min-width: 760px) {
                margin-left: var(--size-3);
            }

            /* desktop */
            @media screen and (min-width: 960px) {
                margin-left: 0;
            }
        }

        nav.menu-navigation {
            grid-area: nav;
            justify-self: start;

            /* desktop */
            @media screen and (min-width: 960px) {
                height: 100%;
            }

            /* mobile/tablet */
            .toggle-button {
                display: flex;
                align-items: center;
                gap: var(--size-2);

                /* desktop */
                @media screen and (width < 960px) {
                    span {
                        display: none;
                    }
                }
            }
        }

        nav.tab-navigation {
            grid-area: tabnav;

            & .tab {
                color: var(--color-text);
            }
        }

        form {
            display: flex;
            gap: var(--size-1);

            border-radius: var(--radius-1);
            background-color: var(--color-light);

            &:focus-within {
                outline: 2px auto;
                outline-offset: 2px;
            }

            .form-group  {
                flex: 1 1 auto;
                align-content: center;
            }

            input {
                padding: var(--size-2) 0 var(--size-2) var(--size-3);

                /* hack to enable shrinking */
                width: 40px;
                min-width: 100%;

                /* focus outline added to form instead */
                border: none;
                outline: none;
            }

            button {
                padding: var(--size-2);
                width: auto;

                flex: 0 0 auto;
                border: none;
                background: none;
                outline: none;

                border-inline-start: 1px solid transparent;

                &:is(:focus, :hover) {
                    color: var(--color-brand-blue);
                    border-inline-start: 1px solid var(--color-brand-blue);
                    background-color: color-mix(in hsl, var(--color-brand-blue), transparent 80%);
                }
            }
        }

        a {
            color: currentColor;
            text-decoration: none;

            &:hover {
                color: color-mix(in srgb, currentColor, transparent 10%);
            }
        }
    }

    article > header {
        display: grid;
        gap: var(--size-2);
        height: max-content;

        & .sub-heading {
            color: var(--color-blue);
        }
    }

    /* Safari <= 16.4 and other older browsers */
    @supports not (selector(& p)) {
        body > header > section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--size-2);
        }

        .logo {
            color: white;
        }

        body > header ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body > header search {
            display: block;
            width: 100%;
        }

        body > header search form {
            display: flex;
            gap: var(--size-1);
        }

        body > header search form .form-group {
            flex: 1 1 auto;
            align-content: center;
        }

        body > header search form input {
            padding: var(--size-2) 0 var(--size-2) var(--size-3);
            width: 40px;
            min-width: 100%;
            border: none;
            outline: none;
        }
    }
}