/**
 * Typography System - Consistent Heading Fonts
 * RS Melati - Medical Clinic Child Theme
 */

/* Import Google Fonts - Poppins for headings, Inter for body */
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;600;700;800&display=swap');

/* Root Variables */
:root {
    --font-heading: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Global Heading Styles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    color: #1a1a1a;
}

/* Heading Sizes */
h1, .h1 {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    line-height: 1.2;
}

h2, .h2 {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    line-height: 1.25;
}

h3, .h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.3;
}

h4, .h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.4;
}

h5, .h5 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 1.4;
}

h6, .h6 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    line-height: 1.5;
}

a,b, strong {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

/* Body Text */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

/* Section Titles - Consistent across all sections */
.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #4a5565;
    margin-top: 0;
}

/* Homepage specific section titles */
.hero-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
}

/* News & Article Titles */
.article-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
}

.article-title-small {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: #1a1a1a;
}

/* Testimonial headings */
.testimonial-card h4 {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* Footer headings */
footer h3,
footer h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: white;
}

/* News header */
.news-header h2 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Brochure titles */
.brochure-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.brochure-card-title {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* Buttons - use heading font for consistency */
button,
.btn,
.read-more-btn,
.view-all-link {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* Responsive Typography */
@media (max-width: 1024px) {
    h1, .h1 {
        font-size: 2rem; /* 32px */
    }
    
    h2, .h2, .section-title {
        font-size: 1.75rem; /* 28px */
    }
    
    h3, .h3 {
        font-size: 1.375rem; /* 22px */
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    h1, .h1 {
        font-size: 1.75rem; /* 28px */
    }
    
    h2, .h2, .section-title {
        font-size: 1.5rem; /* 24px */
    }
    
    h3, .h3 {
        font-size: 1.25rem; /* 20px */
    }
    
    h4, .h4 {
        font-size: 1.125rem; /* 18px */
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    body {
        font-size: 15px;
    }
}

@media (max-width: 640px) {
    h1, .h1 {
        font-size: 1.5rem; /* 24px */
    }
    
    h2, .h2, .section-title {
        font-size: 1.375rem; /* 22px */
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    body {
        font-size: 14px;
    }
}

/* Utility Classes */
.font-heading {
    font-family: var(--font-heading);
}

.font-body {
    font-family: var(--font-body);
}

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

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

.font-weight-semibold {
    font-weight: 600;
}

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

.font-weight-extrabold {
    font-weight: 800;
}