@layer main {
    body > header{
        --color-text: var(--color-charcoal);
		--color-link: var(--color-charcoal);
		--color-link-hover: var(--color-charcoal);
		--color-link-active: var(--color-charcoal);
		--color-link-visited: var(--color-charcoal);
        --menu-width: 300px;

        padding-block: calc(var(--spacer) * 1.25);
        position: relative;

        @media (max-width: 768px) {
            --menu-width: 100vw;
        }

        .site-title{
            a{
                display: block;
                width: 289px;
                height: 0;
                padding-top: 45px;
                background-image: url(/images/paccar-parts-logo-color.png);
                background-repeat: no-repeat;
                background-size: contain;
                overflow: hidden;
            }
        }

        nav{
            margin-left: auto;

            @container (max-width: 1024px) {
                position: fixed;
                height: calc(100vh - 72px);
                width: var(--menu-width);
                padding: calc(var(--spacer) * 1.5);
                inset: 72px calc(var(--menu-width) * -1) auto auto;
                background-color: rgb(var(--color-white));
                z-index: 1;
                transition: right .3s;
            }

            &.open{
                right: 0;
            }
        }

        [role="menubar"]{
            font-weight: 500;
            font-size: 1.125em;
            gap: calc(var(--spacer) * 2);

            @container (max-width: 1024px) {
                flex-direction: column;
                gap: var(--spacer);
            }

            a{
                text-decoration: none;
            }
        }

        .burger{
            display: none;
            font-family: var(--font-family-icon);
            font-size: 2em;
            line-height: 1;
            font-weight: 600;

            @container (max-width: 1024px) {
                display: block;
            }
        }

        .search-icon{
            font-family: var(--font-family-icon);
            color: rgb(var(--color-white));
            font-size: .75em;
            line-height: 1;
            height: 28px;
            aspect-ratio: 1 / 1;
            background-color: rgb(var(--color-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-left: var(--spacer);

            @container (max-width: 1024px) {
                display: none;
            }
        }

        .search-bar-wrapper{
            position: absolute;
            z-index: 1;
            width: 100%;
            padding-block: calc(var(--spacer) * 1.25);
            background-color: rgb(var(--color-dk-blue));
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s, right .3s;

            @container (max-width: 1024px) {
                opacity: 1;
                pointer-events: all;
                width: var(--menu-width);
                inset: 72px calc(var(--menu-width) * -1) auto auto;
            }

            &.open{
                opacity: 1;
                pointer-events: all;

                @container (max-width: 1024px) {
                    right: 0;
                }
            }

            form{
                display: flex;
                width: 100%;
            }

            label{
                visibility: hidden;
                height: 0;
                width: 0;
                overflow: hidden;
            }

            input{
                border-radius: 0;
                border: none;
                flex: 1;
                padding: calc(var(--spacer) * .6) var(--spacer);
                font-size: 1.275em;
                font-family: var(--font-family-display);
            }

            button{
                font-size: 1.5em;
                font-family: var(--font-family-icon);
                aspect-ratio: 1 / 1;
                color: rgb(var(--color-white));
                font-weight: 300;
                background-color: rgb(var(--color-lt-blue));
                border: none;
            }
        }
    }
}