/* ========================================
   FamU Foundation - Typography Enhancement
   Professional Font Hierarchy & Consistency
   ======================================== */

/* ========================================
   TYPOGRAPHY HIERARCHY
   ======================================== */

/* Main Headings */
h1, .title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--primary-title) !important;
  margin-bottom: 1.5rem !important;
}

h2, .section-title {
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--primary-title) !important;
  margin-bottom: 1.25rem !important;
}

h3, .subsection-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--secondary-title) !important;
  margin-bottom: 1rem !important;
}

h4, .card-title {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--secondary-title) !important;
  margin-bottom: 0.75rem !important;
}

h5 {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--tertiary-title) !important;
  margin-bottom: 0.5rem !important;
}

h6 {
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--tertiary-title) !important;
  margin-bottom: 0.5rem !important;
}

/* ========================================
   BODY TEXT & PARAGRAPHS
   ======================================== */

p, .pera {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--primary-paragraph) !important;
  margin-bottom: 1rem !important;
}

.lead, .intro-text {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: var(--secondary-paragraph) !important;
  margin-bottom: 1.5rem !important;
}

.small, small {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: var(--gray-text) !important;
}

/* ========================================
   PROGRAM PAGE SPECIFIC FIXES
   ======================================== */

/* Program Cards */
.program-card h3,
.program-card .title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--primary-title) !important;
  margin-bottom: 1rem !important;
}

.program-card p,
.program-card .description {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--primary-paragraph) !important;
}

.program-card .summary {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  color: var(--secondary-paragraph) !important;
  font-weight: 400 !important;
  margin-bottom: 1.5rem !important;
}

/* Program Lists */
.program-list li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--primary-paragraph) !important;
  margin-bottom: 0.5rem !important;
}

/* ========================================
   FAQ PAGE SPECIFIC FIXES
   ======================================== */

/* FAQ Section Headings */
.faq-section h2,
.faq-category-title {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: var(--primary-title) !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

/* FAQ Questions */
.faq-question,
.accordion-button {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: var(--secondary-title) !important;
  line-height: 1.4 !important;
}

/* FAQ Answers */
.faq-answer,
.accordion-body {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--primary-paragraph) !important;
}

/* FAQ Category Descriptions */
.faq-category-description {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--gray-text) !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

/* ========================================
   GET INVOLVED PAGE SPECIFIC FIXES
   ======================================== */

/* Volunteer Section Headings */
.volunteer-section h2 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--primary-title) !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
}

.volunteer-section .subtitle {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  color: var(--gray-text) !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

/* Volunteer Cards */
.volunteer-card h3,
.volunteer-opportunity-title {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  color: var(--secondary-title) !important;
  margin-bottom: 1rem !important;
}

.volunteer-card p,
.volunteer-description {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--primary-paragraph) !important;
  margin-bottom: 1rem !important;
}

/* Volunteer Requirements */
.volunteer-requirements li,
.requirement-item {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: var(--tertiary-paragraph) !important;
  margin-bottom: 0.25rem !important;
}

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

@media (max-width: 768px) {
  h1, .title {
    font-size: 2rem !important;
  }
  
  h2, .section-title {
    font-size: 1.75rem !important;
  }
  
  h3, .subsection-title {
    font-size: 1.375rem !important;
  }
  
  h4, .card-title {
    font-size: 1.125rem !important;
  }
  
  .lead, .intro-text {
    font-size: 1rem !important;
  }
  
  .volunteer-section h2 {
    font-size: 1.75rem !important;
  }
  
  .faq-section h2 {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  h1, .title {
    font-size: 1.75rem !important;
  }
  
  h2, .section-title {
    font-size: 1.5rem !important;
  }
  
  h3, .subsection-title {
    font-size: 1.25rem !important;
  }
  
  .volunteer-section h2 {
    font-size: 1.5rem !important;
  }
  
  .faq-section h2 {
    font-size: 1.375rem !important;
  }
}

/* ========================================
   BUTTON TEXT CONSISTENCY
   ======================================== */

.btn, .donate-btn, .primary-btn {
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.025em !important;
}

.btn-sm {
  font-size: 0.875rem !important;
}

.btn-lg {
  font-size: 1.125rem !important;
}

/* ========================================
   LIST STYLING CONSISTENCY
   ======================================== */

ul li, ol li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--primary-paragraph) !important;
  margin-bottom: 0.5rem !important;
}

/* Navigation Lists */
.listing li a {
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

label {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--secondary-title) !important;
  margin-bottom: 0.5rem !important;
}

input, textarea, select {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* ========================================
   BREADCRUMB CONSISTENCY
   ======================================== */

.breadcrumb-item a {
  font-size: 0.9375rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.breadcrumb-item.active {
  font-size: 0.9375rem !important;
  color: var(--white) !important;
}

/* ========================================
   FOOTER TEXT CONSISTENCY
   ======================================== */

.footer-wrapper h4 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  margin-bottom: 1rem !important;
}

.footer-wrapper p,
.footer-wrapper li {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-wrapper a {
  font-size: 0.9375rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-wrapper a:hover {
  color: var(--white) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-large {
  font-size: 1.125rem !important;
}

.text-small {
  font-size: 0.875rem !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-medium {
  font-weight: 500 !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Ensure sufficient contrast */
.text-muted {
  color: var(--gray-text) !important;
}

/* Focus states for better accessibility */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}