/* Bilingual typography system. Loaded after the legacy theme. */

@font-face {
    font-family: "Noto Sans Lao PSG";
    src: url("../fonts/NotoSansLao-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-light.woff") format("woff");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-medium.woff") format("woff");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-semibold.woff") format("woff");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-bold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-bold.woff") format("woff");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk PSG";
    src: url("../assets2/fonts/hkgrotesk-bold.woff") format("woff");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

:root {
    --psg-font-lao: "Noto Sans Lao PSG", "Noto Sans Lao", "Phetsarath OT", "Leelawadee UI", sans-serif;
    --psg-font-latin: "HK Grotesk PSG", "Noto Sans Lao PSG", "Noto Sans Lao", "Phetsarath OT", "Leelawadee UI", "Segoe UI", Arial, sans-serif;
    --psg-type-caption: 0.875rem;
    --psg-type-body: 1rem;
    --psg-type-lead: 1.25rem;
    --psg-type-subheading: clamp(1.5rem, 2vw, 2rem);
    --psg-type-heading: clamp(2rem, 4vw, 3.5rem);
    --psg-type-display: clamp(2.5rem, 4.5vw, 4.5rem);
}

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea {
    font-family: var(--psg-font-latin);
}

html[lang="lo"] body,
html[lang="lo"] button,
html[lang="lo"] input,
html[lang="lo"] select,
html[lang="lo"] textarea {
    font-family: var(--psg-font-lao);
    font-weight: 500;
    font-synthesis: none;
}

/* Keep Lao text consistent when it appears inside the English version. */
html[lang="en"] :lang(lo) {
    font-family: var(--psg-font-lao) !important;
    font-weight: 500 !important;
    font-synthesis: none;
    letter-spacing: 0;
}

html[lang="en"] h1:lang(lo),
html[lang="en"] h2:lang(lo),
html[lang="en"] h3:lang(lo),
html[lang="en"] .h1:lang(lo),
html[lang="en"] .h2:lang(lo),
html[lang="en"] .h3:lang(lo) {
    line-height: 1.38;
}

body {
    min-width: 0;
    font-size: var(--psg-type-body);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

html[lang="en"] body {
    line-height: 1.65;
}

html[lang="lo"] body {
    line-height: 1.8;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.menu_side_area a,
.btn-main,
.subtitle,
a, li, ul {
    font-family: inherit !important;
}

h1, h2, h3,
.h1, .h2, .h3 {
    max-width: 24ch;
    text-wrap: balance;
}

p, li,
.news-title,
.project-content h3 {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] .h1,
html[lang="en"] .h2,
html[lang="en"] .h3 {
    line-height: 1.16;
    letter-spacing: -0.02em;
}

html[lang="lo"] h1,
html[lang="lo"] h2,
html[lang="lo"] h3,
html[lang="lo"] h4,
html[lang="lo"] h5,
html[lang="lo"] h6,
html[lang="lo"] .h1,
html[lang="lo"] .h2,
html[lang="lo"] .h3,
html[lang="lo"] .h4,
html[lang="lo"] .h5,
html[lang="lo"] .h6,
html[lang="lo"] strong,
html[lang="lo"] b,
html[lang="lo"] .fw-bold {
    font-weight: 500 !important;
}

html[lang="lo"] h1,
html[lang="lo"] h2,
html[lang="lo"] h3,
html[lang="lo"] .h1,
html[lang="lo"] .h2,
html[lang="lo"] .h3 {
    line-height: 1.38;
    letter-spacing: 0;
}

.hero-video-section h1,
.hero-video-section .fs-100 {
    width: 100%;
    max-width: none;
    font-size: var(--psg-type-display) !important;
    line-height: 1.15 !important;
}

@media (min-width: 992px) {
    .hero-video-section h1,
    .hero-video-section .fs-100 {
        white-space: nowrap;
        text-wrap: nowrap;
    }
}

.news-title,
.project-content h3 {
    height: auto !important;
    min-height: 0;
}

.news-desc {
    max-width: 65ch;
}

.subtitle {
    line-height: 1.45;
}

html[lang="lo"] .subtitle {
    line-height: 1.65;
}

@media (max-width: 767px) {
    h1, h2, h3,
    .h1, .h2, .h3,
    .hero-video-section h1,
    .hero-video-section .fs-100 {
        max-width: 100%;
        line-height: 1.25 !important;
        white-space: normal;
    }
}