/* styles.css - Shared Cerewell styles */
/* Change once here, applies to all pages */

/* ============================================
   HERO SECTION
   ============================================ */

/* "For Patients/Doctors/Researchers" label */
.hero-label,
.hero .hero-label,
.hero h2.hero-label {
  font-size: 1.5rem !important;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Main hero headline */
.hero h1,
.hero-headline {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Hero description paragraph */
.hero p,
.hero-description {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* ============================================
   SECTION HEADERS
   ============================================ */

/* Standard section header (h2) - centered */
.section-header {
  font-size: 2.2rem !important;
  font-weight: 600;
  text-align: center !important;
  margin-bottom: 2rem;
  color: #333;
}

/* White variant for dark backgrounds */
.section-header-light {
  font-size: 2.2rem !important;
  font-weight: 600;
  text-align: center !important;
  margin-bottom: 2rem;
  color: white !important;
}

/* Subsection header (slightly smaller) */
.section-subheader {
  font-size: 1.8rem !important;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

/* Subsection header - white for dark backgrounds */
.section-subheader-light {
  font-size: 1.8rem !important;
  font-weight: 600;
  margin-bottom: 1rem;
  color: white !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .hero-label {
    font-size: 1.2rem;
  }

  .hero h1,
  .hero-headline {
    font-size: 2rem;
  }

  .section-header,
  .section-header-light {
    font-size: 1.8rem;
  }
}