/* The shared search bar.

   Lifted out of css/home.css alongside js/search-bar.js. The bar now fronts
   /edmonton/zone-map/ as well as the homepage, and zone pages load site.css
   only — so left in home.css the markup rendered there completely unstyled:
   raw 20px SVGs at their intrinsic size, a bare input, and the autocomplete
   as a plain bulleted list.

   Loaded by index.html and by feed/build_zone_pages.py. */



/* ---- 3. pill search bar, centred on the hero's bottom edge -- */
.bx-searchbar {
  position: relative; z-index: 3;
  width: min(1080px, calc(100% - 2 * var(--bx-gutter)));
  margin: -38px auto 0;
  display: grid;
  /* Six criteria in a bar fixed at 1080px, so every column is proportional
     and the ratios decide who gets the slack.
       - Order must match the DOM: Price, Where, Type, Size, Beds, Must have.
         The comments here used to have Must have and Beds the wrong way
         round, which is how "Must have" ended up sized `auto` and grew to
         230px off its longest option, "Finished basement".
       - `auto` on the short selects is what made shrinking Where and Must
         have pointless: the freed space pooled straight back into the only
         fr columns, which were those two. */
  grid-template-columns:
    minmax(0, 1.8fr)   /* Price — two inputs and a dash share this cell */
    minmax(0, 1fr)     /* Where — free text, but "Rutherford (Edmonton)"
                          ellipsises rather than being given the whole bar */
    minmax(0, 1fr)     /* Type — "Any type" */
    minmax(0, 1.1fr)   /* Size — "1,200–1,800" is the longest option */
    minmax(0, 0.95fr)  /* Beds — "Any beds" */
    minmax(0, 1fr)     /* Must have — the options are readable when the select
                          is open, which is the only time they need to be */
    auto;              /* go button */
  align-items: stretch;
  background: #fff; border-radius: 999px;
  box-shadow: 0 18px 50px -18px rgba(20, 24, 16, 0.4), 0 0 0 1px rgba(51, 51, 51, 0.06);
}

.bx-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 8px 13px 18px; min-width: 0; cursor: text;
  border-right: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: 999px 0 0 999px; transition: background 0.15s ease;
}

.bx-cell + .bx-cell { border-radius: 0; }


/* Neighbourhood suggestions. A real dropdown, because the <datalist> this
   replaced was rendered by iOS Safari as options in the keyboard's QuickType
   strip — cramped, easy to miss, and not reliably tappable. */
.bx-cell { position: relative; }

.bx-ac {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 260px; max-width: 92vw; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--grid, #e6e4df); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
}

.bx-ac[hidden] { display: none; }

.bx-ac li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  font-size: 15px; color: var(--ink, #1c1c1c);
}

.bx-ac li em { font-style: normal; font-size: 12.5px; color: var(--ink-3, #737373); }

.bx-ac li:hover, .bx-ac li.is-on { background: var(--orange-soft, #fdedee); color: var(--orange-deep, #ec0712); }
@media (max-width: 760px) {

  /* Full width of the stacked field, and tall enough rows for a thumb. */
  .bx-ac { left: 0; right: 0; min-width: 0; max-width: none; }

  .bx-ac li { padding: 13px 14px; }

  /* Stacked, the price cell is the full width of the bar, so a fixed 88px
     each left a gap between Min and Max. Let them share the row. */
  .bx-range input { flex: 1 1 0; width: auto; }
}

.bx-cell:hover, .bx-cell:focus-within { background: #f2efe9; }

.bx-cell-ico { color: #4e4f4f; flex: 0 0 auto; }

.bx-cell-ico svg { width: 24px; height: 24px; display: block; }

.bx-cell-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* never let a two-word label wrap and grow the bar's height */
.bx-cell-label { font-size: 13.5px; font-weight: 600; color: #1c1c1c; white-space: nowrap; }

.bx-cell input, .bx-cell select {
  width: 100%; font-family: inherit; font-size: 16px; color: #1c1c1c;
  background: transparent; border: 0; padding: 1px 0 0; margin: 0;
  appearance: none; -webkit-appearance: none; outline: none;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

.bx-cell input::placeholder { color: #737373; }

/* Min and max share one cell. Each input takes half the room and may shrink
   to nothing (min-width: 0) so the dash never gets pushed out of the cell. */
.bx-range { display: flex; align-items: baseline; gap: 5px; min-width: 0; }

/* Sized to the content, not to half the cell each. Stretching them apart put
   a lot of white space between "Min" and "Max" and stopped the two reading
   as one range. */
/* 88px, not 78: "$1,250,000" needs 81px and was being clipped. */
.bx-range input { min-width: 0; width: 88px; flex: 0 1 auto; }

.bx-range-sep { flex: 0 0 auto; color: #737373; font-size: 15px; line-height: 1; }

/* The pair is not a <label>, so it needs the same click affordance. */
.bx-cell--price { cursor: text; }

.bx-cell select { cursor: pointer; padding-right: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234E4F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 10px;
}

.bx-go {
  align-self: center; margin: 6px 8px 6px 6px;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--orange); color: #fff; display: grid; place-items: center;
  transition: background 0.18s ease, transform 0.12s ease;
}

.bx-go svg { width: 24px; height: 24px; }

.bx-go:hover { background: #b93c10; transform: scale(1.04); }
@media (max-width: 900px) {

  .bx-searchbar { grid-template-columns: 1fr 1fr; border-radius: 22px; margin-top: -30px; }

  /* six cells stack as three rows of two; only the last of each pair loses its
     right border, and only the final row loses its bottom border */
  .bx-cell:nth-child(-n+4) { border-bottom: 1px solid rgba(51, 51, 51, 0.1); }

  .bx-cell { border-radius: 0; padding: 12px 8px 12px 16px; }

  .bx-cell:nth-child(2n) { border-right: 0; }

  .bx-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(51, 51, 51, 0.1); }

  .bx-go { grid-column: 1 / -1; justify-self: end; margin: 8px 12px 10px; }
}
@media (max-width: 560px) {

  .bx-searchbar { grid-template-columns: 1fr; }

  .bx-cell { border-right: 0; border-bottom: 1px solid rgba(51, 51, 51, 0.1); }

  .bx-cell:nth-child(4) { border-bottom: 0; }
}