/* ==========================================================================
   rulebook.css — themed long-form document pages (The Mist).
   Loaded alongside styles.css (which supplies nav, footer, buttons, container).
   Body gets a theme class: .rb-theme--campaign or .rb-theme--players.
   ========================================================================== */

.rb-theme--campaign {
  --rb-accent:   #b3392f;       /* blood crimson */
  --rb-accent-2: #7a3b66;       /* mist mauve */
  --rb-hero: url(../assets/mist/campaign-hero.svg);
  --rb-parchment: #ece2cd;
  --rb-parchment-2: #e4d8bd;
}
.rb-theme--players {
  --rb-accent:   #1f8f7e;       /* arcane teal */
  --rb-accent-2: #2b6f8c;
  --rb-hero: url(../assets/mist/players-hero.svg);
  --rb-parchment: #f4ecda;
  --rb-parchment-2: #ece0c6;
}
:root {
  --rb-ink: #2a2018;
  --rb-ink-soft: #5c4f3d;
  --rb-rule: #cdbf9e;
}

/* ----- Hero banner ------------------------------------------------------ */
.rb-hero {
  position: relative;
  background: var(--rb-hero) center/cover no-repeat, #140d12;
  border-bottom: 3px solid var(--rb-accent);
  overflow: hidden;
}
.rb-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,5,12,0.35), rgba(8,5,12,0.82));
}
.rb-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.rb-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display, "Trebuchet MS", sans-serif);
  font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  font-size: 0.78rem; color: var(--accent-gold, #f4c14e);
  margin-bottom: var(--space-3, .75rem);
}
.rb-hero__title {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 var(--space-3, .75rem);
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.rb-hero__sub { color: #e7dcc7; font-size: 1.1rem; max-width: 60ch; margin: 0 0 var(--space-6, 1.5rem); }
.rb-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6, 1.5rem);
}
.rb-hero__meta span {
  font-size: 0.78rem; font-weight: 600; letter-spacing: .4px;
  color: #f3ead6; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 11px; border-radius: 999px;
}
.rb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); }

