/* Search compo — frontend styles (M2: overlay + inline bar + dropdown structure) */

/* ---------- Overlay (icon-triggered) ---------- */
.cl-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: none;
}
.cl-search-overlay.is-open {
    display: block;
}
/* Lock the page behind the full-screen overlay so flicking over the
   overlay (especially with the on-screen keyboard up) doesn't scroll the
   page underneath — the overlay's own results body keeps its internal
   overflow-y:auto. Toggled by search.js openOverlay/closeOverlay. */
body.cl-search-overlay-open {
    overflow: hidden;
}
.cl-search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.cl-search-overlay-panel {
    position: relative;
    margin: 20px auto 0 auto;
    max-width: 700px;
    width: calc(100% - 32px);
    /* Cap dropdown at 90% of viewport so it never spills off-screen on
       short windows. Flex column splits the panel into: input (fixed) +
       results (flexible, scrollable internally). */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    /* overflow: visible (not hidden) so the close button can hang off the
       top-end corner via negative inset (Notion / Figma style). The inner
       `.cl-search-overlay-results` already has overflow:hidden + the
       scrollable body its own overflow-y:auto, so border-radius clipping
       still works for content. */
    overflow: visible;
    /* Skin (border-radius, background, padding, shadow) from generated_css.php */
}
/* Input wrapper — anchor for absolute icon + clear button. Unified
   between overlay and inline bar so both surfaces render as a single
   pill (icon + text + × all inside one rounded background).

   `width: 100%` is load-bearing: the wrapper has `flex: 0 0 auto` so it
   would size to content (~content-width) inside a flex-column parent
   (the overlay panel). Without `width: 100%`, the wrapper never
   stretches to the brush's max-width — setting max-width: 500px would
   visibly do nothing because the content was already ~200px. With
   `width: 100%`, the wrapper fills the cross-axis up to max-width, so
   the brush's max-width genuinely caps the visible pill width.

   For inline-bar surfaces (parent is `.cl-search-inline-bar` with
   `display: block`) this is a no-op — block children already fill the
   parent width — but the rule unifies behavior across both surfaces
   with no side effect. */
.cl-search-overlay-input-wrapper,
.cl-search-inline-bar .cl-search-inline-field-wrapper {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 100%;
}
.cl-search-overlay-input-wrapper .cl-search-input,
.cl-search-inline-bar .cl-search-inline-input {
    width: 100%;
    box-sizing: border-box;
    display: block;
    -webkit-appearance: none;
    appearance: none;
    /* padding-inline-start/end + max-width come from search_bar/v1/
       generated_css.php — derived from the admin brush via
       StyleManagerBK_cl::getSingleCssPropertyValue() so the icon (start)
       and clear button (end) stay clear of the text regardless of the
       admin's padding choice. */
}
/* iOS Safari auto-zooms into any form field whose rendered font-size is
   < 16px on focus, then leaves the viewport zoomed (misaligning the
   full-screen overlay). Force >=16px on mobile regardless of the admin's
   font-size brush choice. Matches the brush selectors exactly + !important
   because the brush's font-size is emitted later in the cascade (wp_head,
   after this file) at equal specificity — only !important reliably wins.
   Desktop keeps the admin-chosen size. 782px = WP's mobile breakpoint. */
@media (max-width: 782px) {
    .cl-search-overlay-input-wrapper .cl-search-input,
    .cl-search-inline-bar .cl-search-inline-input {
        font-size: 16px !important;
    }
}
/* Search icon — absolute INSIDE the input field. Unified across overlay
   + inline bar. pointer-events:none so clicks fall through to the input. */
.cl-search-input-icon,
.cl-search-inline-bar .cl-search-inline-icon {
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Clear-input button — absolute, anchored to the END edge of the input
   field. Unified between overlay (`.cl-search-input-clear`) and inline
   bar (`.cl-search-inline-close`). `!important` resets defeat host-theme
   `button { border:... }` leakage. */
.cl-search-input-clear,
.cl-search-inline-close {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 4px;
    border-radius: 9999px;
    line-height: 1;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 1;
}
.cl-search-input-clear[hidden],
.cl-search-inline-close[hidden] { display: none; }
/* Hide the browser-native `<input type="search">` clear button on WebKit
   (Chrome / Safari / Edge) and the magnifying-glass decoration on BOTH
   the overlay's input AND the inline bar's input. Our custom
   `.cl-search-input-clear` / `.cl-search-inline-close` buttons replace
   them. Without these resets, the native × appears alongside our custom
   × on the right edge of the field — two close buttons stacked. */
.cl-search-input::-webkit-search-cancel-button,
.cl-search-input::-webkit-search-decoration,
.cl-search-input::-webkit-search-results-button,
.cl-search-input::-webkit-search-results-decoration,
.cl-search-inline-input::-webkit-search-cancel-button,
.cl-search-inline-input::-webkit-search-decoration,
.cl-search-inline-input::-webkit-search-results-button,
.cl-search-inline-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.cl-search-input::-ms-clear,
.cl-search-input::-ms-reveal,
.cl-search-inline-input::-ms-clear,
.cl-search-inline-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}
.cl-search-input-clear:hover {
    background-color: var(--cl-bg-color3) !important;
}
.cl-search-input-clear:focus,
.cl-search-input-clear:active {
    outline: none !important;
    box-shadow: none !important;
}
/* Close-modal button — Notion / Figma floating style: negative inset
   pushes the button OUTSIDE the panel's top-end corner so it overlaps
   the edge. Panel uses overflow:visible (set above) so this isn't
   clipped. `inset-inline-end` instead of `right` flips automatically
   in RTL. Negative values: -14 = (button_height_40 / 2) − 6, so the
   button's center sits 6px past the panel edge — most of the button
   hangs off, ~30% overlaps the panel. */
