/* /static-site/css/styles.css */

/* ===== Light-mode forcing (from globals.css) ===== */
:root {
  --background: #ffffff;
  --foreground: #171717;
  color-scheme: light !important;
}

/* Override dark mode preferences from system/browser */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #ffffff !important;
    --foreground: #171717 !important;
    color-scheme: light !important;
  }
}

/* Override any dark mode class */
html.dark,
html[data-theme="dark"] {
  --background: #ffffff !important;
  --foreground: #171717 !important;
  color-scheme: light !important;
}

/* Apply variables to background + text - Force light colors */
html, body {
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Ensure body always light */
body {
  background: #ffffff !important;
  color: #171717 !important;
}

/* Cursor pointer for actions */
a, button, [role="button"] {
  cursor: pointer;
}

/* ===== Navbar dropdown enhancement ===== */
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

/* ===== Star particles ===== */
.star-particle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(to right, #60a5fa, #a78bfa, #d946ef);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ===== Parallax layers ===== */
.parallax-bg {
  will-change: transform;
}

.parallax-hero {
  will-change: transform;
}

.parallax-blob {
  will-change: transform;
}

/* ===== Hero hover shadow ===== */
.hero-hover-shadow {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.hero-hover-shadow:hover {
  box-shadow: 0 20px 60px -15px rgba(37, 99, 235, 0.18),
              0 8px 24px -8px rgba(124, 58, 237, 0.12),
              0 4px 12px -4px rgba(236, 72, 153, 0.08);
  transform: translateY(-4px);
}

/* ===== Benefit card hover shadow ===== */
.card-hover-shadow {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.card-hover-shadow:hover {
  box-shadow: 0 16px 48px -12px rgba(37, 99, 235, 0.15),
              0 6px 20px -6px rgba(124, 58, 237, 0.10),
              0 3px 10px -3px rgba(236, 72, 153, 0.06);
  transform: translateY(-3px);
}