/* ── Site Search Autocomplete Dropdown ──────────────────────────────────────
   Appended inside the form (role="search") and positioned via JS
   (position:fixed + getBoundingClientRect).
   Repositioned on scroll/resize so it always tracks the sticky header input.
   top / left / width / max-height are all set by siteSearchAutocomplete.js.
   ─────────────────────────────────────────────────────────────────────────── */

.site-search-suggestions {
  position: fixed; /* JS sets top/left/width/max-height precisely */
  z-index: 9999;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #878787;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  max-height: 420px; /* fallback; JS overrides to fit viewport */
  overflow-y: auto;
  /* scroll-padding-bottom reserves space so sticky footer
     is never occluded by the scrollbar on Windows */
  scroll-padding-bottom: 44px;
  animation: search-suggestions-fade 0.12s ease;
}

@keyframes search-suggestions-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Individual items ──────────────────────────────────────────────────────── */

.site-search-suggestion-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 44px; /* WCAG 2.5.5 touch target */
  padding: 10px 14px;
  cursor: pointer;
  gap: 2px;
  border-bottom: 1px solid #e8e8e8;
  color: #1a1a1a;
  background: #fff;
}

.site-search-suggestion-item:last-child {
  border-bottom: none;
}

/* Focus/hover state — must meet 4.5:1 contrast on both text colours */
.site-search-suggestion-item:hover,
.site-search-suggestion-item[aria-selected='true'] {
  background: #005c8a; /* DQU brand blue */
  color: #fff;
  outline: none;
}

/* ── Title / subtitle ──────────────────────────────────────────────────────── */

.suggestion-title {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
  word-break: break-word;
}

.suggestion-subtitle {
  font-size: 0.8125rem; /* 13px */
  color: #595959;
  line-height: 1.3;
  word-break: break-word;
}

/* #ffffff on #005c8a = 6.5:1 — passes WCAG AA for small text (needs 4.5:1). */
.site-search-suggestion-item:hover .suggestion-subtitle,
.site-search-suggestion-item[aria-selected='true'] .suggestion-subtitle {
  color: #ffffff;
}

/* ── Fallback "View all results →" item — always visible ──────────────────── */

.site-search-suggestion-fallback {
  position: sticky;
  bottom: 0;
  border-top: 2px solid #c0c0c0;
  background: #f5f5f5;
  min-height: 36px;
  padding: 6px 14px;
}

.site-search-suggestion-fallback .suggestion-title {
  font-style: italic;
  color: #595959;
}

.site-search-suggestion-fallback:hover .suggestion-title,
.site-search-suggestion-fallback[aria-selected='true'] .suggestion-title {
  color: #fff;
}

/* ── Responsive / mobile ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .site-search-suggestion-item {
    padding: 12px 12px;
    min-height: 48px; /* larger touch target on small screens */
  }

  .suggestion-title {
    font-size: 1rem; /* slightly larger for readability on small screens */
  }
}

/* ── Respect reduced-motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site-search-suggestions {
    animation: none;
  }
}