/* WoW: Forever class guides (/guides/wow-forever/**). Loaded ONLY by those pages, so
   style.css keeps its own ?v= stamp and no other page needs touching.
   --class-accent is set per page by tools/build_guides.py. */

.guide { --class-accent: var(--phosphor); }

/* --- Hero ------------------------------------------------------------- */
.guide-hero { border-bottom: 1px solid rgba(47, 56, 52, .5); }
.guide-hero-inner { display: flex; align-items: center; gap: 28px; }
.guide-hero h1 { color: var(--bone); }
.guide-hero .eyebrow { color: var(--class-accent); }
.guide-crest {
  flex: none; width: 128px; height: 128px; border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 0 44px -8px var(--class-accent);
}
@media (max-width: 640px) {
  .guide-hero-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .guide-crest { width: 88px; height: 88px; }
}

/* --- Hub grid --------------------------------------------------------- */
.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; margin: 0 0 48px;
}
.guide-card {
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto;
  column-gap: 16px; row-gap: 4px; align-items: center;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--stone) 0%, var(--bg-2) 100%);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.guide-card img { grid-row: 1 / span 3; width: 64px; height: 64px; border-radius: 12px; }
.guide-card-name {
  font: 600 1.05rem/1.2 var(--sans); color: var(--bone);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.guide-card-roles {
  font: 600 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--class-accent); opacity: .85;
}
.guide-card-hook { font-size: .86rem; line-height: 1.45; color: var(--bone-dim); }
a.guide-card:hover { border-color: var(--class-accent); transform: translateY(-2px); }
a.guide-card:hover .guide-card-name { color: var(--class-accent); }
.guide-card[aria-disabled] { opacity: .5; }
.guide-soon {
  font: 600 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px;
}
@media (prefers-reduced-motion: reduce) { a.guide-card:hover { transform: none; } }

/* --- Body ------------------------------------------------------------- */
/* Prose keeps a reading measure; the card grid and tables use the full wrap. */
.guide-body { max-width: none; }
.guide-body > p,
.guide-body > ul,
.guide-body > ol,
.guide-body > h2,
.guide-body > h3,
.guide-body > blockquote,
.guide-body > .guide-table { max-width: 74ch; }
.guide-body h2 {
  margin: 56px 0 14px; padding-top: 22px;
  border-top: 1px solid rgba(47, 56, 52, .5);
  color: var(--class-accent);
}
.guide-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-body h3 { margin: 32px 0 10px; color: var(--bone); font-size: 1.1rem; }
.guide-body p, .guide-body li { line-height: 1.65; }
.guide-body p { margin: 0 0 14px; }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 22px; }
.guide-body li { margin-bottom: 7px; }
.guide-body strong { color: var(--bone); }
.guide-body code {
  font: .86em var(--mono); background: #070908;
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.guide-body a { color: var(--class-accent); }
.guide-body blockquote {
  margin: 0 0 18px; padding: 14px 18px;
  border-left: 3px solid var(--class-accent);
  background: rgba(255, 255, 255, .025); border-radius: 0 8px 8px 0;
}
.guide-body blockquote p { margin: 0; color: var(--bone); }

/* Tables scroll rather than squash: several carry five columns of tooltip values. */
.guide-table { overflow-x: auto; margin: 0 0 22px; }
.guide-table table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; }
.guide-table th, .guide-table td {
  text-align: left; padding: 9px 14px 9px 0;
  border-bottom: 1px solid rgba(47, 56, 52, .55); vertical-align: top;
}
.guide-table th {
  font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey); white-space: nowrap;
}
.guide-table tbody tr:last-child td { border-bottom: 0; }

/* --- On-page contents -------------------------------------------------- */
/* These pages serve a newcomer and a returning player in one document, so the jump
   list is load-bearing: it is how each audience skips to its half. */
.guide-toc {
  max-width: 74ch; margin: 0 0 40px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, var(--stone) 0%, var(--bg-2) 100%);
}
.guide-toc .eyebrow { margin: 0 0 10px; color: var(--class-accent); }
.guide-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}
.guide-toc li { margin: 0; }
.guide-toc a { color: var(--bone-dim); text-decoration: none; font-size: .92rem; }
.guide-toc a:hover { color: var(--class-accent); text-decoration: underline; }
.guide-body h2 { scroll-margin-top: 20px; }

/* --- Metadata line ------------------------------------------------------ */
/* Version, date and author on one line under the crumbs. On every guide site studied
   this trio sits above the fold and does most of the work that hedging otherwise tries
   to do: a reader who can see what build a page reflects forgives provisional content. */
