/**
 * @file
 * Header search form (.lgs-bar) + Selectify dropdowns + page-title band.
 *
 * Selectify ships min-width: 230px, tag-like chips and a 24px circular
 * chevron — all too heavy for a single header row. These rules restyle the
 * widget as compact selects that fill the bar and shrink cleanly.
 */

.page-search_toolbar {
  position: relative;
  padding-block: var(--space-10) var(--space-4);
}

.page-search_toolbar .region-search-toolbar {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.page-search_toolbar .block > h2 {
  display: none;
}

.lgs {
  width: 100%;
}

.lgs-title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--weight-extra);
  letter-spacing: -0.02em;
  color: var(--color-heading);
  line-height: var(--leading-tight);
}

/* ==========================================================================
   Search bar — shared
   ========================================================================== */
.lgs-bar {
  --selectify-select-bg: var(--color-surface);
  --selectify-select-border-color: var(--color-border-strong);
  --selectify-select-color: var(--color-heading);
  --selectify-select-hover-bg: var(--color-primary-soft);
  --selectify-select-focus-border: var(--color-primary);
  --selectify-select-arrow-color: var(--color-text-muted);
  --selectify-option-hover-bg: var(--color-primary-soft);
  --selectify-option-active-bg: var(--color-primary-soft-2);
  --selectify-dropdown-shadow: var(--shadow-lg);
  --selectify-select-border-radius: var(--radius-md);
  --selectify-select-padding: 0 0.75rem;
  --selectify-placeholder-color: var(--color-text-faint);
  position: relative;
}

.lgs-bar .form-item,
.lgs-bar .js-form-item {
  position: static;
  margin: 0;
  min-width: 0;
}

.lgs-bar .form-actions,
.lgs-bar .js-form-wrapper.form-actions {
  margin: 0;
  display: flex;
  align-items: stretch;
}

/* ==========================================================================
   Selectify trigger (single-select, not chips)
   ========================================================================== */
.lgs-bar .wrapper-selectify,
.lgs-bar .selectify-select,
.lgs-bar .selectify-select-dropdowns {
  display: block;
  position: static;
  width: 100%;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
}

.lgs-bar .selectify-select-dropdowns {
  position: static;
}

.lgs-bar .selectify-selected-display {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-inline-size: 0 !important;
  min-block-size: 2.5rem !important;
  height: 2.5rem;
  padding: 0 0.65rem 0 0.85rem !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.lgs-bar .selectify-selected-display:hover {
  background: var(--color-surface);
  border-color: var(--color-primary-border);
}

.lgs-bar .selectify-opened .selectify-selected-display,
.lgs-bar .selectify-select:focus .selectify-selected-display,
.lgs-bar .selectify-select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.lgs-bar .selectify-selected-options {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.lgs-bar .selectify-selected-one-option {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--color-heading);
}

.lgs-bar .selectify-selected-one-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lgs-bar .selectify-selected-one-option[data-value=""] span {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  opacity: 1;
}

.lgs-bar .selectify-selected-one-option .remove-tag {
  display: none !important;
}

.lgs-bar .selectify-dorpdown-arrow {
  flex: 0 0 auto;
  inline-size: 1rem !important;
  width: 1rem;
  opacity: 0.7;
}

.lgs-bar .selectify-dorpdown-arrow svg {
  inline-size: 16px !important;
  block-size: 16px !important;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Selectify dropdown panel
   ========================================================================== */
.lgs-bar .selectify-available-display {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  inset-block-start: calc(100% + 6px) !important;
  inset-block-end: auto !important;
  z-index: calc(var(--z-header) + 20);
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 100% !important;
  min-inline-size: 100% !important;
  max-width: none !important;
  max-inline-size: none !important;
  max-block-size: min(22rem, 70vh) !important;
  margin: 0 !important;
  transform: none !important;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg);
}

.lgs-bar .selectify-opened.opens-down .selectify-selected-display,
.lgs-bar .selectify-opened.opens-up .selectify-selected-display,
.lgs-bar .selectify-opened.opens-down .selectify-available-display,
.lgs-bar .selectify-opened.opens-up .selectify-available-display {
  border-radius: var(--radius-md) !important;
}

.lgs-bar .selectify-available-display .options-inner {
  gap: 2px;
}

.lgs-bar .search-input {
  margin-block-end: var(--space-2);
}

.lgs-bar .search-input .manage-search {
  inset-block-start: 50% !important;
  inset-inline-start: 1.1rem !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  transform: translateY(-50%);
}

.lgs-bar .selectify-select .search-input input,
.lgs-bar .selectify-select-dropdowns .search-input input.multi-search-input {
  width: calc(100% - 8px);
  inline-size: calc(100% - 8px) !important;
  margin: 4px !important;
  padding: 0.5rem 0.75rem 0.5rem 2.15rem !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-heading);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: none !important;
}

