/* ==========================================================================
   WV FAQ Section — Static Draft
   --------------------------------------------------------------------------
   Two variants via modifier class:
     .wv-faq-section--double  → 2-col FAQ grid + heading + optional subheading
     .wv-faq-section--single  → narrow centered column + optional eyebrow pill
                                + larger heading

   Content is hardcoded via $args for this draft pass. FAQ CPT integration
   (wv_get_product_faqs() resolver, schema.org FAQPage JSON-LD) is a
   follow-up pass.
   ========================================================================== */

.wv-faq-section {
  /* Transparent outer — consumer template owns the backdrop. */
  background: transparent;
  /* NEEDS DESIGNER REVIEW: section vertical padding */
  padding: 48px 0;
}

.wv-faq-section__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header block ────────────────────────────────────────────────── */

.wv-faq-section__eyebrow {
  /* NEEDS DESIGNER REVIEW: eyebrow pill fill — --wv-color-surface is the
     project's pale sage, closest to the mockup pill. Could need a
     different token if designer wants a distinct eyebrow tone. */
  display: inline-block;
  background: var(--wv-color-surface);
  color: var(--wv-color-text-primary);
  border-radius: var(--wv-radius-pill);
  /* NEEDS DESIGNER REVIEW: eyebrow padding */
  padding: 8px 24px;
}

.wv-faq-section__heading {
  /* NEEDS DESIGNER REVIEW: heading class. Mockup's single-variant heading
     looks ~50–55px, larger than .wv-h2's 40px. Designer to confirm
     whether .wv-h2 is correct here or if a larger class is needed. */
  color: var(--wv-color-text-primary);
  margin: 0;
}

.wv-faq-section__subheading {
  /* NEEDS DESIGNER REVIEW: subheading may be .wv-body-lg (18px) in the
     mockup rather than .wv-body (14px). */
  color: var(--wv-color-text-primary);
}

/* ── FAQ list + items ────────────────────────────────────────────── */

.wv-faq-section__list {
  /* Base single-column flow. Double variant overrides to grid below. */
  display: flex;
  flex-direction: column;
}

.wv-faq-section__item {
  /* NEEDS DESIGNER REVIEW: divider color — --wv-color-border (pale sage)
     is the project default; hairline weight assumed. */
  border-top: 1px solid var(--wv-color-border);
}

.wv-faq-section__item:last-child {
  border-bottom: 1px solid var(--wv-color-border);
}

.wv-faq-section__toggle {
  /* Full-row clickable button styled to blend with the row.
     Mobile-first: tight padding + smaller icon-text gap.
     Tablet+ block below restores the comfortable desktop spacing. */
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 12px 24px;
}

