/* ============================================================
   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: the theme only makes .nb-right a flex row at <=991px, so on
   desktop 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. */
@media (min-width: 992px) {
    #site-header .nb-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }
}

/* ---- Toggle icon (like the language switch icon) ---- */
.vs-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    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: 16px;
    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;
}

/* Hover — DARK page theme (.bagels-dark-theme, same class the language switcher
   uses): darker neutral_700 background and the icon keeps the header's light
   colour; the accent ring still shows (inherited from the rule above). */
.bagels-dark-theme .vs-search-toggle:hover {
    background-color: var(--bagels-neutral_700);
    color: inherit;
}

/* 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;
}

/* ---- Icon swap: magnifier by default, ✕ once the user clicks into the input
   to type. The ✕ stays until the popup closes; clicking it (the toggle) closes
   the popup, and the popup's own inline ✕ is hidden while typing. ---- */
.vs-search-toggle .vs-search-icon-close { display: none; }
.vs-search.is-typing .vs-search-toggle .vs-search-icon-search { display: none; }
.vs-search.is-typing .vs-search-toggle .vs-search-icon-close { display: inline-block; }
.vs-search.is-typing .vs-search-close { display: none; }

/* ---- Popup: dark rounded search bar dropping below the header ---- */
.vs-search-popup {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 1050;
}

.vs-search.is-open .vs-search-popup {
    display: block;
}

.vs-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    width: 320px;
    max-width: min(90vw, 420px);
    padding: 8px 14px;
    background: #1c1c28;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.vs-search-close,
.vs-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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-close:hover,
.vs-search-submit:hover {
    color: #fff;
}

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

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

/* 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;
}

/* ============================================================
   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) {
    .vs-search-toggle {
        width: 40px;
        height: 40px;
    }

    .vs-search-popup {
        position: fixed;
        left: 12px;
        right: 12px;
        /* top is set inline by vs-search.js on open */
    }

    .vs-search-form {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }
}