/*
   Attribution: Soumyo Biswas
   Change Log:
   - 2026-01-20: Removed sample modal overrides and documented the theme metadata.
   - 2026-01-21: Added the public/ deployment copy for Cloudflare Pages output.
   Pseudocode:
   - Define ocean-inspired color variables for the theme.
   - Override core UI elements (typography, buttons, cards) with theme accents.
   - Enhance sections and background treatments without changing layout behavior.

   BrightSparks Studio - Ocean Pop Color Theme
   Drop-in CSS file to add colorful, playful, and trustworthy design
   
   Usage: Add this file after your main styles.css:
   <link rel="stylesheet" href="theme-ocean-pop.css">
   
   This file overrides specific color values and adds visual enhancements
   without breaking the existing layout or functionality.
*/

/* ===========================
   COLOR VARIABLES
   =========================== */
:root {
  --bg: #F4F8FB;
  --surface: #FFFFFF;
  --text: #0B2A5B;
  --muted: #6a7a90;
  --primary: #FF6B6B;
  --secondary: #4ECDC4;
  --highlight: #54a0ff;
  --badge-bg: #ffeaa7;
  --shadow: 0 10px 30px rgba(11, 42, 91, 0.1);
  --ring: rgba(255, 107, 107, 0.22);
}

/* ===========================
   BASE STYLES
   =========================== */
body {
  background-color: var(--bg);
  color: var(--text);
  position: relative;
}

/* Playful blob gradients in the background */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 107, 107, 0.08), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(78, 220, 196, 0.08), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(84, 160, 255, 0.05), transparent 40%);
  z-index: -1;
  pointer-events: none;
}

/* ===========================
   TYPOGRAPHY
   =========================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

p, li {
  color: var(--text);
}

.muted, .text-muted {
  color: var(--muted);
}

/* ===========================
   BUTTONS & CTAs
   =========================== */
.landing-cta,
.nav-cta,
button[data-action="cta"],
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.landing-cta:hover,
.nav-cta:hover,
button[data-action="cta"]:hover,
.btn-primary:hover {
  background: #ff5252;
  box-shadow: 0 12px 28px rgba(255, 107, 107, 0.4);
  transform: translateY(-2px);
}

.secondary-button,
.btn-secondary {
  background: var(--secondary);
  color: white;
  border: none;
  box-shadow: 0 8px 20px rgba(78, 220, 196, 0.25);
  transition: all 0.3s ease;
}

.secondary-button:hover,
.btn-secondary:hover {
  background: #3ab5ac;
  box-shadow: 0 12px 28px rgba(78, 220, 196, 0.35);
  transform: translateY(-2px);
}

/* ===========================
   CARDS & PANELS
   =========================== */
.book-card,
.feature-card,
.benefit-card {
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid rgba(11, 42, 91, 0.08);
  transition: all 0.3s ease;
}

.book-card:hover,
.feature-card:hover,
.benefit-card:hover {
  box-shadow: 0 15px 40px rgba(11, 42, 91, 0.15);
  transform: translateY(-4px);
}

/* ===========================
   TRUST BADGES & TAGS
   =========================== */
.trust-badge,
.badge,
.tag {
  background: var(--badge-bg);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-block;
}

/* ===========================
   FORMS & INPUTS
   =========================== */
input[type="text"],
input[type="email"],
textarea {
  border: 2px solid rgba(11, 42, 91, 0.1);
  transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}

/* ===========================
   FAQ SECTION
   =========================== */
.faq-item {
  background: var(--surface);
  border: 1px solid rgba(11, 42, 91, 0.08);
  box-shadow: var(--shadow);
}

.faq-question {
  color: var(--text);
}

.faq-question:hover {
  background: rgba(84, 160, 255, 0.05);
}

.faq-answer {
  color: var(--muted);
}

/* ===========================
   HERO SECTION ENHANCEMENT
   =========================== */
.hero-section {
  position: relative;
  overflow: hidden;
}

/* Optional: Add a subtle wave divider after the hero */
.hero-section::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--bg);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}

/* ===========================
   SECTION PANELS (TINTED BANDS)
   =========================== */
.section-panel {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 3rem 2rem;
  margin: 2rem 0;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

/* Alternate section colors for visual variety */
.section-panel.alt-1 {
  background: rgba(84, 160, 255, 0.05);
}

.section-panel.alt-2 {
  background: rgba(78, 220, 196, 0.05);
}

.section-panel.alt-3 {
  background: rgba(255, 107, 107, 0.05);
}

/* Section-specific tinting by ID */
#books {
  background: rgba(84, 160, 255, 0.03);
  border-radius: 16px;
  padding: 3rem 1rem;
}

#parents {
  background: rgba(78, 220, 196, 0.03);
  border-radius: 16px;
  padding: 3rem 1rem;
}

#previews {
  background: rgba(255, 107, 107, 0.03);
  border-radius: 16px;
  padding: 3rem 1rem;
}

#faq {
  background: rgba(255, 234, 167, 0.15);
  border-radius: 16px;
  padding: 3rem 1rem;
}

#contact-section {
  background: rgba(84, 160, 255, 0.03);
  border-radius: 16px;
  padding: 3rem 1rem;
}

/* ===========================
   NAVIGATION ENHANCEMENTS
   =========================== */
.nav-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(11, 42, 91, 0.08);
  border-bottom: 1px solid rgba(11, 42, 91, 0.08);
}

.nav-logo {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: var(--surface);
  border-top: 1px solid rgba(11, 42, 91, 0.08);
}

/* ===========================
   ACCESSIBILITY & PERFORMANCE
   =========================== */
/* Ensure high contrast for accessibility */
@media (prefers-contrast: high) {
  :root {
    --bg: #FFFFFF;
    --text: #000000;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}