/* ============================================
   BELL PONTE - Night Mode (Kerzenlicht-Theme)
   Auto-activates after 20:00, manual toggle
   ============================================ */

html.night-mode {
  /* Warm evening atmosphere – like candlelit dining */
  --color-bg-primary: #2a2018;
  --color-bg-secondary: #342a20;
  --color-bg-card: #3a2e22;
  --color-bg-elevated: #443628;
  --color-bg-glass: rgba(42, 32, 24, 0.92);

  /* Warm cream text */
  --color-text-primary: #f5edd8;
  --color-text-secondary: #c8baa0;
  --color-text-muted: #8a7e68;

  /* Enhanced gold, warm red */
  --color-warm-gold: #e0b44a;
  --color-warm-gold-light: #f5d06a;
  --color-fire-red: #c44a38;
  --color-fire-red-glow: #e05a48;

  /* Warm borders */
  --color-border: rgba(224, 180, 74, 0.18);
  --color-border-hover: rgba(224, 180, 74, 0.35);

  /* Nav override for dark bg */
  --color-bg-glass: rgba(42, 32, 24, 0.92);

  /* Softer shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.3);
}

/* Nav in night mode */
html.night-mode .nav {
  background: rgba(42, 32, 24, 0.9);
  border-bottom-color: rgba(224, 180, 74, 0.1);
}

html.night-mode .nav.scrolled {
  background: rgba(42, 32, 24, 0.96);
}

/* Story combined in night mode */
html.night-mode .story-combined {
  background: var(--color-bg-secondary);
}

html.night-mode .story-card {
  background: var(--color-bg-card);
  border-color: rgba(224, 180, 74, 0.1);
}

html.night-mode .story-card:hover {
  border-color: rgba(224, 180, 74, 0.25);
}

/* Fullbleed night mode */
html.night-mode .fullbleed-overlay {
  background: linear-gradient(rgba(42, 32, 24, 0.5), rgba(42, 32, 24, 0.6));
}

/* Candlelight vignette overlay */
html.night-mode body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8999;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(244, 165, 32, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 90%, rgba(192, 57, 43, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 90%, rgba(212, 168, 67, 0.04) 0%, transparent 40%),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.2) 100%);
}

/* Soften the scrollbar */
html.night-mode ::-webkit-scrollbar-thumb {
  background: #6b5530;
}

html.night-mode ::-webkit-scrollbar-thumb:hover {
  background: #8a6d2b;
}

/* Soften images slightly in night mode */
html.night-mode .about-image img {
  filter: brightness(0.85) saturate(0.9);
}

/* Warm up the map */
html.night-mode .map-container {
  filter: brightness(0.9) sepia(0.1);
}

/* Night mode toggle icon state */
html.night-mode .night-toggle-icon .sun {
  display: inline;
}

html.night-mode .night-toggle-icon .moon {
  display: none;
}

.night-toggle-icon .sun {
  display: none;
}

.night-toggle-icon .moon {
  display: inline;
}

/* Transition for mode switch */
html.night-transition,
html.night-transition *,
html.night-transition *::before,
html.night-transition *::after {
  transition: background-color 0.8s ease, color 0.4s ease, border-color 0.6s ease, box-shadow 0.6s ease !important;
}