/*
=========================================================
PRCF GLOBAL DIGITAL INSTITUTION
PRODUCTION MAIN STYLESHEET
Global Heading Scale / Typography Layer
English + Myanmar
=========================================================
*/

/*
---------------------------------------------------------
LOAD EXISTING PRODUCTION DESIGN SYSTEM
---------------------------------------------------------
*/

@import url("/assets/css/base.css");


/*
=========================================================
1. GLOBAL TYPOGRAPHY FOUNDATION
=========================================================
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    overflow-wrap: anywhere;

    text-wrap: balance;
}


h1 {
    line-height: 1.12;
}


h2 {
    line-height: 1.18;
}


h3 {
    line-height: 1.28;
}


p {
    overflow-wrap: break-word;
}


/*
=========================================================
2. HOMEPAGE HERO
=========================================================
*/

.hero h1 {
    max-width: 820px;

    font-size:
        clamp(
            2.15rem,
            4.4vw,
            3.85rem
        );

    font-weight: 750;

    line-height: 1.1;

    letter-spacing: -0.025em;
}


.hero-description {
    max-width: 740px;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.08rem
        );

    line-height: 1.7;
}


/*
=========================================================
3. HOMEPAGE / STANDARD SECTION HEADINGS
=========================================================
*/

.home-section h2,
.page-section h2 {
    max-width: 720px;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.55rem
        );

    line-height: 1.18;

    letter-spacing: -0.018em;
}


.section-intro {
    line-height: 1.7;
}


/*
=========================================================
4. INNER PAGE HERO
=========================================================
*/

.page-hero h1 {
    max-width: 850px;

    font-size:
        clamp(
            2.05rem,
            4.2vw,
            3.75rem
        );

    font-weight: 750;

    line-height: 1.1;

    letter-spacing: -0.025em;
}


.page-intro {
    max-width: 760px;

    line-height: 1.7;
}


/*
=========================================================
5. PAGE CONTENT HEADINGS
=========================================================
*/

.page-overview-content h2 {
    font-size:
        clamp(
            1.55rem,
            2.7vw,
            2.35rem
        );

    line-height: 1.2;

    letter-spacing: -0.015em;
}


/*
=========================================================
6. CARDS / COLLECTION TITLES
=========================================================
*/

.principle-card h3,
.page-card h3,
.publication-card h3,
.roadmap-item h3 {
    font-size:
        clamp(
            0.98rem,
            1.25vw,
            1.08rem
        );

    line-height: 1.35;

    letter-spacing: -0.008em;
}


.principle-card p,
.page-card p,
.publication-card p,
.roadmap-item p {
    line-height: 1.65;
}


/*
=========================================================
7. FEATURE PANELS
=========================================================
*/

.feature-panel h2 {
    font-size:
        clamp(
            1.55rem,
            2.7vw,
            2.35rem
        );

    line-height: 1.2;
}


/*
=========================================================
8. MYANMAR TYPOGRAPHY
=========================================================
*/

html[lang="my"] body,
html[lang="my-MM"] body {
    font-family:
        "Noto Sans Myanmar",
        "Myanmar Text",
        "Pyidaungsu",
        Arial,
        sans-serif;

    line-height: 1.75;
}


/*
---------------------------------------------------------
Myanmar Hero
---------------------------------------------------------
*/

html[lang="my"] .hero h1,
html[lang="my-MM"] .hero h1 {
    max-width: 760px;

    font-size:
        clamp(
            1.85rem,
            3.7vw,
            3.15rem
        );

    font-weight: 700;

    line-height: 1.38;

    letter-spacing: 0;
}


html[lang="my"] .hero-description,
html[lang="my-MM"] .hero-description {
    max-width: 720px;

    font-size:
        clamp(
            0.95rem,
            1.2vw,
            1.03rem
        );

    line-height: 1.85;
}


/*
---------------------------------------------------------
Myanmar Homepage Sections
---------------------------------------------------------
*/

html[lang="my"] .home-section h2,
html[lang="my"] .page-section h2,
html[lang="my-MM"] .home-section h2,
html[lang="my-MM"] .page-section h2 {
    max-width: 700px;

    font-size:
        clamp(
            1.5rem,
            2.6vw,
            2.2rem
        );

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: 0;
}


/*
---------------------------------------------------------
Myanmar Inner Page Hero
---------------------------------------------------------
*/

html[lang="my"] .page-hero h1,
html[lang="my-MM"] .page-hero h1 {
    max-width: 780px;

    font-size:
        clamp(
            1.8rem,
            3.5vw,
            3rem
        );

    font-weight: 700;

    line-height: 1.42;

    letter-spacing: 0;
}


/*
---------------------------------------------------------
Myanmar Page Headings
---------------------------------------------------------
*/

html[lang="my"] .page-overview-content h2,
html[lang="my-MM"] .page-overview-content h2 {
    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2.05rem
        );

    line-height: 1.48;

    letter-spacing: 0;
}


