/* ============================================================
   The suggestion drawer under a search box
   Paired with js/search-suggest.js
   ============================================================ */

/*
 * Its own stylesheet rather than another block in listgoph-theme.css. The drawer
 * appears on the hero, on the map filters and on any hub search, all of which
 * sit inside containers with their own overflow and radius rules — keeping it
 * separate makes what it needs from the page explicit, and lets a page that
 * never renders a search box skip the bytes entirely.
 */

.lg-suggest-host {
    position: relative;
    display: block;
    /* The hero lays its search bar out as flex columns; without this the
       wrapper collapses and takes the input's width with it. */
    flex: 1 1 auto;
    min-width: 0;
}

.lg-suggest {
    position: absolute;
    z-index: 1080;      /* over the map (Leaflet tops out at 1000) */
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 22rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--dl-border, #e4e8f1);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(39, 43, 65, .16);
    padding: .35rem 0;
    text-align: left;
}

.lg-suggest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .85rem .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dl-muted, #9299b8);
}

.lg-suggest-head i { margin-right: .4rem; }

.lg-suggest-head + .lg-suggest-head { border-top: 1px solid var(--dl-border, #e4e8f1); }

.lg-suggest-clear {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dl-primary, #3d52a8);
    cursor: pointer;
}

.lg-suggest-clear:hover { text-decoration: underline; }

.lg-suggest-row {
    display: flex;
    align-items: center;
}

.lg-suggest-row.is-active,
.lg-suggest-row:hover {
    background: var(--dl-primary-light, #e9edfb);
}

.lg-suggest-pick {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    border: 0;
    background: none;
    text-align: left;
    padding: .5rem .85rem;
    font-size: .93rem;
    color: var(--dl-dark, #272b41);
    cursor: pointer;
}

.lg-suggest-term {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-suggest-hint {
    color: var(--dl-muted, #9299b8);
    font-size: .82rem;
    white-space: nowrap;
}

/* 1, 2, 3 beside the trending terms: the ranking is the whole point of a
   Top 3, and without the numerals it reads as an unordered list. */
.lg-suggest-rank {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dl-accent, #fa7c50);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.lg-suggest-drop {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--dl-muted, #9299b8);
    padding: .5rem .7rem;
    line-height: 1;
    cursor: pointer;
}

.lg-suggest-drop:hover { color: var(--dl-dark, #272b41); }

/* Touch targets stay honest on a phone, where the drawer covers most of the
   screen and a mis-tap costs a page load. */
@media (max-width: 575.98px) {
    .lg-suggest { max-height: 60vh; }
    .lg-suggest-pick { padding: .7rem .85rem; }
    .lg-suggest-drop { padding: .7rem .8rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .lg-suggest { animation: lg-suggest-in .12s ease-out; }
}

@keyframes lg-suggest-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}