/**
 * Header search typeahead.
 *
 * From search-typeahead.html. The mock's hex palette is mapped onto theme
 * tokens here. The header layout itself is untouched — this is only what
 * appears when the field is used.
 */

/* The dropdown anchors to the form. .cul-finder (header.php) already sets
   position: relative; the other two do not. */
.cul-search,
.cul-v3-herosearch { position: relative; }

/* The header creates a stacking context (position:relative; z-index:20), so
   nothing inside it can rise above a sibling with a higher z-index — such as
   the listing page's sticky offer bar at 1000. The JS adds this class while
   the panel is open and removes it after, so the header only outranks the
   page for as long as it needs to. */
.cul-sitebar.cul-sg-raised { z-index: 1200; }

/* The header's city menu is z-index 30 and must not sit under this panel
   when both are open — the JS closes this one when the city button is
   clicked, and this keeps the stacking honest if that ever changes. */
.cul-finder__cities { z-index: 1201; }

.cul-sg {
    --sg-head:      var(--cul-brand, #1B3A5C);
    --sg-ink:       var(--cul-g700, #444);
    --sg-ink-soft:  #64798c;
    --sg-line:      var(--cul-g200, #d0dce8);
    --sg-line-mid:  var(--cul-g100, #e0e8f0);
    --sg-accent:    #0f6b7b;
    --sg-wash:      #e6f2f4;
    --sg-orange-dk: #cf5f0a;
    --sg-orange-wash: #fff7f0;
    --sg-orange-line: #f4d6b8;
    --sg-white:     var(--cul-white, #fff);
    --sg-r:         5px;

    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /* Above the listing page's sticky offer bar, which is z-index 1000 and
       was punching a stripe through the middle of the mobile panel. */
    z-index: 1200;
    background: var(--sg-white);
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-r);
    box-shadow: 0 10px 30px rgba(10,24,38,.18);
    /* auto, not hidden: the JS caps max-height to the space below the field,
       and the remaining rows scroll rather than being cut off. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    text-align: left;
}
.cul-sg[hidden] { display: none; }

/* Escapes an overflow:hidden ancestor — the home hero crops its background
   mosaic that way, which cut the panel off mid-list. Coordinates come from
   the JS, which keeps it pinned to the field on scroll. */
.cul-sg.is-fixed {
    position: fixed;
    right: auto;
}
.cul-sg *, .cul-sg *::before, .cul-sg *::after { box-sizing: border-box; }

/* Close control is for the mobile full-screen panel; on desktop the panel
   closes on blur, Escape, or an outside click and the button is noise. */
.cul-sg__close { display: none; }

.cul-sg__grp {
    padding: 9px 14px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sg-ink-soft);
    border-top: 1px solid var(--sg-line);
}
.cul-sg__inner > .cul-sg__grp:first-child { border-top: 0; }

.cul-sg__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
}
.cul-sg__opt.is-act { background: var(--sg-wash); }

.cul-sg__in {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f4f8;
    border: 1px solid var(--sg-line-mid);
    color: var(--sg-ink-soft);
    font-size: 11.5px;
    font-weight: 700;
}
.cul-sg__in.has-offer {
    background: var(--sg-orange-wash);
    border-color: var(--sg-orange-line);
    color: var(--sg-orange-dk);
}
.cul-sg__in--cat { font-size: 15px; }

.cul-sg__t { flex: 1; min-width: 0; }
/* Long business names truncate rather than wrapping — a two-line row breaks
   the rhythm of the list and pushes the search row past the fold. */
.cul-sg__n,
.cul-sg__c {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cul-sg__n {
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--sg-head);
}
.cul-sg__n b { font-weight: 800; color: var(--sg-head); }
.cul-sg__c { font-size: 12.5px; color: var(--sg-ink-soft); }

.cul-sg__tag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--sg-r);
    background: var(--sg-orange-wash);
    border: 1px solid var(--sg-orange-line);
    color: var(--sg-orange-dk);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.cul-sg__arrow { flex: 0 0 auto; color: #c3ced8; }

.cul-sg__all {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-top: 1px solid var(--sg-line);
    background: #fbfcfe;
    color: var(--sg-head);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}
.cul-sg__all.is-act { background: var(--sg-wash); }
.cul-sg__all svg { flex: 0 0 auto; color: var(--sg-ink-soft); }
.cul-sg__all > span:not(.cul-sg__kbd) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cul-sg__kbd {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid var(--sg-line-mid);
    border-radius: 3px;
    background: var(--sg-white);
    color: var(--sg-ink-soft);
    font-size: 10.5px;
    font-weight: 700;
}

.cul-sg__none { padding: 20px 16px; text-align: center; }
.cul-sg__none p {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--sg-head);
}
.cul-sg__none span { font-size: 13px; color: var(--sg-ink-soft); }

/* ── Mobile ──────────────────────────────────────────────────────────────
   Below ~640px the panel fills the screen under the header rather than
   floating. Six rows in a 390px floating panel are hard to hit, and the
   keyboard covers half of it.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .cul-sg {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        /* Anchored under the field rather than a guessed header height, so
           it works wherever this control is used. */
        top: var(--sg-top, 96px);
        border: 0;
        border-radius: 0;
        box-shadow: 0 -1px 0 var(--sg-line), 0 10px 30px rgba(10,24,38,.18);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cul-sg__inner { position: relative; padding-bottom: 24px; }

    .cul-sg__close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 2;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: var(--sg-r);
        background: transparent;
        color: var(--sg-ink-soft);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }
    .cul-sg__close:hover { background: #f1f4f8; }

    /* Bigger targets — this is the reason for the full-screen panel. */
    .cul-sg__opt { padding: 12px 14px; }
    .cul-sg__in { width: 38px; height: 38px; }
    .cul-sg__n { font-size: 15.5px; }
    .cul-sg__all { padding: 14px; font-size: 15px; }
    /* The Enter marker means nothing on a touch keyboard. */
    .cul-sg__kbd { display: none; }
}