/*
=========================================================
 BELAIR HILL JUNIOR SCHOOL
 EDITORIAL FONT DEFINITIONS
=========================================================
*/

@import url(
    "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap"
);


/*
=========================================================
 FONT SYSTEM
=========================================================

 DM Sans
 - Navigation
 - Buttons
 - Labels
 - Body text
 - Cards
 - Information blocks

 Playfair Display
 - Main headings
 - Section headings
 - Motto
 - Quotes
 - Editorial highlights
=========================================================
*/

:root {

    --font-body:
        "DM Sans",
        Arial,
        sans-serif;

    --font-heading:
        "Playfair Display",
        Georgia,
        serif;

}


/*
=========================================================
 GLOBAL FONT APPLICATION
=========================================================
*/

html,
body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}


/*
=========================================================
 EDITORIAL HEADINGS
=========================================================
*/

.hero h1,
.learning-content h2,
.identity-heading h2,
.identity-card h3,
.glance-title h2,
.section-heading h2,
.welcome-content h2,
.facility-content h3,
.video-overlay h3,
.difference-content h2,
.social-heading h2,
.portal-section-heading h2,
.journey-step h3 {

    font-family:
        var(--font-heading);

}


/*
=========================================================
 UI / INFORMATION TYPOGRAPHY
=========================================================
*/

.nav-links,
.portal-info,
.portal-heading,
.announcement,
.btn,
.apply-btn,
.section-label,
.news-date,
.portal-enter,
.footer-links,
.footer-contact,
.glance-item span {

    font-family:
        var(--font-body);

}


/*
=========================================================
 EDITORIAL QUOTES
=========================================================
*/

.motto-text,
.welcome-quote,
.testimonial p {

    font-family:
        var(--font-heading);

}


/*
=========================================================
 FONT WEIGHT GUIDE
=========================================================

 400 = Normal body
 500 = Supporting text
 600 = Medium emphasis
 700 = Strong headings/buttons
 800 = Labels/navigation

=========================================================
*/