html.fgma-header-scroll-lock,
body.fgma-header-scroll-lock {
    overflow: hidden;
}

/*
 * R3.7D.1 Row 7 -- confirmed live: no rule anywhere (Template 2746's own Custom CSS, the separate
 * wp_custom_css "Additional CSS" global stylesheet, or this codebase) changes nav-link font-weight
 * on hover; the only real top-level hover effect is R3.7Q-026B's opacity fade, which cannot itself
 * cause layout movement. The one confirmed, code-verified mechanism that CAN shift the desktop nav
 * row is this component's own scroll lock (above): opening the Firm/Expertise panel on hover adds
 * `overflow:hidden` to html/body, and on any browser/OS where the page scrollbar consumes layout
 * width (non-overlay scrollbars), removing it the instant the panel opens widens the viewport by
 * the scrollbar's own width, shifting the right-aligned `.fgma-header-desktop-nav` outward by that
 * distance. `--fgma-header-scrollbar-width` is measured live by fgma-header.js's own
 * measureScrollbarWidth(), immediately before the lock class is applied, and defaults to 0px (a
 * no-op) wherever the defect doesn't exist (e.g. this environment's own overlay-scrollbar Chrome).
 */
body.fgma-header-scroll-lock {
    padding-right: var(--fgma-header-scrollbar-width, 0px);
}

/**
 * R3.7C-S.2 — Header live-search progressive enhancement (fgma-header.js).
 *
 * The results container is injected by JS as a plain sibling immediately after the existing native
 * `.fgma-header-search-form` inside `.fgma-header-search-card` (Header Template 2746, untouched) --
 * it therefore already inherits that card's own `max-width`/centering for free as a normal block-level
 * child, so nothing here re-declares width/max-width/centering. Colors/typography reuse the exact
 * same global tokens Template 2746's own search-panel CSS already uses (`--fgma-white`/`--fgma-black`/
 * `--fgma-brand-red`/`--fgma-light-gray`, confirmed real Kit-level globals, `post-7.css`) and the
 * shared `--fgma-font-family`/`--fgma-weight-*`/`--fgma-step-*`/`--fgma-space-*` tokens used
 * throughout this codebase -- nothing invented fresh, nothing duplicated from Template 2746's own
 * per-instance CSS.
 *
 * No breakpoint-specific width match to `.fgma-header-search-form`'s own `width:50%` desktop rule is
 * attempted here (that exact breakpoint lives only in Template 2746's own frozen CSS, not this file) --
 * left as a known, explicit browser-QA follow-up rather than guessed.
 */
.fgma-header-search-results {
    margin-block-start: var(--fgma-space-sm);
    max-height: 60vh;
    overflow-y: auto;
}

.fgma-header-search-results__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.fgma-header-search-results__item {
    margin: 0;
    padding: 0;
    border-block-end: 1px solid var(--fgma-light-gray, #D2D2D2);
}

.fgma-header-search-results__item:last-child {
    border-block-end: 0;
}

.fgma-header-search-results__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fgma-space-sm);
    padding-block: var(--fgma-space-xs);
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-book);
    font-size: var(--fgma-step-0);
    line-height: 1.35;
    color: var(--fgma-black, #000);
    text-decoration: none;
}

.fgma-header-search-results__link:hover,
.fgma-header-search-results__link:focus-visible,
.fgma-header-search-results__link--active {
    color: var(--fgma-brand-red, #F21400);
}

.fgma-header-search-results__title {
    flex: 1 1 auto;
    min-width: 0;
}

.fgma-header-search-results__type {
    flex: 0 0 auto;
    font-size: var(--fgma-step-0);
    color: var(--fgma-gray, #949494);
}

.fgma-header-search-results__empty {
    margin: 0;
    padding-block: var(--fgma-space-xs);
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-book);
    font-size: var(--fgma-step-0);
    color: var(--fgma-gray, #949494);
}