/* ==========================================================================
   Site search (2026-10-06) — the header magnifier, its modal (bit.partials.search-modal,
   driven by /assets/js/search-modal.js) and the /search results page (bit.search).
   Everything is namespaced .bit-search* so nothing here can restyle existing sections.
   The modal deliberately uses no <section> elements: the layout's reveal observer hides
   every <section> until it scrolls into view, and results are added after page load.
   ========================================================================== */

/* --- header trigger ------------------------------------------------------ */
.bit-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.bit-search-toggle:hover,
.bit-search-toggle:focus-visible {
    background: #FEC844;
    border-color: #FEC844;
    color: #C80F2E;
}

.bit-search-toggle svg,
.bit-search svg,
.bit-search-page svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- modal shell ---------------------------------------------------------- */
html.bit-search-lock,
html.bit-search-lock body {
    overflow: hidden;
}

.bit-search {
    position: fixed;
    inset: 0;
    z-index: 10050;            /* above the mega menu (9999); the image popup (100000) and admin bar stay on top */
    display: none;
    font-family: 'Lexend', sans-serif;
}

.bit-search.is-open {
    display: block;
}

.bit-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 4, 12, .62);
    backdrop-filter: blur(3px);
    animation: bit-search-fade .2s ease;
}

.bit-search__panel {
    position: relative;
    width: min(760px, calc(100% - 32px));
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    margin: 56px auto 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 5px solid #C80F2E;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
    animation: bit-search-drop .25s cubic-bezier(.4, 0, .2, 1);
}

@keyframes bit-search-fade { from { opacity: 0; } }
@keyframes bit-search-drop { from { opacity: 0; transform: translateY(-14px); } }

.bit-search__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #7a6a6c;
    background: transparent;
    border: 0;
    z-index: 1;
}

.bit-search__close:hover,
.bit-search__close:focus-visible {
    background: #FFE59E;
    color: #C80F2E;
}

/* --- search form (shared by the modal and the results page) --------------- */
.bit-search__form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.bit-search .bit-search__form {
    padding: 22px 56px 14px 22px;
}

.bit-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    padding: 0 20px;
    font-size: 17px;
    color: #1a1a1a;
    background: #FFF8E6;
    border: 2px solid #FFE59E;
    border-radius: 50px;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.bit-search__input::placeholder {
    color: #9b8b8d;
}

.bit-search__input:focus {
    border-color: #FEC844;
    background: #fff;
}

/* the browser's own clear button duplicates our close button; WebKit (Safari) ignores
   appearance:none here and still draws a ⌫ glyph, so it is removed outright */
.bit-search__input::-webkit-search-cancel-button,
.bit-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.bit-search__submit {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #C80F2E;
    color: #fff;
    transition: background-color .2s ease;
}

.bit-search__submit:hover,
.bit-search__submit:focus-visible {
    background: #EE183C;
}

.bit-search__hint {
    min-height: 0;
    margin: 0 22px;
    font-size: 13px;
    color: #C80F2E;
}

.bit-search__hint:empty {
    display: none;
}

/* --- body: intro / status / results --------------------------------------- */
.bit-search__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 22px 22px;
}

.bit-search__intro,
.bit-search__status {
    text-align: center;
    padding: 26px 10px 18px;
}

.bit-search__intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #FEC844;
    color: #C80F2E;
}

.bit-search__intro-icon svg {
    width: 28px;
    height: 28px;
}

.bit-search__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: #C80F2E;
}

.bit-search__desc,
.bit-search__status {
    margin: 0 auto;
    max-width: 480px;
    font-size: 14px;
    line-height: 1.6;
    color: #7a6a6c;
}

.bit-search__status.is-loading::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 10px;
    border: 3px solid #FFE59E;
    border-top-color: #C80F2E;
    border-radius: 50%;
    animation: bit-search-spin .7s linear infinite;
}

@keyframes bit-search-spin { to { transform: rotate(360deg); } }

/* --- result groups (modal + results page) --------------------------------- */
.bit-search__group + .bit-search__group {
    margin-top: 18px;
}

.bit-search__group-title {
    font-family: 'Lexend', sans-serif;   /* it is an <h2> on the results page; keep the modal's look */
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C80F2E;
    border-bottom: 1px solid #f0dcdf;
}

.bit-search__count {
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 0;
    color: #1a1a1a;
    background: #FFE59E;
}

.bit-search__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}

.bit-search__item:hover,
.bit-search__item:focus-visible,
.bit-search__item.is-active {
    background: #FFF4D6;
    outline: none;
}

.bit-search__thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: #FFE59E;
}

.bit-search__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bit-search__item-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a1a;
}

.bit-search__item:hover .bit-search__item-title,
.bit-search__item.is-active .bit-search__item-title {
    color: #C80F2E;
}

.bit-search__meta {
    font-size: 12px;
    color: #C80F2E;
}

.bit-search__snippet {
    font-size: 13px;
    line-height: 1.5;
    color: #6b5d5f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bit-search mark,
.bit-search-page mark {
    padding: 0 1px;
    border-radius: 2px;
    color: inherit;
    background: #FFE59E;
}

.bit-search__more {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #C80F2E;
    text-decoration: none;
}

.bit-search__more:hover {
    text-decoration: underline;
}

.bit-search__all {
    display: block;
    margin-top: 20px;
    padding: 12px 18px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    background: #FEC844;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color .2s ease;
}

.bit-search__all:hover,
.bit-search__all:focus-visible {
    background: #FED87C;
    color: #1a1a1a;
}

/* --- full results page ----------------------------------------------------- */
.bit-search-page {
    padding: 56px 0 72px;
    font-family: 'Lexend', sans-serif;
}

.bit-search-page .bit-search__form {
    max-width: 680px;
    margin: 18px auto 0;
}

.bit-search-page__summary {
    margin: 22px 0 30px;
    text-align: center;
    color: #6b5d5f;
}

.bit-search-page__summary strong {
    color: #1a1a1a;
}

.bit-search-page .bit-search__group {
    scroll-margin-top: 100px;  /* clear the sticky header when a "See all" link jumps here */
    padding: 18px 22px 14px;
    background: #fff;
    border: 1px solid #f0dcdf;
    border-radius: 14px;
}

.bit-search-page .bit-search__item {
    margin: 0 -10px;
}

.bit-search-page .bit-search__snippet {
    -webkit-line-clamp: 3;
}

.bit-search-page__empty {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    color: #6b5d5f;
}

/* --- small screens ------------------------------------------------------- */
/* Narrow phones, and phones held sideways (short, wide): the floating card wastes the little
   height there is (342px tall in landscape left 167px for results), so the panel fills it. */
@media (max-width: 575.98px), (max-height: 500px) {
    .bit-search__panel {
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .bit-search .bit-search__form {
        padding: 16px 52px 10px 14px;
    }

    .bit-search__input,
    .bit-search__submit {
        height: 48px;
    }

    .bit-search__submit {
        width: 48px;
    }

    .bit-search__input {
        font-size: 16px;   /* 16px stops iOS Safari zooming the page on focus */
        padding: 0 16px;
    }

    .bit-search__body {
        padding: 4px 14px 18px;
    }

    .bit-search-toggle {
        width: 36px;
        height: 36px;
    }

    .bit-search-page {
        padding: 36px 0 56px;
    }

    .bit-search-page .bit-search__group {
        padding: 14px 14px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bit-search__backdrop,
    .bit-search__panel,
    .bit-search__status.is-loading::before {
        animation: none;
    }
}