/* =================================================================
 * 5. Site header (masthead) — anchored to the inset column
 * ================================================================= */
.proof-site-header {
    padding-block: 0.6rem;
    padding-inline: var(--anchor-inset);
    border-bottom: 1px solid var(--wp--preset--color--line);
    background-color: var(--wp--preset--color--bg);
    position: relative;
    z-index: 10;
}

.proof-site-header__brand  { gap: 1.5rem; }
.proof-site-header__right { gap: 0.75rem; }

/* Site identity (logo + title + tagline) */
.proof-site-id {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.4;
}
.proof-site-id .wp-block-site-title {
    font-size: var(--wp--preset--font-size--md);
    font-weight: 400;
    letter-spacing: var(--ls-display);
    line-height: 1.75;
    margin: 0;
}
.proof-site-id .wp-block-site-title a {
    color: inherit;
    text-decoration: none;
}
.proof-site-tagline {
    color: var(--wp--preset--color--text-muted);
    font-size: var(--wp--preset--font-size--xxs);
    letter-spacing: var(--ls-wide);
    font-style: italic;
    margin: 0;
}

.wp-block-site-logo img {
    display: block;
    border-radius: 0;
}

/* =================================================================
 * 6. Navigation — numbered, no drift on hover, hairline submenu
 * ================================================================= */
.proof-nav {
    counter-reset: nav;
    font-size: var(--wp--preset--font-size--sm);
    letter-spacing: var(--ls-wide);
}
.proof-nav .wp-block-navigation__container {
    gap: 1.4rem;
}
.proof-nav .wp-block-navigation-item__content {
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-block: 2px;
    line-height: 1.85;
    transition: border-color 200ms ease, color 200ms ease;
}
/* Top-level item numbering. Match all top-level navigation items
   regardless of whether they came from a manual menu (direct children
   of .wp-block-navigation__container) or from wp:page-list (which
   wraps them in another <ul class="wp-block-page-list">). */
.proof-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before,
.proof-nav .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
    counter-increment: nav;
    content: counter(nav, decimal-leading-zero) ". ";
    font-family: var(--font-mono);
    color: var(--wp--preset--color--text-muted);
    margin-right: 0.5em;
    font-size: 0.85em;
    letter-spacing: 0.04em;
}
.proof-nav .wp-block-navigation-item__content:hover {
    border-bottom-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--text-primary);
}
/* Current page indicator: keep the same numbered prefix (so spacing
   doesn't shift), just paint it accent + bold. The accent underline
   on the link itself does the rest of the lifting. */
.proof-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.proof-nav .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.proof-nav .wp-block-navigation__container > .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::before,
.proof-nav .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::before {
    color: var(--wp--preset--color--accent);
    font-weight: 600;
}
.proof-nav .current-menu-item > .wp-block-navigation-item__content,
.proof-nav .current_page_item > .wp-block-navigation-item__content,
.proof-nav .current-menu-ancestor > .wp-block-navigation-item__content {
    border-bottom-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--text-primary);
    font-weight: 500;
}

/* Submenu / dropdown */
.proof-nav .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--bg);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 0;
    box-shadow: none;
    padding: 0.4rem 0;
    min-width: 12rem;
}
.proof-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.5rem 1rem;
    border-bottom: 0;
    font-size: var(--wp--preset--font-size--sm);
}
.proof-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    display: none;
}
.proof-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent);
    background: transparent;
}

/* Mobile overlay menu */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--text-primary);
    padding: var(--anchor-inset);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    border: 0;
    font-size: var(--wp--preset--font-size--lg);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    fill: var(--wp--preset--color--text-primary);
}

/* =================================================================
 * 7. Inline search (header) — no drift on focus
 * ================================================================= */
/* Grid layout: input cell (12rem) + button cell (auto), wrapper width
   fixed. Input animates from 0 to 12rem WITHIN its own grid cell;
   the button cell is always to the right of that 12rem column, so
   nothing moves when the input grows. flex: 0 0 auto on the wrapper
   prevents the parent flex header from shrinking it under pressure. */
