/* ═══════════════════════════════════════════
   WV FAQ Archive — listing at /faq/
   ═══════════════════════════════════════════
   Used on /faq/ (and filtered/paginated variants) via the
   auto-resolved archive-faq.php template.

   Mobile-first per MOBILE-DESIGN-RULES.md.

   CHANGELOG
   ─────────
   2026-05-26: Initial build (Phase 4 of FAQ infrastructure).
   ═══════════════════════════════════════════ */

.wv-faq-archive {
  max-width: 960px; /* NEEDS DESIGNER REVIEW — wider than single reading column */
  margin: 0 auto;
  padding: 32px 16px; /* NEEDS DESIGNER REVIEW — mobile starter */
  display: flex;
  flex-direction: column;
  gap: 24px; /* NEEDS DESIGNER REVIEW — mobile starter */
  color: var(--wv-color-text-primary);
}

.wv-faq-archive__heading {
  color: var(--wv-color-text-primary);
}

.wv-faq-archive__intro {
  color: var(--wv-color-text-secondary);
  max-width: var(--wv-content-max);
}

/* ── Toolbar (Filter trigger) ──────────
   Visual spec mirrors the canonical .wv-shop-toolbar (frozen, in
   wv-components.css line ~1408) and .wv-la-toolbar (learn archive,
   line ~132). FAQ-scoped class names so the archive can diverge
   independently if needed, but the rules are kept in sync today. */
.wv-faq-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px solid rgba(42, 43, 20, 0.15);
  border-bottom: 1px solid rgba(42, 43, 20, 0.15);
  margin-bottom: 32px; /* matches .wv-shop-toolbar */
}

.wv-faq-archive-toolbar__filter {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--wv-font-primary);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  cursor: pointer;
}

.wv-faq-archive-toolbar__filter svg {
  width: auto;
  height: 20px;
  color: var(--wv-color-text-primary);
}

.wv-faq-archive-toolbar__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
}

/* Active filter pills use the canonical .wv-shop-pills / __pill / __clear
   classes from the frozen wv-components.css (visual + behavior matches
   Shop All + Learn archives byte-for-byte). No FAQ-scoped pill CSS lives
   here — when the user lands on /faq/?cluster[]=brand, the frozen pill
   styles apply. */

/* ── Item list ──────────────────────── */
.wv-faq-archive__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wv-faq-archive__item {
  padding: 16px 0; /* NEEDS DESIGNER REVIEW — item vertical padding */
  border-bottom: 1px solid var(--wv-color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wv-faq-archive__item:last-child {
  border-bottom: 0;
}

.wv-faq-archive__question {
  color: var(--wv-color-text-primary);
  text-decoration: none;
}

.wv-faq-archive__question:hover {
  color: var(--wv-color-accent);
}

.wv-faq-archive__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* NEEDS DESIGNER REVIEW — item chip gap */
}

.wv-faq-archive__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  color: var(--wv-color-text-secondary);
}

/* ── Empty state ────────────────────── */
.wv-faq-archive__empty {
  padding: 24px;
  text-align: center;
  color: var(--wv-color-text-secondary);
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-md);
}

/* ── Pagination ─────────────────────── */
.wv-faq-archive__pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.wv-faq-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-sm);
  color: var(--wv-color-text-primary);
  text-decoration: none;
  margin: 0 2px;
}

.wv-faq-archive__pagination .page-numbers.current {
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-color: var(--wv-color-accent);
}

.wv-faq-archive__pagination .page-numbers:hover:not(.current) {
  border-color: var(--wv-color-accent);
  color: var(--wv-color-accent);
}

/* ── Search bar (client-side instant filter) ───── */
.wv-faq-search {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  background: var(--wv-color-card-bg);
  margin-bottom: 8px;
  padding: 0 12px;
  min-height: 44px;
}

/* FAQ-scoped override — tightens vertical breathing room around the
   filter bar on the FAQ archive only. Shop & Learn keep the shared
   32px from wv-filter-sort-toolbar.css. */
.wv-faq-archive .wv-filter-sort-toolbar {
  margin-bottom: 16px;
}

/* The [hidden] attr alone has specificity (0,1,0) which ties with
   .wv-faq-archive__item — author CSS then wins, so display:flex
   above defeats the UA stylesheet's display:none for [hidden].
   These compound-selector rules raise specificity to (0,2,0) so the
   hide takes effect. Used by wv-faq-search.js to filter items as
   the user types. */
.wv-faq-archive__item[hidden],
.wv-faq-archive__pagination[hidden] {
  display: none;
}

.wv-faq-search:focus-within {
  border-color: var(--wv-color-text-primary);
}

.wv-faq-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--wv-color-text-secondary);
  flex-shrink: 0;
}

.wv-faq-search__icon svg {
  width: 100%;
  height: 100%;
}

.wv-faq-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font-size: 16px; /* iOS zoom prevention — overrides wv-body 14px */
  color: var(--wv-color-text-primary);
  outline: none;
}

.wv-faq-search__input::placeholder {
  color: var(--wv-color-text-secondary);
}

/* Hide the native clear (×) UAs render for type="search" — we draw our own */
.wv-faq-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.wv-faq-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -12px; /* extend hit area to the bar edge */
  background: none;
  border: 0;
  color: var(--wv-color-text-secondary);
  cursor: pointer;
}

.wv-faq-search__clear svg {
  width: 12px;
  height: 12px;
}

.wv-faq-search__clear:hover {
  color: var(--wv-color-text-primary);
}

.wv-faq-search__empty {
  padding: 24px;
  text-align: center;
  color: var(--wv-color-text-secondary);
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-faq-archive {
    padding: 48px 24px; /* NEEDS DESIGNER REVIEW — tablet */
    gap: 32px; /* NEEDS DESIGNER REVIEW — tablet */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-faq-archive {
    padding: 64px 24px; /* NEEDS DESIGNER REVIEW — desktop */
    gap: 40px; /* NEEDS DESIGNER REVIEW — desktop */
  }
}