/* Unique capsule geometry from Figma; container spacing stays in .container. */
.site-header {
    --header-width: 37.5rem;
    --header-size: 3.5rem;
    --header-inset: var(--space-6);
    --header-logo-size: 2rem;
    --header-control-offset: 0.625rem;
    --header-top: 0px;
    position: fixed;
    inset-block-start: var(--header-top);
    inset-inline: 0;
    z-index: 20;
    padding-block: 0.6875rem;
}
.site-header__shell { position: relative; inline-size: min(100%, var(--header-width)); margin-inline: auto; }
.site-header__bar {
    display: grid;
    grid-template-columns: var(--header-logo-size) minmax(0, 1fr) var(--header-logo-size);
    align-items: center;
    min-block-size: var(--header-size);
    padding-block: 0.375rem;
    padding-inline: var(--header-inset);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}
.site-header__brand { grid-column: 1; }
.site-header__navigation { display: none; min-inline-size: 0; grid-column: 2; }
.site-header__toggle { grid-column: 3; justify-self: end; margin-inline-end: calc(-1 * var(--header-control-offset)); }
.site-header__panel { padding-block: var(--space-8); background: var(--color-background); }
.site-header__panel-layout { display: grid; gap: var(--space-10); }
.site-header[data-header-ready] .site-header__panel {
    position: fixed;
    inset: var(--header-top) 0 0;
    block-size: calc(100dvh - var(--header-top));
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-background);
    z-index: -1;
}
.site-header[data-header-ready] .site-header__panel-layout {
    min-block-size: 100%;
    padding-block: calc(var(--header-size) + var(--space-10)) var(--space-8);
    align-content: end;
}
.site-header[data-header-open="true"] .site-header__bar { position: relative; }
.site-header[data-header-open="true"] .site-header__panel-layout { animation: whiteway-navigation-in var(--dur-panel) var(--ease-standard) both; }
.site-header[data-header-compact-visible="false"] .site-header__navigation { visibility: hidden; }
.header-menu-open { overflow: hidden; scrollbar-gutter: stable; }
.header-menu-open body { position: fixed; inset-inline: 0; top: var(--header-scroll-top); }
@keyframes whiteway-navigation-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .site-header[data-header-open="true"] .site-header__panel-layout { animation: none; } }
@media (min-width: 48rem) {
    .site-header { --header-inset: 2.5rem; }
    .site-header[data-header-ready] .site-header__navigation { display: block; }
}

.site-header--overlay { padding-block: 0.375rem; }
/* Reserve the former header height on pages without an overlay hero. */
.site-header:not(.site-header--overlay) + main { padding-block-start: var(--site-header-height); }
.admin-bar .site-header { --header-top: var(--wp-admin--admin-bar--height, 32px); }
html { scroll-padding-block-start: calc(var(--site-header-height) + var(--space-4)); }

@media (min-width: 48rem) {
    .site-header[data-header-ready] .site-header__panel-layout { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block-end: var(--space-16); }
}