/* Search suggestions: the list under a field marked data-suggest (accessible-autocomplete 3.0.2, wired by
   /suggest/suggest.js). Port of ndis public/business-suggest/business-suggest.css in the site's navy/sky
   palette. 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.
   Every rule but the first is scoped under .autocomplete__wrapper (a box-less element), one class more than a
   page's own reset such as `.hp :where(ul, ol)`, which loads after this file. */

/* 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__wrapper .autocomplete__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px + var(--bs-drop, 0px));
  width: max(100%, min(360px, 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;
  overscroll-behavior: contain;
  list-style: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  color: #101828;
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 14px 34px rgba(10, 36, 99, .2);
}

.autocomplete__wrapper .autocomplete__menu--hidden { display: none; }

.autocomplete__wrapper .autocomplete__menu--visible { display: block; }

/* A row: the kind's icon, then the name over what it is and where. */
.autocomplete__wrapper .autocomplete__option {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 7px 10px;
  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: #101828;
  background: #fff;
  border: 0;
  border-radius: 8px;
  outline: 0;
}

/* The row itself is always what a pointer or a finger lands on. The library rewrites every row's innerHTML on
   each re-render (it re-renders on mouseenter, which a tap fires just before mousedown), so a span under the
   finger would be detached by the time mousedown fires: the input then blurs and the list closes instead of
   choosing the row. With nothing inside a row hit-testable, the <li> (never replaced) receives the events. */
.autocomplete__wrapper .autocomplete__option * { pointer-events: none; }

/* (.autocomplete__menu svg: a page's own `.its-field svg` rule for the magnifier would otherwise move these.) */
.autocomplete__wrapper .autocomplete__menu svg.autocomplete__icon {
  position: static;
  top: auto;
  left: auto;
  flex: none;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 8px;
  background: #eaf1fe;
  fill: none;
  stroke: #1652d9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.autocomplete__wrapper .autocomplete__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* A name takes two lines at most. The whole name is still what the field shows when the row is chosen. */
.autocomplete__wrapper .autocomplete__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.autocomplete__wrapper .autocomplete__name b { font-weight: 700; color: #0a2463; }

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

/* Read out between the name and the second line, never shown. */
.autocomplete__wrapper .autocomplete__vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

  .autocomplete__wrapper .autocomplete__menu svg.autocomplete__icon { width: 28px; height: 28px; padding: 5px; }

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

/* The row under the pointer: pale blue only. */
.autocomplete__wrapper .autocomplete__option:hover {
  color: #101828;
  background: #f3f7fe;
}

/* The row Enter would choose: pale blue 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__wrapper .autocomplete__option.autocomplete__option--focused,
.autocomplete__wrapper .autocomplete__option:focus {
  color: #101828;
  background: #eaf1fe;
  outline: 2px solid #1652d9;
  outline-offset: -2px;
}

.autocomplete__wrapper .autocomplete__option--focused svg.autocomplete__icon,
.autocomplete__wrapper .autocomplete__option:focus svg.autocomplete__icon { background: #fff; }

/* The line shown when nothing matches. It is not a choice. */
.autocomplete__wrapper .autocomplete__option--no-results,
.autocomplete__wrapper .autocomplete__option--no-results:hover {
  min-height: 44px;
  font-weight: 400;
  color: #4a5568;
  background: #fff;
  cursor: default;
}

/* Empty (text too short, an answer on its way, or a failed request): no line, no panel. */
.autocomplete__wrapper .autocomplete__option--no-results:empty { display: none; }

.autocomplete__wrapper .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 suggestion: no panel. */
.autocomplete__wrapper .autocomplete__menu:has(> .autocomplete__option > .autocomplete__stale) { display: none; }

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

  .autocomplete__wrapper .autocomplete__menu svg.autocomplete__icon { stroke: CanvasText; background: Canvas; }

  .autocomplete__wrapper .autocomplete__option:not(.autocomplete__option--no-results):hover,
  .autocomplete__wrapper .autocomplete__option.autocomplete__option--focused,
  .autocomplete__wrapper .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__wrapper .autocomplete__option:hover .autocomplete__where,
  .autocomplete__wrapper .autocomplete__option--focused .autocomplete__where,
  .autocomplete__wrapper .autocomplete__option:focus .autocomplete__where,
  .autocomplete__wrapper .autocomplete__option:hover .autocomplete__name b,
  .autocomplete__wrapper .autocomplete__option--focused .autocomplete__name b,
  .autocomplete__wrapper .autocomplete__option:focus .autocomplete__name b { color: inherit; }
}