/* ==========================================================================
   LEARN WITH JC - GLOBAL COLOR PALETTE & DYNAMIC THEME SYSTEM
   User Specified Color Palette:
   - Primary Vibrant Green: #7CDA59 / rgba(124, 218, 89)
   - Accent Gold: #D1A958 / rgba(209, 169, 88)
   - Black / Dark: #18191C / #0F1012
   - White / Light: #FFFFFF
   ========================================================================== */

:root {
  /* Constant Brand Colors */
  --color-primary: #7CDA59;
  --color-primary-hover: #6BC548;
  --color-primary-active: #59B137;
  --color-primary-glow: rgba(124, 218, 89, 0.35);

  --color-accent-gold: #D1A958;
  --color-accent-gold-hover: #BE9645;
  --star-color: #D1A958;

  /* LIGHT THEME (DEFAULT) */
  --site-bg: #FFFFFF;
  --header-bg: #FFFFFF;
  --header-text: #18191C;
  --header-border: rgba(0, 0, 0, 0.05);

  --color-heading: #18191C;
  --color-body-text: #525B6A;
  --color-text-light: #FFFFFF;

  --color-primary-light: #F2FAF0;
  --color-accent-gold-light: #FAF5EA;

  --section-bg-light: #F4FCF2;
  --section-bg-alt: #FAF5EA;
  --section-bg-white: #FFFFFF;

  --card-bg: #FFFFFF;
  --card-bg-subtle: #F8FAF7;
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 20px 40px rgba(124, 218, 89, 0.15);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 20px 40px rgba(124, 218, 89, 0.12);

  --badge-bg: #ECF9E7;
  --badge-text: #3D8820;
  --badge-border: rgba(124, 218, 89, 0.4);

  --footer-bg: #FFFFFF;
  --footer-text: #525B6A;
  --footer-border: rgba(0, 0, 0, 0.08);

  --switch-track-bg: #E4E8EF;
  --switch-thumb-bg: #FFFFFF;
  --switch-icon-color: #D1A958;
}

/* DARK THEME MODE ([data-theme="dark"]) */
[data-theme="dark"] {
  --site-bg: #0F1012;
  --header-bg: #141518;
  --header-text: #FFFFFF;
  --header-border: rgba(255, 255, 255, 0.08);

  --color-heading: #FFFFFF;
  --color-body-text: #9CA3AF;
  --color-text-light: #FFFFFF;

  --color-primary-light: rgba(124, 218, 89, 0.15);
  --color-accent-gold-light: rgba(209, 169, 88, 0.15);

  --section-bg-light: #15171C;
  --section-bg-alt: #1A1C23;
  --section-bg-white: #0F1012;

  --card-bg: #1A1C22;
  --card-bg-subtle: #20232C;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --card-hover-shadow: 0 20px 40px rgba(124, 218, 89, 0.25);

  --glass-bg: rgba(26, 28, 34, 0.88);
  --glass-border: rgba(124, 218, 89, 0.3);
  --glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  --badge-bg: rgba(124, 218, 89, 0.18);
  --badge-text: #7CDA59;
  --badge-border: rgba(124, 218, 89, 0.5);

  --footer-bg: #141518;
  --footer-text: #9CA3AF;
  --footer-border: rgba(255, 255, 255, 0.08);

  --switch-track-bg: #272A34;
  --switch-thumb-bg: #7CDA59;
  --switch-icon-color: #18191C;
}

/* ==========================================================================
   HANGING BULB DARK / LIGHT MODE TOGGLE
   ========================================================================== */
.hanging-bulb-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
  margin-top: -10px;
  user-select: none;
  transition: transform 0.3s ease;
  transform-origin: top center;
  z-index: 10;
}

.hanging-cord {
  width: 2px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(124, 218, 89, 0.4), var(--color-accent-gold));
  border-radius: 1px;
  transition: background 0.3s ease;
}

.hanging-socket {
  width: 12px;
  height: 6px;
  background: #4A5568;
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.hanging-bulb {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card-bg-subtle);
  border: 2px solid var(--color-accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(209, 169, 88, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hanging-bulb .bulb-icon {
  font-size: 1.25rem;
  color: #D1A958;
  filter: drop-shadow(0 0 6px #FFD700);
  transition: all 0.4s ease;
}

.hanging-bulb .bulb-glow-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 169, 88, 0.3) 0%, transparent 70%);
  opacity: 0.8;
  pointer-events: none;
  transition: all 0.4s ease;
}

/* Hover swing animation */
.hanging-bulb-wrapper:hover {
  animation: bulbSwing 1.8s ease-in-out infinite;
}

.hanging-bulb-wrapper:hover .hanging-bulb {
  transform: scale(1.08);
  border-color: var(--color-primary);
}

/* Click Pull Animation */
.hanging-bulb-wrapper.pulling {
  animation: bulbPull 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes bulbSwing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(7deg); }
  75% { transform: rotate(-7deg); }
}

