/* wgf-spellbook.css — THE SPELLBOOK (owner law 2026-08-04).
   ---------------------------------------------------------------------------
   Owner verbatim: "ALL FAQ's should read like a spellbook inside wow, by 'read'
   I mean, look like the spellbook using 1:1 blizzard assets, easy to read, and
   clear and concise REAL human questions with REAL human answers."

   So this is the client's OWN spellbook, not a drawing of one. Every texture
   here is a crop from the live Midnight interface art, extracted 2026-08-04 via
   the standing lane (tools/datamine/extract_atlas_sheets.py -> the sheets
   5834697 / 5506565 / 4200162, then tools/slice_ui_atlas.py -> assets/ui/):

     spellbook-background-evergreen-right   the page itself (.jpg — opaque page art,
                                            so the slicer ships it as JPEG; the left
                                            leaf is sliced too but unused, see the
                                            note on the background layers below)
     spellbook-background-evergreen-header  the wood band across the book's top
     spellbook-background-evergreen-ribbon  the teal bookmark ribbon
     spellbook-divider                      the rule the client draws between entries
     spellbook-item-iconframe               the gold octagon around a spell icon
     spellbook-item-backplate               the warm wash under a hovered entry

   THE SEAM (Hard Rule 11): a surface opts in by adding ONE class —
   `wgf-spellbook` — to whatever Q&A container it already has. The component
   styles the SEMANTIC markup inside it, so all five of the site's historical FAQ
   markups become the same book with no rewrite:

     <dl class="… wgf-spellbook">   dt = question,          dd = answer
     <ul class="… wgf-spellbook">   li > h3 = question,     li > p = answer
     <div class="… wgf-spellbook">  h3 = question,          p = answer
     <article class="faq wgf-spellbook">  .faq__q / .faq__a  (M51, wgf_ui.faq_block_html)
     … accordion:                   summary = question,     .faq__body = answer

   An `h2` inside the book becomes the title burnt into the wood header band.

   READABILITY IS THE POINT (owner: "easy to read"). Parchment is a LIGHT
   surface, so this component flips to dark ink locally — it never inherits the
   site's light-on-dark body colors. Measured against the sampled parchment
   (#c6a46b): heading ink 7.1:1, body ink 5.7:1, links 4.9:1 — all AA or better.

   Print: the book prints as plain ink on white (the art is decoration only). */

.wgf-spellbook {
  /* Sampled straight out of the page art so the fill behind it is invisible
     where the crop runs out: page centre #c6a46b, page edge #ad7b40. */
  --sb-parchment: #c6a46b;
  --sb-parchment-edge: #ad7b40;
  --sb-ink: #241505;          /* spell names / titles          — 7.1:1 on parchment */
  --sb-ink-body: #3b2a16;     /* descriptions                  — 5.7:1 */
  --sb-ink-quiet: #5b452a;    /* asides, meta, the page number */
  --sb-link: #6b1e0c;         /* the client's dark-red highlight — 4.9:1 */
  --sb-wood: #2a1a0f;
  --sb-band: clamp(34px, 4.4vw, 44px);   /* height of the wood header band */

  position: relative;
  isolation: isolate;
  /* A book is an OBJECT, not a full-bleed panel. Capping it near the comfortable
     reading measure keeps a long answer around 80ch and stops the page from
     stranding a field of empty parchment on a 1220px layout. */
  max-width: 860px;
  margin: var(--space-5) auto;
  /* The top padding clears the wood band. It is unconditional because a surface
     may put its <h2> OUTSIDE the container (the token pages label the section and
     tag only the <dl>), and without it the first question rendered UNDER the
     band. When a heading IS inside, it cancels this with a negative top margin
     and takes the band for itself. */
  padding: calc(var(--sb-band) + 14px) clamp(20px, 3.6vw, 46px) clamp(30px, 3.4vw, 44px);
  color: var(--sb-ink-body);
  font-family: var(--font-ui);

  /* ONE leaf, covering the whole plate — the client's own right-hand page.
     A two-leaf spread was the first cut and it is where the seams came from:
     each leaf has to be placed at natural aspect (stretching to half-width
     smears the ornament), so their overlap moves with the block's aspect ratio
     and one leaf's ornamental inner edge lands as a visible line under the text
     at some heights. No gutter blend can cover a seam whose position depends on
     content length. A single page has no join at any size, and it is no less
     faithful: the in-game spellbook shows ONE leaf per side. The gradient under
     it is sampled from the same art, so the edges the crop loses read as the
     page darkening toward its border. */
  background-color: var(--sb-parchment);
  background-image:
    url("/assets/ui/spellbook-background-evergreen-right.jpg"),
    linear-gradient(180deg, var(--sb-parchment-edge), var(--sb-parchment) 22%,
                    var(--sb-parchment) 78%, var(--sb-parchment-edge));
  background-repeat: no-repeat;
  background-position: center 30%, center;
  background-size: cover, 100% 100%;

  border: 1px solid #1b1109;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 196, 0.16),   /* the page's lit inner edge */
    inset 0 -18px 34px rgba(74, 44, 16, 0.26),
    var(--shadow-2);
}

