/* High-Contrast Cave Palette */
:root {
  --bg-cave-dark: #030712;
  --bg-cave-darker: #020617;
  --bg-dark-slate: #0f172a;
  --bg-darker-slate: #020617;
  --color-gold-bright: #fbbf24;
  --color-gold-strong: #d97706;
  --text-light-contrast: #f1f5f9;
}

body.bg-cave-dark {
  background-color: var(--bg-cave-dark);
  color: var(--text-light-contrast);
  font-family: 'Plus Jakarta Sans', sans-serif;

  /* Full-page Smaug cave background */
  background-image:
    linear-gradient(
      rgba(2, 6, 23, 0.58),
      rgba(2, 6, 23, 0.78)
    ),
    url('/static/images/smaug_dragon_cave.jpg');

  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.bg-cave-darker {
  background-color: var(--bg-cave-darker);
}

.bg-dark-slate {
  background-color: var(--bg-dark-slate) !important;
}

.bg-darker-slate {
  background-color: var(--bg-darker-slate) !important;
}

.brand-font {
  font-family: 'Cinzel', serif;
}

.text-gold-bright {
  color: var(--color-gold-bright) !important;
}

.text-light-contrast {
  color: var(--text-light-contrast) !important;
}

.border-gold-strong {
  border-color: rgba(245, 158, 11, 0.5) !important;
}

.btn-gold {
  background-color: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  color: #000;
  font-weight: 700;
}

.btn-gold:hover {
  background-color: #f59e0b;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

.placeholder-muted::placeholder {
  color: #94a3b8;
}

.drop-shadow-cave {
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.95));
}

.benefit-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.8) !important;
}

/* Keep the cave visible behind the page content */
.bg-cave-overlay {
  background-color: rgba(2, 6, 23, 0.72);
}

/*
 * Move "A Hoard of Stories" slightly toward the left
 * on desktop while leaving mobile/tablet layout unchanged.
 */
@media (min-width: 992px) {
  .hero-content-card {
    transform: translateX(-35px);
  }
}

@media (max-width: 991.98px) {
  .hero-content-card {
    transform: none;
  }
}