/* Site search — the header control, the results panel and the Login menu.
   NOT in _Header.cshtml.css, and that is load-bearing: CSS isolation appends a
   scope attribute (.header-search__thumb[b-uko4scsesr]) that only elements
   AUTHORED in the .cshtml carry. Every result row is built by site-search.js
   through innerHTML, so it has no scope attribute and a scoped rule never
   matches it — the panel renders completely unstyled. A plain stylesheet has
   no such restriction. */

/* ===================================================
   Header site search
   The panel deliberately reuses .dropdown's geometry so the two full-width
   surfaces read as one. It must NOT carry the class `dropdown`: the layout's
   outside-click handler closes any .dropdown-on outside a .nav-mega-item,
   which would slam this shut on the first click in the field.
   =================================================== */

.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-right: 4px;
}

/* The resting control. Merging the two login links freed ~87px, which is what pays
   for this being a 210px field-shaped target rather than a bare glyph: the row lands
   near 1160px of its 1416px usable width. Below 993px it drops the label and becomes
   the 32px icon alone. */
.header .header-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 210px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 50px;
    background: #eceef1;
    color: #10293c;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.header .header-search__toggle:hover {
    background: #e2e4e8;
    color: #0071e3;
}

.header-search__toggle svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #86868b;
}

.header-search__toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search__field {
    position: relative;
    display: none;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

.header-search__icon {
    position: absolute;
    left: 16px;
    width: 17px;
    height: 17px;
    color: #0071e3;
    pointer-events: none;
}

/* Every declaration here fights style.css's bare `input` rule, which sets
   border:none + border-bottom + font-size:18px + width:100% on every input
   on the site. Removing one of these puts an underlined form field in the header. */
.header .header-search__input {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 44px 0 42px;
    border: 1px solid #0071e3;
    border-radius: 50px;
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1d1d1f;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
    -webkit-appearance: none;
    appearance: none;
}

.header .header-search__input::placeholder {
    color: #86868b;
}

.header .header-search__clear {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e8e8ed;
    color: #6e6e73;
    cursor: pointer;
}

.header .header-search__clear:hover {
    background: #dcdce2;
    color: #1d1d1f;
}

.header-search__clear svg {
    width: 10px;
    height: 10px;
}

.header .header-search__cancel {
    display: none;
    flex-shrink: 0;
    padding: 0 4px;
    border: none;
    background: none;
    color: #0071e3;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

/* ── Open state ─────────────────────────────────────
   The nav and the rest of the action row give up the bar so the field can take it.
   Hiding them is also what makes the panel's gutters line up with the field. */
.header.search-open .navbar,
.header.search-open .header-login,
.header.search-open .header-lang-selector,
.header.search-open .header-cta-pill,
.header.search-open .header-search__toggle {
    display: none !important;
}

.header.search-open .header-right-actions {
    flex-grow: 1;
    min-width: 0;
}

.header.search-open .header-search {
    flex-grow: 1;
    min-width: 0;
    gap: 12px;
}

.header.search-open .header-search__field,
.header.search-open .header-search__cancel {
    display: flex;
}

/* ── The results panel ────────────────────────────── */
.header-search__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-dropdown-top, 69px);
    text-align: left;
    padding: 24px 32px;
    width: 100%;
    background: rgba(251, 251, 253, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - var(--header-dropdown-top, 69px));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s;
}

.header-search__panel.header-search__panel--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* The bar is full-bleed to match the mega menus, but the CONTENT is not: stretched
   edge to edge on a wide monitor the two columns end up a screen apart and the line
   length is unreadable. Capped and centred - aligning its left edge to the field
   instead left it hugging one side of a wide screen. */
.header-search__results {
    max-width: 1040px;
    margin: 0 auto;
}

.header-search__group + .header-search__group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8ed;
}

.header-search__group-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #86868b;
}

.header-search__group-label svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.header-search__rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
}

.header-search__group--manual .header-search__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A card, not a row: the cover on top, the title beneath it, no description. */
.header .header-search__row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
    color: #1d1d1f;
    text-decoration: none;
    line-height: 1.35;
    transition: background 0.15s ease;
}

.header .header-search__row:hover,
.header .header-search__row--active {
    background: #f0f1f4;
    text-decoration: none;
}

/* The Help Center group stays a compact row - it is subordinate, and it has no covers. */
.header-search__group--manual .header-search__row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 8px;
}

/* Full width of the card, 16:9, at the TOP - which is also the markup order, so no
   reordering is needed. */
.header-search__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 168px;
    border-radius: 10px;
    background: #f5f5f7;
    object-fit: cover;
}

.header-search__doc {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #86868b;
}