/* The wood band across the top of the book — the client's own header texture,
   tiled horizontally. Present whether or not the book carries a title. */
.wgf-spellbook::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--sb-band);
  background:
    url("/assets/ui/spellbook-background-evergreen-header.png") center / auto 100% repeat-x,
    var(--sb-wood);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 0;
}

/* The bookmark ribbon, hung from the band down the right-hand leaf exactly as
   the client hangs it. Decorative: hidden from a11y tools, dropped on phones
   where the book is a single narrow page. */
.wgf-spellbook::after {
  content: "";
  position: absolute;
  top: calc(var(--sb-band) - 6px);
  right: clamp(22px, 4vw, 54px);
  width: 26px;
  height: 132px;
  background: url("/assets/ui/spellbook-background-evergreen-ribbon.png") center top / 100% auto no-repeat;
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

/* Everything real sits above the band + ribbon. */
.wgf-spellbook > * { position: relative; z-index: 1; }

/* ── The title, burnt into the wood band ─────────────────────────────────────
   Full-bleeds out of the book's padding so it fills the band edge to edge. */
.wgf-spellbook > h2,
.wgf-spellbook > .faq__heading,
.wgf-spellbook > .wgf-spellbook__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--sb-band);
  /* Cancel the book's band clearance and full-bleed out of its side padding, so
     the title sits ON the wood rather than under it. */
  margin: calc((var(--sb-band) + 14px) * -1) clamp(-46px, -3.6vw, -20px) clamp(18px, 2.2vw, 26px);
  padding: 0 var(--space-4);
  font-family: var(--font-game, var(--font-display));
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #f2d698;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
  background: none;
  border: 0;
}

/* A lede under the title, set as the book's opening line. */
.wgf-spellbook > p:first-of-type.faq__intro,
.wgf-spellbook > .wgf-spellbook__intro {
  margin: 0 auto clamp(18px, 2.2vw, 26px);
  max-width: 74ch;
  color: var(--sb-ink-quiet);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.68;
  text-align: center;
}

/* ── Entries ────────────────────────────────────────────────────────────────
   ONE shape for every historical markup: the question carries the gold-framed
   glyph in a 68px left gutter, and its answer sits beneath in the same gutter —
   exactly the row the client draws for a spell. Deliberately NOT a grid: the
   site's five FAQ markups include flat `h3 + p` siblings with no per-entry
   wrapper, which a grid cannot pair up. Padding + an absolutely-placed glyph
   works for all of them, wrapped or flat. */
.wgf-spellbook .faq__pair,
.wgf-spellbook .faq__item,
.wgf-spellbook li,
.wgf-spellbook__entry {
  position: relative;
  display: block;
  margin: 0;
  padding: clamp(14px, 1.8vw, 20px) 0;
  list-style: none;
  border: 0;
}

/* Lists NESTED in the book lose their default indent and markers. The container
   itself is deliberately NOT in this rule: when the book IS the <dl>/<ul>
   (`dl class="wtr-faq wgf-spellbook"`), `padding: 0` here out-ranked the book's
   own padding — (0,1,1) beats (0,1,0) — and the band clearance vanished, which
   is exactly how the first question ended up under the wood on /wow-token/us/.
   The container's own padding shorthand already zeroes the list indent. */
.wgf-spellbook dl,
.wgf-spellbook ul,
.wgf-spellbook ol { margin: 0; padding: 0; list-style: none; }

dl.wgf-spellbook,
ul.wgf-spellbook,
ol.wgf-spellbook { list-style: none; }

/* ── The spell name (= the question) ─────────────────────────────────────── */
.wgf-spellbook .faq__q,
.wgf-spellbook .faq__summary,
.wgf-spellbook h3,
.wgf-spellbook dt,
.wgf-spellbook__q {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-left: 68px;
  min-height: 34px;
  font-family: var(--font-game, var(--font-display));
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  font-weight: 700;
  line-height: 1.32;
  color: var(--sb-ink);
  text-shadow: 0 1px 0 rgba(255, 240, 210, 0.35);
  letter-spacing: 0.005em;
}

