/* ============================================================
   legal.css
   Pages: Terms of Service, Game Law, Decency, Message Board
   Rules, Tavern & Magi Cafe Rules, Roleplaying Guide.
   Additive to home.css (reuses its tokens, .wrap, .eyebrow, etc.)
   so home.css itself is left untouched.
   ============================================================ */

/* ~68px: measured height of #site-header (home.css) at desktop
   widths — 12px vertical padding + ~44px button/nav row. Adjust
   this if the site header's own height ever changes noticeably. */
:root{ --legal-header-h:68px; }

.legal-tabs-bar{
  position:sticky;
  top:var(--legal-header-h);
  z-index:400; /* below #site-header-wrap's z-index:500 */
  background:rgba(16,17,20,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.legal-tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;
  padding:14px 24px;
}
.legal-tabs a{
  font-family:var(--font-pixel);
  font-weight:600;font-size:13.5px;letter-spacing:.02em;
  color:var(--ink-dim);
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:30px;
  background:var(--panel-soft);
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.legal-tabs a:hover{color:var(--ink);background:var(--panel-soft-hover);}
.legal-tabs a.active{
  color:#fff;
  background:linear-gradient(180deg,var(--crimson-bright),var(--crimson));
  border-color:transparent;
}

/* So a clicked anchor's heading lands below both sticky bars
   (site header + legal tabs) instead of underneath them. */
.legal-content h2[id], .legal-content h3[id]{
  scroll-margin-top:calc(var(--legal-header-h) + 74px);
}

.legal-page-head{
  text-align:center;max-width:900px;margin:40px auto 8px;padding:0 24px;
}
.legal-updated{
  font-size:13px;color:var(--ink-faint);margin-top:-4px;
}

.legal-content{
  max-width:760px;margin:0 auto;padding:32px 24px 80px;
}
.legal-content h2{
  font-size:20px;margin-top:2.2em;
}
.legal-content h2:first-of-type{margin-top:1.2em;}
.legal-content h2.legal-section-title{
  display:flex;align-items:center;justify-content:center;
  gap:16px;
  text-align:center;
}
.legal-npc-icon{
  height:40px;width:auto;display:block;flex:none;
}
.legal-content h3{
  font-family:var(--font-pixel);
  font-size:16px;font-weight:600;color:var(--gold);
  margin-top:1.8em;
}
.legal-content p, .legal-content li{
  color:var(--ink-dim);
  font-size:15.5px;
  line-height:1.7;
}
.legal-content strong{color:var(--ink);}
.legal-content ol, .legal-content ul{padding-left:1.3em;margin:0 0 1em;}
.legal-content li{margin-bottom:.6em;}
.legal-content a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.legal-content a:hover{color:var(--gold-soft);}

/* Conspicuous callout for clauses that need to stand out visually
   (warranty disclaimers, liability limitations) instead of relying
   on all-caps text. Bordered + tinted so it reads as "important"
   at a glance while staying legible. */
.legal-notice{
  border:1px solid var(--crimson);
  background:rgba(154,43,43,.09);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-top:2.2em;
}
.legal-notice h2, .legal-notice h3{
  margin-top:0;
  color:var(--ink);
}
.legal-notice p{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.65;
}
.legal-notice p:last-child{margin-bottom:0;}
.legal-notice + .legal-notice{margin-top:1.2em;}