/* =========================================================
   PREMIUM PEDIATRIC DESIGN SYSTEM - PART 1
   World-Class Medical Education Interface
   Optimized for 300+ Pediatric HTML Articles
   Version: 2.0 | Professional & Cohesive Design
   ========================================================= */

/* -----------------------------------------------------------
   CORE LAYOUT HELPERS - REFINED CALLOUT BOXES
   ----------------------------------------------------------- */
.support,
.resilience,
.developmental,
.hormone,
.success,
.lifestyle,
.prevention,
.intervention,
.clinical,
.diagnostic,
.epidemiology,
.treatment,
.medication,
.prognosis,
.legal,
.confidential,
.ethical,
.shunt,
.defect,
.insulin,
.monitoring,
.complications,
.psychosocial,
.compassion,
.physiology,
.pathology,
.symptom,
.advocacy,
.community,
.social,
.safety,
.education,
.contraindication {
  background: rgba(233, 213, 176, 0.372);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  border-left: 4px solid #0ea5e9;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.support:hover,
.resilience:hover,
.developmental:hover,
.hormone:hover,
.success:hover,
.lifestyle:hover,
.prevention:hover,
.intervention:hover,
.clinical:hover,
.diagnostic:hover,
.epidemiology:hover,
.treatment:hover,
.medication:hover,
.prognosis:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12);
}

.section ul {
  padding: 1.25rem;
  margin: 0.75rem 0;
}

.emergency {
  background: rgba(195, 138, 145, 0.4);
  border: 2px solid #ef4444;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
  position: relative;
  overflow: hidden;
}

.emergency::before {
  content: '⚠️';
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  opacity: 0.2;
}

