/* =======================
   THE VIZIER: BASE THEME
   ======================= */

/* Variables */
:root {
  --vizier-ink:     #4B3A2F;
  --vizier-deep:    #1A1410;
  --vizier-gold:    #C5A87D;
  --vizier-bone:    #000000;
  --font-display:   'Cinzel', serif;
  --font-body:      'Inter', serif;
}

.font-display {
  font-family: var(--font-display);
}

.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Optional depth effect for the main content area */
main {
  background-color: rgba(255, 255, 255, 0.03); /* subtle overlay */
  margin: 2rem auto;
  max-width: 90%;
  border-radius: 8px;
}

/* Base Layout */
body {
  background-color: #f7f1e8;
  background-image: url('/images/parchment-bg.webp');
  background-repeat: repeat;
  background-size: 1024px 1024px;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-position: top center;
  color: var(--vizier-ink);
  font-family: var(--font-body);
  filter: brightness(0.96) contrast(0.98); /* soften the harshness */
}

body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/images/vellum-gloss.webp'); /* faint diagonal texture */
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

.divider {
  display: block !important;
  margin: 1rem auto !important;
  height: 48px !important;
  width: auto !important;
  max-width: 90% !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 0.95 !important;

  /* Depth: subtle drop shadow + inner glow blend */
  filter: 
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) /* general lift */
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05)) /* parchment ambient blending */
    brightness(1.02) saturate(1.1) contrast(1.1); /* richness boost */
}


.section-panel {
  background-color: rgba(247, 241, 232, 0.596); /* Aged parchment tone */
  border: 1px solid rgba(164, 127, 84, 0.25); /* Bronze-tinted ink */
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.03),      /* Inner vignette */
    inset 0 0 2px rgba(110, 85, 50, 0.05),   /* Faint border texture */
    0 6px 12px rgba(0, 0, 0, 0.08);          /* External lift shadow */
  backdrop-filter: blur(0.6px); /* Gentle glow, like vellum blur */
  border-radius: 12px;
  padding: 2.5rem;
  margin: 3rem auto;
  max-width: 80%;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.section-panel:hover {
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.04),
    inset 0 0 2px rgba(110, 85, 50, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px); /* Slight manuscript lift */
}

.pillar-text-column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: rgba(110, 85, 50, 0.15);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--vizier-ink);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

a:hover {
  color: var(--vizier-gold);
  text-decoration: underline;
}

/* Nav active text (placeholder class for future use) */
.nav-active {
  border-bottom: 2px solid var(--vizier-gold);
  color: var(--vizier-gold);
  font-family: var(--font-display);
}

/* Utility: bone background blocks */
.bg-bone {
  background-color: var(--vizier-bone);
}

/* Utility: gold text */
.text-gold {
  color: var(--vizier-gold);
}

/* === Vizier Styled Button === */
.vizier-button {
  display: inline-block;
  background-color: #e4d5b6; /* parchment-like soft gold */
  color: #4b3a2f; /* dark brown text */
  border: 2px solid #b8875b; /* warm gold frame */
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.vizier-button:hover {
  background-color: #f3e8cf;
  border-color: #a97448;
  transform: translateY(-1px);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
}


/* === Tailwind Typography Overrides for Blog Posts === */

/* Base body text color and layout */
.prose,
.prose-invert,
.prose p,
.prose-invert p,
.prose li,
.prose-invert li {
  color: #3c2e20; /* Dark brown for readability */
  line-height: 1.75;
}

/* Strong/bold emphasis text */
.prose strong,
.prose-invert strong {
  color: #270c00; /* Slightly deeper tone for emphasis */
  line-height: 1.75;
}

/* Optional: Slightly larger base font for blog text */
.prose,
.prose-invert {
  font-size: 1.10rem;
}

/* Horizontal divider (Markdown ---) */
.prose hr,
.prose-invert hr {
  border-color: #8B5E3C; /* Dark warm brown to match parchment aesthetic */
  border-width: 1px;
  opacity: 1; /* Ensure visibility */
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Blockquote styling — custom single left bar */
.prose blockquote,
.prose-invert blockquote {
  border-left: none; /* Remove Tailwind’s default border */
  position: relative;
  padding-left: 1rem;
  font-style: italic;
  color: #b8875b; /* Gold tone for quotes */
  margin: 2rem 0;
}

.prose blockquote::before,
.prose-invert blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #b8875b;
}

.court-seal {
  display: block;
  max-width: 100px;
  margin: 4rem 0 0 0;
  overflow: hidden;
  clear: both;
}

.court-seal img {
  float: left;
  margin: 0 1rem 0 0;
  opacity: 0.9;
}