/* Entries that are NOT wrapped (flat h3/dt siblings) need their own breathing
   room, since there is no wrapper to carry the padding. */
.wgf-spellbook h3:not(:first-of-type),
.wgf-spellbook dt:not(:first-child) { margin-top: clamp(20px, 2.4vw, 28px); }

/* The gold octagon + a real spell-icon glyph, drawn as ONE pseudo-element so
   every markup gets it without a single new tag. The frame PNG is transparent
   in the middle, so the icon layer reads through it. */
.wgf-spellbook .faq__q::before,
.wgf-spellbook .faq__summary::before,
.wgf-spellbook h3::before,
.wgf-spellbook dt::before,
.wgf-spellbook__q::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 52px;
  height: 52px;
  background-image:
    url("/assets/ui/spellbook-item-iconframe.png"),
    var(--sb-glyph, url("/assets/icons/inv_misc_book_09.jpg"));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, 62% 62%;
  border-radius: 3px;
}

/* The rule the client draws between entries — the real `spellbook-divider` art,
   not a CSS border, spanning the full spread (glyph gutter included). The
   question spends its ::before on the glyph, so the rule takes ::after and hangs
   above the entry it precedes. */
.wgf-spellbook .faq__pair + .faq__pair > .faq__q::after,
.wgf-spellbook .faq__item + .faq__item > .faq__details > .faq__summary::after,
.wgf-spellbook li + li > h3::after,
.wgf-spellbook__entry + .wgf-spellbook__entry > .wgf-spellbook__q::after,
.wgf-spellbook h3:not(:first-of-type)::after,
.wgf-spellbook dt:not(:first-child)::after {
  content: "";
  position: absolute;
  top: clamp(-24px, -2.2vw, -18px);
  left: 0;
  right: 0;
  height: 11px;
  background: url("/assets/ui/spellbook-divider.png") center / 100% 11px no-repeat;
  opacity: 0.75;
  pointer-events: none;
}

/* Rotate the client's own tome icons so sibling entries read as different
   spells — deterministic, no markup, no JS. */
.wgf-spellbook .faq__pair:nth-child(6n + 2),
.wgf-spellbook .faq__item:nth-child(6n + 2),
.wgf-spellbook li:nth-child(6n + 2),
.wgf-spellbook h3:nth-of-type(6n + 2),
.wgf-spellbook dt:nth-of-type(6n + 2) { --sb-glyph: url("/assets/icons/inv_misc_book_11.jpg"); }
.wgf-spellbook .faq__pair:nth-child(6n + 3),
.wgf-spellbook .faq__item:nth-child(6n + 3),
.wgf-spellbook li:nth-child(6n + 3),
.wgf-spellbook h3:nth-of-type(6n + 3),
.wgf-spellbook dt:nth-of-type(6n + 3) { --sb-glyph: url("/assets/icons/inv_misc_book_03.jpg"); }
.wgf-spellbook .faq__pair:nth-child(6n + 4),
.wgf-spellbook .faq__item:nth-child(6n + 4),
.wgf-spellbook li:nth-child(6n + 4),
.wgf-spellbook h3:nth-of-type(6n + 4),
.wgf-spellbook dt:nth-of-type(6n + 4) { --sb-glyph: url("/assets/icons/inv_misc_book_07.jpg"); }
.wgf-spellbook .faq__pair:nth-child(6n + 5),
.wgf-spellbook .faq__item:nth-child(6n + 5),
.wgf-spellbook li:nth-child(6n + 5),
.wgf-spellbook h3:nth-of-type(6n + 5),
.wgf-spellbook dt:nth-of-type(6n + 5) { --sb-glyph: url("/assets/icons/inv_misc_note_01.jpg"); }
.wgf-spellbook .faq__pair:nth-child(6n + 6),
.wgf-spellbook .faq__item:nth-child(6n + 6),
.wgf-spellbook li:nth-child(6n + 6),
.wgf-spellbook h3:nth-of-type(6n + 6),
.wgf-spellbook dt:nth-of-type(6n + 6) { --sb-glyph: url("/assets/icons/inv_misc_book_17.jpg"); }

/* ── The description (= the answer) ──────────────────────────────────────── */
.wgf-spellbook .faq__a,
.wgf-spellbook .faq__body,
.wgf-spellbook dd,
.wgf-spellbook li > p,
.wgf-spellbook h3 ~ p,
.wgf-spellbook__a {
  margin: 0;
  padding-left: 68px;
  /* No measure cap here: the BOOK is the measure (max-width 860px, so a leaf
     runs ~80ch). A `74ch` cap on top of that just stranded a field of empty
     parchment on the right-hand leaf. */
  color: var(--sb-ink-body);
  font-size: 1rem;
  line-height: 1.7;
}

