/** Shopify CDN: Minification failed

Line 22:18 Expected identifier but found whitespace
Line 22:20 Unexpected "{"
Line 22:30 Expected ":"
Line 23:17 Expected identifier but found whitespace
Line 23:19 Unexpected "{"
Line 23:29 Expected ":"
Line 24:13 Expected identifier but found whitespace
Line 24:15 Unexpected "{"
Line 24:25 Expected ":"
Line 25:15 Expected identifier but found whitespace
... and 8 more hidden warnings

**/
/* ============================================
   EduSpark Shopify Theme — Main Stylesheet
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  --color-primary: {{ settings.color_primary }};
  --color-accent: {{ settings.color_accent }};
  --color-bg: {{ settings.color_bg }};
  --color-text: {{ settings.color_text }};
  --font-heading: {{ settings.font_heading.family | default: "'Playfair Display', serif" }};
  --font-body: {{ settings.font_body.family | default: "'Inter', sans-serif" }};
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* --- Utility Classes --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Section Common --- */
.section-container {
  max-width: 1280px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
}

.section-desc {
  font-size: 17px;
  color: var(--color-text);
  opacity: 0.65;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Button Base --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  background: var(--color-primary);
  color: white;
  border: none;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-primary:hover {
  background: #5A4BD1;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.3);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

.btn-lg {
  padding: 16px 40px;
  font-size: 17px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 36px;
  }
}

/* --- Shopify Theme required --- */
.shopify-section {
  /* Ensure sections render properly */
}

/* --- Empty States --- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text);
  opacity: 0.5;
  font-size: 16px;
}

/* --- Accessibility --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Print --- */
@media print {
  .site-header,
  .site-footer,
  .newsletter-section {
    display: none;
  }
}