/* ============================================================
 * WV — Accordion (wv-accordion.css)
 * ============================================================
 * Shared accordion component. Consumed via parts/accordion.php.
 *
 * Markup contract (rendered by parts/accordion.php):
 *   <div class="wv-accordion" data-mode="single|multi">
 *     <div class="wv-accordion__item">
 *       <button class="wv-accordion__toggle"
 *               aria-expanded="false" aria-controls="ID" type="button">
 *         <span class="wv-body-bold wv-accordion__title">…</span>
 *         <span class="wv-accordion__icon" aria-hidden="true">+</span>
 *       </button>
 *       <div class="wv-accordion__body" id="ID" role="region" hidden>
 *         <div class="wv-accordion__body-inner wv-prose wv-body">…</div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Visual state lives entirely on the toggle's aria-expanded attribute,
 * which CSS selectors key off for the icon rotation + accent recolor.
 * Body visibility is the `hidden` attribute (consistent with FAQ
 * Section). Behavior (single-open vs multi-open, focus) lives in
 * wv-accordion.js.
 *
 * Color discipline:
 *   --wv-pdp-accent is inherited from the consuming page wrapper
 *   (e.g. .wv-first5-lp sets it inline). Falls back to olive accent.
 * ============================================================ */

.wv-accordion {
  display: flex;
  flex-direction: column;
}

.wv-accordion__item {
  border-bottom: 1px solid var(--wv-color-border);
}

.wv-accordion__toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: color var(--wv-transition-fast);
}
.wv-accordion__toggle:hover .wv-accordion__title { color: var(--wv-pdp-accent, var(--wv-color-accent)); }

.wv-accordion__title {
  /* Layout slot — typography class (.wv-body-bold) applied in markup. */
  flex: 1 1 auto;
  min-width: 0;
}

.wv-accordion__icon {
  /* Per designer 2026-06-01: swap to icon-green-plus / icon-green-minus
     PNGs instead of the text "+" rotated 45° on expand. Background-image
     swap based on aria-expanded. The "+" character in markup is hidden
     via color: transparent so the icon's accessible-name semantics still
     read for SR users (aria-hidden="true" on the span confirms this). */
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: transparent;
  background-image: url('../images/icons/icon-green-plus.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity var(--wv-transition-base);
}

.wv-accordion__toggle[aria-expanded="true"] .wv-accordion__icon {
  background-image: url('../images/icons/icon-green-minus.png');
}

.wv-accordion__body {
  /* `hidden` attribute on the element drives display. No animation —
     consistent with wv-faq-section.js. */
}

.wv-accordion__body-inner {
  padding: 0 0 20px;
}
.wv-accordion__body-inner .wv-prose a { font-size: 12px; }