.header-search__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Two lines, then ellipsis. Several pages carry a long SEO meta title as their
   indexed title, and unclamped one of them sets the height of its whole row. */
.header-search__title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-search__group--manual .header-search__title {
    font-size: 0.88rem;
    font-weight: 500;
}


.header-search__meta {
    font-size: 0.75rem;
    color: #86868b;
}

.header-search__ext {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    margin-left: auto;
    color: #b0b0b5;
}

.header-search__row mark {
    background: #d8ebff;
    color: #1d1d1f;
    padding: 0 1px;
    border-radius: 2px;
}

/* ── States ───────────────────────────────────────── */
.header-search__state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 8px 10px;
    font-size: 0.88rem;
    color: #1d1d1f;
}

.header-search__state span {
    font-size: 0.82rem;
    color: #6e6e73;
    line-height: 1.5;
}

.header-search__hint {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.header .header-search__state button {
    padding: 6px 16px;
    border: 1px solid #e3e4e8;
    border-radius: 50px;
    background: #f0f1f4;
    color: #1d1d1f;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.header-search__skeleton {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
}

.header-search__skeleton i {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 168px;
    border-radius: 10px;
    background: #eceef1;
}

.header-search__skeleton u {
    display: block;
    height: 11px;
    border-radius: 4px;
    background: #eceef1;
    text-decoration: none;
}

/* .visually-hidden does not exist in this app - bootstrap.min.css is a trimmed
   build and the only copy is inline in WorkplaceGlossary.cshtml. */
.header-search__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Results arrive rather than appear. A short rise-and-fade with a small stagger,
   which also covers the moment the panel is still measuring its own height.
   Named like the header's existing mobileSubItemFadeIn. */
@keyframes headerSearchRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.header-search__group {
    animation: headerSearchRowIn 0.26s ease both;
}

.header-search__rows > * {
    animation: headerSearchRowIn 0.3s ease both;
}

.header-search__rows > *:nth-child(1) { animation-delay: 0.02s; }
.header-search__rows > *:nth-child(2) { animation-delay: 0.05s; }
.header-search__rows > *:nth-child(3) { animation-delay: 0.08s; }
.header-search__rows > *:nth-child(4) { animation-delay: 0.11s; }
.header-search__rows > *:nth-child(5) { animation-delay: 0.14s; }
.header-search__rows > *:nth-child(6) { animation-delay: 0.17s; }

.header-search__group--manual { animation-delay: 0.10s; }

.header-search__state {
    animation: headerSearchRowIn 0.26s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .header-search__panel {
        transition: none;
    }

    .header-search__group,
    .header-search__rows > *,
    .header-search__state {
        animation: none;
    }
}

/* 993-1199px: the nav is still shown and the row cannot also carry a 210px field.
   Collapse to the icon rather than let the header wrap — this band was already tight
   before search existed (~1037px of ~1000px usable at 993). */
@media only screen and (min-width: 993px) and (max-width: 1199px) {
    .header .header-search__toggle {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .header-search__toggle-label {
        display: none;
    }
}

@media only screen and (max-width: 992px) {


    /* ── Header search: icon only, and the field takes the header row ── */
    .header .header-search__toggle {
        gap: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        border-radius: 8px;
    }

    .header-search__toggle-label {
        display: none;
    }

    .header.search-open #header-container {
        position: relative;
    }

    /* Moved with CSS only. Reparenting the field mid-interaction drops focus and
       kills the soft keyboard on iOS. */
    .header.search-open .header-search {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 0;
        z-index: 2;
        height: 48px;
        gap: 8px;
        background: rgba(255, 255, 255, 0.94);
    }

    .header.search-open .logo-normal,
    .header.search-open .brand-text,
    .header.search-open .header-menu-btn,
    .header.search-open .header-right-actions > a {
        visibility: hidden;
    }

    .header .header-search__input {
        height: 34px;
        padding: 0 38px 0 36px;
        font-size: 0.85rem;
    }

    .header-search__icon {
        left: 13px;
        width: 15px;
        height: 15px;
    }

    .header .header-search__cancel {
        font-size: 0.85rem;
    }

    .header-search__panel {
        top: 48px;
        height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 14px 10px;
    }

    .header-search__rows,
    .header-search__group--manual .header-search__rows {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Cards on mobile too - same shape as desktop, just one per row. The covers are
       not decoration: the picture is how you recognise the page, and the rest of the
       site leans on imagery just as hard at this width. Capped so six results stay
       scannable rather than one screen each; the panel scrolls. */
    .header-search__thumb,
    .header-search__skeleton i {
        max-height: 150px;
    }

    .header .header-search__row {
        padding: 8px;
    }

    .header-search__title {
        font-size: 0.95rem;
    }
}