/* ═══════════════════════════════════════════
   WV FAQ — Standalone page (single-faq.php)
   ═══════════════════════════════════════════
   Used on /faq/{slug}/ via the auto-resolved
   single-faq.php template.

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

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

.wv-faq {
  /* Single-column reading width. */
  max-width: var(--wv-content-max); /* NEEDS DESIGNER REVIEW — reading column width */
  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__question {
  /* Font from global .wv-h2 applied in template. */
  color: var(--wv-color-text-primary);
}

.wv-faq__answer {
  /* Body content; paragraphs inherit the working-layer typography. */
  display: flex;
  flex-direction: column;
  gap: 16px; /* NEEDS DESIGNER REVIEW — paragraph gap */
  color: var(--wv-color-text-primary);
}

.wv-faq__answer p {
  /* No font declarations — paragraph styling comes from working-layer
     defaults / global typography classes. */
}

/* ── Byline ─────────────────────────── */
.wv-faq__byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Font from .wv-body-sm applied inline in partial. */
}

.wv-faq__byline-image {
  width: 32px;  /* NEEDS DESIGNER REVIEW — byline headshot size */
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.wv-faq__byline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wv-faq__byline-link:hover {
  color: var(--wv-color-accent);
}

/* ── Taxonomy chips ─────────────────── */
.wv-faq__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* NEEDS DESIGNER REVIEW — gap between chip groups */
}

.wv-faq__chip-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px; /* NEEDS DESIGNER REVIEW — gap between label and chips */
}

.wv-faq__chip-label {
  /* Font from .wv-label-reg in markup. */
  color: var(--wv-color-text-secondary);
}

.wv-faq__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px; /* NEEDS DESIGNER REVIEW — chip padding */
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  color: var(--wv-color-text-primary);
  text-decoration: none;
  transition: var(--wv-transition-color);
  /* Font from .wv-body-sm in markup. */
}

.wv-faq__chip:hover {
  border-color: var(--wv-color-accent);
  color: var(--wv-color-accent);
}

/* Non-link chip (taxonomy isn't publicly queryable). */
.wv-faq__chip--static {
  cursor: default;
}

.wv-faq__chip--static:hover {
  border-color: var(--wv-color-border);
  color: var(--wv-color-text-primary);
}

/* ── Parent Pillar link (Phase 6) ─── */
.wv-faq__parent-pillar {
  padding: 16px;
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wv-faq__parent-pillar-label {
  color: var(--wv-color-text-secondary);
}

.wv-faq__parent-pillar-link {
  color: var(--wv-color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wv-faq__parent-pillar-link:hover {
  color: var(--wv-color-accent);
}

/* ── Related FAQs ───────────────────── */
.wv-faq__related {
  margin-top: 16px; /* NEEDS DESIGNER REVIEW — top margin */
  padding-top: 24px;
  border-top: 1px solid var(--wv-color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-faq__related-heading {
  /* Font from .wv-h5 applied in markup. */
  color: var(--wv-color-text-primary);
}

.wv-faq__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* NEEDS DESIGNER REVIEW — related item gap */
}

.wv-faq__related-link {
  color: var(--wv-color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wv-faq__related-link:hover {
  color: var(--wv-color-accent);
}

/* ── CTA ───────────────────────────── */
.wv-faq__cta-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-faq {
    padding: 56px 24px; /* NEEDS DESIGNER REVIEW — tablet */
    gap: 32px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-faq__cta-wrap {
    justify-content: center;
  }
}

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