.pathophysiology {
  background: rgba(233, 213, 176, 0.372);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  border-left: 4px solid #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}


/* -----------------------------------------------------------
   PREMIUM CARD COMPONENTS
   ----------------------------------------------------------- */
.mentalhealth-card,
.nutrition-card,
.lifestyle-card,
.puberty-card,
.hormone-card,
.pressure-card,
.substance-card,
.substance-card-small,
.adhd-card,
.presentation-card,
.treatment-card,
.asd-card,
.dev-card,
.neonatal-card,
.congenital-card,
.cardiology-card,
.cardiology-type-card,
.diabetes-card,
.diabetes-type-card,
.diarrheal-card,
.exanthems-card,
.jaundice-card,
.jaundice-type-card,
.respiratory-card,
.abuse-card,
.type-card,
.consent-card,
.consent-type-card,
.eol-card,
.eol-type-card,
.advocacy-card,
.advocacy-type-card,
.growth-card,
.overview-card,
.adr-card,
.category-card,
.medication-card,
.pharmacology-card,
.methods-card,
.adherence-card,
.pillar-card,
.allergy-card,
.asthma-card,
.cancer-card,
.epilepsy-card,
.parasitic-card,
.protection {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
}

.mentalhealth-card::before,
.nutrition-card::before,
.lifestyle-card::before,
.puberty-card::before,
.hormone-card::before,
.pressure-card::before,
.substance-card::before,
.adhd-card::before,
.asd-card::before,
.dev-card::before,
.neonatal-card::before,
.congenital-card::before,
.cardiology-card::before,
.diabetes-card::before,
.diarrheal-card::before,
.exanthems-card::before,
.jaundice-card::before,
.respiratory-card::before,
.abuse-card::before,
.consent-card::before,
.eol-card::before,
.advocacy-card::before,
.growth-card::before,
.adr-card::before,
.medication-card::before,
.pharmacology-card::before,
.adherence-card::before,
.allergy-card::before,
.asthma-card::before,
.cancer-card::before,
.epilepsy-card::before,
.parasitic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Text alignment for specific cards */
.substance-card-small,
.presentation-card,
.treatment-card,
.cardiology-type-card,
.diabetes-type-card,
.jaundice-type-card,
.type-card,
.consent-type-card,
.eol-type-card,
.advocacy-type-card,
.overview-card,
.category-card,
.methods-card,
.pillar-card {
  text-align: left;
}

/* Card headings */
.mentalhealth-card h3,
.nutrition-card h3,
.lifestyle-card h3,
.puberty-card h3,
.hormone-card h3,
.pressure-card h3,
.substance-card h3,
.adhd-card h3,
.presentation-card h3,
.treatment-card h3,
.asd-card h3,
.dev-card h3,
.neonatal-card h3,
.congenital-card h3,
.cardiology-card h3,
.diabetes-card h3,
.diarrheal-card h3,
.exanthems-card h3,
.jaundice-card h3,
.respiratory-card h3,
.abuse-card h3,
.type-card h3,
.consent-card h3,
.eol-card h3,
.advocacy-card h3,
.growth-card h3,
.overview-card h3,
.adr-card h3,
.medication-card h3,
.pharmacology-card h3,
.adherence-card h3,
.allergy-card h3,
.asthma-card h3,
.cancer-card h3,
.epilepsy-card h3,
.parasitic-card h3 {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* Card lists */
.mentalhealth-card ul,
.nutrition-card ul,
.lifestyle-card ul,
.puberty-card ul,
.hormone-card ul,
.pressure-card ul,
.substance-card ul,
.adhd-card ul,
.presentation-card ul,
.treatment-card ul,
.asd-card ul,
.dev-card ul,
.neonatal-card ul,
.congenital-card ul,
.cardiology-card ul,
.diabetes-card ul,
.diarrheal-card ul,
.exanthems-card ul,
.jaundice-card ul,
.respiratory-card ul,
.abuse-card ul,
.type-card ul,
.consent-card ul,
.eol-card ul,
.advocacy-card ul,
.growth-card ul,
.adr-card ul,
.medication-card ul,
.pharmacology-card ul,
.adherence-card ul,
.allergy-card ul,
.asthma-card ul,
.cancer-card ul,
.epilepsy-card ul,
.parasitic-card ul {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  line-height: 1.7;
}

.mentalhealth-card li,
.nutrition-card li,
.lifestyle-card li,
.puberty-card li,
.hormone-card li,
.pressure-card li,
.substance-card li,
.adhd-card li,
.presentation-card li,
.treatment-card li,
.asd-card li,
.dev-card li,
.neonatal-card li,
.congenital-card li,
.cardiology-card li,
.diabetes-card li,
.diarrheal-card li,
.exanthems-card li,
.jaundice-card li,
.respiratory-card li,
.abuse-card li,
.type-card li,
.consent-card li,
.eol-card li,
.advocacy-card li,
.growth-card li,
.adr-card li,
.medication-card li,
.pharmacology-card li,
.adherence-card li,
.allergy-card li,
.asthma-card li,
.cancer-card li,
.epilepsy-card li,
.parasitic-card li {
  margin-bottom: 0.5rem;
  color: #334155;
}

/* -----------------------------------------------------------
   PRINCIPLE CARDS - PREMIUM HOVERABLE BLOCKS
   ----------------------------------------------------------- */
.mentalhealth-principle-card,
.nutrition-principle-card,
.puberty-principle-card,
.srh-principle-card,
.substance-principle-card,
.adhd-principle-card,
.asd-principle-card,
.dev-principle-card,
.neonatal-principle-card,
.congenital-principle-card,
.cardiology-principle-card,
.diabetes-principle-card,
.epilepsy-principle-card,
.jaundice-principle-card,
.protection-principle-card,
.consent-principle-card,
.eol-principle-card,
.advocacy-principle-card,
.growth-principle-card,
.adr-principle-card,
.medication-principle-card,
.adme-principle-card,
.adherence-principle-card,
.principle-card,
.allergy-principle-card,
.asthma-principle-card,
.cancer-principle-card,
.parasitic-principle-card
 {
background: rgba(233, 213, 176, 0.372);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-left: 5px solid #3b82f6;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
}


/* -----------------------------------------------------------
   AGE GROUP CARDS
   ----------------------------------------------------------- */
.age-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.age-group-card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  border-top: 4px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.age-group-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.early-childhood { 
  border-top-color: #3b82f6;
}

.pre-adolescent { 
  border-top-color: #ef4444;
}

.adolescent { 
  border-top-color: #10b981;
}

.young-adult { 
  border-top-color: #8b5cf6;
}

.adolescent-confidentiality { 
  border-top-color: #f59e0b;
}

/* -----------------------------------------------------------
   COMPONENT & MICRONUTRIENT MINI-CARDS
   ----------------------------------------------------------- */
.component-grid,
.micronutrient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.component-card,
.micronutrient-card {
  border-radius: 0.75rem;
  padding: 1rem;
  border-left: 3px solid #8b5cf6;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.component-card:hover,
.micronutrient-card:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
}

.micronutrient-card { 
  border-left-color: #10b981;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}

.micronutrient-card:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}

/* -----------------------------------------------------------
   BENEFIT CARDS
   ----------------------------------------------------------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.benefit-card {
  background: #ffffff;
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.health-benefits { 
  border-left: 4px solid #10b981;
}

.social-benefits { 
  border-left: 4px solid #3b82f6;
}

/* -----------------------------------------------------------
   SYNDROME CARDS
   ----------------------------------------------------------- */
.syndrome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.syndrome-card {
  border-radius: 1rem;
  padding: 1.5rem;
  border-left: 4px solid;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.syndrome-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.down-syndrome { 
  border-left-color: #0ea5e9;
}

.trisomy-18 { 
  border-left-color: #eab308;
}

.trisomy-13 { 
  border-left-color: #ef4444;
}

.turner { 
  border-left-color: #ec4899;
}

.klinefelter { 
  border-left-color: #14b8a6;
}

/* -----------------------------------------------------------
   TERATOGEN & INFECTION CARDS
   ----------------------------------------------------------- */
.teratogen-grid,
.infection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.teratogen-card,
.infection-card {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 1rem;
  padding: 1.25rem;
  border-left: 4px solid #ef4444;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.teratogen-card:hover,
.infection-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.12);
}

/* -----------------------------------------------------------
   ICONS - ENHANCED VISUAL HIERARCHY
   ----------------------------------------------------------- */
.function-icon,
.disease-icon,
.infection-icon,
.treatment-icon,
.anomaly-icon,
.management-icon,
.complication-icon {
  font-size: 1.5rem;
  margin-right: 0.75rem;
  vertical-align: middle;
  color: #3b82f6;
}

.treatment-icon,
.anomaly-icon,
.management-icon,
.complication-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -----------------------------------------------------------
   VISUAL HELPERS & UTILITIES
   ----------------------------------------------------------- */
code {
  background: #f1f5f9;
  color: #0f172a;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
  font-size: 0.875em;
  font-weight: 500;
  border: 1px solid #e2e8f0;
}

.chart-image {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 1rem;
  margin: 2rem auto;
  display: block;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
}

.spectrum-visual {
  width: 100%;
  height: 48px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #ef4444, #f59e0b);
  border-radius: 24px;
  margin: 2rem 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.spectrum-label {
  position: absolute;
  top: 56px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.spectrum-label.left { left: 0; }
.spectrum-label.right { right: 0; }
.spectrum-label.center { 
  left: 50%; 
  transform: translateX(-50%); 
}

.treatment-visual,
.anomaly-visual,
.management-visual,
.complication-visual,
.hie-staging {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.treatment-item,
.anomaly-item,
.management-item,
.complication-item,
.hie-stage {
  text-align: left;
  padding: 1rem;
  flex: 1;
  min-width: 140px;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.hie-stage {
  padding: 1.25rem;
  border-radius: 1rem;
  margin: 0.5rem;
  border: 2px solid;
}

.stage-mild {
  border-color: #10b981;
}

.stage-moderate {
  border-color: #f59e0b;
}

.stage-severe {
  border-color: #ef4444;
}

.cooling-protocol {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 2rem 0;
  border-left: 5px solid #0ea5e9;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.gestation-visual {
  width: 100%;
  height: 48px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6);
  border-radius: 24px;
  margin: 2rem 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gestation-label {
  position: absolute;
  top: 56px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.substance-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  color: #ffffff;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.25rem;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -----------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ----------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .treatment-item,
  .anomaly-item,
  .management-item,
  .complication-item,
  .hie-stage {
    min-width: 100px;
  }
}

@media screen and (max-width: 600px) {
  .treatment-visual,
  .anomaly-visual,
  .management-visual {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .treatment-item,
  .anomaly-item,
  .management-item {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   END OF PART 1 - Color accents follow in Part 2
   ========================================================= */