/* ============================================================
   VS Search — header icon + popup (DESIGN PHASE)
   Icon mirrors the language-switch icon: inherits header colour
   (currentColor), same hit-area, subtle hover. Popup matches the
   dark rounded search bar from the design.
   ============================================================ */

.vs-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Desktop (>=1200): the theme makes .nb-right a flex row only up to 1199px, so
   above that our icon stacked above the language switcher. Mirror the same
   flex-row here (scoped, kept out of style.css) so the search icon, the
   language switcher and the Contact button align in one centred row.
   Deliberately >=1200, NOT >=992: below 1200 the theme already owns this rule
   (style.css ~10178, plus a 768-991 override) and the two selectors are the
   same specificity, so an overlap here would silently beat the theme's value
   depending on stylesheet load order. Leave <=1199 to style.css. */
@media (min-width: 1200px) {
    #site-header .nb-right {
        display: flex;
        align-items: center;
        gap: 15px;
    }
}

/* ---- Hamburger range (<=1199): even out the three icons ----
   The flex gap is already equal between all three, but the gap you SEE also
   includes each item's own inner space, and the hamburger has none: its bars
   fill its box edge to edge, while the search icon centres an 18px glyph in a
   41px box (12px a side) and the language link carries 8px padding. That left
   language->hamburger reading 12px tighter than search->language.
   The 12px is the search icon's half-space: the language item's inner space
   sits on BOTH gaps and cancels, so one value holds at every width below 1200
   (measured 40 vs 28 at both 768 and 1024, where the flex gap is 20 and 15).
   On the WRAPPER, never on .header-ham-icon — that element is 28x26 with
   absolutely-positioned bars, so padding there would resize and offset them. */
@media (max-width: 1199px) {
    #site-header .nb-right .header-buttons-wrapper {
        margin-left: 15px;
    }
}

/* ---- Desktop range (>=1200): same problem, different mechanism ----
   Here the hamburger wrapper is display:none and the Contact button shares
   #secondary-navbar with the language, so only search->language uses the flex
   gap; language->Contact comes from the li's margin-right (style.css ~5687).
   Deficit = searchInner(12) + flexGap(15) - liMargin(20) = 7px, constant
   (measured 36 vs 29 at 1280 and 56 vs 49 at 1440 — the language's own padding
   grows from 5px to 24px between them and cancels out either way).
   Widening the li rather than tightening the flex gap: both the search icon and
   the language link ring at outline-offset 3px + 2px, so each ring reaches ~5px
   past its box and an 8px gap would overlap them. The Contact pill has no ring.
   Scoped to .pll-parent-menu-item so any other secondary item keeps its 20px. */
@media (min-width: 1200px) {
    #secondary-navbar > ul > li.pll-parent-menu-item {
        margin-right: 27px;
    }
}

/* ---- Toggle icon (like the language switch icon) ---- */
.vs-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 41×41 = the language-switch button's desktop size (style.css ~3899:
       height 41px / width 41px in 1200–1439), so both circles + their hover
       rings match. The ≤1199 block below overrides to 40×40, which already
       matches the language button's mobile 40px min size. */
    width: 41px;
    height: 41px;
    border-radius: 50%;
    /* Ring uses OUTLINE at 3px offset + the theme accent var, exactly like the
       language switcher — grows outward without shifting the icon. */
    border: 2px solid transparent;
    outline: 2px solid transparent;
    outline-offset: 3px;
    background-color: transparent;
    color: inherit;                 /* follow header colour, like the switcher */
    font-size: 18px;
    font-weight: 700 ;
    line-height: 1;
    text-decoration: none;
    transition: outline-color .2s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out;
}

/* Guard: by default the icon colour follows the header on hover/focus (this also
   overrides the global `a:focus { color: … }` reset). The light-theme hover accent
   below is declared AFTER this so it wins for :hover. */
