/* =====================================================================
   enjoy-learn — PUBLIC DARK MODE (warm dark · base #17110d)
   Loaded AFTER app.min.css + per-page parts CSS so it can remap the
   theme utility tokens (:root vars) and patch the remaining hard-coded
   light surfaces. Only active under body.dark-mode — toggling the theme
   flips everything live via theme.js.

   Palette mirrors panel-dark.css (warm cocoa dark, base #17110d):
   comfortable brown-grey surfaces instead of near-black navy.
   ===================================================================== */

/* ----------------------------------------------------------------
   1) UTILITY TOKENS
   ---------------------------------------------------------------- */

body.dark-mode {
  /* surfaces */
  --white: #211a13;
  --gray: #17110d;
  --gray-100: #251e16;
  --gray-200: #2a221a;
  --gray-300: #332a20;
  --gray-400: #403628;
  --gray-500: #8a7b67;
  --section-bg: #131009;
  --body-bg: #17110d;

  /* text */
  --dark: #f3ede4;
  --black: #e7dfd2;
  --secondary: #cfc5b5;

  /* white button gets a charcoal surface with light text */
  --white-hover: #2a221a;
  --white-border: #211a13;
  --white-hover-border: #2a221a;
  --white-btn-color: #f3ede4;
  --white-btn-hover-color: #f3ede4;

  /* secondary (navy) buttons become light-grey pills with dark text */
  --secondary-hover: #b8ab94;
  --secondary-border: #cfc5b5;
  --secondary-hover-border: #cfc5b5;
  --secondary-btn-color: #1f1913;
  --secondary-btn-hover-color: #1f1913;
}

/* text-white / text-black always mean light text while dark mode is on */
body.dark-mode .text-white { color: #f3ede4 !important; }
body.dark-mode .text-black { color: #e7dfd2 !important; }

/* ----------------------------------------------------------------
   2) BOOTSTRAP HARD-CODED LIGHT SURFACES
   ---------------------------------------------------------------- */

body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .popover {
  background-color: #251e16;
  color: #f3ede4;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-content { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
body.dark-mode .dropdown-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42); }

/* form controls & inputs are already var-driven (--white / --dark / --gray-300) */

/* ----------------------------------------------------------------
   3) HERO / INTERIOR MASKS — warm canvas instead of light-grey
   ---------------------------------------------------------------- */

.dark-mode .courses-lists-hero__mask,
.dark-mode .blog-lists-hero__mask,
.dark-mode .events-lists-hero__mask,
.dark-mode .products-lists-hero__mask,
.dark-mode .upcoming-courses-lists-hero__mask,
.dark-mode .instructors-lists-hero__mask,
.dark-mode .organizations-lists-hero__mask,
.dark-mode .bundles-lists-hero__mask,
.dark-mode .search-hero__mask,
.dark-mode .meeting-packages-lists-hero__mask,
.dark-mode .pages-hero__mask,
.dark-mode .text-lesson-hero__mask,
.dark-mode .blog-show-hero__mask,
.dark-mode .course-prerequisite-card__mask,
.dark-mode .profile-cover-card:after,
.dark-mode .question-multi-answers .answer-item .image-container:after {
  background: linear-gradient(1deg, rgba(23, 17, 13, 0.95) 0%, rgba(23, 17, 13, 0) 100%);
}

/* wide (inline hero) variants use a 90deg fade */
.dark-mode .course-hero__mask,
.dark-mode .event-hero__mask {
  background: linear-gradient(90deg, rgba(23, 17, 13, 0.95) 0%, rgba(23, 17, 13, 0) 100%);
}

/* featured category / post content gradients */
.dark-mode .blog-featured-category__content,
.dark-mode .blog-featured-post__content,
.dark-mode .products-featured-category__content {
  background: linear-gradient(1deg, rgba(23, 17, 13, 0.95) 0%, rgba(23, 17, 13, 0) 100%);
}

/* interior glass chips (navy -> warm dark) */
.dark-mode .blog-featured-category__content-posts-count,
.dark-mode .products-featured-category__product-count { background: rgba(18, 14, 10, 0.5); }
.dark-mode .blog-featured-post__content-stats { background: rgba(18, 14, 10, 0.35); }

/* event speaker card transparent-up fade */
.dark-mode .event-speaker-card__content {
  background: linear-gradient(0deg, #211a13 0.34%, rgba(0, 0, 0, 0) 99.89%);
}

/* video player scrim */
.dark-mode .learning-page__file-player-card .file-player-button,
.dark-mode .course-right-side__thumbnail .has-video-icon,
.dark-mode .event-right-side__thumbnail .has-video-icon {
  background-color: rgba(23, 17, 13, 0.6);
}