/*
 * Single Product FAQ accordion (Suntech Engine 0.19.429).
 * Purpose: turn the description's "Frequently Asked Questions" section
 * (H2 + H3 questions + answer paragraphs, written in the product
 * description) into a flat, single-open dropdown accordion on single
 * product pages. No content is changed or hidden by CSS alone: without
 * JavaScript the original H3s and paragraphs stay readable.
 * 0.19.428 refinement (user-approved mockup): question rows are compact
 * light-grey bars — 16px scoped question size, ~6px row gap, no forced
 * minimum button height — so rows are only as tall as their content
 * needs. 0.19.429 refinement (user order): vertical padding cut to
 * 5px 14px (was 10px 14px) with 1.35 line-height for still shorter rows.
 * 0.19.430 fix (user order): live rows still rendered ~60-85px
 * despite the 5px/1.35 math (~34px on paper), so this is a scoped
 * forced box reset — !important ONLY on the button/h3/item box
 * properties — because an unknown rule was overriding the FAQ button
 * box on live. Local greps found no Engine or theme rule that
 * explains it (the one same-shape theme rule, faq-page.css
 * .stm-faq-item h3>button min-height 70px, loads only in the
 * FAQ-page context, not on product pages). Target: roughly half
 * the visible live height (~34px rows). Also 6px radius (approved
 * mockup value) on the item bar and the button so rows read as
 * distinct buttons; still flat (no shadow/blur).
 * 0.19.434 (user order): long questions clamp to max 3 lines — the
 * label span (see .stm-faq-q-text) wraps onto a 2nd and 3rd line when
 * the question is long, with an ellipsis past 3 lines, and the +/−
 * icon always stays visible. Short questions stay one line.
 * 0.19.436 (user order, supersedes the clamp): the full question must
 * always show — no line may stay hidden inside the button — so the
 * 3-line clamp is removed; the label wraps to as many lines as needed
 * and the button grows with it.
 * 0.19.437 ROOT CAUSE FIX (user screenshot proof): the wrap still did
 * not happen on phones because the theme's global button rule
 * (site-shell.min.css :where(... button ...) { white-space: nowrap })
 * leaks nowrap into every <button>, and this stylesheet never overrode
 * white-space — the label span inherited nowrap, so long questions
 * could not wrap and pushed the + icon off the row. Desktop hid it
 * because the question fit one line there. The button now forces
 * white-space: normal (!important, theme-leak defense, same category
 * as the 0.19.430 box reset) and the span repeats it, so a long
 * question wraps to a 2nd/3rd row inside the button and the button
 * grows with it.
 * The grey comes from the global
 * --stm-commerce-surface-soft variable (theme surface-soft), never a
 * hardcoded hex.
 * Related files:
 * - modules/storefront/assets/js/single-product-faq.js (the transform +
 *   single-open behaviour; this stylesheet only styles its output)
 * - modules/storefront/features/woocommerce/single-product.php (assets()
 *   enqueues this file on is_product() only, after stm-single-product-style)
 * - modules/storefront/assets/css/commerce-primitives.min.css (defines the
 *   --stm-commerce-* variables reused below; no hardcoded colors here)
 * Rules honoured: flat design only (no box-shadow, no backdrop-filter
 * blur, no drop shadows); colors only from the Engine's existing CSS
 * variables / global wiring; font inherits the surrounding text.
 */

/* Question rows are light-grey bars with a small gap between them
   (mockup look). The old between-row divider rule is gone: each bar
   carries its own 1px global border. */
.stm-single-tabs .stm-faq-item {
  margin: 0 0 6px;
  padding: 0 !important;
  background: var(--stm-commerce-surface-soft, var(--stm-commerce-surface));
  border: 1px solid var(--stm-commerce-border);
  border-radius: 6px;
}

/* Scoped 16px question size (mockup value). The uniform description
   heading rule uses an ID selector, so this rule repeats the container
   selectors to outrank it — but only inside FAQ items, nowhere else. */
#tab-description .stm-faq-item > h3,
.woocommerce-Tabs-panel--description .stm-faq-item > h3,
.stm-single-tabs .stm-faq-item > h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px;
}

/* Full-width clickable question row: bold question left, +/− icon right.
   0.19.429 refinement (user order): rows shorter still — 5px vertical
   padding (half the old 10px), 1.35 line-height, and the selector repeats
   the three description containers so no theme button padding can leak
   in and re-tall the rows. Font stays 16px; grey, icon, single-open
   behaviour unchanged. Note: at 16px, 5px padding + 1.35 line-height
   gives ~34px rows, about a 30% cut from the old ~48px — a full 50%
   cut is not reachable by padding/line-height alone without shrinking
   the font or using a cramped sub-1.2 line-height.
   0.19.430: box declarations below are !important, so the ~34px math
   is forced — roughly half the ~60-85px visible live height. */
#tab-description .stm-faq-item .stm-faq-q,
.woocommerce-Tabs-panel--description .stm-faq-item .stm-faq-q,
.stm-single-tabs .stm-faq-item .stm-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 5px 14px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--stm-commerce-heading);
  font: inherit;
  font-weight: inherit;
  font-size: 16px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-align: left;
  cursor: pointer;
}

/* CSS-generated icon: + when closed, − when open. */
.stm-single-tabs .stm-faq-q::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--stm-commerce-primary);
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
}

/* Question label: shrinkable flex item that wraps to as many lines as
   the question needs (2nd, 3rd, and beyond) so no text ever stays
   hidden inside the button; the button grows with its label.
   0.19.436 (user order): the 0.19.434 3-line clamp is removed — the
   full question must always show. 0.19.437: white-space: normal is
   explicit here too, because the theme's global button nowrap would
   otherwise be inherited and block all wrapping. Without the span +
   min-width: 0, a long question's anonymous flex text could not
   shrink and pushed the icon off the row. */
.stm-single-tabs .stm-faq-q-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.stm-single-tabs .stm-faq-q[aria-expanded="true"]::after {
  content: "\2212";
}

/* Visible keyboard focus, in the brand color from global wiring. */
.stm-single-tabs .stm-faq-q:focus-visible {
  outline: 2px solid var(--stm-commerce-primary);
  outline-offset: 2px;
}

/* Closed answers stay hidden even though the open state uses grid layout
   (author rule beats the UA [hidden] rule and the grid display below). */
.stm-single-tabs .stm-faq-a[hidden] {
  display: none;
}

/* Open/close animation: grid 0fr -> 1fr. The inner wrapper clips the
   answer while the row collapses, so no height is guessed in JS. */
.stm-single-tabs .stm-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.stm-single-tabs .stm-faq-item.is-open .stm-faq-a {
  grid-template-rows: 1fr;
}

.stm-single-tabs .stm-faq-a-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 14px 12px;
  color: var(--stm-commerce-ink);
}

/* Answers inherit the description body text; avoid doubled bottom space. */
.stm-single-tabs .stm-faq-a-inner > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .stm-single-tabs .stm-faq-a {
    transition: none;
  }
}