.vs-search-toggle:hover,
.vs-search-toggle:focus {
    color: inherit;
    text-decoration: none;
}

/* Focus shows the same accent ring (matches the switcher's :focus + keyboard
   accessibility). Full outline so the global `a:focus { outline: 0 }` reset
   (style.css ~369) can't zero its width — this selector is (0,2,0). */
.vs-search-toggle:focus {
    outline: 2px solid var(--bagels-bright_color_a_500);
    outline-offset: 3px;
}

/* Hover — LIGHT / default page theme: faint neutral_200 background, and the icon
   turns the accent colour along with the ring (mirrors the language switcher's
   light-theme hover). Full outline so the global `a:hover { outline: 0 }` reset
   can't zero the ring's width. */
.vs-search-toggle:hover {
    background-color: var(--bagels-neutral_200);
    color: var(--bagels-bright_color_a_500);
    outline: 2px solid var(--bagels-bright_color_a_500);
    outline-offset: 3px;
}

/* DARK page theme (.bagels-dark-theme) — match the language switch + hamburger
   icons: the icon is muted neutral_400 by default, and turns light on
   hover / focus / active / open. Hover also gets the neutral_700 background. */
/* Muted neutral_400 ONLY in the hamburger range (≤1199), matching the hamburger
   bars. At ≥1200 the icon stays light (color:inherit follows the dark header,
   like the desktop language icon). */
@media (max-width: 1199px) {
    .bagels-dark-theme .vs-search-toggle {
        color: var(--bagels-neutral_400);
    }
}
/* ≥1200: light like the desktop language icon (neutral_100). */
@media (min-width: 1200px) {
    .bagels-dark-theme .vs-search-toggle {
        color: var(--bagels-neutral_100);
    }
}
.bagels-dark-theme .vs-search-toggle:hover {
    background-color: var(--bagels-neutral_700);
}
.bagels-dark-theme .vs-search-toggle:hover,
.bagels-dark-theme .vs-search-toggle:focus,
.bagels-dark-theme .vs-search-toggle:active,
.bagels-dark-theme .vs-search.is-open .vs-search-toggle {
    color: var(--bagels-light);
}

/* Open state = the switcher's focus/open ring: bright accent outline at 3px
   offset. (The switcher also adds a faint neutral background when open; left
   off here to match the design's ring-only look — say the word to add it.) */
.vs-search.is-open .vs-search-toggle {
    /* Full outline (not colour-only) so the ring survives the global
       `a:hover { outline: 0 }` reset when the popup is open AND hovered. */
    outline: 2px solid var(--bagels-bright_color_a_500);
    outline-offset: 3px;
}

/* Sticky-hover / focus guard: after a programmatic close (scroll, or switching to
   the language dropdown) the mouse can still sit over the icon with no mousemove,
   so :hover / :focus stay "stuck" (bg + ring). Suppress them until the mouse moves
   again — vs-search.js adds .is-just-closed on close and removes it on mousemove.
   Higher specificity than the :hover/:focus rules above, so it wins. */
.vs-search.is-just-closed .vs-search-toggle,
.vs-search.is-just-closed .vs-search-toggle:hover,
.vs-search.is-just-closed .vs-search-toggle:focus {
    background-color: transparent;
    outline-color: transparent;
    color: inherit;                      /* restore resting colour (light theme) */
}
/* Dark theme resting colour differs by breakpoint (neutral_400 ≤1199 / neutral_100
   ≥1200) — restore it too, or the stuck :hover keeps the icon 'light' after close. */
@media (max-width: 1199px) {
    .bagels-dark-theme .vs-search.is-just-closed .vs-search-toggle,
    .bagels-dark-theme .vs-search.is-just-closed .vs-search-toggle:hover,
    .bagels-dark-theme .vs-search.is-just-closed .vs-search-toggle:focus {
        color: var(--bagels-neutral_400);
    }
}
@media (min-width: 1200px) {
    .bagels-dark-theme .vs-search.is-just-closed .vs-search-toggle,
    .bagels-dark-theme .vs-search.is-just-closed .vs-search-toggle:hover,
    .bagels-dark-theme .vs-search.is-just-closed .vs-search-toggle:focus {
        color: var(--bagels-neutral_100);
    }
}