/* ----- Layout: TOC + content ------------------------------------------- */
.rb-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--space-8, 2rem);
  align-items: start;
  padding-block: var(--space-12, 3rem);
}
.rb-toc {
  position: sticky;
  top: calc(var(--nav-h, 68px) + 14px);
  max-height: calc(100vh - var(--nav-h, 68px) - 32px);
  overflow-y: auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2a2153);
  border-radius: 14px;
  padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
}
.rb-toc__title {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  font-size: 0.78rem; color: var(--rb-accent); margin: 0 0 .6rem;
}
.rb-toc ul { list-style: none; margin: 0; padding: 0; }
.rb-toc a {
  display: block; padding: 5px 8px; border-radius: 7px;
  font-size: 0.86rem; color: var(--muted, #b0a8d4); text-decoration: none;
  border-left: 2px solid transparent;
}
.rb-toc a:hover { color: var(--text, #f3f0ff); background: rgba(255,255,255,0.05); }
.rb-toc__h1 a { font-weight: 700; color: #d9d0f0; }
.rb-toc__h2 a { padding-left: 20px; font-size: 0.82rem; }
.rb-toc a:target, .rb-toc a.is-active { color: var(--accent-gold,#f4c14e); border-left-color: var(--rb-accent); }

/* ----- The parchment document ------------------------------------------ */
.rb-content {
  background:
    radial-gradient(1200px 400px at 50% -5%, rgba(255,255,255,0.5), transparent 60%),
    linear-gradient(180deg, var(--rb-parchment), var(--rb-parchment-2));
  color: var(--rb-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.72;
  border: 1px solid #b9a981;
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), inset 0 0 80px rgba(120,90,40,0.07);
  max-width: 80ch;
  overflow-wrap: break-word;
}
.rb-content p { margin: 0 0 1.05em; }
.rb-content > p:first-of-type::first-letter {
  float: left; font-family: "Cinzel", Georgia, serif; font-weight: 800;
  font-size: 3.4em; line-height: .72; padding: 0.06em 0.12em 0 0;
  color: var(--rb-accent);
}

/* headings */
.rb-content h1, .rb-content h2, .rb-content h3, .rb-content h4 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  color: var(--rb-accent); line-height: 1.15; scroll-margin-top: calc(var(--nav-h,68px) + 16px);
}
.rb-content h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 1.8em 0 .6em;
  padding-bottom: .25em; border-bottom: 3px double var(--rb-accent);
}
.rb-content h1:first-child { margin-top: 0; }
.rb-content h2 {
  font-size: 1.5rem; margin: 1.6em 0 .5em; color: #6e2a23;
  padding-left: .6em; border-left: 5px solid var(--rb-accent);
}
.rb-theme--players .rb-content h2 { color: #155f53; }
.rb-content h3 { font-size: 1.2rem; margin: 1.4em 0 .4em; color: var(--rb-accent-2); }
.rb-content h4 { font-size: 1.02rem; margin: 1.2em 0 .3em; color: var(--rb-ink); letter-spacing: .3px; }

/* links, emphasis */
.rb-content a { color: var(--rb-accent); text-decoration: underline; text-underline-offset: 2px; }
.rb-content a:hover { color: var(--rb-accent-2); }
.rb-content strong { color: #3a2c1d; }
.rb-content em { color: #4a3a28; }

/* lists */
.rb-content ul, .rb-content ol { margin: 0 0 1.05em; padding-left: 1.6em; }
.rb-content li { margin: .25em 0; }
.rb-content ul { list-style: none; }
.rb-content ul > li { position: relative; }
.rb-content ul > li::before {
  content: "◆"; position: absolute; left: -1.3em; color: var(--rb-accent);
  font-size: .7em; top: .45em;
}

/* tables — D&D stat-block / reference styling */
.rb-content table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.96rem;
  background: rgba(255,255,255,0.45);
  border: 1px solid #b08d5a; border-radius: 8px; overflow: hidden;
}
.rb-content th, .rb-content td {
  padding: 8px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #d8c7a3;
}
.rb-content thead th, .rb-content tr:first-child td {
  background: var(--rb-accent); color: #fff7ea; font-family: var(--font-display, sans-serif);
  font-weight: 700; letter-spacing: .3px; border-bottom: 2px solid #00000022;
}
.rb-content tbody tr:nth-child(even) td { background: rgba(176,141,90,0.10); }
.rb-content table table { margin: 0; border: 0; background: transparent; }

/* images */
.rb-content img {
  display: block; max-width: 100%; height: auto; margin: 1.4em auto;
  border: 1px solid #9c855c; border-radius: 8px;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,0.6); background: #fff;
}

/* blockquote → aside callout */
.rb-content blockquote {
  margin: 1.3em 0; padding: 1em 1.2em; border-left: 5px solid var(--rb-accent-2);
  background: rgba(122,59,102,0.08); border-radius: 0 8px 8px 0; color: var(--rb-ink-soft);
}
.rb-theme--players .rb-content blockquote { background: rgba(43,111,140,0.10); }

/* horizontal rule → ornament */
.rb-content hr {
  border: 0; height: 22px; margin: 2em auto; max-width: 320px;
  background: no-repeat center/contain;
  background-image: linear-gradient(90deg, transparent, var(--rb-rule) 30%, var(--rb-rule) 70%, transparent);
  position: relative;
}

/* back-to-top */
.rb-totop {
  display: inline-block; margin-top: var(--space-8,2rem);
  font-family: var(--font-display, sans-serif); font-weight: 700; font-size: .9rem;
  color: var(--rb-accent);
}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
  .rb-layout { grid-template-columns: 1fr; }
  .rb-toc {
    position: static; max-height: none;
    margin-bottom: var(--space-6,1.5rem);
  }
  .rb-toc__list-wrap { max-height: 320px; overflow-y: auto; }
}