/* ==========================================================================
   Header + search (Algolia Autocomplete v1)
   Markup: header.php (.kvik-hdr) + inc/header-search.php (.kvik-hs)
   JS:     vendor/algolia-search/js/algolia-search.js
   Loaded after @algolia/autocomplete-theme-classic, so these win.
   ========================================================================== */

:root {
    --aa-primary-color-rgb: 98, 176, 186;      /* site teal #62b0ba */
    --aa-selected-color-rgb: 98, 176, 186;
    --aa-selected-color-alpha: 0.14;
    --aa-input-border-color-rgb: 210, 214, 219;
    --aa-icon-color-rgb: 107, 114, 128;
    --aa-font-family: 'Open Sans', Arial, sans-serif;
    --aa-font-size: 15px;
    --aa-search-input-height: 46px;
    --aa-panel-max-height: 640px;
    --aa-base-z-index: 100000;                 /* above the Kvikan launcher */
}

/* ── Top row layout ────────────────────────────────────────────────────── */
header .top-holder .kvik-hdr {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 86px;
    padding: 6px 12px;
    box-sizing: border-box;
}
header .top-holder .kvik-hdr__logo {
    flex: 0 0 auto;
    padding: 4px 0 0;
}
header .top-holder .kvik-hdr__logo img {
    display: block;
    width: auto;
    max-height: 70px;
    transition: max-height .2s ease;
}
.kvik-hdr__search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}
.kvik-hdr__badge {
    flex: 0 0 auto;
    position: relative;
    max-width: 260px;
}
.kvik-hdr__badge--video { width: 220px; align-self: stretch; }

/* ── Search box ────────────────────────────────────────────────────────── */
.kvik-hs {
    position: relative;
    width: 100%;
    max-width: 640px;
}

/* No-JS / pre-mount fallback — same footprint as the live input (no CLS). */
.kvik-hs__fallback { margin: 0; }
.kvik-hs__fallback input {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    padding: 0 18px 0 46px;
    font: 15px 'Open Sans', Arial, sans-serif;
    color: #1f2429;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px;
    -webkit-appearance: none;
    appearance: none;
}

