/**
 * Live-suggest search component, filter popover, and header overlay.
 *
 * The base pill styling of .bs-search comes from the theme (theme.css); this file
 * layers the structured field, the suggestion dropdown, the filter popover, the
 * "Near" type-ahead, and the full-screen overlay. All values use theme tokens.
 */

/* The enhanced form is a positioning context for its dropdowns. The theme's
   white capsule styling targets .bs-search itself, but the live component
   carries its kinds row below the input, so the form goes transparent and the
   capsule moves to the inner .bs-search__bar. */
.bs-search[data-live] {
  position: relative; flex-wrap: wrap;
  background: transparent; border: none; box-shadow: none;
  border-radius: 0; padding-inline: 0; min-height: 0;
}
.bs-search[data-live]:focus-within { border-color: transparent; box-shadow: none; }

.bs-search__bar {
  flex: 1 1 100%; display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface-0); border: var(--stroke-1) solid var(--color-border-200);
  border-radius: var(--radius-pill); padding-inline: var(--space-5) var(--space-2);
  min-height: var(--search-h); box-shadow: var(--shadow-card);
}
.bs-search__bar:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 var(--space-1) var(--color-focus-glow); }

.bs-search__field {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1; min-width: 0;
}
.bs-search__icon { display: inline-flex; color: var(--color-text-muted); }
.bs-search__icon svg,
.bs-search__filters svg,
.bs-search__reset svg { width: var(--icon); height: var(--icon); }

.bs-search__reset,
.bs-search__filters {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted); padding: var(--space-1);
  border-radius: var(--radius-pill);
}
.bs-search__reset:hover,
.bs-search__filters:hover { color: var(--color-text); background: var(--color-surface-100); }
.bs-search__filters[aria-expanded="true"] { color: var(--color-primary); }

/* The reset must honour the hidden attribute. The base rule above sets
   display:inline-flex, which would otherwise override the UA [hidden] rule and
   keep the clear "x" visible before any text is typed. */
.bs-search__reset[hidden] { display: none; }
/* Suppress the browser's native search clear so there is a single clear control. */
.bs-search__input { appearance: none; -webkit-appearance: none; }
.bs-search__input::-webkit-search-cancel-button,
.bs-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* Inside the overlay the outer close button is the only clear control. */
.bs-search--overlay .bs-search__reset { display: none; }

/* ----------------------------------------------------------- Suggestions -- */

.bs-suggest {
  position: absolute; top: calc(100% + var(--space-2)); inset-inline: 0; z-index: 50;
  margin: 0; padding: var(--space-2); list-style: none;
  background: var(--color-surface-0);
  border: var(--stroke-1) solid var(--color-border-200);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  max-height: 60vh; overflow-y: auto;
}
.bs-suggest[hidden] { display: none; }

