/* Search suggestions under the header, mobile menu and results search
   boxes. A new functional component, so it only uses the --sp-* theme tokens
   (light and dark) and the site's existing spacing. */
.ss-suggest-host { position: relative; }
.ss-suggestions {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  width: 100%;
  max-width: calc(100vw - 30px);
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 7.5px;
  list-style: none;
  text-align: left;
  background: var(--sp-bg);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  box-shadow: 0 4px 15px var(--sp-shadow-color);
}
.ss-suggestions[hidden] { display: none !important; }
.ss-suggestions li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 10px;
  float: none;
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1.5;
  color: var(--sp-text);
}
.ss-suggestions li:hover, .ss-suggestions li[aria-selected=true] {
  background: var(--sp-bg-alt);
  outline: 2px solid var(--sp-focus);
  outline-offset: -2px;
}
.ss-suggestions small { max-width: 110px; text-align: right; color: var(--sp-text-muted); }
.ss-suggestions li > span { overflow-wrap: anywhere; }
/* The desktop header field expands on focus; align the list to that field. */
.top-nav--right .ss-suggestions { width: 270px; }
@media (max-width: 1099px) {
  .top-nav--right .ss-suggestions { width: 230px; min-width: 230px; }
}
@media (max-width: 767px) {
  .ss-suggestions { min-width: 0; }
}