/**
 * FUNDAAHE - Dark Theme / Light Theme Overrides
 * Dark is default. Light mode activated via html.light class.
 * Handles navbar, footer, preloader, and section-level overrides.
 */

/* ===== NAVBAR (Dark default) ===== */
#header {
  background: var(--nav-bg) !important;
  backdrop-filter: var(--nav-blur) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(3, 136, 138, 0.1);
  transition: all 0.3s ease;
}

#header h1,
#header .navbar-link,
#header button {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: color 0.3s ease;
}

#header .navbar-link:hover,
#header h1:hover {
  color: var(--teal) !important;
}

#header .btn-primary {
  background: rgba(3, 136, 138, 0.2) !important;
  border: 1px solid rgba(3, 136, 138, 0.4);
  box-shadow: 0 0 20px rgba(3, 136, 138, 0.15);
}

#header .btn-primary:hover {
  background: var(--teal) !important;
  box-shadow: 0 0 30px rgba(3, 136, 138, 0.3);
}

/* Mobile menu dark */
#mobile-menu {
  background: rgba(10, 14, 26, 0.98) !important;
  border-top: 1px solid rgba(3, 136, 138, 0.1);
}

#mobile-menu a {
  color: rgba(255, 255, 255, 0.7) !important;
}

#mobile-menu a:hover {
  background: rgba(3, 136, 138, 0.1) !important;
  color: var(--teal) !important;
}

/* Dropdown dark */
#header .absolute.top-full {
  background: rgba(10, 14, 26, 0.95) !important;
  border: 1px solid rgba(3, 136, 138, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

#header .absolute.top-full a {
  color: rgba(255, 255, 255, 0.6) !important;
}

#header .absolute.top-full a:hover {
  background: rgba(3, 136, 138, 0.1) !important;
  color: var(--teal) !important;
}

/* ===== LIGHT MODE NAVBAR ===== */
html.light #header {
  background: var(--nav-bg) !important;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(29, 78, 137, 0.08);
}

html.light #header h1 {
  color: var(--teal) !important;
}

html.light #header .navbar-link {
  color: #1f2937 !important;
}

html.light #header button {
  color: #1f2937 !important;
}

html.light #header .navbar-link:hover,
html.light #header h1:hover {
  color: var(--teal) !important;
}

html.light #header .btn-primary {
  background: var(--teal) !important;
  border: none;
  box-shadow: 0 2px 8px rgba(3, 136, 138, 0.2);
}

html.light #header .btn-primary:hover {
  background: var(--teal-dark) !important;
}

html.light #mobile-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid rgba(29, 78, 137, 0.08);
}

html.light #mobile-menu a {
  color: #1f2937 !important;
}

html.light #mobile-menu a:hover {
  background: rgba(3, 136, 138, 0.05) !important;
  color: var(--teal) !important;
}

html.light #header .absolute.top-full {
  background: white !important;
  border: 1px solid rgba(29, 78, 137, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

html.light #header .absolute.top-full a {
  color: #374151 !important;
}

html.light #header .absolute.top-full a:hover {
  background: rgba(3, 136, 138, 0.05) !important;
  color: var(--teal) !important;
}

/* ===== PRELOADER ===== */
#preloader {
  background: var(--bg-body) !important;
  transition: background-color 0.3s ease;
}

#preloader > div {
  border-color: rgba(3, 136, 138, 0.15) !important;
  border-top-color: var(--teal) !important;
}

/* ===== FOOTER (Dark default) ===== */
footer {
  background: linear-gradient(180deg, #0a0e1a, #060912) !important;
  border-top: 1px solid rgba(3, 136, 138, 0.1) !important;
  transition: all 0.3s ease;
}

footer h2, footer h4 {
  color: var(--teal) !important;
}

footer p, footer a:not(:hover), footer li a:not(:hover), footer span {
  color: rgba(255, 255, 255, 0.4) !important;
}

footer a:hover {
  color: var(--teal) !important;
}

footer .border-t {
  border-color: rgba(3, 136, 138, 0.08) !important;
}

footer .rounded-full {
  background: rgba(3, 136, 138, 0.1) !important;
  border: 1px solid rgba(3, 136, 138, 0.2);
}

footer .rounded-full:hover {
  background: var(--teal) !important;
}

/* ===== LIGHT MODE FOOTER ===== */
html.light footer {
  background: #E8EEF4 !important;
  border-top: 1px solid rgba(29, 78, 137, 0.12) !important;
}

html.light footer h2,
html.light footer h4 {
  color: var(--navy) !important;
}

html.light footer p,
html.light footer a:not(:hover),
html.light footer li a:not(:hover),
html.light footer span {
  color: #4b5563 !important;
}

html.light footer a:hover {
  color: var(--teal) !important;
}

html.light footer .border-t {
  border-color: rgba(29, 78, 137, 0.08) !important;
}

html.light footer .rounded-full {
  background: rgba(3, 136, 138, 0.08) !important;
  border: 1px solid rgba(3, 136, 138, 0.15);
  color: var(--teal);
}

html.light footer .rounded-full:hover {
  background: var(--teal) !important;
  color: white;
}

/* ===== SCROLL TOP BUTTON ===== */
#scroll-top {
  background: rgba(3, 136, 138, 0.8) !important;
  border: 1px solid rgba(3, 136, 138, 0.4);
  box-shadow: 0 0 20px rgba(3, 136, 138, 0.2) !important;
  transition: all 0.3s ease;
}

#scroll-top:hover {
  background: var(--teal) !important;
  box-shadow: 0 0 30px rgba(3, 136, 138, 0.4) !important;
}

html.light #scroll-top {
  background: var(--teal) !important;
  border: none;
  box-shadow: 0 4px 15px rgba(3, 136, 138, 0.25) !important;
}

html.light #scroll-top,
html.light #scroll-top.text-white,
html.light #scroll-top svg {
  color: white !important;
}

html.light #scroll-top:hover {
  background: var(--teal-dark) !important;
  box-shadow: 0 6px 25px rgba(3, 136, 138, 0.35) !important;
}

/* ===== LIGHT MODE SECTION BACKGROUNDS ===== */
html.light .pillars-bg,
html.light .news-bg,
html.light .programs-bg,
html.light .allies-bg,
html.light .contact-bg,
html.light .workshops-section {
  background: var(--gradient-section) !important;
}

html.light .stats-bg {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)) !important;
}

html.light .marquee-bg {
  background: var(--navy) !important;
}

/* ===== LIGHT MODE CARDS ===== */
html.light .pillar-card-v2,
html.light .news-card,
html.light .program-card-teal,
html.light .program-card-gold,
html.light .program-card-red,
html.light .ally-card-v2,
html.light .contact-card,
html.light .contact-glow {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card);
}

html.light .pillar-card-v2:hover,
html.light .news-card:hover,
html.light .program-card-teal:hover,
html.light .program-card-gold:hover,
html.light .program-card-red:hover,
html.light .ally-card-v2:hover,
html.light .contact-card:hover,
html.light .contact-glow:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--border-hover) !important;
}

html.light .stat-box {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(3, 136, 138, 0.3);
  background: rgba(10, 14, 26, 0.8);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.theme-toggle:hover {
  background: var(--teal);
  color: white;
  transform: scale(1.1);
}

html.light .theme-toggle {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(29, 78, 137, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

html.light .theme-toggle:hover {
  background: var(--teal);
  color: white;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
}

.theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg);
}

.theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg);
}

html.light .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg);
}

html.light .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg);
}