/* wgf-legal.css - /privacy/ and /terms/ only (2026-09-03 Blizzard-asset pass).
   Rides on wgf-info-pages.css (.wgf-info, .wgf-info-section, .wgf-info__lead) and
   wgf-chrome.css (.wgf-qborder, the AH item-icon ring; .wgf-window plate).

   Client art only, every path verified on disk:
     assets/loading-screens/clean/*.jpg   the header band
     assets/ui/ui-frame-metal-corner*-2x  the window metal that frames it
     assets/ui/classhall-stone-tile.png   the section-index plate
     assets/ui/auctionhouse-itemicon-border-gray.png  via .wgf-qborder--gray
     assets/icons/*.jpg                   one client icon per section heading
   No colour here that static/css/_tokens.css does not already own (slate, bronze,
   gold, parchment). No gradients, no glows, no green chrome. The legal copy these
   rules dress is unchanged - this file styles chrome only. */

/* ---------------------------------------------------------------------------
   Header band: one loading screen cropped to a strip, framed in the client's own
   metal corners. It sits AFTER the lead paragraph (sitewide rule 2026-08-11:
   nothing separates the title from the intro that answers why the reader clicked).
   --------------------------------------------------------------------------- */
.wgf-legal__hero {
  position: relative;
  margin: 0 0 var(--space-4);
  border: 2px solid var(--wgf-metal);
  background: #000;
}
.wgf-legal__hero img {
  display: block;
  width: 100%;
  height: clamp(140px, 22vw, 260px);
  object-fit: cover;
  object-position: center 58%;
}
/* The same four slices the window chrome uses, so the strip is framed in the
   game's metal instead of a CSS box. */
.wgf-legal__hero::before,
.wgf-legal__hero::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.wgf-legal__hero::before {
  top: -6px;
  left: -6px;
  background-image: url("/assets/ui/ui-frame-metal-cornertopleft-2x.png");
}
.wgf-legal__hero::after {
  bottom: -6px;
  right: -6px;
  background-image: url("/assets/ui/ui-frame-metal-cornerbottomright-2x.png");
}
.wgf-legal__hero figcaption {
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--wgf-well-edge);
  background: var(--wgf-well);
  color: var(--wgf-muted);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Section index: a stone plate with one link per section of the document. These
   pages run long, and a reader who came for one clause should not scroll for it.
   --------------------------------------------------------------------------- */
.wgf-legal__index {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--wgf-metal);
  background:
    linear-gradient(rgba(10, 11, 15, 0.86), rgba(10, 11, 15, 0.86)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat;
}
.wgf-legal__index-title {
  margin: 0 0 var(--space-2);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.wgf-legal__index ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
}
.wgf-legal__index li { margin: 0; }
.wgf-legal__index a {
  display: block;
  padding: 2px 0;
  color: var(--wgf-gold-link);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  text-decoration: none;
}
.wgf-legal__index a:hover { color: var(--wgf-gold-bright); }
.wgf-legal__index a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------------------
   Headings: the client icon seated in the AH item-icon ring, then the title.
   --------------------------------------------------------------------------- */
.wgf-legal .wgf-window__title,
.wgf-legal .wgf-info-section > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wgf-legal .wgf-window__title .wgf-qborder,
.wgf-legal .wgf-info-section > h2 .wgf-qborder { flex: 0 0 auto; }
/* The title plate is a 38px bar: the ring rides it at 32px so the bar keeps its
   height, icon scaled on the kit's own 44/32 ratio. */
.wgf-legal .wgf-window__title .wgf-qborder { width: 32px; height: 32px; }
.wgf-legal .wgf-window__title .wgf-qborder__icon { width: 23px; height: 23px; }

/* Anchored sections clear the sticky topbar when the index jumps to them. */
.wgf-legal .wgf-info-section { scroll-margin-top: 96px; }

/* ---------------------------------------------------------------------------
   Foot of the document: sibling pages, then the art credit.
   --------------------------------------------------------------------------- */
.wgf-legal__also {
  margin: var(--space-4) 0 0;
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--wgf-muted);
}
.wgf-legal__also a { color: var(--wgf-gold-link); }
.wgf-legal__also a:hover { color: var(--wgf-gold-bright); }
.wgf-legal__also a + a::before {
  content: "\00b7";
  margin: 0 var(--space-1);
  color: var(--wgf-muted);
}
.wgf-legal__credit {
  margin: var(--space-2) 0 0;
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.45;
}

@media (max-width: 700px) {
  .wgf-legal__hero img { height: 140px; }
  .wgf-legal .wgf-info-section > h2 { align-items: flex-start; }
  .wgf-legal__index ol { grid-template-columns: 1fr; }
}