/* ═══════════════════════════════════════════════════
   TROLLSKULL MANOR — publish.css
   Rustic Tavern Parchment Theme
   Fonts: Cinzel (display) + Crimson Pro (body)
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ─── OVERRIDE OBSIDIAN VARIABLES ──────────────────
   Working WITH the light theme — shifting whites to
   warm parchment tones rather than fighting the theme.
─────────────────────────────────────────────────────── */

:root,
body,
body.theme-light,
.theme-light {
  /* Backgrounds — parchment scale */
  --background-primary:       #f4ede0;
  --background-primary-alt:   #ede0c8;
  --background-secondary:     #e8d8c0;
  --background-secondary-alt: #e0ccb0;
  --background-modifier-border: #c8ae90;
  --background-modifier-hover:  rgba(139, 90, 43, 0.08);

  /* Color scale */
  --color-base-00:  #f4ede0;
  --color-base-05:  #ede0c8;
  --color-base-10:  #e8d8c0;
  --color-base-20:  #e0ccb0;
  --color-base-25:  #d4bc98;
  --color-base-30:  #c8ae88;
  --color-base-35:  #b89870;
  --color-base-40:  #9a7e5a;
  --color-base-50:  #7a6040;
  --color-base-60:  #6b5440;
  --color-base-70:  #4a3828;
  --color-base-100: #2a1f14;

  /* Text — dark brown ink */
  --text-normal:    #2a1f14;
  --text-muted:     #6b5440;
  --text-faint:     #9a7e5a;
  --text-on-accent: #f4ede0;

  /* Accents — rustic saddle brown & antique gold */
  --text-accent:              #7a3b10;
  --text-accent-hover:        #5a2a08;
  --interactive-accent:       #7a3b10;
  --interactive-accent-hover: #5a2a08;
  --link-color:               #7a3b10;
  --link-color-hover:         #5a2a08;
  --link-unresolved-color:    #b89870;

  /* Custom palette */
  --parchment:      #f4ede0;
  --parchment-mid:  #ede0c8;
  --parchment-dark: #e0ccb0;
  --sidebar-bg:     #e0d0b8;
  --ink:            #2a1f14;
  --ink-mid:        #4a3828;
  --ink-muted:      #6b5440;
  --brown:          #7a3b10;
  --brown-dark:     #5a2a08;
  --gold:           #9a7530;
  --gold-light:     #c8a84b;
  --border:         #c8ae90;
  --border-dark:    #a89070;

  --radius:       4px;
  --font-display: 'Cinzel', 'Palatino Linotype', serif;
  --font-body:    'Crimson Pro', Georgia, serif;
}

/* ─── FOUNDATION ───────────────────────────────────── */

body {
  background-color: #f4ede0 !important;
  color: #2a1f14 !important;
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
}

.published-container,
.site-body,
.mod-sidebar-layout,
.markdown-preview-view,
.markdown-rendered {
  background: transparent !important;
  color: #2a1f14 !important;
}

/* ─── TYPOGRAPHY ───────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
  color: #3d1f0a !important;
}

h1 {
  font-size: 2.4em !important;
  font-weight: 700 !important;
  color: #3d1f0a !important;
  border-bottom: 2px solid #c8ae90 !important;
  padding-bottom: 0.3em !important;
}

h2 {
  font-size: 1.6em !important;
  color: #5a2a08 !important;
  margin-top: 2em !important;
}

h3 {
  font-size: 1.25em !important;
  color: #7a3b10 !important;
}

h4, h5, h6 {
  color: #6b5440 !important;
  font-size: 1em !important;
  letter-spacing: 0.06em !important;
}

p, li, span, div {
  color: #2a1f14;
}

strong {
  color: #3d1f0a !important;
  font-weight: 600 !important;
}

em {
  color: #4a3828 !important;
}

/* ─── LINKS ────────────────────────────────────────── */

a, a:link, a:visited {
  color: #7a3b10 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color 0.15s, border-color 0.15s !important;
}

a:hover {
  color: #5a2a08 !important;
  border-bottom-color: #c8ae90 !important;
}

/* ─── HORIZONTAL RULE ──────────────────────────────── */

hr {
  border: none !important;
  height: 1px !important;
  background: #c8ae90 !important;
  margin: 2.5em 0 !important;
  position: relative !important;
  overflow: visible !important;
}

hr::after {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f4ede0;
  padding: 0 0.8em;
  color: #b89870;
  font-size: 0.75em;
  line-height: 1;
}

/* ─── BLOCKQUOTES ──────────────────────────────────── */

blockquote {
  border-left: 3px solid #b89870 !important;
  background: #ede0c8 !important;
  padding: 0.75em 1.25em !important;
  margin: 1.5em 0 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  font-style: italic !important;
  color: #2a1f14 !important;
}