.guide-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: 0 0 26px; padding: 0 0 18px;
  border-bottom: 1px solid rgba(47, 56, 52, .5);
  font: 500 .76rem/1.4 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--grey);
}
.guide-meta .gm-ver {
  color: var(--class-accent); border: 1px solid currentColor;
  border-radius: 4px; padding: 3px 7px;
}

/* --- The one uncertainty box -------------------------------------------- */
/* All hedging lives here. The body is written in the indicative; a genuinely shaky claim
   gets one "seems" inside its sentence. Hedging spread through body prose makes
   confident and shaky claims read identically, which is worse than not hedging. */
.guide-scope {
  max-width: 74ch; margin: 0 0 32px; padding: 18px 22px;
  border: 1px solid rgba(240, 180, 76, .38); border-left-width: 3px;
  border-radius: 0 10px 10px 0; background: rgba(240, 180, 76, .06);
}
.guide-scope p { margin: 0 0 10px; color: var(--bone); font-size: .94rem; }
.guide-scope p:last-child { margin-bottom: 0; }
.guide-scope strong { color: var(--amber); }

/* --- New to this class? ------------------------------------------------- */
/* Bounded on purpose: ~80 words answering four questions. Softening the whole guide for
   beginners instead dilutes it for everyone and still gives them no decision. */
.guide-newbox {
  max-width: 74ch; margin: 0 0 32px; padding: 20px 24px;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, var(--stone) 0%, var(--bg-2) 100%);
}
.guide-newbox .eyebrow { margin: 0 0 12px; color: var(--class-accent); }
.guide-newbox p { margin: 0 0 10px; }
.guide-newbox p:last-child, .guide-newbox ul:last-child { margin-bottom: 0; }

/* --- Strengths / weaknesses --------------------------------------------- */
.guide-sw {
  max-width: 74ch; margin: 0 0 14px; padding: 14px 20px;
  border-radius: 10px; border: 1px solid var(--line);
}
.guide-sw .eyebrow { margin: 0 0 8px; }
.guide-sw ul { margin: 0; padding-left: 20px; }
.guide-sw li { margin-bottom: 5px; }
.guide-sw.pros { border-color: rgba(91, 242, 154, .3); background: rgba(91, 242, 154, .05); }
.guide-sw.cons { border-color: rgba(224, 100, 90, .3); background: rgba(224, 100, 90, .05); }
.guide-sw.pros .eyebrow { color: var(--phosphor); }
.guide-sw.cons .eyebrow { color: var(--red, #e0645a); }
.guide-sw.pros li::marker { content: "+  "; color: var(--phosphor); }
.guide-sw.cons li::marker { content: "\2212  "; color: var(--red, #e0645a); }

/* --- Ability names ------------------------------------------------------ */
/* Every guide site links and icons every ability name. We have no spell IDs to link to,
   so these are styled chips rather than fake links -- most of the scannability, none of
   the broken tooltips. Swap for real links if IDs ever become available. */
.ab {
  font: 600 .93em var(--sans); color: var(--class-accent);
  white-space: nowrap;
}
.guide-table .ab, li .ab { font-weight: 600; }

/* --- Per-class accents --------------------------------------------------- */
/* Set by class, never by a style attribute: these pages run style-src 'self', which
   blocks inline styles, so an inline custom property is dropped without warning. */
.guide-warrior { --class-accent: #c79c6e; }
.guide-paladin { --class-accent: #f58cba; }
.guide-hunter { --class-accent: #abd473; }
.guide-rogue { --class-accent: #fff569; }
.guide-priest { --class-accent: #ffffff; }
.guide-shaman { --class-accent: #3e9bff; }
.guide-mage { --class-accent: #69ccf0; }
.guide-warlock { --class-accent: #9482c9; }
.guide-druid { --class-accent: #ff7d0a; }

/* --- Spec navigation ----------------------------------------------------- */
/* Repeated identically on the class overview and every spec page, so the split reads as
   one guide rather than several dead ends. Every site studied does this. */
.spec-nav { margin: 0 0 22px; }
.spec-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.spec-nav li { margin: 0; }
.spec-nav a {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #070908;
  font: 600 .82rem/1 var(--sans); color: var(--bone-dim); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.spec-nav a:hover { color: var(--class-accent); border-color: var(--class-accent); }
.spec-nav a.on {
  color: var(--bg); background: var(--class-accent); border-color: var(--class-accent);
}
.guide-meta .gm-role {
  color: var(--bone); border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 7px;
}