/* Vanyas Quest D&D Theme Stylesheet - Mobile-First Responsive */

/* Import medieval/fantasy fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* =================================================================
   CSS CUSTOM PROPERTIES (CSS VARIABLES)
   ================================================================= */

/* Default Parchment Color Scheme */
body.default {
  --parchment-light: #f4e4bc;
  --parchment-medium: #e8d5a3;
  --parchment-dark: #d4b896;
  --brown-light: #8b6914;
  --brown-medium: #6b4e08;
  --brown-dark: #4a3506;
  --accent-gold: #d4af37;
  --text-dark: #2c1810;
  --text-medium: #5d4037;
  --shadow-color: rgba(139, 105, 20, 0.3);
}

/* Dark Medieval Color Scheme */
body.dark {
  --parchment-light: #2c2416;
  --parchment-medium: #3d3220;
  --parchment-dark: #4a3a26;
  --brown-light: #d4af37;
  --brown-medium: #b8941f;
  --brown-dark: #9c7f1a;
  --accent-gold: #f4e4bc;
  --text-dark: #e8d5a3;
  --text-medium: #d4b896;
  --shadow-color: rgba(212, 175, 55, 0.3);
}

/* Light Scroll Color Scheme */
body.light {
  --parchment-light: #faf6e8;
  --parchment-medium: #f0e8d0;
  --parchment-dark: #e6dab8;
  --brown-light: #a67c00;
  --brown-medium: #8b6800;
  --brown-dark: #704000;
  --accent-gold: #cc9900;
  --text-dark: #3d2f1a;
  --text-medium: #5a4328;
  --shadow-color: rgba(166, 124, 0, 0.2);
}

/* Custom Color Scheme */
body.custom {
  --parchment-light: var(--custom-background);
  --parchment-medium: var(--custom-background);
  --parchment-dark: var(--custom-background);
  --brown-light: var(--custom-primary);
  --brown-medium: var(--custom-primary);
  --brown-dark: var(--custom-primary);
  --accent-gold: var(--custom-primary);
  --text-dark: var(--custom-text);
  --text-medium: var(--custom-text);
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* =================================================================
   BASE STYLES - MOBILE FIRST
   ================================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Crimson Text', serif;
  background-color: var(--parchment-light);
  background-image: 
    radial-gradient(circle at 25% 25%, var(--parchment-medium) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, var(--parchment-dark) 0%, transparent 50%);
  color: var(--text-dark);
  line-height: 1.6;
  min-height: 100vh;
  transition: all 0.3s ease;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* =================================================================
   FONT FAMILY OPTIONS
   ================================================================= */

body.medieval {
  font-family: 'Crimson Text', serif;
}
body.medieval h1, body.medieval h2, body.medieval h3, body.medieval h4, body.medieval h5, body.medieval h6 {
  font-family: 'Cinzel', serif;
}

body.fantasy {
  font-family: 'Spectral', serif;
}
body.fantasy h1, body.fantasy h2, body.fantasy h3, body.fantasy h4, body.fantasy h5, body.fantasy h6 {
  font-family: 'Uncial Antiqua', serif;
}

body.modern {
  font-family: 'Source Serif 4', serif;
}
body.modern h1, body.modern h2, body.modern h3, body.modern h4, body.modern h5, body.modern h6 {
  font-family: 'Inter', sans-serif;
}

body.classic {
  font-family: 'Lora', serif;
}
body.classic h1, body.classic h2, body.classic h3, body.classic h4, body.classic h5, body.classic h6 {
  font-family: 'Playfair Display', serif;
}

/* =================================================================
   TYPOGRAPHY - MOBILE FIRST
   ================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  color: var(--brown-dark);
  margin-bottom: 1rem;
  text-shadow: 1px 1px 2px var(--shadow-color);
  line-height: 1.2;
}

/* Mobile-first heading sizes */
h1 { 
  font-size: 1.8rem; 
  font-weight: 700; 
}
h2 { 
  font-size: 1.5rem; 
  font-weight: 600; 
}
h3 { 
  font-size: 1.3rem; 
  font-weight: 500; 
}
h4 { 
  font-size: 1.1rem; 
  font-weight: 500; 
}

p {
  margin-bottom: 1rem;
  color: var(--text-medium);
}

a {
  color: var(--brown-medium);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-gold);
  text-shadow: 1px 1px 2px var(--shadow-color);
}

/* =================================================================
   HEADER AND COVER IMAGE - MOBILE FIRST
   ================================================================= */

.header {
  background: var(--brown-dark);
  box-shadow: 0 4px 8px var(--shadow-color);
  margin-bottom: 1rem;
}

.cover-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.cover-image {
  width: 100%;
  height: auto;
  max-height: 250px; /* Smaller on mobile */
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.3s ease;
  background: var(--parchment-light);
}

.site-title {
  color: var(--parchment-light);
  text-align: center;
  padding: 1.5rem 1rem;
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.8rem; /* Smaller on mobile */
  text-shadow: 2px 2px 4px var(--shadow-color);
  line-height: 1.2;
}

/* =================================================================
   COVER TEXT OVERLAY - SIMPLIFIED FOR MOBILE
   ================================================================= */

.cover-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  color: #d4af37;
  text-align: center;
  max-width: 90%;
  width: 90%;
}

/* Mobile-first cover text sizes */
.cover-text-overlay.size-small {
  font-size: 1.2rem;
}

.cover-text-overlay.size-medium {
  font-size: 1.6rem;
}

.cover-text-overlay.size-large {
  font-size: 2rem;
}

.cover-text-overlay.size-huge {
  font-size: 2.4rem;
}

