/* ==========================================================================
   Public search — the field, its dropdown, and the rows inside it.

   In one file on purpose, the same reason the bucket badges are. This component
   is on the landing page twice, in the photograph at the top and in the dark
   band at the foot, and the moment it was copied into a second stylesheet the
   two would start to drift: a different radius here, a focus ring that only
   exists on one of them, an empty state that says something else. One set of
   rules, two callers.

   /trips used to be the third. It moved to the shared filter control, which is
   `filter.css`, and the two now draw the same payload from the same endpoint
   under two skins: this one sits in a photograph, that one above a list it
   narrows. `docs/FILTERING.md` is why.

   The class names stayed `.lp-` when this moved out of landing.css. Renaming
   them would have touched every result row the autocomplete builds in JS for no
   gain a reader can see.

   Behavior lives in static/js/public-search.js.
   ========================================================================== */

/* The dropdown used to be positioned against this and is not any more, so this
   is only what lifts the field itself off the hero's photograph. Left alone
   rather than trimmed: the wrapper is also what the hero fades in. */
.lp-search-wrapper { position: relative; z-index: 50; }

.lp-search-field {
    display: flex; align-items: center;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 0 16px;
    transition: all .2s ease;
}
.lp-search-field:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-alpha);
}
.lp-search-icon { color: var(--text-muted); width: 18px; height: 18px; flex-shrink: 0; }
.lp-search-field input {
    flex: 1; border: none; background: none; outline: none;
    color: var(--text-primary); font-size: .95rem; font-family: inherit; font-weight: 400;
    padding: 12px 10px;
}
.lp-search-field input::placeholder { color: var(--text-muted); }

/* ── DROPDOWN ──
   Fixed, and moved to the end of the document by the script, rather than
   absolutely positioned inside the field's wrapper. The hero it sits in is
   `overflow:hidden` -- it has to be, the photograph behind it is `inset:0` --
   and an ancestor's clip is not something a z-index can climb out of, so the
   dropdown was cut off at the hero's bottom edge the moment it grew past it.
   `filter.js` reached the same conclusion on /trips and for the same reason: a
   component that cannot be clipped or out-stacked by its host is the only kind
   worth writing once and using in two places.

   Above the page and the settings FAB, on the same tier as the filter
   control's dropdown, which it can never be open at the same time as. */
.lp-search-results {
    position: fixed;
    /* Left, width and one of top/bottom are written by `place()` from where the
       field actually is. Nothing here assumes which way it opens: at the foot
       of the page there is no room below, so it opens upwards on its own. */
    background: var(--bg-elevated, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    /* Named rather than `all`: `place()` writes top, left and width on every
       scroll, and transitioning those makes the dropdown chase the field down
       the page instead of staying under it. */
    transition: opacity .15s ease, transform .15s ease;
    /* Fixed means the page cannot be scrolled to reach it and it has no room of
       its own, so it takes what is there. `--lp-sr-room` is what `place()`
       measured between the field and the edge of the screen; the fallback is
       for the frame before it runs. */
    max-height: var(--lp-sr-room, 360px);
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 16px 48px rgba(0,0,0,.4);
    z-index: 1140;
}
.lp-search-results.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.lp-search-results-up { transform: translateY(6px); }
.lp-search-results-up.open { transform: translateY(0); }

/* The quiet heading over each section. It is there to say that the rows under
   it are a different kind of thing from the rows under the next one, which
   needs a word and nothing else: a heading with any weight to it would read as
   a row, and a row is the one thing it must not be. Sticky, so both halves
   stay named once the list is long enough to scroll inside itself. */
.lp-sr-head {
    position: sticky; top: 0; z-index: 1;
    padding: 7px 14px 5px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono); font-size: .6rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted);
}

.lp-sr-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    transition: background .1s ease;
    border-bottom: 1px solid var(--border-color);
}
/* Every row keeps its line. A section's last row is followed by the next
   section's heading, and the line between them is what says one list has
   ended; the row at the very bottom is always the free-text one, which brings
   its own ground. */
.lp-sr-item:last-child { border-bottom: none; }

/* base.html sets `a:hover { color: var(--text-primary) }`, which outranks a single
   class. The row restates its color so the keyboard-highlighted row and the
   hovered row look the same rather than one of them going near-black in light mode. */
.lp-sr-item,
.lp-sr-item:hover,
.lp-sr-item:focus-visible { color: var(--text-primary); }
.lp-sr-item:hover,
.lp-sr-item.is-active { background: var(--accent-alpha); }
.lp-sr-item:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

/* Two classes deep on purpose: a page wrapper that carries a `.wrapper img` safety
   rule ties a one-class-one-type selector and wins on source order. */
.lp-sr-item .lp-sr-thumb {
    width: 40px; height: 40px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
}
.lp-sr-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); flex-shrink: 0;
}
.lp-sr-body { flex: 1; min-width: 0; }
.lp-sr-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-sr-meta {
    font-size: .72rem; color: var(--text-muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-sr-empty { padding: 16px; text-align: center; font-size: .82rem; color: var(--text-muted); }

/* The last row of the dropdown: whatever you typed, as a search rather than as a
   destination. It is how someone who wants a list instead of one tour gets there. */
.lp-sr-all {
    display: block; padding: 11px 14px;
    font-size: .78rem; font-weight: 600; text-align: center;
    background: var(--bg-secondary);
    text-decoration: none;
}
.lp-sr-all,
.lp-sr-all:hover,
.lp-sr-all:focus-visible { color: var(--accent-color); }
.lp-sr-all:hover, .lp-sr-all.is-active { filter: brightness(1.15); text-decoration: underline; }

@media (min-width: 768px) {
    .lp-search-field { padding: 0 18px; }
    .lp-search-field input { font-size: 1rem; padding: 13px 10px; }
}