/*
 * Header search
 *
 * A search icon in the header opens a full-width overlay that drops from the
 * top of the page and holds the native WordPress search form (searchform.php).
 *
 * Developed by: Rhyll Neri
 */

/* ---- Trigger button (sits in the header CTA group) ---- */
.header__search-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-150) var(--ease-out), color var(--dur-150) var(--ease-out);
}

.header__search-toggle:hover { background: var(--color-mist); }

.header__search-toggle .icon { width: 20px; height: 20px; }

/* Match the toggle colour to the header state (same rules as .header__toggle). */
.is-front .header:not(.header--scrolled) .header__search-toggle { color: var(--color-white); }

/* ---- Overlay ---- */
.site-search {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}

.site-search.is-open { display: block; }

.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,27,34,0.55);
  backdrop-filter: blur(4px);
  animation: ardent-modal-fade var(--dur-200) var(--ease-out);
}

.site-search__panel {
  position: relative;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--space-6), 6vw, var(--space-9)) 0;
  animation: ardent-search-drop var(--dur-300) var(--ease-out);
}

.site-search__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-search__label {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}

/* Let the search form fill the available width inside the overlay. */
.site-search .search-form {
  flex: 1 1 auto;
  margin: 0;
}

.site-search .search-field { width: 100%; }

.site-search__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-mist);
  color: var(--color-ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-200) var(--ease-out);
}

.site-search__close:hover { background: var(--color-border); }

.site-search__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-12);
  color: var(--color-slate-500, #6b7280);
}

.site-search__hint kbd {
  font-family: inherit;
  padding: 0.1em 0.45em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-mist);
}

@keyframes ardent-search-drop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .site-search__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-search__backdrop,
  .site-search__panel { animation: none; }
}