.cl-search-overlay-close {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-end: -14px;
    z-index: 10;
    outline: none !important;
    cursor: pointer;
    line-height: 1;
    /* display: grid; place-items: center  — moved to generated_css.php so
       all visual + layout properties for the close button live in one
       place. */
}
.cl-search-overlay-close:focus,
.cl-search-overlay-close:active {
    outline: none !important;
    box-shadow: none !important;
}
.cl-search-overlay-results {
    position: relative;
    margin-top: 12px;
    /* Take all remaining space inside the panel + split into body + chips. */
    flex: 1 1 auto;
    min-height: 0;            /* allow internal overflow */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Body (results / loading / no-results) — scrollable when content
   overflows the available space. Chips area stays pinned below. */
.cl-search-overlay-results .cl-search-dropdown-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.cl-search-overlay-results .cl-search-dropdown-chips-area {
    flex: 0 0 auto;
}
/* Recent / Popular search chips: structural guard so a long or repetitive
   query (e.g. a pasted phrase) can't blow out the chips row — cap the width
   and ellipsize. Skin (padding / colors / radius) still comes from the
   discovery brush. The full term stays in the href + data-empty-chip, so
   clicking the (visually truncated) chip still re-runs the whole query. */
.cl-search-empty-chip {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* Overlay's inline-style dropdown (when used in inline-bar mode embedded
   in the overlay — rare). Static so it inherits the column flow. */
.cl-search-overlay-results .cl-search-dropdown {
    position: static;
    margin-top: 0;
}

/* ---------- Inline bar ---------- */
.cl-search-inline-bar {
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* Skin (background, padding, max-width, etc.) from generated_css.php
       — the inline_search_bar_container_style brush owns max-width now
       (admin-editable). `.cl-search-inline-bar--full` removes max-width
       to make the bar span 100% of its container. */
}
/* Inline bar's field-wrapper positioning + input + close button now
   share the unified rules above. Only the dropdown anchor stays here.
   `overflow: visible` is load-bearing — the close × inside the dropdown
   is positioned with negative inset (floats outside the panel corner),
   same Notion/Figma style as the overlay's close button. Without
   visible overflow, the × would be clipped. */
.cl-search-inline-bar .cl-search-inline-field-wrapper .cl-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100060;
    /* overflow stays visible so the negative-inset close × isn't clipped.
       The internal SCROLL happens on the body (below), not here — mirrors
       the overlay (.cl-search-overlay-results). Without this, a many-result
       dropdown's content (taller than max-height) spilled OUT of the box and
       overlapped the page + floating buttons. */
    overflow: visible;
}
/* Flex column ONLY when shown. The dropdown is created with the `hidden`
   attribute and toggled via JS; an UNCONDITIONAL `display:flex` here (3 classes)
   outranks `.cl-search-dropdown[hidden]{display:none}` (2 classes) and would
   leave the empty-state dropdown visible on page load before any interaction.
   `:not([hidden])` applies the flex layout only while the dropdown is open, so
   the `[hidden]` rule still hides it on load / after close. */
.cl-search-inline-bar .cl-search-inline-field-wrapper .cl-search-dropdown:not([hidden]) {
    display: flex;
    flex-direction: column;
}
/* Body scrolls within the dropdown's max-height; chips area stays pinned
   below — same split the overlay uses so a tall result list scrolls instead
   of overflowing the page. */
.cl-search-inline-bar .cl-search-inline-field-wrapper .cl-search-dropdown .cl-search-dropdown-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.cl-search-inline-bar .cl-search-inline-field-wrapper .cl-search-dropdown .cl-search-dropdown-chips-area {
    flex: 0 0 auto;
}

/* ---------- Header search-icon trigger ----------
   Structural rules only. Typography (font-size, color, padding, etc.)
   comes from the admin brush — `header_search_icon_style` in the
   search compo's Search Bar tab. The .cl-header-main scoped variant
   in search_bar/v1/generated_css.php overrides these defaults when
   admin sets the brush. */
.cl-header-search-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
}

/* Inline-bar dropdown close button — mirror of `.cl-search-overlay-close`
   positioning. Floats outside the top-end corner of the dropdown panel
   (same Notion/Figma style as the overlay). Visual style (size, color,
   bg, radius) comes from the shared admin brush in advanced/v1
   (search_overlay_close_button_style) — one brush, both surfaces. */
.cl-search-dropdown-close {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-end: -14px;
    z-index: 10;
    outline: none !important;
    cursor: pointer;
    line-height: 1;
}
.cl-search-dropdown-close:focus,
.cl-search-dropdown-close:active {
    outline: none !important;
    box-shadow: none !important;
}

/* The embedded (results-page) dropdown is inline page content, not a floating
   panel — force its box-shadow off regardless of the admin's dropdown-panel
   brush (that shadow is meant for the floating overlay / inline-bar dropdown).
   Two-class selector outranks the single-class `.cl-search-dropdown` brush, so
   no !important needed; the floating dropdown keeps the admin shadow. */
.cl-search-dropdown.cl-search-dropdown--embedded {
    box-shadow: none;
}

/* ---------- Dropdown sections ---------- */
.cl-search-dropdown[hidden] { display: none; }
.cl-search-dropdown-section {
    display: flex;
    flex-direction: column;
}