/* WoWGoldFarms — FAQ / Explanation Prose Block — M51
   ---------------------------------------------------------------------------
   THE LOOK LIVES IN assets/wgf-spellbook.css (owner law 2026-08-04: every FAQ on
   the site is the in-game spellbook, built from real client textures). This file
   is now the M51 CONTRACT layer only: the markup shape, the schema.org pairing,
   and the behaviour the book chrome does not own (disclosure state, focus).

   Nothing here paints the container. That is deliberate — when both files styled
   the same box the winner came down to <link> order, which is exactly how the
   backdrop layer broke twice (see the LANDMINE notes in wgf-zonebg.css). One
   surface, one home.

   Token source: static/css/_tokens.css — never add :root{} blocks here.

   HTML contract (Python helper: wgf_ui.faq_block_html; link both sheets from
   wgf_ui.FAQ_CSS_HREFS):
     <article class="faq wgf-spellbook [faq--accordion] [faq--single]">
       <h2 class="faq__heading">…</h2>             <!-- optional: the book title -->
       <p  class="faq__intro">…</p>                <!-- optional: opening line -->

       <!-- 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 from the Python
   helper when ≥1 genuine Q&A pair is present (see wgf_ui.faq_jsonld). */

/* ── Accordion behaviour ──────────────────────────────────────────────────── */

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;             /* hide the browser's default triangle */
  user-select: none;
}

.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { content: ""; }

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

.faq__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Default (dark surfaces): the gold chevron. The spellbook re-inks it. */
  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");
}

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

/* ── Focus (visible on parchment and on dark alike) ───────────────────────── */

.faq__summary:focus-visible,
.faq__a a:focus-visible,
.faq__body a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Measure ──────────────────────────────────────────────────────────────────
   Only the lede is capped. Answers are NOT: the spellbook container is already
   capped at 860px, and a second 74ch cap on top of that stranded empty parchment
   on the right-hand leaf. */

.faq__intro { max-width: 74ch; }

/* ── Single-question variant ──────────────────────────────────────────────── */

.faq--single .faq__a { font-size: var(--text-md); }