/* ─── TABLES ───────────────────────────────────────── */

table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1.5em 0 !important;
  border: 1px solid #c8ae90 !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

th {
  font-family: 'Cinzel', serif !important;
  font-size: 0.8em !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: #e0ccb0 !important;
  color: #5a2a08 !important;
  padding: 0.7em 1em !important;
  border-bottom: 1px solid #c8ae90 !important;
}

td {
  padding: 0.6em 1em !important;
  border-bottom: 1px solid #e0ccb0 !important;
  color: #2a1f14 !important;
  vertical-align: top !important;
  background: #f4ede0 !important;
}

tr:last-child td { border-bottom: none !important; }
tr:hover td { background: #ede0c8 !important; }

/* ─── CALLOUTS ─────────────────────────────────────── */

.callout {
  background: #ede0c8 !important;
  border: 1px solid #c8ae90 !important;
  border-left: 4px solid #9a7530 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 1em 1.25em !important;
  margin: 1.5em 0 !important;
  color: #2a1f14 !important;
}

.callout-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.88em !important;
  letter-spacing: 0.05em !important;
  color: #5a2a08 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5em !important;
}

.callout-title-icon { display: none !important; }

.callout-content,
.callout-content p,
.callout-content li,
.callout-content span,
.callout-content em,
.callout-content strong {
  color: #2a1f14 !important;
  background-color: transparent !important;
}

/* Volo's quote */
.callout[data-callout="quote"] {
  border-left-color: #b89870 !important;
  background: #ede8d8 !important;
}
.callout[data-callout="quote"] .callout-title {
  color: #9a7e5a !important;
  font-size: 0.8em !important;
}
.callout[data-callout="quote"] .callout-content,
.callout[data-callout="quote"] .callout-content p,
.callout[data-callout="quote"] .callout-content span {
  font-style: italic !important;
  color: #4a3828 !important;
  font-size: 1.05em !important;
  line-height: 1.8 !important;
}

/* Active campaign card */
.callout[data-callout="campaign-active"] {
  border-left-color: #7a3b10 !important;
  background: #ede0c8 !important;
}
.callout[data-callout="campaign-active"] .callout-title {
  color: #7a3b10 !important;
  font-size: 1em !important;
}

/* Completed campaign */
.callout[data-callout="campaign-done"] {
  border-left-color: #b89870 !important;
  background: #ede0c8 !important;
  opacity: 0.75 !important;
}
.callout[data-callout="campaign-done"] .callout-title {
  color: #9a7e5a !important;
}

/* ─── SIDEBAR ──────────────────────────────────────── */