/*
---------------------------------------------------------
Myanmar H3 / Cards
---------------------------------------------------------
*/

html[lang="my"] h3,
html[lang="my-MM"] h3 {
    line-height: 1.55;

    letter-spacing: 0;
}


html[lang="my"] .principle-card h3,
html[lang="my"] .page-card h3,
html[lang="my"] .publication-card h3,
html[lang="my"] .roadmap-item h3,
html[lang="my-MM"] .principle-card h3,
html[lang="my-MM"] .page-card h3,
html[lang="my-MM"] .publication-card h3,
html[lang="my-MM"] .roadmap-item h3 {
    font-size:
        clamp(
            0.95rem,
            1.15vw,
            1.05rem
        );

    line-height: 1.55;

    letter-spacing: 0;
}


html[lang="my"] .principle-card p,
html[lang="my"] .page-card p,
html[lang="my"] .publication-card p,
html[lang="my"] .roadmap-item p,
html[lang="my-MM"] .principle-card p,
html[lang="my-MM"] .page-card p,
html[lang="my-MM"] .publication-card p,
html[lang="my-MM"] .roadmap-item p {
    line-height: 1.8;
}


/*
---------------------------------------------------------
Myanmar Intro / Body Text
---------------------------------------------------------
*/

html[lang="my"] .section-intro,
html[lang="my"] .page-intro,
html[lang="my"] .page-overview-content p,
html[lang="my-MM"] .section-intro,
html[lang="my-MM"] .page-intro,
html[lang="my-MM"] .page-overview-content p {
    line-height: 1.85;
}


/*
=========================================================
9. TABLET
=========================================================
*/

@media (max-width: 1024px) {

    .hero h1 {
        font-size:
            clamp(
                2.1rem,
                5vw,
                3.35rem
            );
    }


    .page-hero h1 {
        font-size:
            clamp(
                2rem,
                4.8vw,
                3.2rem
            );
    }


    .home-section h2,
    .page-section h2 {
        font-size:
            clamp(
                1.6rem,
                3.4vw,
                2.35rem
            );
    }


    html[lang="my"] .hero h1,
    html[lang="my-MM"] .hero h1 {
        font-size:
            clamp(
                1.8rem,
                4.2vw,
                2.8rem
            );
    }


    html[lang="my"] .home-section h2,
    html[lang="my"] .page-section h2,
    html[lang="my-MM"] .home-section h2,
    html[lang="my-MM"] .page-section h2 {
        font-size:
            clamp(
                1.45rem,
                3.1vw,
                2.05rem
            );
    }

}


/*
=========================================================
10. MOBILE
=========================================================
*/

@media (max-width: 767px) {

    .hero {
        padding-top: 64px;

        padding-bottom: 64px;
    }


    .page-hero {
        padding-top: 64px;

        padding-bottom: 58px;
    }


    .hero h1 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.75rem
            );

        line-height: 1.12;
    }


    .page-hero h1 {
        font-size:
            clamp(
                1.9rem,
                8.5vw,
                2.6rem
            );

        line-height: 1.14;
    }


    .home-section h2,
    .page-section h2 {
        font-size:
            clamp(
                1.55rem,
                7vw,
                2.1rem
            );

        line-height: 1.22;
    }


    .page-overview-content h2 {
        font-size:
            clamp(
                1.45rem,
                6.5vw,
                1.95rem
            );
    }


    /*
    -----------------------------------------------------
    Myanmar Mobile
    -----------------------------------------------------
    */

    html[lang="my"] .hero h1,
    html[lang="my-MM"] .hero h1 {
        font-size:
            clamp(
                1.7rem,
                7.5vw,
                2.35rem
            );

        line-height: 1.45;
    }


    html[lang="my"] .page-hero h1,
    html[lang="my-MM"] .page-hero h1 {
        font-size:
            clamp(
                1.65rem,
                7vw,
                2.25rem
            );

        line-height: 1.46;
    }


    html[lang="my"] .home-section h2,
    html[lang="my"] .page-section h2,
    html[lang="my-MM"] .home-section h2,
    html[lang="my-MM"] .page-section h2 {
        font-size:
            clamp(
                1.4rem,
                6vw,
                1.9rem
            );

        line-height: 1.5;
    }


    html[lang="my"] .page-overview-content h2,
    html[lang="my-MM"] .page-overview-content h2 {
        font-size:
            clamp(
                1.35rem,
                5.7vw,
                1.8rem
            );

        line-height: 1.5;
    }

}


/*
=========================================================
11. VERY SMALL MOBILE
=========================================================
*/

@media (max-width: 420px) {

    .hero h1 {
        font-size: 2rem;
    }


    .page-hero h1 {
        font-size: 1.85rem;
    }


    html[lang="my"] .hero h1,
    html[lang="my-MM"] .hero h1 {
        font-size: 1.65rem;

        line-height: 1.48;
    }


    html[lang="my"] .page-hero h1,
    html[lang="my-MM"] .page-hero h1 {
        font-size: 1.58rem;

        line-height: 1.5;
    }

}