/* ============================================
   TYPOGRAPHY STANDARDS
   Standardized typography system with clamp()
   for fluid responsive sizing
   ============================================ */

/* ============================================
   NEW TYPOGRAPHY SYSTEM
   Uses clamp() for fluid responsive sizing
   ============================================ */

/* Hero Title - Only for main page hero section */
.hero-title {
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-white);
  text-align: center;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}

/* Section Title - For section headings */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-white);
  text-align: center;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Section Subtitle - For subsection headings within sections */
.section-subtitle {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-white);
  text-align: left;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Card Title - For card headings */
.card-title {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-white);
  margin-bottom: 0.75rem;
}

/* ============================================
   LEGACY CLASSES (Backward Compatibility)
   Kept for existing pages, prefer new system
   ============================================ */

/* --- Legacy Heading Styles --- */
.page-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  color: var(--color-text-white);
  text-align: center;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.page-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: var(--color-text-white);
  text-align: left;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Homepage-specific aliases (for backward compatibility) */
.homepage-section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
}

.homepage-section-subtitle {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
}

/* --- Text Utilities --- */
.text-white {
  color: var(--color-text-white);
}

.text-primary {
  color: var(--color-primary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ============================================
   MOBILE TYPOGRAPHY OPTIMIZATIONS
   Enhanced readability on mobile devices
   ============================================ */

/* Mobile - 768px and below */
@media (max-width: 768px) {
  /* Improved line heights for mobile readability */
  .section-title,
  .homepage-section-title {
    line-height: 1.4 !important;
    margin-bottom: 1.25rem;
  }

  .section-subtitle,
  .homepage-section-subtitle {
    line-height: 1.5 !important;
    margin-bottom: 0.875rem;
  }

  /* Paragraph spacing for better mobile reading */
  p,
  .section-text,
  .section-description {
    line-height: 1.7 !important;
    margin-bottom: 1.25rem;
  }

  /* Card titles - better spacing */
  .card-title {
    line-height: 1.5 !important;
    margin-bottom: 0.875rem;
  }
}

/* Small Mobile - 576px and below */
@media (max-width: 576px) {
  /* Even more spacing for small screens */
  .section-title,
  .homepage-section-title {
    line-height: 1.35 !important;
    margin-bottom: 1rem;
  }

  p,
  .section-text,
  .section-description {
    line-height: 1.75 !important;
    margin-bottom: 1rem;
  }
}