/* ===== MAIN STYLESHEET - IMPORT ALL MODULAR CSS ===== */

/* 1. Import Variables & Custom Properties FIRST */
@import url("variables.9c3222bd063d.css");

/* 2. Import Reset & Normalize */
@import url("reset.7e857c86451c.css");

/* 3. Import Layout Components */
@import url("layout/container.020ce5073f9f.css");
@import url("layout/header.581f0f496cd8.css");
@import url("layout/footer.ca5f0b9354d7.css");

/* 4. Import Base Components */
@import url("components/buttons.9a224cb1e959.css");
@import url("components/forms.c59e58073051.css");
@import url("components/cards.f45e5a2be2b6.css");
@import url("components/modals.9372729aa382.css");

/* 5. Import Page-Specific Styles */
/* Page styles are now loaded individually in templates for better performance and modularity */
/* @import url("pages/hero.1337a5cfa533.css"); */
/* @import url("pages/home.b8e9fe8e44ed.css"); */
/* @import url("pages/about.0cc8391316cb.css"); */
/* @import url("pages/challenge.3ea9300b0d91.css"); */
/* @import url("pages/events.e8dfd7048d44.css"); */
/* @import url("pages/leaderboard.a764285d7944.css"); */
/* @import url("pages/contact.f638d371c3d1.css"); */
/* @import url("pages/partnership.25d0bb0abbff.css"); */
@import url("pages/legal.1fd90c4256f0.css");

/* 6. Import Responsive Design */
@import url("responsive.ae40aab9ef6f.css");

/* ===== BASE STYLES (From Static) ===== */
body {
  font-family: var(--font-secondary, 'Open Sans', sans-serif);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 4px;
  background-color: var(--primary);
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ===== PAGE HERO - BASE STYLES ===== */
.page-hero {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.9) 0%, rgba(45, 45, 45, 0.7) 100%), 
              url('https://images.unsplash.com/photo-1546519638-68e109498ffc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1400&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--white);
  padding: var(--space-20) 0;
  text-align: center;
  position: relative;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, var(--primary) 0%, transparent 50%);
  opacity: 0.1;
  pointer-events: none;
}

.page-hero h1 {
  font-size: var(--text-5xl);
  color: var(--white);
  margin-bottom: var(--space-4);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-hero p {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.9);
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }

.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }