/* ================================================
   Dark / Light Mode Toggle
   Default = dark (no class needed)
   Light  = body.light-mode
   ================================================ */

/* ── Toggle Button ─────────────────────────────── */
#theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #ccc;
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: all .3s;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#theme-toggle:hover {
  border-color: #e75e8d;
  color: #e75e8d;
}
#theme-toggle .toggle-label {
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* ── Dark Mode: explicit backgrounds (prevent white flash) ── */
html,
body {
  background-color: #1f2122 !important;
}

/* Dark mode: explicit header background (not just transparent) */
.header-area,
.header-area .main-nav {
  background-color: #1f2122 !important;
}

/* Dark mode: sticky scrolled header — override white bg AND fix display:none */
.header-area.background-header {
  background-color: #1f2122 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
  display: block !important;
}

/* ── Light Mode Overrides ───────────────────────── */
/* Support both html.light-mode (early JS) and body.light-mode (late JS) */
html.light-mode,
body.light-mode {
  background-color: #f0f2f5 !important;
}

body.light-mode {
  color: #333 !important;
}

/* Background & page areas */
body.light-mode .page-content {
  background-color: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

body.light-mode .main-profile {
  background-color: #ffffff !important;
}

/* Text */
body.light-mode p {
  color: #444 !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: #1a1a1a !important;
}

body.light-mode a {
  color: #333 !important;
}
body.light-mode a:hover {
  color: #e75e8d !important;
}

/* Light mode: header background */
html.light-mode .header-area,
body.light-mode .header-area,
html.light-mode .header-area .main-nav,
body.light-mode .header-area .main-nav {
  background-color: #f8f8f8 !important;
}

/* Header nav */
body.light-mode .header-area .main-nav .nav li a {
  color: #444 !important;
}
body.light-mode .header-area .main-nav .nav li:hover a,
body.light-mode .header-area .main-nav .nav li a.active {
  color: #e75e8d !important;
}

body.light-mode .header-area .main-nav .nav li:last-child a {
  background-color: #e8e8e8 !important;
  color: #333 !important;
}
body.light-mode .header-area .main-nav .nav li:last-child:hover a {
  background-color: #e75e8d !important;
  color: #fff !important;
}

body.light-mode .header-area .main-nav .logo {
  border-right-color: #ddd !important;
}

/* Search bar */
body.light-mode .header-area .main-nav #search input {
  background-color: #e8e8e8 !important;
  color: #333 !important;
}
body.light-mode .header-area .main-nav #search i {
  color: #777 !important;
}

/* Background-header (sticky) */
body.light-mode .header-area.background-header {
  background-color: #f8f8f8 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
  display: block !important;
}

/* Preloader */
body.light-mode .js-preloader {
  background-color: rgba(255,255,255,.99) !important;
}

/* Footer */
body.light-mode footer {
  background-color: #e8e8e8 !important;
}
body.light-mode footer p,
body.light-mode footer a {
  color: #444 !important;
}
body.light-mode footer a:hover {
  color: #e75e8d !important;
}

/* Story / entry content */
body.light-mode .story-meaning {
  background: rgba(0,0,0,.04) !important;
  border-left-color: #e75e8d !important;
}
body.light-mode .story-meaning p {
  color: #555 !important;
}

body.light-mode .entry-content,
body.light-mode .story-body {
  color: #333 !important;
}

/* About / contact page sections */
body.light-mode .about-section p,
body.light-mode .about-section li,
body.light-mode .contact-details p,
body.light-mode .contact-details li,
body.light-mode .contact-intro p,
body.light-mode .contact-guidelines p,
body.light-mode .contact-guidelines li,
body.light-mode .contact-note p {
  color: #444 !important;
}

/* Breadcrumb */
body.light-mode .breadcrumb-item a {
  color: #555 !important;
}
body.light-mode .breadcrumb-item.active {
  color: #333 !important;
}

/* Episode buttons (moviefree) */
body.light-mode .ep-btn {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #333 !important;
}
body.light-mode .ep-btn:hover,
body.light-mode .ep-btn.active {
  background: rgba(231,94,141,.12) !important;
  border-color: #e75e8d !important;
  color: #e75e8d !important;
}

/* Mobile menu */
body.light-mode .header-area .main-nav .nav {
  background-color: #f0f2f5 !important;
}

/* Toggle button in light mode */
body.light-mode #theme-toggle {
  border-color: rgba(0,0,0,.2) !important;
  color: #555 !important;
}
body.light-mode #theme-toggle:hover {
  border-color: #e75e8d !important;
  color: #e75e8d !important;
}

/* Smooth transition for all mode switches */
body,
body .page-content,
body .main-profile,
body p,
body h1, body h2, body h3, body h4, body h5, body h6,
body a,
body footer,
body .header-area .main-nav #search input,
body .background-header {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}