#services-bar {
    /* Above the sticky mobile header (z-60) so the menu cannot cover it. */
    z-index: 70;
}

#mobile-site-header [role="dialog"] {
    top: var(--header-offset, 0px);
}

@media (max-width: 1023px) {
    #services-bar {
        position: sticky;
        top: 0;
    }
}

/*
 * Desktop: the zip banner is fixed (out of flow), so reserve its 48px (lg:h-12)
 * at the top of the page. Mobile uses the sticky banner above, which stays in
 * flow and grows with its wrapped text, so it needs no offset.
 */
@media (min-width: 1024px) {
    #services-bar {
        top: 0;
    }

    body:has(> #services-bar) {
        padding-top: 48px;
    }

    /* Pages that hide the banner (see app.css) */
    body.page-id-91:has(> #services-bar),
    body.page-id-16552:has(> #services-bar) {
        padding-top: 0;
    }
}

@media screen and (min-width: 783px) {
    body.admin-bar #services-bar {
        top: var(--wp-admin--admin-bar--height, 32px);
    }
}

.desktop-nav-panel {
    width: max-content;
    max-width: 1370px;
}

.desktop-nav-panel--center {
    left: 50%;
    translate: -50% 0;
}

.desktop-nav-last {
    display: grid;
    height: 100%;
}

.desktop-nav-last > :first-child,
.desktop-nav-search-gap,
.desktop-nav-search-gap-bottom {
    grid-area: 1 / 1;
}

/* Right edge stays out of the hover target. 48px wide with 12px past the
   label keeps the same overlap as before. */
.desktop-nav-search-gap {
    position: relative;
    z-index: 2;
    justify-self: end;
    align-self: stretch;
    width: 48px;
    margin-right: -12px;
}

/* Bottom padding under the label. Only intercepts while search is open, so
   moving down into this item's submenu still works once search has closed. */
.desktop-nav-search-gap-bottom {
    position: relative;
    z-index: 2;
    align-self: end;
    height: 32px;
    width: calc(100% + 12px);
    margin-right: -12px;
    pointer-events: none;
}

body.search-active .desktop-nav-search-gap-bottom {
    pointer-events: auto;
}

.desktop-nav-center-bridge {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 20px;
}

.desktop-nav-subchildren {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    grid-auto-columns: max-content;
    border-top: 1px solid #e0e0e0;
}

.desktop-nav-subchildren > :nth-child(n + 8) {
    border-left: 1px solid #e0e0e0;
}