.wgf-spellbook dd { margin: 0 0 var(--space-2); }
.wgf-spellbook dd:last-child { margin-bottom: 0; }
.wgf-spellbook h3 ~ p { margin-bottom: var(--space-2); }

.wgf-spellbook strong,
.wgf-spellbook b { color: var(--sb-ink); font-weight: 700; }

.wgf-spellbook em, .wgf-spellbook i { color: var(--sb-ink-quiet); }

.wgf-spellbook code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: #3a2005;
  background: rgba(255, 244, 216, 0.5);
  border: 1px solid rgba(90, 58, 20, 0.35);
  border-radius: 2px;
  padding: 0 4px;
}

/* Links: the client's dark-red highlight, always underlined (colour alone is
   never the only signal). */
.wgf-spellbook a {
  color: var(--sb-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.wgf-spellbook a:hover { color: #8f3316; text-decoration-thickness: 2px; }

.wgf-spellbook a:focus-visible {
  outline: 2px solid #4a2a0c;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Hover / open state: the client's own warm wash behind the entry ─────── */
.wgf-spellbook .faq__pair:hover,
.wgf-spellbook .faq__item:hover,
.wgf-spellbook li:hover,
.wgf-spellbook__entry:hover {
  background: url("/assets/ui/spellbook-item-backplate.png") center / 100% 100% no-repeat;
}

/* ── Accordion variant: the summary row stays the spell name ─────────────── */
.wgf-spellbook .faq__summary {
  display: block;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.wgf-spellbook .faq__summary::-webkit-details-marker { display: none; }
.wgf-spellbook .faq__summary::marker { content: ""; }
.wgf-spellbook .faq__summary:hover { color: #000; }

.wgf-spellbook .faq__chevron {
  width: 14px;
  height: 14px;
  /* recolour the shared chevron to book ink (the sitewide one is gold) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23241505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* ── Single narrow page on phones ───────────────────────────────────────────
   One leaf, no ribbon, glyphs inline above the name so the text keeps its full
   measure instead of squeezing into a 52px-indented column. */
@media (max-width: 640px) {
  .wgf-spellbook {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .wgf-spellbook::after { display: none; }

  .wgf-spellbook .faq__q,
  .wgf-spellbook .faq__summary,
  .wgf-spellbook h3,
  .wgf-spellbook dt,
  .wgf-spellbook__q { padding-left: 46px; min-height: 40px; }

  .wgf-spellbook .faq__q::before,
  .wgf-spellbook .faq__summary::before,
  .wgf-spellbook h3::before,
  .wgf-spellbook dt::before,
  .wgf-spellbook__q::before { width: 38px; height: 38px; }

  /* The answer reclaims the gutter on a phone — the measure matters more than
     the icon alignment at 360px. */
  .wgf-spellbook .faq__a,
  .wgf-spellbook .faq__body,
  .wgf-spellbook dd,
  .wgf-spellbook li > p,
  .wgf-spellbook h3 ~ p,
  .wgf-spellbook__a { padding-left: 0; }

  .wgf-spellbook > h2,
  .wgf-spellbook > .faq__heading { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
}

/* ── Ink on white when printed; the art is decoration, not content ───────── */
@media print {
  .wgf-spellbook {
    background: #fff;
    border: 1px solid #999;
    box-shadow: none;
    color: #000;
  }
  .wgf-spellbook::before,
  .wgf-spellbook::after { display: none; }
  .wgf-spellbook > h2,
  .wgf-spellbook > .faq__heading { color: #000; text-shadow: none; min-height: 0; margin: 0 0 12px; }
  .wgf-spellbook .faq__q::before,
  .wgf-spellbook .faq__summary::before,
  .wgf-spellbook h3::before,
  .wgf-spellbook dt::before { display: none; }
  .wgf-spellbook .faq__q::after,
  .wgf-spellbook .faq__summary::after,
  .wgf-spellbook h3::after,
  .wgf-spellbook dt::after { display: none; }        /* the divider art */
  .wgf-spellbook .faq__q,
  .wgf-spellbook .faq__summary,
  .wgf-spellbook dt,
  .wgf-spellbook h3 { padding-left: 0; color: #000; }
  .wgf-spellbook .faq__a,
  .wgf-spellbook .faq__body,
  .wgf-spellbook dd,
  .wgf-spellbook li > p,
  .wgf-spellbook h3 ~ p { padding-left: 0; color: #000; }
  .wgf-spellbook a { color: #000; }
}