/* 
 * Responsive Typography Styles
 * 
 * This file contains responsive font styling for the EduSpark theme.
 * It provides consistent typography across devices (desktop, tablet, mobile).
 */

/* Import required font families */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Poppins:wght@400&family=Open+Sans:wght@400;600&display=swap');

/* Root variables for typography */
:root {
  /* Font families */
  --heading-font: 'Inter', sans-serif;
  --body-font: 'Poppins', sans-serif;
  
  /* Desktop font sizes (default) */
  --h1-font-size: 32px;
  --h2-font-size: 24px;
  --paragraph-font-size: 16px;
  --footer-font-size: 14px;
  --button-font-size: 16px;
  
  /* Line heights */
  --h1-line-height: 1.3;
  --h2-line-height: 1.4;
  --paragraph-line-height: 1.6;
  --footer-line-height: 1.5;
}

/* Base typography styles */
body {
  font-family: var(--body-font);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
}

/* Heading styles - Desktop (default) */
h1, .hero-title, .section-title {
  font-family: var(--heading-font);
  font-size: var(--h1-font-size);
  font-weight: 600;
  line-height: var(--h1-line-height);
}

h2, .feature-card h3, .course-title, .testimonial-author-info h4 {
  font-family: var(--heading-font);
  font-size: var(--h2-font-size);
  font-weight: 600;
  line-height: var(--h2-line-height);
}

/* Paragraph styles */
p, .hero-description, .feature-card p, .course-excerpt p, 
.testimonial-text, .about-description, .about-feature-item p {
  font-family: var(--body-font);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
}

/* Footer text styles */
.site-footer, .footer-widget, .footer-menu a, 
.footer-contact-item, .footer-newsletter-text, 
.footer-social-title, .site-info {
  font-family: var(--body-font);
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
}

/* Button styles */
.btn, .hero-btn, .course-btn, .cta-content .btn, 
.newsletter-submit, .btn-large, .btn-small {
  font-family: var(--heading-font);
  font-size: var(--button-font-size);
  font-weight: 600;
}

/* Specific adjustments for "Why Choose Us" section */
.section-title {
  font-weight: 600;
  margin-bottom: 40px;
}

.feature-card h3 {
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Specific adjustments for Courses section */
.section-title-courses {
  font-weight: 600;
}

/* Specific adjustments for CTA section */
.cta-content h2 {
  font-weight: 600;
}

/* Tablet styles (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --h1-font-size: 28px;
    --h2-font-size: 20px;
    --paragraph-font-size: 15px;
    --footer-font-size: 13px;
    --button-font-size: 15px;
  }
}

/* Mobile styles (< 768px) */
@media (max-width: 768px) {
  :root {
    --h1-font-size: 24px;
    --h2-font-size: 18px;
    --paragraph-font-size: 14px;
    --footer-font-size: 12px;
    --button-font-size: 14px;
  }
  
  /* Additional mobile-specific adjustments */
  .hero-title, .section-title, .section-title-courses {
    margin-bottom: 20px;
  }
  
  .footer-widget-title {
    font-size: 18px;
    margin-bottom: 15px;
  }
}

/* Extra small devices (< 576px) */
@media (max-width: 576px) {
  .hero-title {
    font-size: 22px;
  }
  
  .feature-card h3 {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  .course-title, .feature-card h3 {
    font-size: 17px;
  }
}