.lgs-bar .selectify-select .search-input input:focus,
.lgs-bar .selectify-select .search-input input:focus-visible {
  border-color: var(--color-primary) !important;
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

.lgs-bar .selectify-available-one-option {
  padding: 0.5rem 0.7rem;
  border-block-end: 0 !important;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  transform: none !important;
}

.lgs-bar .selectify-available-one-option:hover,
.lgs-bar .selectify-available-one-option:focus,
.lgs-bar .selectify-available-one-option:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
  transform: none !important;
}

.lgs-bar .selectify-available-one-option.s-selected,
.lgs-bar .selectify-available-one-option.s-selected * {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lgs-bar .selectify-available-one-option[data-value=""] .option-label {
  color: var(--color-text-faint);
  font-style: italic;
}

.lgs-bar .selectify-no-results {
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.lgs-bar .selectify-select-footer {
  display: none !important;
}

.lgs-bar .selectify-select:focus,
.lgs-bar .selectify-select:focus-visible,
.lgs-bar .selectify-selected-display:focus {
  outline: none;
}

/* ==========================================================================
   Text field
   ========================================================================== */
.lgs-bar input.lgs-text,
.lgs-bar input[type="text"].lgs-text {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.85rem;
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.lgs-bar input.lgs-text::placeholder {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  opacity: 1;
}

.lgs-bar input.lgs-text:hover {
  transform: none;
  background: var(--color-surface);
  border-color: var(--color-primary-border);
}

.lgs-bar input.lgs-text:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.lgs-bar .ui-autocomplete {
  z-index: calc(var(--z-header) + 20);
  max-height: min(18rem, 60vh);
  overflow: auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Submit
   ========================================================================== */
.lgs-bar .lgs-submit,
.lgs-bar input[type="submit"].lgs-submit {
  height: 2.5rem;
  padding-block: 0;
  padding-inline: 2.55rem 1.15rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  color: var(--color-on-search) !important;
  border-color: transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-search);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 0.95rem 0.95rem;
  box-shadow: var(--shadow-search);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lgs-bar .lgs-submit:hover,
.lgs-bar input[type="submit"].lgs-submit:hover {
  background-color: var(--color-search-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 0.95rem 0.95rem;
  box-shadow: var(--shadow-search-hover);
}

.lgs-bar .lgs-submit:active,
.lgs-bar input[type="submit"].lgs-submit:active {
  background-color: var(--color-search-active);
  box-shadow: var(--shadow-xs);
}

.lgs-bar .lgs-submit:focus-visible,
.lgs-bar input[type="submit"].lgs-submit:focus-visible {
  box-shadow: var(--shadow-search), var(--focus-ring-search);
}

/* ==========================================================================
   One-piece search capsule (header)
   ========================================================================== */
.header-search .lgs-bar {
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.header-search .lgs-bar:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.header-search .lgs-bar .selectify-selected-display,
.header-search .lgs-bar .selectify-selected-display:hover,
.header-search .lgs-bar .selectify-opened .selectify-selected-display,
.header-search .lgs-bar .selectify-select:focus .selectify-selected-display,
.header-search .lgs-bar input.lgs-text,
.header-search .lgs-bar input.lgs-text:hover,
.header-search .lgs-bar input.lgs-text:focus {
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
}

.header-search .lgs-bar input.lgs-text::placeholder {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  opacity: 1;
}

.header-search .lgs-bar .selectify-selected-one-option[data-value=""] span {
  color: var(--color-text) !important;
  font-weight: var(--weight-medium);
  opacity: 1;
}

/* ==========================================================================
   Desktop — single centered header row
   ========================================================================== */
@media (min-width: 64rem) {
  .header-search .lgs-bar {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0.2rem 0.2rem 0.2rem 0.35rem;
    border-radius: var(--radius-pill);
  }

  .header-search .lgs-bar .form-item,
  .header-search .lgs-bar .js-form-item {
    flex: 1 1 0;
  }

  .header-search .lgs-bar .form-item-specialties,
  .header-search .lgs-bar .js-form-item-specialties {
    flex: 1.15 1 0;
  }

  .header-search .lgs-bar .form-item--text,
  .header-search .lgs-bar .js-form-type-textfield {
    flex: 1.45 1 0;
  }

  .header-search .lgs-bar > .form-item:not(:first-child) {
    border-inline-start: 1px solid var(--color-border);
  }

  .header-search .lgs-bar .form-actions {
    flex: 0 0 auto;
    padding-inline-start: 0.25rem;
  }

  .header-search .lgs-bar .lgs-submit,
  .header-search .lgs-bar input[type="submit"].lgs-submit {
    width: auto;
    min-width: 6.75rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-search);
  }

  /* Narrow desktop: icon-only submit so city/specialty stay readable. */
  @media (max-width: 80rem) {
    .header-search .lgs-bar .lgs-submit,
    .header-search .lgs-bar input[type="submit"].lgs-submit {
      min-width: 2.5rem;
      width: 2.5rem;
      padding-inline: 0;
      font-size: 0;
      color: transparent;
      background-position: center;
    }
  }
}

/* ==========================================================================
   Mobile overlay — stacked, larger tap targets
   ========================================================================== */
.header-search.is-open .lgs-bar {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
}

.header-search.is-open .lgs-bar > .form-item:not(:first-child) {
  border-inline-start: 0;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-2);
}

.header-search.is-open .lgs-bar .form-actions {
  padding-block-start: var(--space-1);
}

.header-search.is-open .lgs-bar .form-item,
.header-search.is-open .lgs-bar .js-form-item,
.header-search.is-open .lgs-bar .form-actions,
.header-search.is-open .lgs-bar .lgs-submit,
.header-search.is-open .lgs-bar input[type="submit"].lgs-submit {
  flex: 1 1 auto;
  width: 100%;
}

.header-search.is-open .lgs-bar .selectify-selected-display,
.header-search.is-open .lgs-bar input.lgs-text,
.header-search.is-open .lgs-bar .lgs-submit {
  min-block-size: 3rem !important;
  height: 3rem;
}

.header-search.is-open .lgs-bar .lgs-submit,
.header-search.is-open .lgs-bar input[type="submit"].lgs-submit {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-search);
}

.header-search.is-open .lgs-bar .selectify-available-display {
  max-block-size: min(18rem, 50vh) !important;
}

/*
 * Mobile: list is anchored under the opened field and scrolls inside
 * a fixed max-height, so it does not stretch the overlay.
 */
@media (max-width: 63.9375rem) {
  .header-search.is-open .lgs-bar .form-item,
  .header-search.is-open .lgs-bar .js-form-item,
  .header-search.is-open .lgs-bar .wrapper-selectify,
  .header-search.is-open .lgs-bar .selectify-select,
  .header-search.is-open .lgs-bar .selectify-select-dropdowns {
    position: relative;
  }

  .header-search.is-open .lgs-bar .selectify-available-display {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    inset-block-start: calc(100% + 4px) !important;
    inset-block-end: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    z-index: 30;
    width: 100% !important;
    max-block-size: min(60vh, 22rem) !important;
    overflow: auto !important;
    margin: 0 !important;
  }
}

@media (min-width: 64rem) {
  .header-search.is-open .lgs-bar {
    flex-direction: row;
    gap: 0;
    padding: 0.2rem 0.2rem 0.2rem 0.35rem;
    border-radius: var(--radius-pill);
  }

  .header-search.is-open .lgs-bar > .form-item:not(:first-child) {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .header-search.is-open .lgs-bar .lgs-submit,
  .header-search.is-open .lgs-bar input[type="submit"].lgs-submit {
    width: auto;
  }

  .header-search.is-open .lgs-bar .selectify-selected-display,
  .header-search.is-open .lgs-bar input.lgs-text,
  .header-search.is-open .lgs-bar .lgs-submit {
    min-block-size: 2.5rem !important;
    height: 2.5rem;
  }
}