.proof-search-inline .wp-block-search__inside-wrapper {
    display: grid;
    grid-template-columns: 12rem auto;
    align-items: center;
    width: max-content;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    gap: 0;
}
@media (max-width: 720px) {
    /* On mobile collapse the input cell — only the icon shows.
       proof-script (mobile-search.js) intercepts the first tap on the
       submit button so it focuses the input instead of POSTing an
       empty form. focus-within then expands the input below.
       NB: WP core sets `min-width: 3rem` on .wp-block-search__input
       via a :where() rule, which leaves a 48px tappable area to the
       LEFT of the icon even when our `width: 0` applies — tapping
       there focuses the input out-of-band. Override min-width to 0
       so the collapsed input is also a 0×0 hit target. */
    .proof-search-inline .wp-block-search__inside-wrapper {
        grid-template-columns: 0 auto;
    }
    .proof-search-inline .wp-block-search__input {
        min-width: 0;
    }
    /* Override the desktop rule that expands the input to 12rem
       whenever it has a value (`:not(:placeholder-shown)`). On the
       search results page the URL pre-fills `value="…"`, which on
       desktop nicely shows what was searched, but on mobile would
       overlap the brand. Only the open-state class expands here. */
    .proof-site-header:not(.is-search-open) .proof-search-inline .wp-block-search__input:not(:placeholder-shown) {
        width: 0;
        padding-inline: 0;
        border-bottom-color: transparent;
    }
    /* Match the icon to the nav-hamburger's intrinsic 24×24 box so
       the two header controls read as a pair. The button still hits
       its own 24×24 area; we don't pad it out to 44px since the
       hamburger doesn't either, and any larger box on the search
       side starts to swallow space the user reads as "the brand". */
    .proof-search-inline .wp-block-search__button {
        padding: 0;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .proof-search-inline .wp-block-search__button svg {
        width: 20px;
        height: 20px;
    }
    /* Open state — driven by .is-search-open which mobile-search.js
       toggles on the header. We avoid :focus-within because clicking
       the submit button briefly steals focus from the input and the
       overlay flickers. The class is the source of truth.
       The form goes absolute inside the header so the nested flex
       chain (header → __right group → search wrapper) doesn't have
       to negotiate a flex: 1 1 auto override on every layer. */
    .proof-site-header { position: relative; }

    .proof-site-header.is-search-open .proof-site-header__brand,
    .proof-site-header.is-search-open .wp-block-navigation {
        visibility: hidden;
        pointer-events: none;
    }

    .proof-site-header.is-search-open .proof-search-inline {
        position: absolute;
        inset: 0;
        margin: 0;
        z-index: 10;
        background: var(--wp--preset--color--bg, transparent);
        display: flex;
        align-items: center;
        padding-inline: var(--wp--preset--spacing--16, 1rem);
    }
    .proof-site-header.is-search-open .wp-block-search__inside-wrapper {
        grid-template-columns: minmax(0, 1fr) auto !important;
        width: 100% !important;
    }
    .proof-site-header.is-search-open .wp-block-search__input {
        width: 100% !important;
        padding-inline: 0.5rem;
        border-bottom-color: var(--wp--preset--color--accent);
    }
    /* Swap the submit-icon for an × when open: the button's role has
       shifted from "open the search" to "dismiss the search overlay",
       so the affordance shifts with it. SVG hidden via CSS so we
       don't have to mutate the WP-rendered markup; the × is a
       ::before glyph sized to match the original 20×20 icon. */
    .proof-site-header.is-search-open .wp-block-search__button {
        position: relative;
    }
    .proof-site-header.is-search-open .wp-block-search__button svg {
        opacity: 0;
    }
    .proof-site-header.is-search-open .wp-block-search__button::before {
        content: "×";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        font-family: var(--font-mono);
        color: currentColor;
    }
}
.proof-search-inline .wp-block-search__input {
    width: 0;
    justify-self: end;
    padding-block: 0.25rem;
    padding-inline: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--wp--preset--color--text-primary);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--sm);
    transition: width 240ms ease, padding 240ms ease, border-color 240ms ease;
    outline: none;
}
.proof-search-inline:focus-within .wp-block-search__input,
.proof-search-inline .wp-block-search__input:not(:placeholder-shown) {
    width: 12rem;
    padding-inline: 0.5rem;
    border-bottom-color: var(--wp--preset--color--line);
}
.proof-search-inline:focus-within .wp-block-search__input {
    border-bottom-color: var(--wp--preset--color--accent);
}
.proof-search-inline .wp-block-search__button {
    background: transparent;
    color: var(--wp--preset--color--text-secondary);
    border: 0;
    padding: 0.25rem;
    transition: color 200ms ease;
}
.proof-search-inline .wp-block-search__button:hover {
    color: var(--wp--preset--color--accent);
}
.proof-search-inline .wp-block-search__button svg {
    fill: currentColor;
}

/* Large search (search.html, 404.html) */
.proof-search-large .wp-block-search__inside-wrapper {
    border: 0;
    border-bottom: 1px solid var(--wp--preset--color--line);
    background: transparent;
    border-radius: 0;
    padding: 0.25rem 0;
    gap: 0;
}
.proof-search-large .wp-block-search__inside-wrapper:focus-within {
    border-bottom-color: var(--wp--preset--color--accent);
}
.proof-search-large .wp-block-search__input {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--wp--preset--color--text-primary);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--lg);
    padding: 0.5rem 0;
    outline: none;
}
.proof-search-large .wp-block-search__button {
    background: transparent;
    color: var(--wp--preset--color--text-secondary);
    border: 0;
    padding: 0.25rem 0.5rem;
}
.proof-search-large .wp-block-search__button svg { fill: currentColor; }

/* =================================================================