/* Header search: widen on focus, suggestions underneath.
   Loaded only when an index exists (inc/search-suggest.php). */

.site-search { position: relative; }

/* The box grows when it is being used and returns when it is not. Width is
   animated, not display, so nothing on the utility bar jumps. A reader who
   asked for less motion gets the width without the animation. */
.site-search__input {
  transition: width .18s ease-out;
}
/* Only the bar in the header row has room to grow. The drawer and phone
   copies of the same form are already full width, so widening them would do
   nothing but overflow. */
@media (min-width: 900px) {
  .site-search:not(.site-search--drawer):not(.site-search--mobile) .site-search__input { width: 13rem; }
  .site-search--open:not(.site-search--drawer):not(.site-search--mobile) .site-search__input,
  .site-search:not(.site-search--drawer):not(.site-search--mobile) .site-search__input:focus { width: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-search__input { transition: none; }
}

.site-search__suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + .35rem);
  left: 0;
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border, #dfe5ef);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 32, 64, .16);
  padding: .3rem;
}

.site-search__suggest-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  min-height: 44px; /* a real touch target on a phone */
}
.site-search__suggest-item:hover,
.site-search__suggest-item:focus,
.site-search__suggest-item[aria-selected="true"] {
  background: var(--color-surface-2, #eef3fb);
  outline: none;
}
.site-search__suggest-title {
  flex: 1 1 auto;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.site-search__suggest-kind {
  flex: 0 0 auto;
  font-size: .75rem;
  color: var(--color-muted, #5b6b85);
  white-space: nowrap;
}
.site-search__suggest-empty {
  margin: 0;
  padding: .6rem;
  color: var(--color-muted, #5b6b85);
  font-size: .9rem;
}
.site-search__suggest-all {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .55rem .6rem;
  border: 0;
  border-top: 1px solid var(--color-border, #dfe5ef);
  background: none;
  color: var(--color-primary, #1f4e9c);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
  border-radius: 0 0 7px 7px;
}
.site-search__suggest-all:hover,
.site-search__suggest-all:focus { background: var(--color-surface-2, #eef3fb); }

/* On a phone the utility bar is narrow: let the list use the screen and keep
   the page from scrolling sideways. */
@media (max-width: 640px) {
  .site-search__suggest { width: calc(100vw - 1.5rem); left: 50%; transform: translateX(-50%); }
}