.kvik-hs .aa-Autocomplete { width: 100%; }
.kvik-hs .aa-Form {
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: box-shadow .15s ease;
}
.kvik-hs .aa-Form:focus-within {
    border: 0;
    box-shadow: 0 0 0 3px rgba(98, 176, 186, .6);
}
.kvik-hs .aa-InputWrapperPrefix { padding-left: 8px; }
.kvik-hs .aa-Input { font-size: 15px; color: #1f2429; }
.kvik-hs .aa-Input::placeholder { color: #6b7280; opacity: 1; }
.kvik-hs .aa-ClearButton { padding-right: 12px; }

/* ⌘K / Ctrl K hint */
.kvik-hs__kbd {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    padding: 4px 7px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    font: 600 11px/1 'Open Sans', Arial, sans-serif;
    pointer-events: none;
}
.kvik-hs:focus-within .kvik-hs__kbd,
.kvik-hs:has(.aa-Input:not(:placeholder-shown)) .kvik-hs__kbd { display: none; }

/* Desktop dropdown: anchored under the input (inside .kvik-hs), so it also
   follows the input when the header turns into the fixed compact bar. */
.kvik-hs .aa-Panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.kvik-hs .aa-PanelLayout {
    max-height: min(72vh, var(--aa-panel-max-height));
    padding: 6px 0 8px;
}

/* ── Sections + rows (dropdown and mobile overlay) ─────────────────────── */
.aa-Panel .aa-SourceHeader,
.aa-DetachedContainer .aa-SourceHeader { margin: 12px 16px 4px; }

.kvik-hs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kvik-hs-head__title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}
.kvik-hs-head__action {
    border: 0;
    background: none;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #0d9488;
    cursor: pointer;
}
.kvik-hs-head__action:hover { text-decoration: underline; }

.aa-Panel .aa-Item,
.aa-DetachedContainer .aa-Item {
    min-height: 0;
    margin: 0 6px;
    padding: 0;
    border-radius: 9px;
}

.kvik-hs-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* theme's .aa-ItemLink is space-between */
    text-align: left;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    color: #1f2429;
    text-decoration: none;
}
.kvik-hs-row:hover,
.kvik-hs-row:focus { color: #1f2429; text-decoration: none; }
.kvik-hs-row--compact { padding: 7px 10px; }
/* Title takes the free space, so trailing ✕ / tags / arrows sit flush right. */
.kvik-hs-row--compact > .kvik-hs-row__title,
.kvik-hs-row--action > .kvik-hs-row__title { flex: 1 1 auto; min-width: 0; }

.kvik-hs-row__poster {
    flex: 0 0 36px;
    width: 36px;
    height: 54px;
    border-radius: 4px;
    overflow: hidden;
    background: #e8ebee;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kvik-hs-row__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kvik-hs-row__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #62b0ba;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kvik-hs-row__avatar img { width: 100%; height: 100%; object-fit: cover; }

.kvik-hs-row__icon {
    flex: 0 0 28px;
    display: flex;
    justify-content: center;
    color: #9ca3af;
}
.kvik-hs-row__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.kvik-hs-row__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}
.kvik-hs-row__title mark {
    background: none;
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(98, 176, 186, .8);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.kvik-hs-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: #6b7280;
}
.kvik-hs-row__tag {
    margin-left: auto;
    font-size: 11.5px;
    color: #9ca3af;
}
.kvik-hs-rating { color: #b7791f; font-weight: 600; }
.kvik-hs-chip-sm {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.kvik-hs-chip-sm--cinema { background: #fff1e8; color: #ea580c; }

.kvik-hs-row__remove {
    margin-left: auto;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
}
.kvik-hs-row__remove:hover { background: #eef0f2; color: #1f2429; }

/* Actions (see all / ask Kvikan / advanced) */
.aa-Source[data-autocomplete-source-id="actions"] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eef0f2;
}
.kvik-hs-row--action .kvik-hs-row__title { color: #0d9488; }
.kvik-hs-row--action .kvik-hs-row__icon { color: #0d9488; }
.kvik-hs-row__arrow { margin-left: auto; color: #9ca3af; }

/* Quick links as chips */
.aa-Source[data-autocomplete-source-id="quick"] .aa-List {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 10px;
}
.aa-Source[data-autocomplete-source-id="quick"] .aa-Item {
    margin: 0;
    background: none !important;
}
.kvik-hs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f1f5f6;
    color: #1f2429;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.kvik-hs-chip .kvik-hs-ico { width: 16px; height: 16px; color: #0d9488; }
.kvik-hs-chip:hover,
.aa-Item[aria-selected="true"] .kvik-hs-chip {
    border-color: #62b0ba;
    background: #e7f4f5;
    color: #1f2429;
    text-decoration: none;
}

/* ── Mobile (≤960px): pill in the top row + full-screen overlay ────────── */
.kvik-hs-mbtn { display: none; }

@media (max-width: 960px) {
    header .top-holder .kvik-hdr {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
        padding: 10px 12px 12px;
    }
    header .top-holder .kvik-hdr__logo img { max-height: 46px; }
    .kvik-hdr__search { order: 3; flex: 1 0 100%; }
    .kvik-hdr__badge { order: 4; flex: 1 0 100%; max-width: none; text-align: center; }
    .kvik-hdr__badge--video { display: none; }
    .kvik-hs { max-width: none; }
    .kvik-hs__kbd { display: none; }

    .kvik-hs .aa-DetachedSearchButton {
        height: 44px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    }
    .kvik-hs .aa-DetachedSearchButtonPlaceholder { color: #6b7280; font-size: 15px; }

    /* Fixed 🔍 left of the hamburger (which sits at top:15px/right:20px). */
    .kvik-hs-mbtn {
        position: fixed;
        top: 15px;
        right: 82px;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        cursor: pointer;
    }
    body.admin-bar .kvik-hs-mbtn { top: 47px; }

    /* Overlay polish */
    .aa-DetachedContainer .aa-DetachedFormContainer { padding: 10px 12px; }
    .aa-DetachedContainer .aa-Form { border-radius: 999px; }
    .aa-DetachedContainer .aa-DetachedCancelButton { white-space: nowrap; }
    .aa-DetachedContainer .aa-PanelLayout { padding-bottom: 24px; }
    .aa-DetachedContainer .kvik-hs-row { padding: 10px; }
}
@media (max-width: 782px) {
    body.admin-bar .kvik-hs-mbtn { top: 61px; }
}

/* ── Desktop: slim fixed bar once the top row scrolls away ─────────────── */
.kvik-hdr-spacer { height: 0; }

@media (min-width: 961px) {
    html.kvik-hdr-compact header .top-holder {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 950;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
        animation: kvikHdrIn .22s ease-out;
    }
    html.kvik-hdr-compact body.admin-bar header .top-holder { top: 32px; }
    html.kvik-hdr-compact header .top-holder .kvik-hdr {
        min-height: 60px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    html.kvik-hdr-compact header .top-holder .kvik-hdr__logo img { max-height: 40px; }
    html.kvik-hdr-compact .kvik-hdr__badge { display: none; }
}
@keyframes kvikHdrIn {
    from { transform: translateY(-100%); }
    to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.kvik-hdr-compact header .top-holder { animation: none; }
    header .top-holder .kvik-hdr__logo img { transition: none; }
}