/* <1200px — match the language switch icon: a plain icon with a colour change
   only on hover / focus / open; NO background pill and NO accent ring (the theme
   drops both for the language below 1200, e.g. style.css ~10245 & ~10248). The
   colours are kept (dark theme already turns light, matching the language). */
@media (max-width: 1199px) {
    .vs-search-toggle:hover,
    .vs-search-toggle:focus,
    .vs-search.is-open .vs-search-toggle,
    .bagels-dark-theme .vs-search-toggle:hover,
    .bagels-dark-theme .vs-search-toggle:focus,
    .bagels-dark-theme .vs-search.is-open .vs-search-toggle {
        background-color: transparent;
        outline-color: transparent;
    }

    /* LIGHT theme colours — copy the language icon exactly (style.css
       ~10227/~10252): resting #4d4f50, hover/focus/open neutral_900. Without
       this the desktop hover-accent rule leaks through and the search icon
       turns the bright accent while the language icon darkens. Dark-theme
       rules (.bagels-dark-theme …, higher specificity) are unaffected. */
    .vs-search-toggle {
        color: #4d4f50;
    }
    .vs-search-toggle:hover,
    .vs-search-toggle:focus,
    .vs-search.is-open .vs-search-toggle {
        color: var(--bagels-neutral_900);
    }
    /* Sticky-hover guard (is-just-closed) restores the same resting gray —
       overrides the global guard's color:inherit (same specificity, later). */
    .vs-search.is-just-closed .vs-search-toggle,
    .vs-search.is-just-closed .vs-search-toggle:hover,
    .vs-search.is-just-closed .vs-search-toggle:focus {
        color: #4d4f50;
    }
}

/* (No ✕ close icon anywhere — removed. The popup closes via the search icon
   toggle, outside click, scroll, Esc, or the language switcher opening.) */

/* ---- Popup: dark rounded search bar dropping below the header ----
   The popup itself is the ONE outer box: surface colour, border and radius
   live here (not on the bar/suggest separately), and overflow:hidden clips
   the children to the rounded corners — bar-only and bar+suggestions states
   both just work. No box-shadow (border-only look). */
.vs-search-popup {
    /* Fade in/out like the language dropdown (opacity + visibility over 0.2s,
       not display — display can't be transitioned).
       Visibility switches instantly (0s) but is DELAYED by the fade length when
       closing, so the box stays visible through the fade-out — same look as a
       0.2s visibility transition, except it turns visible immediately on open.
       That matters: focus() is ignored on a visibility:hidden element, and the
       icon click must be able to put the cursor in the input right away. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    position: absolute;
    top: calc(100% + 33px);   /* match the language dropdown's ≥1200 gap (style.css ~5485) */
    left: 0;
    z-index: 1050;
    background-color: var(--bagels-neutral_900);
    border: 1px solid var(--bagels-neutral_600);
    border-radius: 8px;
    overflow: hidden;
}

.vs-search.is-open .vs-search-popup {
    opacity: 1;
    visibility: visible;
    /* Opening: drop the delay so the box is visible (and its input focusable)
       on the very first frame. Only the fade-OUT keeps the delay above. */
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0s;
}

/* While the user is ENGAGED with the search (typing / cursor in the input /
   suggestions open), hovering other header items keeps the popup open and
   their dropdowns must render ON TOP of it (popup is z-index 1050). Covers
   the normal submenus, the mega menu (also a .dropdown-menu) and the
   language list. Desktop-only: dropdowns open on hover only at ≥1200. */
@media (min-width: 1200px) {
    #site-header .dropdown-menu {
        z-index: 1060;
    }
}