.wv-faq-section__icon {
  /* Mobile-first: 14px icon. Tablet+ steps up to 18px. */
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Two stacked img tags swap visibility based on aria-expanded —
   plus shows when collapsed, minus when expanded. */
.wv-faq-section__icon--minus {
  display: none;
}

.wv-faq-section__toggle[aria-expanded="true"] .wv-faq-section__icon--plus {
  display: none;
}

.wv-faq-section__toggle[aria-expanded="true"] .wv-faq-section__icon--minus {
  display: inline-block;
}

.wv-faq-section__question {
  /* NEEDS DESIGNER REVIEW: question typography. Mockup reads mono;
     .wv-label-btn is primary-sans uppercase — closest approximation
     in current typography system. Could move to .wv-label-small (Mono
     12) scaled up locally, or designer may spec a new mono class. */
  color: var(--wv-color-text-primary);
}

.wv-faq-section__body {
  /* Mobile-first: tight inset (matches mobile toggle's 24px left padding
     + 14px icon + 16px gap ≈ 54 → 30 visual). Tablet+ steps up below. */
  padding: 0 0 12px 30px;
}

.wv-faq-section__answer {
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── Double variant ──────────────────────────────────────────────── */

.wv-faq-section--double .wv-faq-section__heading {
  /* Centered per mockup. */
  text-align: center;
  /* Gap to the FAQ list below. Previously the subheading's `margin:
     16 auto 48` was the only thing producing this gap, but FAQ v1
     consumers pass an empty subheading so it doesn't render. Pinning
     the gap to the heading directly. Zero it out when a subheading IS
     present so the existing 16+48 cadence below doesn't double up. */
  margin-bottom: 48px;
}
.wv-faq-section--double .wv-faq-section__heading:has(+ .wv-faq-section__subheading) {
  margin-bottom: 0;
}

.wv-faq-section--double .wv-faq-section__subheading {
  text-align: center;
  /* NEEDS DESIGNER REVIEW: subheading max-width and spacing */
  max-width: 600px;
  margin: 16px auto 48px;
}

.wv-faq-section--double .wv-faq-section__list {
  /* Mobile-first: single-column stacked. Tablet+ (min-width: 768)
     restores 2-column grid; each column is a .wv-faq-section__column
     wrapper rendered by PHP via array_chunk split. Column internals
     flow top-to-bottom naturally.
     NEEDS DESIGNER REVIEW: horizontal gap between columns */
  display: grid;
  grid-template-columns: 1fr;
}

/* ── Mobile overflow toggle ────────────────────────────────────────
   At mobile the second column (column 2 of the array_chunk split) is
   hidden by default; tapping the overflow-toggle button below the
   list adds .wv-faq-section--expanded which reveals it. Tablet+
   ignores all of this — both columns visible unconditionally. */
.wv-faq-section--double .wv-faq-section__column:nth-child(2) {
  display: none;
}

.wv-faq-section--double.wv-faq-section--expanded .wv-faq-section__column:nth-child(2) {
  display: revert;
}

.wv-faq-section__overflow-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  color: var(--wv-color-text-primary);
  cursor: pointer;
  transition: border-color var(--wv-transition-fast), background var(--wv-transition-fast);
}

.wv-faq-section__overflow-toggle:hover {
  border-color: var(--wv-color-text-primary);
}

/* ── Single variant ──────────────────────────────────────────────── */

.wv-faq-section--single .wv-faq-section__inner {
  /* NEEDS DESIGNER REVIEW: narrow content column width */
  max-width: var(--wv-content-max);
  text-align: center;
}

.wv-faq-section--single .wv-faq-section__eyebrow {
  /* NEEDS DESIGNER REVIEW: space below pill before heading */
  margin-bottom: 32px;
}

.wv-faq-section--single .wv-faq-section__heading {
  /* NEEDS DESIGNER REVIEW: space below heading before FAQ list */
  margin-bottom: 64px;
}

.wv-faq-section--single .wv-faq-section__list {
  /* Items themselves are left-aligned — only the header block above is
     centered. */
  text-align: left;
}

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

@media (min-width: 768px) {
  /* Restore comfortable desktop spacing on the section + items. */
  .wv-faq-section {
    padding: 80px 0;
  }

  .wv-faq-section__inner {
    padding: 0 80px;
  }

  .wv-faq-section__toggle {
    /* 36px (1.5× the icon↔text gap) of left padding so the "+" icon
       doesn't touch the column edge. Designer call 2026-06-01. */
    gap: 24px;
    padding: 20px 0 20px 36px;
  }

  .wv-faq-section__icon {
    width: 18px;
    height: 18px;
  }

  .wv-faq-section__body {
    padding: 0 0 20px 42px;
  }

  /* Both columns visible unconditionally — the mobile overflow
     mechanism doesn't apply at tablet+. */
  .wv-faq-section--double .wv-faq-section__column:nth-child(2) {
    display: revert;
  }

  /* Restore 2-column grid; column wrappers stack at mobile since
     they're grid children at 1fr (base) width. */
  .wv-faq-section--double .wv-faq-section__list {
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }

  /* Hide the mobile overflow toggle — not needed at tablet+. */
  .wv-faq-section__overflow-toggle {
    display: none;
  }
}