/* Simplified mobile positioning - all center on mobile */
.cover-text-overlay[class*="pos-"] {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  max-width: 85% !important;
}

/* Cover text styles */
.cover-text-overlay.style-fantasy {
  color: #d4af37;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(212, 175, 55, 0.4);
}

.cover-text-overlay.style-fire {
  background: linear-gradient(45deg, #d4af37 0%, #ff6b35 50%, #cc3300 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.cover-text-overlay.style-bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #b8860b 50%, #8b6914 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.cover-text-overlay.style-mystical {
  color: #e6e6fa;
  text-shadow: 
    0 0 8px #8a2be2,
    0 0 12px #4169e1,
    2px 2px 4px rgba(0, 0, 0, 0.8);
  animation: mysticalPulse 3s ease-in-out infinite alternate;
}

@keyframes mysticalPulse {
  0% {
    text-shadow: 
      0 0 8px #8a2be2,
      0 0 12px #4169e1,
      2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  100% {
    text-shadow: 
      0 0 12px #8a2be2,
      0 0 18px #4169e1,
      2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

.cover-text-overlay.style-stone {
  color: #e8e8e8;
  text-shadow: 
    1px 1px 0px #888,
    2px 2px 4px rgba(0, 0, 0, 0.8);
}

.cover-text-overlay.style-dark {
  color: #2c1810;
  text-shadow: 
    0 0 6px #cc0000,
    0 0 10px #990000,
    2px 2px 4px rgba(0, 0, 0, 0.9);
}

.cover-text-overlay.style-elegant {
  color: #ffffff;
  text-shadow: 
    1px 1px 3px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.6);
}

.cover-text-subtitle {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-family: 'Crimson Text', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  color: #e8d5a3;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
  opacity: 0.9;
  text-align: center;
  max-width: 80%;
}

/* Mobile override - center all subtitles on mobile */
@media (max-width: 767px) {
  .cover-text-subtitle {
    top: 65% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 80% !important;
  }
}

/* =================================================================
   NAVIGATION - MOBILE FIRST
   ================================================================= */

.navbar {
  padding: 0.5rem 0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Default navigation background - leather style */
.navbar,
.navbar.leather {
  background: linear-gradient(180deg, 
    #8b6914 0%,
    #6b5016 25%,
    #654321 75%,
    #4a3318 100%
  );
  box-shadow: 
    0 2px 6px rgba(74, 51, 24, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(74, 51, 24, 0.6);
}

/* Navigation background variations */
.navbar.gradient {
  background: linear-gradient(135deg, var(--brown-medium) 0%, var(--brown-dark) 100%);
}

.navbar.parchment {
  background: linear-gradient(135deg, var(--parchment-medium) 0%, var(--parchment-light) 100%);
}

.navbar.wood {
  background: linear-gradient(0deg, #2c1f10 0%, #3d2914 50%, #2c1f10 100%);
}

.navbar.stone {
  background: linear-gradient(135deg, #8a8a8a 0%, #6a6a6a 50%, #5a5a5a 100%);
}

.navbar.metal {
  background: linear-gradient(135deg, #cd7f32 0%, #b8860b 50%, #8b6914 100%);
}

.navbar.ornate {
  background: linear-gradient(135deg, var(--brown-medium) 0%, var(--brown-dark) 100%);
}

/* Navigation borders */
.navbar.border-simple {
  border-bottom: 1px solid var(--accent-gold);
}

.navbar.border-carved {
  border-bottom: 2px solid var(--accent-gold);
}

.navbar.border-ornate {
  border-bottom: 3px solid var(--accent-gold);
}

.navbar.border-riveted {
  border-bottom: 1px solid var(--brown-dark);
}

/* Navigation glow effect */
.navbar.glow-enabled {
  animation: modernGlow 4s ease-in-out infinite alternate;
}

@keyframes modernGlow {
  from {
    box-shadow: 0 2px 6px rgba(74, 51, 24, 0.3);
  }
  to {
    box-shadow: 0 2px 6px rgba(74, 51, 24, 0.3), 0 0 12px rgba(212, 175, 55, 0.2);
  }
}

/* Navigation list - mobile first */
.navbar ul {
  list-style: none;
  display: flex;
  flex-direction: column; 
/* Stack vertically on mobile */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}

.navbar li {
  margin: 0;
  width: 100%;
  text-align: center;
}

/* Mobile-first navigation links - simplified typography */
.navbar a {
  color: #f4e4bc;
  font-family: 'Cinzel', serif;
  font-weight: 600; /* Less heavy than desktop */
  font-size: 1rem; /* Reasonable mobile size */
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Less spacing on mobile */
  padding: 0.8rem 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
  position: relative;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.navbar li:last-child a {
  border-bottom: none;
}

.navbar a:hover,
.navbar a.active {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.navbar a.active {
  background: rgba(212, 175, 55, 0.15);
  font-weight: 700;
}

/* =================================================================
   LAYOUT CONTAINERS - MOBILE FIRST
   ================================================================= */

.container {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 100%;
}

/* Content area */
.content {
  background: rgba(244, 228, 188, 0.9);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow-color);
  border: 2px solid var(--brown-light);
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Adjust content background for color schemes */
body.dark .content {
  background: rgba(44, 36, 22, 0.9);
}

body.light .content {
  background: rgba(250, 246, 232, 0.9);
}

.content::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--accent-gold), var(--brown-light));
  border-radius: 8px;
  z-index: -1;
}

/* =================================================================
   GRID SYSTEM - MOBILE FIRST
   ================================================================= */

.grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 1.5rem;
}

/* Grid gap options */
.grid.compact { gap: 1rem; }
.grid.normal { gap: 1.5rem; }
.grid.spacious { gap: 2rem; }

/* =================================================================
   SIDEBAR - MOBILE FIRST
   ================================================================= */

.sidebar {
  background: rgba(212, 185, 150, 0.9);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 8px var(--shadow-color);
  border: 1px solid var(--brown-light);
}

/* Adjust sidebar background for color schemes */
body.dark .sidebar {
  background: rgba(61, 50, 32, 0.9);
}

body.light .sidebar {
  background: rgba(230, 218, 184, 0.9);
}

.sidebar h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8b6914;
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brown-medium);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* =================================================================
   D&D ELEMENTS - MOBILE OPTIMIZED
   ================================================================= */

/* Character Stats */
.character-stat {
  display: inline-block;
  background: linear-gradient(135deg, #cd7f32 0%, #b8860b 50%, #8b6914 100%);
  color: #2c1810;
  padding: 0.5rem;
  margin: 0.25rem;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  text-align: center;
  line-height: 2rem;
  font-weight: 800;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    0 3px 6px rgba(139, 105, 20, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 223, 0, 0.4);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.character-stat:hover {
  transform: scale(1.05);
  box-shadow: 
    0 4px 8px rgba(139, 105, 20, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.character-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(205, 127, 50, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(205, 127, 50, 0.3);
}

/* Dice Roll Elements */
.dice-roll {
  background: linear-gradient(135deg, #cd7f32 0%, #b8860b 50%, #8b6914 100%);
  color: #2c1810;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    0 2px 4px rgba(139, 105, 20, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 223, 0, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  min-width: 3rem;
  text-align: center;
  display: inline-block;
}

.dice-roll:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 3px 6px rgba(139, 105, 20, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Dice animations - only when enabled */
body[data-dice-animations="enabled"] .dice-roll:hover {
  transform: rotate(5deg) scale(1.05);
}

body[data-dice-animations="enabled"] .dice-roll.rolling {
  animation: diceRoll 0.6s ease-in-out;
}

@keyframes diceRoll {
  0% { 
    transform: rotate(0deg) scale(1); 
    opacity: 1;
  }
  25% { 
    transform: rotate(90deg) scale(1.1); 
    opacity: 0.9;
  }
  50% { 
    transform: rotate(180deg) scale(0.9); 
    opacity: 0.8;
  }
  75% { 
    transform: rotate(270deg) scale(1.1); 
    opacity: 0.9;
  }
  100% { 
    transform: rotate(360deg) scale(1); 
    opacity: 1;
  }
}

.dice-set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(205, 127, 50, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(205, 127, 50, 0.3);
  justify-content: center;
}

/* =================================================================
   BUTTONS AND FORM ELEMENTS
   ================================================================= */

.btn {
  display: inline-block;
  background: var(--brown-medium);
  color: var(--parchment-light);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover {
  background: var(--accent-gold);
  color: var(--brown-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

/* =================================================================
   FOOTER
   ================================================================= */

.footer {
  background: var(--brown-dark);
  color: var(--parchment-light);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  box-shadow: 0 -4px 8px var(--shadow-color);
}

.footer-links {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.footer-links a {
  color: var(--parchment-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent-gold);
}

/* =================================================================
   RESPONSIVE BREAKPOINTS - TABLET AND DESKTOP
   ================================================================= */

/* Small tablets and large phones (576px and up) */
@media (min-width: 576px) {
  .cover-image {
    max-height: 300px;
  }
  
  .site-title {
    font-size: 2.2rem;
  }
  
  .cover-text-overlay.size-large {
    font-size: 2.5rem;
  }
  
  .cover-text-overlay.size-huge {
    font-size: 3rem;
  }
  
  .container {
    padding: 0 1.5rem;
  }
  
  .content, .sidebar {
    padding: 2rem;
  }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
  /* Typography scaling */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  
  .site-title {
    font-size: 3rem;
    padding: 2rem 0;
  }
  
  /* Cover image */
  .cover-image {
    max-height: 500px;
  }
  
  /* Cover text positioning - restore desktop positioning */
  .cover-text-overlay.pos-center-left {
    top: 50% !important;
    left: 25% !important;
    transform: translate(-50%, -50%) !important;
    text-align: right !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-center-right {
    top: 50% !important;
    left: 75% !important;
    transform: translate(-50%, -50%) !important;
    text-align: left !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-upper-center-left {
    top: 30% !important;
    left: 25% !important;
    transform: translate(-50%, -50%) !important;
    text-align: right !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-upper-center-right {
    top: 30% !important;
    left: 75% !important;
    transform: translate(-50%, -50%) !important;
    text-align: left !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-lower-center-left {
    top: 70% !important;
    left: 25% !important;
    transform: translate(-50%, -50%) !important;
    text-align: right !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-lower-center-right {
    top: 70% !important;
    left: 75% !important;
    transform: translate(-50%, -50%) !important;
    text-align: left !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-narrow-left {
    top: 50% !important;
    left: 16.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-wide-right {
    top: 50% !important;
    left: 66.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-wide-left {
    top: 50% !important;
    left: 33.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-narrow-right {
    top: 50% !important;
    left: 83.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-upper-narrow-left {
    top: 30% !important;
    left: 16.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-upper-wide-right {
    top: 30% !important;
    left: 66.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-lower-narrow-left {
    top: 70% !important;
    left: 16.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-lower-wide-right {
    top: 70% !important;
    left: 66.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-upper-wide-left {
    top: 30% !important;
    left: 33.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-upper-narrow-right {
    top: 30% !important;
    left: 83.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-lower-wide-left {
    top: 70% !important;
    left: 33.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-lower-narrow-right {
    top: 70% !important;
    left: 83.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  /* Cover text sizes for tablet+ */
  .cover-text-overlay.size-small {
    font-size: 2rem;
  }
  
  .cover-text-overlay.size-medium {
    font-size: 3.5rem;
  }
  
  .cover-text-overlay.size-large {
    font-size: 5rem;
  }
  
  .cover-text-overlay.size-huge {
    font-size: 6.5rem;
  }
  
  .cover-text-subtitle {
    font-size: 1.5rem;
  }
  
  /* Complete subtitle positioning to match all main text positions */
  .cover-text-overlay.pos-center + .cover-text-subtitle {
    top: 65% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 85% !important;
  }
  
  .cover-text-overlay.pos-center-left + .cover-text-subtitle {
    top: 65% !important;
    left: 25% !important;
    transform: translate(-50%, -50%) !important;
    text-align: right !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-center-right + .cover-text-subtitle {
    top: 65% !important;
    left: 75% !important;
    transform: translate(-50%, -50%) !important;
    text-align: left !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-upper-center-left + .cover-text-subtitle {
    top: 45% !important;
    left: 25% !important;
    transform: translate(-50%, -50%) !important;
    text-align: right !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-upper-center-right + .cover-text-subtitle {
    top: 45% !important;
    left: 75% !important;
    transform: translate(-50%, -50%) !important;
    text-align: left !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-lower-center-left + .cover-text-subtitle {
    top: 85% !important;
    left: 25% !important;
    transform: translate(-50%, -50%) !important;
    text-align: right !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-lower-center-right + .cover-text-subtitle {
    top: 85% !important;
    left: 75% !important;
    transform: translate(-50%, -50%) !important;
    text-align: left !important;
    max-width: 45% !important;
  }
  
  .cover-text-overlay.pos-narrow-left + .cover-text-subtitle {
    top: 65% !important;
    left: 16.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-wide-right + .cover-text-subtitle {
    top: 65% !important;
    left: 66.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-wide-left + .cover-text-subtitle {
    top: 65% !important;
    left: 33.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-narrow-right + .cover-text-subtitle {
    top: 65% !important;
    left: 83.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-upper-narrow-left + .cover-text-subtitle {
    top: 45% !important;
    left: 16.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-upper-wide-right + .cover-text-subtitle {
    top: 45% !important;
    left: 66.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-lower-narrow-left + .cover-text-subtitle {
    top: 85% !important;
    left: 16.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-lower-wide-right + .cover-text-subtitle {
    top: 85% !important;
    left: 66.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-upper-wide-left + .cover-text-subtitle {
    top: 45% !important;
    left: 33.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-upper-narrow-right + .cover-text-subtitle {
    top: 45% !important;
    left: 83.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  .cover-text-overlay.pos-lower-wide-left + .cover-text-subtitle {
    top: 85% !important;
    left: 33.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 60% !important;
  }
  
  .cover-text-overlay.pos-lower-narrow-right + .cover-text-subtitle {
    top: 85% !important;
    left: 83.5% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    max-width: 30% !important;
  }
  
  /* Navigation - horizontal layout */
  .navbar ul {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .navbar li {
    width: auto;
  }
  
  .navbar a {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 0.5rem 1.5rem;
    border-bottom: none;
  }
  
  /* Add separators between nav items */
  .navbar li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 50%;
    background: linear-gradient(to bottom, 
      transparent, 
      rgba(212, 175, 55, 0.4), 
      transparent);
    transform: translateY(-50%);
    opacity: 0.6;
  }
  
  /* Grid system */
  .grid.two-columns {
    grid-template-columns: 2fr 1fr;
  }
  
  .grid.sidebar-left.two-columns {
    grid-template-columns: 1fr 2fr;
  }
  
  /* Container widths */
  .container.narrow { max-width: 800px; }
  .container.normal { max-width: 1200px; }
  .container.wide { max-width: 1400px; }
  .container.full { max-width: none; }
  
  /* Character stats larger */
  .character-stat {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 2.3rem;
    font-size: 1.1rem;
  }
  
  /* Footer links horizontal */
  .footer-links {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }
}

/* Large tablets and small desktops (992px and up) */
@media (min-width: 992px) {
  .cover-image {
    max-height: 600px;
  }
  
  .container {
    padding: 0 2rem;
  }
  
  .header {
    margin-bottom: 2rem;
  }
  
  .grid {
    gap: 2rem;
  }
  
  .grid.spacious {
    gap: 3rem;
  }
}

/* Large desktops (1200px and up) */
@media (min-width: 1200px) {
  .cover-image {
    max-height: 700px;
  }
  
  .cover-image.full {
    max-height: 100vh;
    min-height: 60vh;
  }
  /* Simplified, stable hover effects */
  .navbar a {
    position: relative;
    overflow: hidden;
  }
  
  .navbar a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #d4af37;
    transition: width 0.3s ease;
    pointer-events: none; /* Prevent hover conflicts */
  }
  
  .navbar a:hover::after {
    width: 100%;
  }
  
  .navbar a.active::after {
    width: 100%;
    background: #d4af37;
  }
  
  /* Prevent active link hover conflicts */
  .navbar a.active:hover {
    color: #d4af37; /* Keep same color as active state */
    background: rgba(212, 175, 55, 0.15); /* Same background as active */
  }
}


 
/* =================================================================
   SPECIAL CONTENT STYLING
   ================================================================= */

.spell-block {
  background: rgba(139, 105, 20, 0.1);
  border-left: 4px solid var(--brown-medium);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}

/* House rules content styling */
.house-rules-content h1,
.content.house-rules h1 {
  border-bottom: 3px solid var(--accent-gold);
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.house-rules-content h2,
.content.house-rules h2 {
  border-bottom: 2px solid var(--brown-medium);
  padding-bottom: 0.3rem;
  margin: 1.5rem 0 1rem 0;
}

.house-rules-content blockquote,
.content.house-rules blockquote {
  background: rgba(139, 105, 20, 0.15);
  border: 2px solid var(--brown-medium);
  border-left: 6px solid var(--accent-gold);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-style: italic;
  box-shadow: 0 3px 8px var(--shadow-color);
}

.house-rules-content hr,
.content.house-rules hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, 
    transparent,
    var(--brown-medium) 20%,
    var(--accent-gold) 50%,
    var(--brown-medium) 80%,
    transparent);
  margin: 2.5rem 0;
  border-radius: 2px;
  box-shadow: 0 1px 3px var(--shadow-color);
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {
  body {
    background: white;
    color: black;
  }
  
  .navbar, .footer {
    display: none;
  }
  
  .cover-image {
    max-height: 300px;
  }
  
  .content, .sidebar {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}
       /* Import fonts only if not already loaded */
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
        
        /* SCOPED STYLES - Only affect the safety questionnaire */
        .safety-questionnaire {
            font-family: 'Crimson Text', serif;
            color: var(--text-dark, #2c1810);
            line-height: 1.6;
        }
        
        .safety-questionnaire * {
            box-sizing: border-box;
        }
        
       .safety-questionnaire .questionnaire-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }
     .safety-questionnaire .questionnaire-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .safety-questionnaire .questionnaire-header::after {
            content: '⚔️ ✦ ⚔️';
            display: block;
            font-size: 1.5rem;
            margin-top: 1rem;
            opacity: 0.7;
            color: var(--brown-medium, #6b4e08);
        }
        
        .safety-questionnaire .questionnaire-title {
            font-family: 'Cinzel', serif;
            font-size: 3rem;
            font-weight: 700;
            color: var(--brown-dark, #4a3506);
            text-shadow: 2px 2px 4px var(--shadow-color, rgba(139, 105, 20, 0.3));
            margin-bottom: 0.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .safety-questionnaire .questionnaire-subtitle {
            font-size: 1.2rem;
            color: var(--brown-medium, #6b4e08);
            font-style: italic;
        }
        
        /* Content sections matching your .content class */
        .safety-questionnaire .section {
            background: rgba(244, 228, 188, 0.9);
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px var(--shadow-color, rgba(139, 105, 20, 0.3));
            border: 2px solid var(--brown-light, #8b6914);
            position: relative;
        }
        
        .safety-questionnaire .section::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--accent-gold, #d4af37), var(--brown-light, #8b6914));
            border-radius: 8px;
            z-index: -1;
        }
        
        .safety-questionnaire h2 {
            font-family: 'Cinzel', serif;
            font-size: 2rem;
            color: var(--brown-dark, #4a3506);
            margin-bottom: 1.5rem;
            text-align: center;
            position: relative;
            text-shadow: 1px 1px 2px var(--shadow-color, rgba(139, 105, 20, 0.3));
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .safety-questionnaire h2::after {
            content: '';
            display: block;
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-gold, #d4af37), transparent);
            margin: 0.5rem auto;
        }
        
        .safety-questionnaire h3 {
            font-family: 'Cinzel', serif;
            font-size: 1.3rem;
            color: var(--brown-medium, #6b4e08);
            margin: 1.5rem 0 1rem 0;
            position: relative;
            padding-left: 1rem;
            text-shadow: 1px 1px 1px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire h3::before {
            content: '◆';
            position: absolute;
            left: 0;
            color: var(--brown-dark, #4a3506);
        }
        
        .safety-questionnaire h4 {
            font-family: 'Cinzel', serif;
            color: var(--brown-dark, #4a3506);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .safety-questionnaire .content-grid {
            display: grid;
            gap: 1.5rem;
        }
        
        .safety-questionnaire .content-item {
            background: rgba(139, 105, 20, 0.1);
            border: 1px solid var(--brown-light, #8b6914);
            border-radius: 8px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .content-item:hover {
            background: rgba(139, 105, 20, 0.15);
            box-shadow: 0 4px 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
            transform: translateY(-2px);
        }
        
        .safety-questionnaire ul {
            list-style: none;
            padding-left: 1rem;
        }
        
        .safety-questionnaire li {
            margin-bottom: 0.5rem;
            position: relative;
            padding-left: 1.5rem;
            color: var(--text-medium, #5d4037);
        }
        
        .safety-questionnaire li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: var(--brown-medium, #6b4e08);
            font-weight: bold;
        }
        
        /* Form styling to match your theme */
        .safety-questionnaire .form-section {
            background: rgba(244, 228, 188, 0.9);
            border: 2px solid var(--brown-light, #8b6914);
            border-radius: 8px;
            padding: 2rem;
            margin-top: 2rem;
            box-shadow: 0 4px 12px var(--shadow-color, rgba(139, 105, 20, 0.3));
            position: relative;
        }
        
        .safety-questionnaire .form-section::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--accent-gold, #d4af37), var(--brown-light, #8b6914));
            border-radius: 8px;
            z-index: -1;
        }
        
        .safety-questionnaire .form-group {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: rgba(139, 105, 20, 0.1);
            border-radius: 8px;
            border-left: 4px solid var(--accent-gold, #d4af37);
            box-shadow: 0 2px 4px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-dark, #2c1810);
            font-size: 1.1rem;
            font-family: 'Cinzel', serif;
        }
        
        /* Input styling to match your theme */
        .safety-questionnaire input[type="range"] {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: var(--brown-light, #8b6914);
            outline: none;
            margin: 1rem 0;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }
        
        .safety-questionnaire input[type="range"]:hover {
            opacity: 1;
        }
        
        .safety-questionnaire input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-gold, #d4af37);
            cursor: pointer;
            box-shadow: 0 2px 6px var(--shadow-color, rgba(139, 105, 20, 0.3));
            border: 2px solid var(--brown-dark, #4a3506);
        }
        
        .safety-questionnaire input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-gold, #d4af37);
            cursor: pointer;
            border: 2px solid var(--brown-dark, #4a3506);
            box-shadow: 0 2px 6px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .slider-value {
            display: inline-block;
            background: var(--brown-medium, #6b4e08);
            color: var(--parchment-light, #f4e4bc);
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-weight: bold;
            min-width: 30px;
            text-align: center;
            font-family: 'Cinzel', serif;
            box-shadow: 0 2px 4px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire input[type="text"], 
        .safety-questionnaire textarea, 
        .safety-questionnaire select {
            width: 100%;
            padding: 0.8rem;
            background: rgba(244, 228, 188, 0.7);
            border: 2px solid var(--brown-light, #8b6914);
            border-radius: 5px;
            color: var(--text-dark, #2c1810);
            font-family: 'Crimson Text', serif;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .safety-questionnaire input[type="text"]:focus, 
        .safety-questionnaire textarea:focus, 
        .safety-questionnaire select:focus {
            outline: none;
            border-color: var(--accent-gold, #d4af37);
            box-shadow: 0 0 10px var(--shadow-color, rgba(139, 105, 20, 0.3));
            background: rgba(244, 228, 188, 0.9);
        }
        
        .safety-questionnaire textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .safety-questionnaire .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            margin-top: 1rem;
        }
        
        .safety-questionnaire .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.5rem;
            border-radius: 5px;
            transition: background 0.3s ease;
        }
        
        .safety-questionnaire .checkbox-item:hover {
            background: rgba(139, 105, 20, 0.1);
        }
        
        .safety-questionnaire input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-gold, #d4af37);
        }
        
        .safety-questionnaire .radio-group {
            display: flex;
            gap: 2rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }
        
        .safety-questionnaire .radio-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .safety-questionnaire input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-gold, #d4af37);
        }
        
        /* Button styling to match your theme */
        .safety-questionnaire .submit-section {
            text-align: center;
            margin-top: 3rem;
            padding: 2rem;
        }
        
        .safety-questionnaire .submit-btn {
            background: var(--brown-medium, #6b4e08);
            color: var(--parchment-light, #f4e4bc);
            border: none;
            padding: 1rem 3rem;
            font-size: 1.2rem;
            font-family: 'Cinzel', serif;
            font-weight: 500;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .safety-questionnaire .submit-btn:hover {
            background: var(--accent-gold, #d4af37);
            color: var(--brown-dark, #4a3506);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .checklist-grid {
            display: grid;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .safety-questionnaire .checklist-item {
            background: rgba(139, 105, 20, 0.1);
            border: 1px solid var(--brown-light, #8b6914);
            border-radius: 8px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .checklist-item:hover {
            background: rgba(139, 105, 20, 0.15);
            box-shadow: 0 4px 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
            transform: translateY(-1px);
        }
        
        .safety-questionnaire .topic-header {
            font-family: 'Cinzel', serif;
            color: var(--brown-dark, #4a3506);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.1rem;
            text-shadow: 1px 1px 1px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .radio-options {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        
        .safety-questionnaire .radio-options .radio-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(244, 228, 188, 0.5);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            border: 1px solid var(--brown-light, #8b6914);
            transition: all 0.3s ease;
        }
        
        .safety-questionnaire .radio-options .radio-item:hover {
            background: rgba(212, 175, 55, 0.2);
            border-color: var(--accent-gold, #d4af37);
        }
        
        .safety-questionnaire .radio-options .radio-item input[type="radio"]:checked + label {
            color: var(--brown-dark, #4a3506);
            font-weight: bold;
        }
        
        .safety-questionnaire .notes-input {
            width: 100%;
            padding: 0.8rem;
            background: rgba(244, 228, 188, 0.7);
            border: 1px solid var(--brown-light, #8b6914);
            border-radius: 5px;
            color: var(--text-dark, #2c1810);
            font-family: 'Crimson Text', serif;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        
        .safety-questionnaire .notes-input:focus {
            outline: none;
            border-color: var(--accent-gold, #d4af37);
            box-shadow: 0 0 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
            background: rgba(244, 228, 188, 0.9);
        }
        
        .safety-questionnaire .notes-input::placeholder {
            color: var(--brown-light, #8b6914);
            font-style: italic;
        }
        
        .safety-questionnaire .notes-input:focus::placeholder {
            opacity: 0;
        }
        
        /* Special alert boxes matching your callout style */
        .safety-questionnaire .warning-box {
            background: rgba(139, 69, 19, 0.15);
            border: 2px solid var(--brown-medium, #6b4e08);
            border-left: 6px solid #cc3300;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
            box-shadow: 0 3px 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .info-box {
            background: rgba(139, 105, 20, 0.15);
            border: 2px solid var(--brown-medium, #6b4e08);
            border-left: 6px solid #228b22;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
            box-shadow: 0 3px 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .warning-box h3,
        .safety-questionnaire .info-box h3 {
            margin-top: 0;
            color: var(--brown-dark, #4a3506);
            border-bottom: 2px solid var(--accent-gold, #d4af37);
            padding-bottom: 0.3rem;
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .safety-questionnaire .questionnaire-container {
                padding: 1rem;
            }
            
            .safety-questionnaire .questionnaire-title {
                font-size: 2rem;
            }
            
            .safety-questionnaire .section, 
            .safety-questionnaire .form-section {
                padding: 1.5rem;
            }
            
            .safety-questionnaire .radio-group {
                flex-direction: column;
                gap: 1rem;
            }
            
            .safety-questionnaire .radio-options {
                flex-direction: column;
                gap: 0.8rem;
            }
        }
        
        /* Additional medieval touches */
        .safety-questionnaire .section:hover,
        .safety-questionnaire .form-section:hover {
            box-shadow: 0 6px 16px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        .safety-questionnaire .form-group:hover {
            box-shadow: 0 4px 8px var(--shadow-color, rgba(139, 105, 20, 0.3));
        }
        
        /* Add decorative elements */
        .safety-questionnaire .questionnaire-title::before,
        .safety-questionnaire .questionnaire-title::after {
            content: '⚜';
            color: var(--accent-gold, #d4af37);
            margin: 0 1rem;
            font-size: 0.8em;
        }
/* =================================================================
   ADDITIONAL CONTENT FEATURES - APPEND TO YOUR EXISTING CSS
   ================================================================= */

/* =================================================================
   BREADCRUMBS
   ================================================================= */

.breadcrumbs {
  background: rgba(139, 105, 20, 0.1);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border-left: 4px solid var(--accent-gold);
  font-size: 0.9rem;
}

.breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  color: var(--text-medium);
}

.breadcrumbs li:not(:last-child)::after {
  content: '⟩';
  margin-left: 0.5rem;
  color: var(--brown-medium);
  font-weight: bold;
}

.breadcrumbs a {
  color: var(--brown-medium);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumbs a:hover {
  color: var(--accent-gold);
}

.breadcrumbs .current {
  color: var(--text-dark);
  font-weight: 600;
}

/* =================================================================
   READING TIME & META INFO
   ================================================================= */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(139, 105, 20, 0.1);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text-medium);
}

.reading-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brown-medium);
  font-weight: 500;
}

.reading-time::before {
  content: '📖';
  font-size: 1rem;
}

.post-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brown-medium);
}

.post-date::before {
  content: '📅';
  font-size: 1rem;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brown-medium);
}

.post-author::before {
  content: '✍️';
  font-size: 1rem;
}

/* =================================================================
   SOCIAL SHARING BUTTONS
   ================================================================= */

.social-sharing {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(139, 105, 20, 0.1);
  border-radius: 8px;
  border: 1px solid var(--brown-light);
  text-align: center;
}

.social-sharing h4 {
  margin-bottom: 1rem;
  color: var(--brown-dark);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.social-btn.twitter {
  background: #1da1f2;
  color: white;
}

.social-btn.facebook {
  background: #4267b2;
  color: white;
}

.social-btn.reddit {
  background: #ff4500;
  color: white;
}

.social-btn.email {
  background: var(--brown-medium);
  color: var(--parchment-light);
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
  border-color: var(--accent-gold);
}

/* =================================================================
   CONTENT BLOCKS & CALLOUTS
   ================================================================= */

.callout {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--brown-medium);
  background: rgba(139, 105, 20, 0.1);
  box-shadow: 0 2px 6px var(--shadow-color);
  position: relative;
}

.callout.info {
  border-left-color: #3498db;
  background: rgba(52, 152, 219, 0.1);
}

.callout.warning {
  border-left-color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
}

.callout.danger {
  border-left-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.callout.success {
  border-left-color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
}

.callout-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--brown-dark);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.callout-icon {
  font-size: 1.2rem;
}

.callout.info .callout-icon::before { content: 'ℹ️'; }
.callout.warning .callout-icon::before { content: '⚠️'; }
.callout.danger .callout-icon::before { content: '🚨'; }
.callout.success .callout-icon::before { content: '✅'; }

/* =================================================================
   ENHANCED TABLES
   ================================================================= */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: rgba(244, 228, 188, 0.8);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px var(--shadow-color);
  border: 2px solid var(--brown-medium);
}

body.dark table {
  background: rgba(44, 36, 22, 0.8);
}

body.light table {
  background: rgba(250, 246, 232, 0.8);
}

th, td {
  border: 1px solid var(--brown-light);
  padding: 1rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--brown-medium);
  color: var(--parchment-light);
  font-weight: bold;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  position: relative;
}

th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-gold);
}

tbody tr:nth-child(even) {
  background: rgba(139, 105, 20, 0.05);
}

tbody tr:hover {
  background: rgba(139, 105, 20, 0.15);
}

/* Mobile table responsiveness */
@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
  }
  
  th, td {
    padding: 0.5rem;
  }
  
  /* Stack table on very small screens */
  @media (max-width: 480px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    
    tr {
      border: 1px solid var(--brown-light);
      margin-bottom: 1rem;
      border-radius: 6px;
      overflow: hidden;
    }
    
    td {
      border: none;
      border-bottom: 1px solid var(--brown-light);
      position: relative;
      padding-left: 50%;
    }
    
    td::before {
      content: attr(data-label) ': ';
      position: absolute;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      font-weight: bold;
      color: var(--brown-dark);
    }
  }
}

/* =================================================================
   PAGINATION
   ================================================================= */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 3rem 0;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid var(--brown-light);
  background: rgba(244, 228, 188, 0.8);
  color: var(--text-dark);
  min-width: 44px;
  text-align: center;
}

.pagination a:hover {
  background: var(--accent-gold);
  color: var(--brown-dark);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.pagination .current {
  background: var(--brown-medium);
  color: var(--parchment-light);
  border-color: var(--brown-medium);
}

.pagination .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =================================================================
   SEARCH FORMS
   ================================================================= */

.search-form {
  margin: 2rem 0;
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
}

.search-input {
  flex: 1;
  padding: 0.8rem 1rem;
  background: rgba(244, 228, 188, 0.8);
  border: 2px solid var(--brown-light);
  border-radius: 6px;
  color: var(--text-dark);
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 8px var(--shadow-color);
  background: rgba(244, 228, 188, 0.95);
}

.search-input::placeholder {
  color: var(--brown-light);
  font-style: italic;
}

.search-btn {
  padding: 0.8rem 1.5rem;
  background: var(--brown-medium);
  color: var(--parchment-light);
  border: none;
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: var(--accent-gold);
  color: var(--brown-dark);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px var(--shadow-color);
}

/* =================================================================
   TAGS AND CATEGORIES
   ================================================================= */

.tags,
.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tag,
.category {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(139, 105, 20, 0.2);
  color: var(--brown-dark);
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--brown-light);
  transition: all 0.3s ease;
}

.tag:hover,
.category:hover {
  background: var(--accent-gold);
  color: var(--brown-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* =================================================================
   PROGRESS BARS
   ================================================================= */

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(139, 105, 20, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brown-medium) 0%, var(--accent-gold) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 1px 3px rgba(212, 175, 55, 0.5);
}

/* =================================================================
   ALERTS AND NOTIFICATIONS
   ================================================================= */

.alert {
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 6px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.alert-info {
  background: rgba(52, 152, 219, 0.1);
  border-left-color: #3498db;
  color: #2980b9;
}

.alert-success {
  background: rgba(39, 174, 96, 0.1);
  border-left-color: #27ae60;
  color: #229954;
}

.alert-warning {
  background: rgba(243, 156, 18, 0.1);
  border-left-color: #f39c12;
  color: #e67e22;
}

.alert-danger {
  background: rgba(231, 76, 60, 0.1);
  border-left-color: #e74c3c;
  color: #c0392b;
}

.alert-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.alert-content h4 {
  margin-bottom: 0.5rem;
  color: inherit;
}

/* =================================================================
   TOOLTIPS
   ================================================================= */

[data-tooltip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--brown-medium);
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brown-dark);
  color: var(--parchment-light);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px var(--shadow-color);
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--brown-dark);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

/* =================================================================
   RESPONSIVE IMAGES AND MEDIA
   ================================================================= */

.wp-caption,
.gallery-item {
  background: rgba(139, 105, 20, 0.1);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  border: 1px solid var(--brown-light);
  text-align: center;
}

.wp-caption img,
.gallery-item img {
  border-radius: 6px;
  box-shadow: 0 4px 8px var(--shadow-color);
}

.wp-caption-text,
.gallery-caption {
  margin-top: 0.8rem;
  font-style: italic;
  color: var(--text-medium);
  font-size: 0.9rem;
}

/* Image galleries */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
  }
}

/* =================================================================
   BACK TO TOP BUTTON
   ================================================================= */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: var(--brown-medium);
  color: var(--parchment-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  box-shadow: 0 4px 12px var(--shadow-color);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--accent-gold);
  color: var(--brown-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px var(--shadow-color);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
}

/* =================================================================
   ENHANCED HOUSE RULES - Missing from Your Current CSS
   ================================================================= */

.house-rules-content h6,
.content.house-rules h6 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brown-medium);
  margin: 1em 0 0.5em 0;
  font-style: italic;
  text-shadow: 1px 1px 1px var(--shadow-color);
}

.house-rules-content p,
.content.house-rules p {
  margin: 1rem 0;
  color: var(--text-medium);
  font-family: 'Crimson Text', serif;
  line-height: 1.6;
}

body.dark .house-rules-content blockquote,
body.dark .content.house-rules blockquote {
  background: rgba(212, 175, 55, 0.1);
}

body.light .house-rules-content blockquote,
body.light .content.house-rules blockquote {
  background: rgba(139, 105, 20, 0.1);
}

.house-rules-content blockquote h1,
.house-rules-content blockquote h2,
.house-rules-content blockquote h3,
.content.house-rules blockquote h1,
.content.house-rules blockquote h2,
.content.house-rules blockquote h3 {
  margin-top: 0;
  color: var(--brown-dark);
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.3rem;
}

.house-rules-content ul, 
.house-rules-content ol,
.content.house-rules ul,
.content.house-rules ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.house-rules-content li,
.content.house-rules li {
  margin: 0.8rem 0;
  color: var(--text-medium);
}

.house-rules-content strong,
.content.house-rules strong {
  font-weight: bold;
  color: var(--brown-dark);
  font-family: 'Cinzel', serif;
}

.house-rules-content em,
.content.house-rules em {
  font-style: italic;
  color: var(--brown-medium);
}

.house-rules-content del,
.content.house-rules del {
  text-decoration: line-through;
  color: var(--text-medium);
  opacity: 0.7;
}

.house-rules-content code,
.content.house-rules code {
  background: var(--accent-gold);
  color: var(--brown-dark);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.9em;
  box-shadow: 0 1px 2px var(--shadow-color);
}