/* Overflow guard: ONLY in ~1200–1330px the left:0 popup runs off the right edge
   (the header container is near full-width there, so it can't extend right).
   In that range, anchor the popup to the VIEWPORT right edge (10px margin) so it
   sits flush to the screen and extends left. position:fixed makes it viewport-
   relative; its top is set inline by vs-search.js from the header's bottom.
   Scoped so it never affects the ≤1199 fixed full-width mobile popup or ≥1331. */
@media (min-width: 1200px) and (max-width: 1330px) {
    .vs-search-popup {
        position: fixed;
        left: auto;
        right: 10px;
        /* top set inline by vs-search.js (header bottom) in this range */
    }
}

/* ---- Popup width is fixed, never content-driven (>=768) ----
   From 768px up the popup is right-anchored with `left: auto` and no width
   (vs-search.js ~81), which makes it shrink-to-fit: its width came from its
   widest child. So the box visibly changed width as the list underneath it
   changed — wide for long popular terms, narrower for the type-ahead, and
   jumping the moment the field was cleared.
   Giving the POPUP the bar's width settles it: the bar then fills the popup
   instead of defining it.
   Below 768 the popup is pinned by left AND right inline, so a width here
   would over-constrain it and break the full-width mobile bar. */
@media (min-width: 768px) {
    .vs-search-popup {
        width: 320px;
        max-width: min(90vw, 420px);
    }
    .vs-search-form {
        width: 100%;
        max-width: none;
    }
}

.vs-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;   /* gap is controlled by the popup top / JS, matching the language dropdown */
    width: 320px;
    max-width: min(90vw, 420px);
    padding: 8px 14px;
    /* Surface, border and radius live on .vs-search-popup (the outer box);
       the bar is a plain transparent row inside it. */
    background-color: transparent;
    border: none ;
}

.vs-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content:flex-end;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    color: #cfd0da;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s ease;
}

.vs-search-submit:hover {
    color: #fff;
}

.vs-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
    line-height: 28px;
}

.vs-search-input::placeholder {
    color: #8b8c99;
    opacity: 1;
}

/* ---- Popular searches dropdown: ONE popup with the search bar.
   Surface, border and radius come from .vs-search-popup (the outer box) —
   the list is just the popup's lower section, separated from the bar by a
   thin divider. Width follows the popup (which sizes to the bar). ---- */
.vs-search-suggest {
    margin-top: 0;
    padding: 8px 0 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);   /* subtle divider */
}

/* The LIST scrolls, not the panel — so the "Load more" button below it stays
   pinned at the bottom instead of scrolling away. Cap: at most 400px tall and
   always ~220px clear of the viewport bottom (header ≈ top ~180px + room). */
