/* WoWGoldFarms — FAQ / Explanation Prose Block — M51
   Canonical CSS for .faq, .faq--accordion, .faq--single.
   Token source: static/css/_tokens.css — never add :root{} blocks here.
   Brand gold: var(--wgf-gold-primary) / rgb(240,192,64) via var(--wgf-gold-primary).

   HTML contract (Python helper: wgf_ui.faq_block_html):
     <article class="faq [faq--accordion] [faq--single]" aria-label="…">
       <h2 class="faq__heading">…</h2>             <!-- optional -->
       <p  class="faq__intro">…</p>                <!-- optional: open-prose lede -->

       <!-- open prose variant -->
       <div class="faq__pair">
         <p class="faq__q">Question text</p>
         <p class="faq__a">Answer text</p>
       </div>

       <!-- accordion variant: wrap each pair in .faq__item + details/summary -->
       <div class="faq__item">
         <details class="faq__details">
           <summary class="faq__summary">
             <span>Question text</span>
             <span class="faq__chevron" aria-hidden="true"></span>
           </summary>
           <div class="faq__body">Answer text</div>
         </details>
       </div>
     </article>

   Schema.org: emit <script type="application/ld+json"> FAQPage block from the
   Python helper when ≥1 genuine Q&A pair is present (see wgf_ui.faq_jsonld). */

/* ── Block container ──────────────────────────────────────────────────────── */

.faq {
  background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}

/* ── Section heading ──────────────────────────────────────────────────────── */

.faq__heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wgf-gold-primary);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
  border-bottom: 1px solid var(--wgf-border);
  padding-bottom: var(--space-3);
}

/* ── Intro paragraph ──────────────────────────────────────────────────────── */

.faq__intro {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--wgf-text);
  margin: 0 0 var(--space-4);
  max-width: 66ch;
  line-height: 1.7;
}

/* ── Open prose Q&A pair ──────────────────────────────────────────────────── */

.faq__pair {
  border-top: 1px solid var(--wgf-border-neutral-soft);
  padding-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.faq__pair:first-of-type {
  border-top: none;
  padding-top: 0;
}

.faq__q {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--wgf-text);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}

.faq__a {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--wgf-muted);
  margin: 0;
  max-width: 66ch;
  line-height: 1.7;
}

.faq__a a {
  color: var(--wgf-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq__a a:hover { color: var(--wgf-gold-bright); }

.faq__a a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* ── Accordion variant (.faq--accordion) ──────────────────────────────────── */

.faq--accordion .faq__item {
  border-top: 1px solid var(--wgf-border-neutral-soft);
}

.faq--accordion .faq__item:first-of-type {
  border-top: none;
}

.faq__details[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  /* hide browser default triangle */
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--wgf-text);
  line-height: 1.4;
  user-select: none;
}

/* hide Webkit default disclosure triangle */
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { display: none; }

.faq__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-control);
}

@media (prefers-reduced-motion: no-preference) {
  .faq__summary {
    transition: color var(--motion-fast) var(--ease-standard);
  }
  .faq__summary:hover { color: var(--wgf-gold-bright); }
}

/* Chevron — inline SVG data URI (no external asset dep) */
.faq__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--wgf-gold-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b9a66b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .faq__chevron {
    transition: transform var(--motion-base) var(--ease-standard);
  }
}

.faq__body {
  padding-bottom: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--wgf-muted);
  max-width: 66ch;
  line-height: 1.7;
}

.faq__body a {
  color: var(--wgf-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq__body a:hover { color: var(--wgf-gold-bright); }

.faq__body a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* ── Single-question variant (.faq--single) ───────────────────────────────── */

.faq--single .faq__heading {
  font-size: var(--text-md);
  color: var(--wgf-gold-muted);
  letter-spacing: .04em;
  border-bottom-color: var(--wgf-border-neutral-soft);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
}

.faq--single .faq__a {
  color: var(--wgf-text);
}