.site-body-left-column {
  background-color: #e0d0b8 !important;
  border-right: 1px solid #c8ae90 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

.nav-view-outer,
.left-column,
.left-column-inner {
  background-color: #e0d0b8 !important;
}

.nav-file-title,
.nav-folder-title,
.tree-item-inner {
  color: #6b5440 !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.95em !important;
  padding: 4px 8px !important;
  border-radius: var(--radius) !important;
}

.tree-item-self:hover .tree-item-inner { color: #5a2a08 !important; }
.tree-item-self:hover { background: #e8d8c0 !important; }
.tree-item-self.is-active .tree-item-inner {
  color: #7a3b10 !important;
  background: #ede0c8 !important;
}

/* Site header */
.site-header {
  background: #d4bc98 !important;
  border-bottom: 1px solid #c8ae90 !important;
}
.site-header-text,
.site-header a,
.site-header-title,
.publish-header .site-name {
  font-family: 'Cinzel', serif !important;
  color: #3d1f0a !important;
  letter-spacing: 0.1em !important;
}

/* ─── SEARCH ───────────────────────────────────────── */

.search-input-wrapper input,
.search-input {
  background: #ede0c8 !important;
  color: #2a1f14 !important;
  border: 1px solid #c8ae90 !important;
  border-radius: var(--radius) !important;
  font-family: 'Crimson Pro', serif !important;
}

/* ─── CODE ─────────────────────────────────────────── */

code {
  background: #e8d8c0 !important;
  color: #7a3b10 !important;
  border-radius: 3px !important;
  padding: 0.1em 0.35em !important;
  font-size: 0.85em !important;
  border: 1px solid #c8ae90 !important;
}

pre {
  background: #e8d8c0 !important;
  border: 1px solid #c8ae90 !important;
  border-radius: var(--radius) !important;
  padding: 1em 1.25em !important;
}

pre code { background: transparent !important; border: none !important; }

/* ─── TAGS ─────────────────────────────────────────── */

.tag {
  font-family: 'Cinzel', serif !important;
  font-size: 0.72em !important;
  letter-spacing: 0.05em !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
}

.tag[href*="skt"], .tag[data-tag*="skt"] {
  background: rgba(52, 100, 180, 0.12) !important;
  color: #2a5a9a !important;
  border: 1px solid rgba(52, 100, 180, 0.35) !important;
}
.tag[href*="rage"], .tag[data-tag*="rage"] {
  background: rgba(150, 40, 20, 0.12) !important;
  color: #8b2010 !important;
  border: 1px solid rgba(150, 40, 20, 0.35) !important;
}
.tag[href*="dia"], .tag[data-tag*="dia"] {
  background: rgba(154, 117, 48, 0.12) !important;
  color: #7a5a20 !important;
  border: 1px solid rgba(154, 117, 48, 0.35) !important;
}
.tag[href*="dh"], .tag[data-tag*="dh"] {
  background: rgba(180, 100, 20, 0.12) !important;
  color: #8b5010 !important;
  border: 1px solid rgba(180, 100, 20, 0.35) !important;
}
.tag[href*="fey"], .tag[data-tag*="fey"] {
  background: rgba(100, 50, 150, 0.12) !important;
  color: #6a3090 !important;
  border: 1px solid rgba(100, 50, 150, 0.35) !important;
}
.tag[href*="pota"], .tag[data-tag*="pota"] {
  background: rgba(30, 120, 60, 0.12) !important;
  color: #1a7040 !important;
  border: 1px solid rgba(30, 120, 60, 0.30) !important;
}

/* ─── FRONTMATTER / PROPERTIES ─────────────────────── */

.metadata-container {
  background: #ede0c8 !important;
  border: 1px solid #c8ae90 !important;
  border-radius: var(--radius) !important;
  margin-bottom: 1.5em !important;
}
.metadata-property-key {
  color: #9a7e5a !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.78em !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.metadata-property-value,
.metadata-property-value * { color: #2a1f14 !important; }

/* ─── PORTRAIT TABLES ──────────────────────────────── */

/* Force all table images to consistent squares, cropped from top. */
td img {
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  width: 150px !important;
  min-width: 150px !important;
}

/* ─── GRAPH ────────────────────────────────────────── */

/* Hide the right sidebar graph and expand content to fill the space */
.site-body-right-column {
  display: none !important;
}

.site-body {
  width: 100% !important;
  max-width: 100% !important;
}

.site-body-center-column {
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
}

.publish-article {
  max-width: none !important;
  width: 100% !important;
  padding: 0 2em !important;
}

.graph-view.color-fill       { color: #9a7530 !important; }
.graph-view.color-fill-tag   { color: #7a3b10 !important; }
.graph-view.color-line       { color: #c8ae90 !important; }
.graph-view.color-text       { color: #6b5440 !important; }
.graph-view.color-background { color: #f4ede0 !important; }

/* ═══════════════════════════════════════════════════
   APP-SIBLING ACCENTS
   Layers the DM Tools app's signature cues — antique
   gold + crimson — on top of the parchment base, so the
   wiki and the app read as siblings without going dark.
   The parchment palette, fonts, tags, callouts, portrait
   tables and hidden graph above are all UNCHANGED.
   To return to the pure parchment look, delete this block
   (or restore publish.css.parchment-backup).
   ═══════════════════════════════════════════════════ */

body {
  --app-crimson: #8b2020;   /* app's crimson */
  --app-gold:    #b8923f;   /* app gold, deepened a touch so it reads on cream */
}

/* H1 — trade the flat brown rule for the app's gold gradient underline */
h1 {
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #b8923f, rgba(184,146,63,0.12)) 1 !important;
}

/* H2 — a small crimson tick before the heading, echoing the app's
   section labels (the little colored marker beside each panel title) */
.markdown-preview-view h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: -0.02em;
  background: #8b2020;
  border-radius: 2px;
}

/* Horizontal rule — gold gradient line beneath your ✦ flourish */
hr {
  background: linear-gradient(90deg, transparent, #b8923f 50%, transparent) !important;
}

/* Table headers — gold underline accent, like the app's stat-block headers */
th { border-bottom: 2px solid #b8923f !important; }

/* Active sidebar page — the app's crimson "active spine" on the left edge */
.tree-item-self.is-active {
  box-shadow: inset 3px 0 0 #8b2020 !important;
}

/* Site header — thin crimson underline, matching the app's header rule */
.site-header {
  box-shadow: inset 0 -2px 0 rgba(139,32,32,0.5) !important;
}

/* Links stay parchment-brown for readability, but the hover lights up in the
   app's gold + crimson so clicking feels like the app's interactive accents */
a:hover {
  color: #8b2020 !important;
  border-bottom-color: #b8923f !important;
}