.vs-search-suggest-list {
    max-height: min(400px, calc(100vh - 220px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* Light theme: dark thin scrollbar on the white panel. */
body.bagels-light-theme .vs-search-suggest-list {
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* Pinned "Load more" — sits under the scrolling list, full width.
   Flex so the spinner sits to the LEFT of the label while loading. */
.vs-search-suggest-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vs-search-suggest-more:hover,
.vs-search-suggest-more:focus {
    background: rgba(255, 255, 255, 0.07);
}

.vs-search-suggest-more[hidden] {
    display: none;
}

/* Spinner sits left of the label; the theme reveals it via `.loading >
   .bagels-spinner` (style.css ~5108), so only the .loading class is needed.
   Sized to the 20px ring so the button height never jumps. */
.vs-search-suggest-more .bagels-spinner {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

/* Blocks double-clicks while a page is being revealed. */
.vs-search-suggest-more.loading {
    pointer-events: none;
}

/* Light theme: dark ring (the default ring is light — invisible on white). */
body.bagels-light-theme .vs-search-suggest-more .bagels-spinner:after {
    border-color: var(--bagels-dark);
    border-right-color: transparent;
}

body.bagels-light-theme .vs-search-suggest-more {
    color: #333;
    border-top-color: rgba(0, 0, 0, 0.08);
}

body.bagels-light-theme .vs-search-suggest-more:hover,
body.bagels-light-theme .vs-search-suggest-more:focus {
    background: rgba(0, 0, 0, 0.05);
}

.vs-search-suggest[hidden] {
    display: none;
}

.vs-search-suggest-label {
    display: block;
    padding: 2px 14px 8px;
    color: #8b8c99;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Second/third section label (e.g. the GA list under the DB list):
   divider line + breathing room between the sections. */
.vs-search-suggest-label:not(:first-child) {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vs-search-suggest-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vs-search-suggest-item:hover,
.vs-search-suggest-item:focus {
    background: rgba(255, 255, 255, 0.07);
}

/* Post-type heading inside "Top suggestions" — shown ONCE per run of
   same-type titles (Services, News …), not on every row. */
.vs-search-suggest-group {
    display: block;
    padding: 6px 14px 4px;
    font-size: 12px;
    line-height: 1.2;
    opacity: .6;
}

/* Suggestions are single-line as a rule, but a heading can be long — cap every
   row at TWO lines so one suggestion can never dominate the dropdown. The
   server already windows over-long headings around the keyword; this is the
   visual backstop. */
.vs-ss-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Type-ahead: the TYPED part of each suggestion renders heavier than the
   completion ("se" bold in "services") — vs-search.js wraps it in this <b>. */
.vs-search-suggest-item .vs-ss-typed {
    font-weight: 800;
}

/* Loading row while the popular terms are being fetched: the theme's
   .bagels-spinner (light dual ring) centred in the panel. The .loading
   class on the row makes the spinner visible (style.css rule
   `.loading > .bagels-spinner { display:block }`). */
.vs-search-suggest-loading {
    position: relative;
    height: 44px;
}

/* Remove the native clear/decoration on search inputs */
.vs-search-input::-webkit-search-decoration,
.vs-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   LIGHT page theme (body.bagels-light-theme): the popup follows the
   page's theme setting. Mirrors the language dropdown's light look
   (style.css ~10298: #fff bg, neutral_100 border, #333 items,
   neutral_100 hover). Purely additive — dark pages and the search
   results page (forced bagels-dark-theme) never match these selectors.
   ============================================================ */

/* Outer box: white surface, light border (single override — the bar and
   the suggestions list inherit the popup's surface). */
body.bagels-light-theme .vs-search-popup {
    background-color: #fff;
    border-color: var(--bagels-neutral_100);
}

/* Input: dark text; placeholder keeps the mid gray (readable on white). */
body.bagels-light-theme .vs-search-input {
    color: #333;
}

body.bagels-light-theme .vs-search-input::placeholder {
    color: #8b8c99;
}

/* Submit arrow: dark gray, darker on hover. */
body.bagels-light-theme .vs-search-submit {
    color: #666;
}

body.bagels-light-theme .vs-search-submit:hover {
    color: #333;
}

/* Popular-searches divider on the white surface. */
body.bagels-light-theme .vs-search-suggest {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Second/third section label divider (DB / GA sections). */
body.bagels-light-theme .vs-search-suggest-label:not(:first-child) {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Suggestion items: dark text, neutral_100 hover (like the language items). */
body.bagels-light-theme .vs-search-suggest-item {
    color: #333;
}

body.bagels-light-theme .vs-search-suggest-item:hover,
body.bagels-light-theme .vs-search-suggest-item:focus {
    background: var(--bagels-neutral_100);
}

/* Loading spinner: dark ring (the default .bagels-spinner ring is light —
   invisible on the white panel; same pattern as .bagels-spinner.dark). */
body.bagels-light-theme .vs-search-suggest-loading .bagels-spinner:after {
    border-color: var(--bagels-dark);
    border-right-color: transparent;
}

/* ============================================================
   Mobile (<=991px): the icon joins the language + hamburger row,
   sized to match; the popup becomes a FIXED, full-width bar under
   the header. Its `top` is set inline by vs-search.js from the
   header's actual bottom, so it survives any header height/theme.
   Scoped to <=991px, so desktop is untouched.
   ============================================================ */
/* @media (max-width: 991px) {   --- ORIGINAL search mobile breakpoint. Changed to 1199px to match
   the hamburger navbar. To revert: uncomment this line and delete the "@media (max-width: 1199px)" below. */
@media (max-width: 1199px) {
    .vs-search-toggle {
        width: 42px;
        height: 42px;
    }

    /* Popup stays position:fixed across tablet + phone (vs-search.js sets
       top/left/right on open). WIDTH differs by device: tablets (768–1199)
       keep the fixed-width bar (base .vs-search-form), right-aligned to the
       container; only phones (<768px) go full width — see below. */
    .vs-search-popup {
        position: fixed;
        /* top/left/right set inline by vs-search.js on open */
    }

    /* Bigger touch targets on tablet/phone. */
    .vs-search-suggest-item {
        padding: 12px 14px;
        font-size: 16px;
    }
    /* (Tablet card padding/gap live at the END of the file — after the base
       card rules — so they win by cascade order without !important.) */
}

/* Mobile ONLY (<768px): full-width, edge-to-edge bar (vs-search.js still keeps
   it inside the container padding). Tablets keep the fixed-width bar above. */
@media (max-width: 767px) {
    .vs-search-popup {
        left: 12px;
        right: 12px;
    }
    .vs-search-form {
        width: 100%;
        max-width: none;
    }
    /* .vs-search-suggest needs no width rules — it fills the popup (outer box). */
}

/* ============================================================
   VS Search — results / no-results PAGE (DESIGN PHASE)
   Route: /?vs_s=term (class-vs-search-page.php). The pills, cards,
   featured-first layout and load-more all REUSE the news element's
   fce-news-boxes styles — only page-level bits live here. Scoped to
   .vs-search-page, so no other page is affected.
   ============================================================ */
.vs-search-page .vs-sp-element {
    padding-top: 65px;
    padding-bottom: 40px;
}

/* ---- "Search results" heading: custom size instead of --fs-4xl.
   45px on desktop, stepped down per breakpoint using the SAME scale the
   theme applies to fs-4xl (52→48→36→32 ⇒ 45→42→31→28), with matching
   ~1.15 line-heights. Scoped to the search page only. ---- */
.vs-search-page .vs-sp-heading {
    font-size: 45px;
    line-height: 52px;
}

@media (max-width: 991px) {
    .vs-search-page .vs-sp-heading {
        font-size: 42px;
        line-height: 48px;
    }
}

@media (max-width: 499px) {
    .vs-search-page .vs-sp-heading {
        font-size: 31px;
        line-height: 36px;
    }
}

@media (max-width: 420px) {
    .vs-search-page .vs-sp-heading {
        font-size: 28px;
        line-height: 32px;
    }
}

/* ≥500px only — on phones the news element's own rules hide the pills
   (height:0, margin-top:0) behind the sliders expander button; an unscoped
   margin here would fight them. */
@media (min-width: 500px) {
    .vs-search-page .fce-nb-filter-buttons {
        margin-top: 28px;
    }
}

/* ---- Result cards (per design): text-only dark panels — post type label,
   heading, description, Read more. First card spans full width, the rest
   sit two per row. ---- */
.vs-search-page .vs-search-results {
    margin-top: 32px;
    display: grid;
    /* minmax(0, 1fr) — NOT plain 1fr — so long/unbreakable card content can't
       force one column wider than the other. Guarantees exact 50/50 boxes on
       every row, including cards added by "load more". */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 50px;
}

.vs-search-page .vs-search-results .vs-sr-card:first-child {
    grid-column: 1 / -1;
}

.vs-search-page .vs-sr-card {
    /* Theme dark-card colour — same var the news element's dark boxes use
       (.bagels-news-box.dark), so it matches the design + theme colour options. */
    background: var(--bagels-neutral_900);
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
    /* Allow the grid item to shrink below its content's min width so the
       minmax(0,1fr) columns stay exactly equal. */
    min-width: 0;
}

.vs-search-page .vs-sr-card:hover {
    background: var(--bagels-neutral_800);
}

.vs-search-page .vs-sr-card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 60px;
    text-decoration: none;
}

.vs-search-page .vs-sr-card-link:hover,
.vs-search-page .vs-sr-card-link:focus {
    text-decoration: none;
}

.vs-search-page .vs-sr-type {
    color: var(--bagels-neutral_400);
    font-size: var(--fs-md);
    font-weight: 700;
}

.vs-search-page .vs-sr-title {
    margin: 0;
    color: var(--bagels-neutral_50);   /* same as the news element's dark-card titles */
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
    font-weight: 700;
    /* Wrap long/unbreakable words inside the card instead of overflowing and
       forcing the column wider. */
    overflow-wrap: anywhere;
    /* Max 3 lines — longer titles end with an ellipsis (…). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Featured (first) card: bigger heading, like the design */
.vs-search-page .vs-search-results .vs-sr-card:first-child .vs-sr-title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
}

/* The searched words inside a card description. The snippet no longer always
   starts with the keyword (short-tail backfill in window_around), so it is
   marked to stay findable — brighter than the surrounding neutral_50 body
   text plus a heavier weight, matching how the type-ahead marks the typed
   part (.vs-ss-typed). Inline only: no background, nothing that could disturb
   the 5-line clamp below. */
.vs-search-page .vs-sr-excerpt .vs-sr-hit {
    color: var(--bagels-light);
    font-weight: 800;
}

.vs-search-page .vs-sr-excerpt {
    margin: 0;
    color: var(--bagels-neutral_50);
    font-size: var(--fs-md);
    overflow-wrap: anywhere;
    /* Max 5 lines — longer descriptions end with an ellipsis (…). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

/* Read more pinned to the card bottom so grid cards line up */
.vs-search-page .vs-sr-readmore {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bagels-neutral_50);   /* same as the news element's dark-card read-more */
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Chevron: static — no movement on card hover (removed per design). */
.vs-search-page .vs-sr-readmore i {
    font-size: 12px;
}

.vs-search-page .fce-nb-load-more {
    margin-top: 48px;
}

/* AJAX load-more: while fetching, the button shows the theme's
   .bagels-spinner (news-element style — text hidden, spinner in place);
   this rule only blocks double-clicks (vs-search.js toggles .is-loading). */
.vs-search-page .fce-nb-load-more.is-loading {
    pointer-events: none;
}

/* No-results box: dark rounded panel with a centered title + subtitle */
.vs-search-page .vs-search-no-results {
    margin-top: 48px;
    background: var(--bagels-neutral_900);   /* theme dark-card colour, matches the result cards */
    border-radius: 8px;
    min-height: 415px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
}

.vs-search-page .vs-snr-title {
    margin: 0 0 16px;
    color: var(--bagels-light);
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
    font-weight: 700;
}

.vs-search-page .vs-snr-text {
    margin: 0;
    color: var(--bagels-neutral_50);
    font-size: var(--fs-sm);
}


/* Tablet and down: tighter card padding + grid gap than desktop (60/50px).
   Placed AFTER the base rules above so same-specificity cascade order does
   the overriding — no !important needed. */
@media (max-width: 1199px) {
    .vs-search-page .vs-sr-card-link {
        padding: 30px;
    }

    .vs-search-page .vs-search-results {
        gap: 30px;
    }
}

/* Tablet portrait and down: cards stack in a single column (mobile design).
   AFTER the ≤1199 block, so the phone padding/gap win over the tablet ones. */
@media (max-width: 767px) {
    .vs-search-page .vs-search-results {
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .vs-search-page .vs-search-results .vs-sr-card:first-child .vs-sr-title {
        font-size: var(--fs-xl);
        line-height: var(--lh-xl);
    }

    .vs-search-page .vs-sr-card-link {
        padding: 24px;
    }
    .vs-search-page .vs-sp-element {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .vs-search-page .vs-search-results {
    margin-top: 24px;
    }
    .vs-search-page .vs-search-no-results {
    margin-top: 30px;
    }
}

/* Phones: slightly shorter no-results panel + tighter page padding */
@media (max-width: 499px) {
    .vs-search-page .vs-sp-element {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .vs-search-page .vs-search-no-results {
        min-height: 320px;
        margin-top: 32px;
    }

    .vs-search-page .vs-search-results,
    .vs-search-page .fce-nb-load-more {
        margin-top: 32px;
    }
}
 
/* ============================================================
   Typo correction notice — "Showing results for X — Search
   instead for Y" (EN/DE; shown only when a 0-result search was
   auto-corrected). Sits at the TOP of the element, above the
   "Search result for :" heading (user request 2026-07-20).
   ============================================================ */
/* Heading + typo notice column. Below 500px it is the first item of the
   flex/space-between row that also holds the filter icon, so it must be
   allowed to SHRINK: a flex item defaults to min-width:auto, which refuses to
   go below its longest word and would push the notice back under the icon.
   The notice already breaks long words (see below), so 0 is safe. */
.vs-search-page .vs-sp-title-col {
    min-width: 0;
}

.vs-search-page .vs-sr-corrected-note {
    margin: 5px 0 0;
    color: var(--bagels-neutral_50);
    font-size: var(--fs-sm);
    /* Long pasted terms without spaces must wrap, not push past the
       phone's screen edge. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.vs-search-page .vs-sr-corrected-note strong {
    color: var(--bagels-light);
}

.vs-search-page .vs-sr-corrected-note a {
    color: inherit;
    text-decoration: none;
}

.vs-search-page .vs-sr-corrected-note a:hover {
    color: var(--bagels-light);
}

/* The typed-back term ("prototyoes") is the actionable part of the notice, so
   it gets the link affordance — the label before it stays plain.
   Targets the <em>, NOT the <a>: the global reset forces
   `a:hover { text-decoration: none }` (style.css ~366), which would cancel an
   underline set on the link itself. A child element draws its own decoration,
   so the reset can't reach it — and no !important is needed.

   The underline is always present at FULL width; only its colour changes,
   from transparent to visible, so it fades in rather than wiping across.
   `text-decoration` itself is not animatable (it would snap on), but
   `text-decoration-color` is — which is why the line is declared here and
   only the colour moves. The shorthand must come BEFORE the colour, or it
   would reset it back to currentColor. */
.vs-search-page .vs-sr-corrected-note a em {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;       /* clears the italic descenders */
    transition: text-decoration-color .25s ease-in-out;
}

/* :active covers touch — a tap has no hover, so this is the press feedback.
   (Replaces the old permanent underline under `@media (hover: none)`.) */
.vs-search-page .vs-sr-corrected-note a:hover em,
.vs-search-page .vs-sr-corrected-note a:focus em,
.vs-search-page .vs-sr-corrected-note a:active em {
    text-decoration-color: currentColor;
}

/* Respect a reduced-motion preference: still show the underline, just without
   the wipe. */
@media (prefers-reduced-motion: reduce) {
    .vs-search-page .vs-sr-corrected-note a em {
        transition: none;
    }
}

@media (max-width: 767px) {
  .vs-search-page .vs-sr-corrected-note {
    margin: 10px 20px 0 0 ;  
    line-height: var(--lh-xs);
  }
}