@keyframes bulbPull {
  0% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  70% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* DARK MODE OVERRIDES FOR BULB & GLOBAL ELEMENTS */
[data-theme="dark"] .hanging-cord {
  background: linear-gradient(to bottom, var(--color-primary), #7CDA59);
}

[data-theme="dark"] .hanging-socket {
  background: #2D3748;
}

[data-theme="dark"] .hanging-bulb {
  background: #1A1C22;
  border-color: var(--color-primary);
  box-shadow: 0 0 18px rgba(124, 218, 89, 0.6), 0 4px 15px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .hanging-bulb .bulb-icon {
  color: #7CDA59;
  filter: drop-shadow(0 0 8px #7CDA59);
}

[data-theme="dark"] .hanging-bulb .bulb-glow-ring {
  background: radial-gradient(circle, rgba(124, 218, 89, 0.4) 0%, transparent 70%);
  opacity: 1;
}

/* CTA Card Buttons Always High Contrast */
.btn-cta-white {
  background-color: var(--white) !important;
  color: #18191C !important;
  font-weight: 700 !important;
}

.btn-cta-white:hover {
  background-color: #18191C !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   GLOBAL THEME COMPONENT OVERRIDES & DARK MODE VISIBILITY FIXES
   ========================================================================== */
[data-theme="dark"] body {
  background-color: var(--site-bg);
  color: var(--color-body-text);
}

[data-theme="dark"] .main-navbar {
  background-color: var(--header-bg);
  border-bottom-color: var(--header-border);
}

[data-theme="dark"] .nav-link {
  color: var(--header-text);
}

[data-theme="dark"] .about-section,
[data-theme="dark"] .courses-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .instructors-section,
[data-theme="dark"] .cta-cards-section {
  background-color: var(--site-bg);
}

/* 1. About Section Checklist Boxes Fix */
[data-theme="dark"] .feature-box {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--color-heading);
  box-shadow: var(--card-shadow);
}

/* 2. Stats & CTA Cards Fix */
[data-theme="dark"] .stats-banner-section {
  background-color: var(--section-bg-light);
}

[data-theme="dark"] .stat-card.white-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .instructor-card,
[data-theme="dark"] .experience-advisor-card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

/* 3. Testimonials Forward & Backward Navigation Arrows Fix */
[data-theme="dark"] .btn-slider-arrow {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--color-heading);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .btn-slider-arrow:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

/* 4. Instructor Section Overlays & Info Box Fix */
[data-theme="dark"] .instructor-info-box {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .instructor-name-text,
[data-theme="dark"] .instructor-meta-row {
  color: var(--color-heading);
}

[data-theme="dark"] .social-circle-btn {
  background-color: var(--card-bg-subtle);
  color: var(--color-heading);
}

[data-theme="dark"] .social-circle-btn:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

[data-theme="dark"] .social-notch-panel::before,
[data-theme="dark"] .social-notch-panel::after {
  box-shadow: 5px -5px 0 5px var(--card-bg);
}

/* 5. Footer Section Dark Mode Fix */
[data-theme="dark"] .main-footer,
[data-theme="dark"] .footer-section {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top-color: var(--footer-border);
}

[data-theme="dark"] .footer-col-title {
  color: var(--color-heading);
}

[data-theme="dark"] .footer-desc-text,
[data-theme="dark"] .footer-contact-list,
[data-theme="dark"] .footer-links-list a,
[data-theme="dark"] .footer-social-row,
[data-theme="dark"] .footer-social-row a,
[data-theme="dark"] .footer-copyright-text,
[data-theme="dark"] .footer-center-credit {
  color: var(--footer-text);
}

[data-theme="dark"] .footer-links-list a:hover,
[data-theme="dark"] .footer-social-row a:hover,
[data-theme="dark"] .footer-center-credit a {
  color: var(--color-primary);
}

[data-theme="dark"] .newsletter-input {
  background-color: var(--card-bg-subtle);
  color: var(--color-heading);
  border-color: var(--card-border);
}

[data-theme="dark"] .stat-card.white-card .stat-number,
[data-theme="dark"] .stat-card.white-card .stat-label,
[data-theme="dark"] .about-title,
[data-theme="dark"] .courses-header-left .courses-title,
[data-theme="dark"] .instructor-name,
[data-theme="dark"] .testimonial-author-name,
[data-theme="dark"] .advisor-label {
  color: var(--color-heading);
}