/** * Language-specific styles for Khmer (Cambodian) * * WPML Configuration: * - Language code: kh * - Locale: km_KH * - HTML output: * - Body class: */ @import url("https://fonts.googleapis.com/css2?family=Moul&display=swap"); /* ============================================ KHMER FONT STYLES - With !important ============================================ */ /* Method 1: Target HTML lang attribute */ html[lang="kh"] body { font-family: "Noto Sans Khmer", "Battambang", sans-serif !important; line-height: 1.8 !important; } /* Method 2: Using :lang() selector */ body:lang(kh) { font-family: "Noto Sans Khmer", "Battambang", sans-serif !important; line-height: 1.8 !important; letter-spacing: 0.2px !important; } /* Method 3: Using body class added by WPML */ body.lang-kh { font-family: "Noto Sans Khmer", "Battambang", sans-serif !important; line-height: 1.8 !important; } /* ============================================ FONT FALLBACK STACK (Recommended for mixed content) ============================================ */ /* English uses system font, Khmer uses Khmer glyphs */ body { font-family: system-ui, "Noto Sans Khmer", "Battambang", sans-serif !important; } /* ============================================ COMPREHENSIVE ELEMENT TARGETING ============================================ */ /* Headings use Moul font */ html[lang="kh"] h1, html[lang="kh"] h2, html[lang="kh"] h3, html[lang="kh"] h4, html[lang="kh"] h5, html[lang="kh"] h6 { font-family: "Moul", serif !important; font-weight: 400 !important; font-style: normal !important; } /* Body text uses Noto Sans Khmer - BUT exclude icons and special elements */ html[lang="kh"] body, html[lang="kh"] p, html[lang="kh"] li, html[lang="kh"] div, html[lang="kh"] td, html[lang="kh"] th { font-family: "Noto Sans Khmer", "Battambang", "Hanuman", sans-serif !important; } /* Also target with body.lang-kh class */ body.lang-kh h1, body.lang-kh h2, body.lang-kh h3, body.lang-kh h4, body.lang-kh h5, body.lang-kh h6 { font-family: "Moul", serif !important; font-weight: 400 !important; } body.lang-kh body, body.lang-kh p, body.lang-kh li, body.lang-kh div, body.lang-kh td, body.lang-kh th { font-family: "Noto Sans Khmer", "Battambang", "Hanuman", sans-serif !important; } /* ============================================ ICONS - EXCLUDE FROM KHMER FONT (IMPORTANT!) ============================================ */ /* Font Awesome icons - preserve icon font */ html[lang="kh"] .fa, html[lang="kh"] .fas, html[lang="kh"] .far, html[lang="kh"] .fal, html[lang="kh"] .fab, html[lang="kh"] [class^="fa-"], html[lang="kh"] [class*=" fa-"], body.lang-kh .fa, body.lang-kh .fas, body.lang-kh .far, body.lang-kh .fal, body.lang-kh .fab, body.lang-kh [class^="fa-"], body.lang-kh [class*=" fa-"] { font-family: 'Font Awesome 6 Free' !important; font-family: 'Font Awesome 6 Pro' !important; font-weight: 900 !important; } /* Alternative - reset font for all icon-related classes */ html[lang="kh"] i::before, body.lang-kh i::before { font-family: inherit !important; } /* Specifically target common icon wrappers */ html[lang="kh"] .icon, html[lang="kh"] .icon-box, html[lang="kh"] .social-links a, html[lang="kh"] .header-social-links a, html[lang="kh"] .footer-social-links a, body.lang-kh .icon, body.lang-kh .icon-box, body.lang-kh .social-links a, body.lang-kh .header-social-links a, body.lang-kh .footer-social-links a { font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome' !important; } /* ============================================ TYPOGRAPHY ADJUSTMENTS FOR KHMER ============================================ */ :lang(kh) h1, :lang(kh) h2, :lang(kh) h3, :lang(kh) h4, :lang(kh) h5, :lang(kh) h6 { line-height: 1.4 !important; font-weight: 600 !important; } :lang(kh) p { line-height: 1.8 !important; margin-bottom: 1em !important; } /* ============================================ NAVIGATION FOR KHMER ============================================ */ body.lang-kh .main-navigation a, html[lang="kh"] .main-navigation a { padding: 10px 12px !important; font-size: 14px !important; } /* ============================================ BUTTON STYLES FOR KHMER ============================================ */ body.lang-kh .btn, body.lang-kh button, body.lang-kh input[type="submit"], body.lang-kh .wp-block-button__link { font-family: "Noto Sans Khmer", "Battambang", sans-serif !important; letter-spacing: 0 !important; } /* ============================================ WIDGET STYLES FOR KHMER ============================================ */ body.lang-kh .widget-title { font-size: 18px !important; font-weight: 600 !important; } /* ============================================ SITE TITLE AND DESCRIPTION ============================================ */ body.lang-kh .site-title, body.lang-kh .site-description { font-family: "Noto Sans Khmer", sans-serif !important; } /* ============================================ ENTRY CONTENT ============================================ */ body.lang-kh .entry-content, body.lang-kh .entry-content p, body.lang-kh .entry-content span:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) { font-family: "Noto Sans Khmer", "Battambang", sans-serif !important; } /* ============================================ MOBILE RESPONSIVE FOR KHMER ============================================ */ @media only screen and (max-width: 768px) { body.lang-kh { font-size: 15px !important; } body.lang-kh .main-navigation a { padding: 12px 15px !important; font-size: 15px !important; } body.lang-kh h1 { font-size: 24px !important; } body.lang-kh h2 { font-size: 20px !important; } } /* ============================================ WOOCOMMERCE STYLES FOR KHMER ============================================ */ body.lang-kh .woocommerce ul.products li.product .price, body.lang-kh .woocommerce div.product .price { font-family: "Noto Sans Khmer", sans-serif !important; } body.lang-kh .woocommerce-message, body.lang-kh .woocommerce-error, body.lang-kh .woocommerce-info { font-family: "Noto Sans Khmer", sans-serif !important; }