/* Business suggestions: the list under a text field (accessible-autocomplete 3.0.2).
   Every selector starts with .autocomplete__ and none styles the field itself:
   each page already styles its own input. The library's own stylesheet is not
   shipped; everything its elements need is here. */

/* No box for the library's wrapper or for the script's mount: the new field is
   laid out by the same parent, in the same flex, grid or absolute position, as
   the plain field it replaced. */
.autocomplete__mount,
.autocomplete__wrapper { display: contents; }

/* The list sits against the nearest positioned ancestor of the field. The script
   sets two lengths on it while it is open:
   --bs-drop  how far down to start, so a submit button right under the field
              stays clear (0 when four rows are on offer and would not fit below
              the button: the list then opens over it);
   --bs-room  the height left under it in the part of the window that can be seen.
   What does not fit scrolls inside the list. */
.autocomplete__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px + var(--bs-drop, 0px));
  width: max(100%, min(320px, 100vw - 16px));
  z-index: 70;
  box-sizing: border-box;
  max-height: min(var(--bs-room, 70vh), 560px);
  margin: 0;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  font-family: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e8dff2;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31, 41, 55, .06), 0 14px 34px rgba(92, 46, 115, .18);
}

.autocomplete__menu--hidden { display: none; }

.autocomplete__menu--visible { display: block; }

.autocomplete__option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: #1f2937;
  background: #fff;
  border: 0;
  border-radius: 8px;
  outline: 0;
}

/* A name takes two lines at most (the longest in the data is 252 characters).
   The whole name is still what goes in the field when the row is chosen. */
.autocomplete__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.autocomplete__name b { font-weight: 700; }

.autocomplete__where {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #5b6170;
}

/* On a phone the keyboard leaves little room: rows are closer together and the
   second line keeps to one line, so more businesses are in sight. Still 44px or
   more to tap. */
@media (max-width: 480px) {
  .autocomplete__option { padding-top: 6px; padding-bottom: 6px; }

  .autocomplete__where { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* The row under the pointer: pale purple only. */
.autocomplete__option:hover {
  color: #1f2937;
  background: #f5f0f9;
}

/* The row Enter would choose: pale purple and an inset ring, so it does not
   rest on colour alone. The library moves focus onto the row and drops its
   --focused class while the pointer is over the list, hence :focus. */
.autocomplete__option.autocomplete__option--focused,
.autocomplete__option:focus {
  color: #1f2937;
  background: #f5f0f9;
  outline: 2px solid #733e92;
  outline-offset: -2px;
}

/* The line shown when nothing matches. It is not a choice. */
.autocomplete__option--no-results,
.autocomplete__option--no-results:hover {
  font-weight: 400;
  color: #1f2937;
  background: #fff;
  cursor: default;
}

/* Empty (a field holding only spaces, or the data still loading): no line, no panel. */
.autocomplete__option--no-results:empty { display: none; }

.autocomplete__menu:has(> .autocomplete__option--no-results:empty) { display: none; }

/* The text that was in the field when the script took over comes back from the
   library as a one-row list on the first focus. It is not a business: no panel. */
.autocomplete__menu:has(> .autocomplete__option > .autocomplete__stale) { display: none; }

/* Forced colours (Windows high contrast). */
@media (forced-colors: active) {
  .autocomplete__menu { border-color: CanvasText; }

  .autocomplete__option:not(.autocomplete__option--no-results):hover,
  .autocomplete__option.autocomplete__option--focused,
  .autocomplete__option:focus {
    forced-color-adjust: none;
    color: HighlightText;
    color: SelectedItemText;
    background: Highlight;
    background: SelectedItem;
    outline-color: HighlightText;
    outline-color: SelectedItemText;
    outline-offset: -4px;
  }

  .autocomplete__option:hover .autocomplete__where,
  .autocomplete__option--focused .autocomplete__where,
  .autocomplete__option:focus .autocomplete__where { color: inherit; }
}