.bs-suggest__group {
  font-size: var(--font-size-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.bs-suggest__option {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  cursor: pointer;
}
.bs-suggest__option.is-active,
.bs-suggest__option:hover { background: var(--color-surface-100); }
.bs-suggest__title { color: var(--color-text); font-weight: var(--weight-medium); }
.bs-suggest__sub { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.bs-suggest__empty {
  padding: var(--space-3); color: var(--color-text-muted); text-align: center;
}

/* ---------------------------------------------------- Content-kind pills -- */

/* The "Searching for:" row sits on its own line directly below the bar (the
   form wraps); checked = included (accent pill), unchecked = a disabled look
   meaning that kind is excluded. The three pills share the row evenly. */
.bs-search__kinds {
  flex-basis: 100%;
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
}
.bs-search__kinds-label {
  font-size: var(--font-size-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
  flex: none;
}
.bs-search__kind {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--chip-h-sm, 28px); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); border: var(--stroke-1) solid transparent;
  cursor: pointer; font-size: var(--font-size-sm); white-space: nowrap;
  transition: background var(--motion-base) var(--motion-ease-out), color var(--motion-base) var(--motion-ease-out);
}
.bs-search__kind input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Included: accent pill. */
.bs-search__kind:has(input:checked) {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-on-primary, #fff); font-weight: var(--weight-semibold);
}
/* Excluded: muted, dashed, faded; reads as disabled but stays clickable. */
.bs-search__kind:has(input:not(:checked)) {
  background: var(--color-surface-50); border-color: var(--color-border-200);
  border-style: dashed; color: var(--color-text-muted); opacity: .7;
  text-decoration: line-through;
}
.bs-search__kind:hover { opacity: 1; }
.bs-search__kind:has(input:focus-visible) {
  outline: var(--stroke-2) solid var(--color-focus); outline-offset: var(--focus-offset);
}
/* Outside the capsule the row sits on the hero photo / overlay scrim. */
.bs-search--hero .bs-search__kinds-label,
.bs-search--overlay .bs-search__kinds-label { color: rgba(255, 255, 255, 0.92); }

/* Visually hidden but accessible (the popover's location label). */
.bs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------ Location popover -- */

/* Opens from the location-pin button and slides in directly below the
   content-kind pills, spanning the component's full width. Location only:
   the kind chips moved out to the always-visible row above. */
.bs-search__popover {
  position: absolute; top: calc(100% + var(--space-2)); inset-inline: 0; z-index: 51;
  width: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-0);
  border: var(--stroke-1) solid var(--color-border-200);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  text-align: start;
}
.bs-search__popover[hidden] { display: none; }
.bs-search__near { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.bs-search__near-input {
  width: 100%; min-height: var(--control-h-sm);
  border: var(--stroke-1) solid var(--color-border-200); border-radius: var(--radius-pill);
  padding-inline: var(--space-4); background: var(--color-surface-0); color: var(--color-text);
  font-family: var(--font-family-body); font-size: var(--font-size-base);
}
.bs-area-suggest {
  position: absolute; top: 100%; inset-inline: 0; z-index: 52;
  margin: var(--space-1) 0 0; padding: var(--space-1); list-style: none;
  background: var(--color-surface-0);
  border: var(--stroke-1) solid var(--color-border-200);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  max-height: 40vh; overflow-y: auto;
}
.bs-area-suggest[hidden] { display: none; }
.bs-area-suggest__option {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--color-text);
}
.bs-area-suggest__option:hover { background: var(--color-surface-100); }

/* ----------------------------------------------------------- Header icon -- */

.bs-search-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h);
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text); border-radius: var(--radius-pill);
}
.bs-search-trigger:hover { background: var(--color-surface-100); color: var(--color-primary); }
.bs-search-trigger svg { width: var(--icon); height: var(--icon); }

/* -------------------------------------------------------------- Overlay -- */

html.bs-search-locked { overflow: hidden; }

.bs-search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.bs-search-overlay[hidden] { display: none; }
.bs-search-overlay__backdrop {
  position: absolute; inset: 0;
  background: var(--color-scrim-strong, rgba(10, 22, 40, .55));
  backdrop-filter: blur(4px);
}
.bs-search-overlay__panel {
  position: relative; z-index: 1;
  width: min(40rem, 92vw);
  display: flex; align-items: center; gap: var(--space-3);
}
.bs-search-overlay__panel .bs-search { flex: 1; }
.bs-search-overlay__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h); flex: none;
  border: none; cursor: pointer; border-radius: var(--radius-pill);
  background: var(--color-surface-0); color: var(--color-text); box-shadow: var(--shadow-1);
}
.bs-search-overlay__close:hover { color: var(--color-primary); }
.bs-search-overlay__close svg { width: var(--icon); height: var(--icon); }

@media (max-width: 600px) {
  /* Full-width search with side padding; the search stays vertically centred and
     the close moves up into the top third, above the input. */
  .bs-search-overlay__panel {
    width: 100%; padding-inline: var(--space-5); flex-direction: column; gap: 0;
  }
  .bs-search-overlay__panel .bs-search { width: 100%; }
  .bs-search-overlay__close {
    position: fixed; top: 15vh; left: 50%; transform: translateX(-50%);
  }
  /* No placeholder text on the mobile search input. */
  .bs-search__input::placeholder { color: transparent; }

  /* Pills wrap under the lead label on narrow screens. */
  .bs-search__kinds { flex-wrap: wrap; }
  .bs-search__kinds-label { flex-basis: 100%; }
  .bs-search__kind { flex: 1 1 auto; }
}