/*
 * Thai typography for the /th/ site. Loads AFTER brand-fonts.css (the full
 * weight-range Bounded declarations live there and must be declared first).
 *
 * Font: Noto Sans Thai - the brand Thai face per the Brand Identity Guidelines
 * (p.20/32) - the same NotoSansThai variable font the MotionReach deck template
 * ships, subsetted to the Thai unicode range (44 KB woff2, self-hosted).
 *
 * ONE alias face per family at font-weight 100 900, matching the descriptors of
 * the brand-fonts.css Bounded faces EXACTLY. Chrome only composes
 * unicode-range segments across faces when their weight descriptors are
 * identical; a 100-649/650-900 split was tried and it broke Latin resolution
 * entirely (hero fell back to serif). Weight POLICY therefore lives in the CSS
 * rules at the bottom of this file, not in @font-face descriptors.
 *
 * 2026-10-19: the Bounded Font / Bounded Light / Bounded Default Thai aliases moved to
 * brand-fonts.css (MR_FONT_CI_20261019) with weight-capped Noto instances, so they apply on EN
 * pages too and Thai never renders heavier than SemiBold. Only the non-brand aliases remain here.
 */


/* ---- other families that carry Thai (widget/addon styles) ---------------- */

@font-face {
    font-family: 'Roboto';
    src: url('fonts/noto-sans-thai-brand.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+02D7, U+0303, U+0331;
}
@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/noto-sans-thai-brand.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+02D7, U+0303, U+0331;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/noto-sans-thai-brand.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+02D7, U+0303, U+0331;
}
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('fonts/noto-sans-thai-brand.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC, U+02D7, U+0303, U+0331;
}

/*
 * Elements that inherit the theme system font stack never name a family we can
 * alias, so slot Noto Sans Thai in just before the generic fallback. Latin
 * resolution is unchanged; only Thai glyphs reach the Noto entry.
 */
html[lang="th"] body,
html[lang="th"] input,
html[lang="th"] textarea,
html[lang="th"] select,
html[lang="th"] button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/*
 * WEIGHT POLICY (Guy's review: Thai body text must not be bold).
 *
 * The site's body styles ask for weight 600 because the English design leans on
 * Bounded ExtraLight, which reads light at any weight now that synthesis is
 * off. Noto is a real variable font and honestly renders 600 as Semi Bold, so
 * Thai paragraphs looked bold. Reset running text to 400 on Thai pages:
 * - Latin inside those paragraphs is visually unaffected (static Bounded file
 *   renders identically across its declared range),
 * - explicit <b>/<strong> emphasis still bolds (own UA weight, not inherited),
 * - headings keep their 700+ styles -> Noto Semi Bold+ per the brand spec.
 */
html[lang="th"] .elementor-widget-text-editor,
html[lang="th"] .elementor-widget-text-editor p,
html[lang="th"] .elementor-widget-text-editor li,
html[lang="th"] .elementor-icon-box-description,
html[lang="th"] .elementor-icon-list-text,
html[lang="th"] .wps-excerpt {
    font-weight: 400;
}

/*
 * NB: no `word-break: break-word` here. It breaks the Latin words that sit
 * inside Thai pages (it split the header "CONTACT US" into "CONTAC / T US"),
 * and modern browsers already wrap Thai at cluster boundaries on their own.
 *
 * Thai stacks vowel and tone marks above and below the baseline, so the tight
 * display leading used for the English headlines clips them. Scoped to page
 * content so the header nav keeps its own spacing.
 */
html[lang="th"] .elementor-widget-container h1,
html[lang="th"] .elementor-widget-container h2,
html[lang="th"] .elementor-widget-container h3,
html[lang="th"] .elementor-heading-title {
    line-height: 1.35;
}

html[lang="th"] .elementor-widget-text-editor,
html[lang="th"] .elementor-widget-text-editor p,
html[lang="th"] .elementor-widget-text-editor li {
    line-height: 1.75;
}