/* style.css – Global + Custom + Dark Mode Override */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap');

/* Root variables for easy theming */
:root {
  --bg-gradient: linear-gradient(to bottom right, #0f172a, #020617, #000000);
}

/* Dark mode (default) */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-gradient);
  color: white;
  min-height: 100vh;
}

/* FIX: Move light variables to :root when .light class is present – higher specificity */
html.light {
  --bg-gradient: linear-gradient(to bottom right, #f8fafc, #e2e8f0, #cbd5e1) !important;
}

html.light body {
  background: var(--bg-gradient) !important;
  color: #0f172a;
}

html.light .bg-black\/80,
html.light .bg-black\/95,
html.light .bg-black\/50 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

html.light .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light .text-gray-400 {
  color: #64748b !important;
}

html.light .text-gray-300 {
  color: #64748b !important;
}

html.light .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Smooth scrolling (already on html tag) */
html.scroll-smooth {
  scroll-behavior: smooth;
}

/* Optional: extra hover lift for cards on mobile */
@media (hover: hover) {
  .group:hover {
    transform: translateY(-8px);
  }
  
/* Force Tailwind dark classes off in light mode */
html.light .bg-gradient-to-br,
html.light .from-slate-950,
html.light .via-slate-900,
html.light .to-black,
html.light .text-white {
  background-image: none !important;
  background-color: transparent !important;
  color: #0f172a !important;
}

/* Apply the light gradient you already defined */
html.light body {
  background: var(--bg-gradient) !important;
} 
  
 /* Perfect glass header in both themes */
header {
  transition: all 0.3s ease;
}

/* Light mode glass tweak (optional but looks cleaner) */
html.light header {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
} 
  


/* Traffic Torch – Clean Expanding Text Box (mobile-first & epic) */
.expand-box {
  max-width: 100%;
  margin: 2rem auto;
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.expand-box-header {
  padding: 20px 24px;
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.expand-box-header .emoji {
  font-size: 1.8rem;
}

.expand-box-content {
  max-height: 0;
  overflow: hidden;
  background: white;
  color: #333;
  padding: 0 24px;
  transition: all 0.5s ease;
  font-size: 1rem;
  line-height: 1.6;
}

.expand-box.expanded .expand-box-content {
  max-height: 500px;        /* big enough for future content */
  padding: 24px 24px 32px;
}

/* Dark mode ready */
html.dark .expand-box-content { background: #1a1a2e; color: #e0e0ff; }