:where(.site-header) {

    padding-inline: var(--size-small);
    position: relative;
    z-index: 3;
    width: 100%;


    :where(.header-wrapper) {
        width: 100%;
        max-width: var(--content-width-x-large);
        margin-inline: auto;
        /* Collapses into the alerts' bottom margin when an alert sits above the header. */
        margin-block: var(--size-medium);
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: var(--size-small);
    }

    :where(.nav-and-features) {
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        column-gap: var(--size-small);
    }
}

@media screen and (width <= 68em) {
    :where(.site-header) {
        padding-inline: var(--size-medium);
    }
}

@media screen and (width <= 1200px) {
    /* Desktop nav gives way to the hamburger. Breakpoint kept in sync with mobile-nav.css.
       0,1,0 specificity is intentional — another file also targets this at this width. */
    .site-header {
        :where(.component-primary-navigation) {
            display: none;
        }
    }
}