/**
 * live-search.css — shared as-you-type suggestions dropdown component.
 *
 * Paired with assets/js/live-search.js, which attaches to any
 * <input data-livesearch> and builds this dropdown. Loaded on every page that
 * has such an input (the /jobs/ hero, the landing hero, campgrounds, …).
 *
 * The dropdown is position:fixed (JS sets left/top/width from the input's box)
 * so it escapes any ancestor overflow:hidden clipping. Each page owns the
 * SIZING of its own .wcc-livesearch-wrap (max-width / centering); this file
 * owns the dropdown's look + behavior only.
 */

/* Positioning context for the input's form; page CSS adds max-width/centering. */
.wcc-livesearch-wrap { position: relative; }

.wcc-livesearch {
    position: fixed;   /* fixed → no ancestor overflow:hidden can clip it; JS sets left/top/width */
    background: var(--color-surface-solid);   /* opaque — overlay rule */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    display: none;
}
.wcc-livesearch.is-open { display: block; }

.wcc-livesearch__group-header {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    /* NOT sticky: the dropdown is short, and a sticky header over a translucent
       bg would let scrolling items bleed through it (overlay see-through rule). */
}
.wcc-livesearch__item {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
}
.wcc-livesearch__item:hover,
.wcc-livesearch__item.is-active {
    background: var(--color-primary-light);
}
.wcc-livesearch__item-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.wcc-livesearch__item-meta  { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.wcc-livesearch__hl { color: var(--color-accent); font-weight: var(--font-weight-bold); }
.wcc-livesearch__cta {
    display: block;
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    text-align: center;
    border-top: 1px solid var(--color-border);
}
.wcc-livesearch__cta:hover { background: var(--color-accent-tint-25); }
.wcc-livesearch__empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}