/* ==========================================================================
   WV Header Search — drop-down search bar (Searchanise host)
   --------------------------------------------------------------------------
   Revealed by the header search icon (.wv-header-icon--search), which acts
   as the toggle (open / close). Hosts the <input name="s"> / #search that
   Searchanise (Smart WooCommerce Search) binds to via its configured
   selector (#search, form input[name="s"]); Searchanise renders its own
   instant-results dropdown beneath the input — this file only styles the
   bar itself.

   Reveal pattern: A11Y-PATTERNS.md § DISCLOSURE NAV / MEGA-MENU.
   Placement mirrors the mega menu: fixed, directly under the header.
   Mobile-first; min-width queries only.

   Slide/fade transition is intentionally unguarded here — the sitewide
   prefers-reduced-motion override (wv-reduced-motion.css) neutralizes it.
   ========================================================================== */

.wv-header-search {
  position: fixed;
  top: var(--wv-header-height);
  left: 0;
  right: 0;
  z-index: 998; /* just under the header chrome; above page content */
  background: var(--wv-color-background);
  border-bottom: 1px solid var(--wv-color-surface-2);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.wv-header-search--open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* WP admin bar pushes the fixed header down; push the search bar to match,
   or it clips behind the header. Base = 32px (admin bar height ≥783px). */
body.admin-bar .wv-header-search {
  top: calc(var(--wv-header-height) + 32px);
}

/* max-width: 782 is the WP admin-bar breakpoint (the bar grows to 46px on
   smaller viewports) — NOT a layout breakpoint. Mirrors the documented
   exempt pattern in wv-components.css (.wv-header--hidden). */
@media (max-width: 782px) {
  body.admin-bar .wv-header-search {
    top: calc(var(--wv-header-height) + 46px);
  }
}

.wv-header-search__inner {
  max-width: var(--wv-page-content-max);
  margin: 0 auto;
  padding: 12px 24px;
}

.wv-header-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--wv-color-card-bg); /* white — closest token */
  border: 1px solid var(--wv-color-surface-2);
  border-radius: var(--wv-radius-sm);
}

.wv-header-search__form:focus-within {
  border-color: var(--wv-color-accent);
}

.wv-header-search__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--wv-color-text-primary);
}

.wv-header-search__icon svg {
  width: 20px;
  height: 20px;
}

.wv-header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--wv-color-text-primary);
  font-family: var(--wv-font-primary);
  font-size: 16px; /* iOS no-zoom minimum */
  outline: none;
}

.wv-header-search__input:focus-visible {
  outline: none; /* focus is shown on the form via :focus-within */
}

@media (min-width: 768px) {
  .wv-header-search__inner {
    padding: 16px 40px;
  }
}

@media (min-width: 1280px) {
  .wv-header-search__inner {
    padding: 16px 80px;
  }
}