/* MOTERNA Global Typography & Localization UI v1.0 */
:root{
  --font-en:"Inter",Arial,sans-serif;
  --font-th:"Prompt","Inter",Tahoma,sans-serif;
  --font-cn:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
  --moterna-red:#f02731;
}
html{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html[lang="en"] body{font-family:var(--font-en)}
html[lang="th"] body{font-family:var(--font-th)}
html[lang="cn"] body{font-family:var(--font-cn)}
button,input,select,textarea{font-family:inherit}

/* Keep Latin brand marks crisp even inside TH/CN interfaces. */
.brand,.footer-brand,.admin-brand,.ws-brand{font-family:var(--font-en)}

/* Public navigation: language-aware width and rhythm. */
.main-nav{letter-spacing:0}
html[lang="en"] .main-nav{gap:18px}
html[lang="th"] .main-nav{gap:16px;font-size:13.5px;font-weight:600}
html[lang="cn"] .main-nav{gap:18px;font-size:13.5px;font-weight:600}
html[lang="th"] .request-btn,html[lang="th"] .btn{font-weight:650}
html[lang="cn"] .request-btn,html[lang="cn"] .btn{font-weight:650}

/* Base editorial typography. */
h1,h2,h3,h4,p{overflow-wrap:anywhere}
h1,h2,h3{font-family:inherit;text-wrap:balance}
p,.article-body,.card p{font-family:inherit}
html[lang="en"] h1,html[lang="en"] h2{letter-spacing:-.045em}
html[lang="th"] h1,html[lang="th"] h2{letter-spacing:-.018em;line-height:1.12;font-weight:700}
html[lang="th"] h3{letter-spacing:-.008em;line-height:1.28;font-weight:650}
html[lang="th"] p,html[lang="th"] .article-body{line-height:1.78}
html[lang="cn"] h1,html[lang="cn"] h2{letter-spacing:-.025em;line-height:1.08;font-weight:700}
html[lang="cn"] p,html[lang="cn"] .article-body{line-height:1.72}
html[lang="th"] .eyebrow,html[lang="cn"] .eyebrow{text-transform:none;letter-spacing:.04em}

/* Forms: the Thai glyphs need a little more vertical room. */
html[lang="th"] .field input,html[lang="th"] .field select,html[lang="th"] .field textarea,
html[lang="th"] .search-bar input{line-height:1.55}

/* Home v2 — English can be compressed; Thai/Chinese must breathe. */
html[lang="th"] .mhome .mh-kicker,
html[lang="th"] .mhome .mh-section-head>div>span,
html[lang="th"] .mhome .mh-community-copy>span,
html[lang="th"] .mhome .mh-cta-box>div>span,
html[lang="cn"] .mhome .mh-kicker,
html[lang="cn"] .mhome .mh-section-head>div>span,
html[lang="cn"] .mhome .mh-community-copy>span,
html[lang="cn"] .mhome .mh-cta-box>div>span{letter-spacing:.04em;text-transform:none;font-weight:700}
html[lang="th"] .mhome .mh-hero-copy h1{font-size:clamp(58px,6.8vw,104px);line-height:1.01;letter-spacing:-.032em;max-width:860px;font-weight:700;margin-top:26px;margin-bottom:28px}
html[lang="th"] .mhome .mh-hero-copy h1 span{margin-bottom:.04em}
html[lang="th"] .mhome .mh-hero-copy>p{font-size:17px;line-height:1.72;max-width:680px}
html[lang="th"] .mhome .mh-section-head h2{font-size:clamp(34px,4vw,58px);line-height:1.12;letter-spacing:-.025em;font-weight:700;max-width:900px}
html[lang="th"] .mhome .mh-community-copy h2{font-size:clamp(40px,5vw,68px);line-height:1.08;letter-spacing:-.026em;font-weight:700}
html[lang="th"] .mhome .mh-cta-box h2{line-height:1.1;letter-spacing:-.022em;font-weight:700}
html[lang="th"] .mhome .mh-route strong,html[lang="th"] .mhome .mh-equipment-meta strong,html[lang="th"] .mhome .mh-company strong{font-weight:650}
html[lang="cn"] .mhome .mh-hero-copy h1{font-size:clamp(58px,6.5vw,100px);line-height:.96;letter-spacing:-.04em;font-weight:700}
html[lang="cn"] .mhome .mh-hero-copy>p{line-height:1.7}
html[lang="cn"] .mhome .mh-section-head h2{letter-spacing:-.03em;line-height:1.06;font-weight:700}

/* Equipment v4 — prevent Thai copy from looking squeezed into an English layout. */
html[lang="th"] .eq4-page h1{letter-spacing:-.022em!important;line-height:1.08!important;font-weight:700!important}
html[lang="th"] .eq4-page h2{letter-spacing:-.018em!important;line-height:1.12!important;font-weight:700!important}
html[lang="th"] .eq4-page p{line-height:1.7}
html[lang="th"] .eq4-section-head>div>span,html[lang="th"] .eq4-kicker{text-transform:none!important;letter-spacing:.035em!important}
html[lang="cn"] .eq4-page h1,html[lang="cn"] .eq4-page h2{letter-spacing:-.025em!important}

/* Community v2.3 */
html[lang="th"] .mc3-hero-copy h1{letter-spacing:-.015em;line-height:1.12;font-weight:700}
html[lang="th"] .mc3-hero-copy p{line-height:1.65}
html[lang="th"] .mc3-text{line-height:1.66}
html[lang="th"] .mc3-modal-card h2,html[lang="th"] .mc3-standalone-copy h1{letter-spacing:-.018em;line-height:1.14;font-weight:700}
html[lang="cn"] .mc3-hero-copy h1,html[lang="cn"] .mc3-modal-card h2{letter-spacing:-.02em}

/* Footer — don't leave a blank contact block when MOTERNA contact isn't configured yet. */
.footer-contact-fallback{max-width:280px;margin-bottom:10px!important}
.footer-contact-cta{display:inline-flex;align-items:center;gap:8px;color:#fff!important;border:1px solid #3a4248;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:700;transition:.18s ease}
.footer-contact-cta:hover{background:#fff;color:#171b1f!important;border-color:#fff}
.site-footer strong{font-weight:700}
html[lang="th"] .site-footer p,html[lang="cn"] .site-footer p{line-height:1.72}

/* Admin shell */
html[lang="en"] .admin-shell{font-family:var(--font-en)}
html[lang="th"] .admin-shell{font-family:var(--font-th)}
html[lang="cn"] .admin-shell{font-family:var(--font-cn)}
html[lang="th"] .admin-shell .nav-label,html[lang="cn"] .admin-shell .nav-label{text-transform:none;letter-spacing:.04em}
html[lang="th"] .admin-shell .sidebar nav a{font-size:14px;line-height:1.45;font-weight:500}
html[lang="th"] .admin-shell .field label{font-size:12.5px;font-weight:650}
html[lang="th"] .admin-shell .table th{text-transform:none;letter-spacing:.02em;font-weight:650}
.admin-lang-switch{display:flex;gap:3px;background:#f0f2f4;padding:3px;border-radius:999px;margin-left:8px}
.admin-lang-switch a{min-width:32px;text-align:center;padding:6px 8px;border-radius:999px;color:#59636b!important;font-size:11px!important;font-weight:650!important}
.admin-lang-switch a.active{background:#fff;color:#171b1f!important;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.admin-contact-note{margin-top:7px;font-size:12px;color:#66717b;line-height:1.5}
.admin-contact-note.warn{color:#9a4b16;background:#fff6e9;border:1px solid #f4d9b7;border-radius:9px;padding:8px 10px}

/* Workspace */
html[lang="en"] .ws-shell{font-family:var(--font-en)}
html[lang="th"] .ws-shell{font-family:var(--font-th)}
html[lang="cn"] .ws-shell{font-family:var(--font-cn)}
html[lang="th"] .ws-side .lab,html[lang="cn"] .ws-side .lab{text-transform:none;letter-spacing:.035em}
html[lang="th"] .ws-side nav a{line-height:1.45}

@media(max-width:760px){
  html[lang="th"] .mhome .mh-hero-copy h1{font-size:clamp(50px,15vw,78px);line-height:1.04}
  html[lang="th"] .mhome .mh-section-head h2{font-size:38px;line-height:1.13}
  html[lang="cn"] .mhome .mh-hero-copy h1{font-size:clamp(50px,15vw,78px)}
  .admin-lang-switch{margin-left:0}
}

/* Admin topbar layout with language switch */
.admin-shell .top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
@media(max-width:760px){.admin-shell .top-actions>a{display:none}.admin-lang-switch a{padding:5px 7px;min-width:30px}}

/* =========================================================
   MOTERNA TH / Prompt typography correction v1.1
   - Prompt for every Thai UI surface
   - Thai display type gets independent metrics from EN/CN
   - Hero lines use real vertical gaps to prevent glyph overlap
   ========================================================= */
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea{
  font-family:var(--font-th)!important;
}

/* Thai headlines need more vertical room than compressed Latin display type. */
html[lang="th"] h1,
html[lang="th"] h2{
  font-family:var(--font-th)!important;
  font-weight:700!important;
  letter-spacing:-.012em!important;
  line-height:1.18!important;
  word-break:normal;
  overflow-wrap:break-word;
}
html[lang="th"] h3,
html[lang="th"] h4{
  font-family:var(--font-th)!important;
  font-weight:600!important;
  letter-spacing:0!important;
  line-height:1.35!important;
}

/* Home hero: never let Thai glyphs from adjacent lines touch. */
html[lang="th"] .mhome .mh-hero-copy h1{
  display:grid!important;
  grid-auto-flow:row;
  gap:.10em!important;
  font-family:var(--font-th)!important;
  font-size:clamp(50px,6.15vw,90px)!important;
  font-weight:700!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
  max-width:880px!important;
  margin-top:24px!important;
  margin-bottom:28px!important;
}
html[lang="th"] .mhome .mh-hero-copy h1 span{
  display:block!important;
  line-height:1.08!important;
  margin:0!important;
  padding:.015em 0 .035em!important;
}
html[lang="th"] .mhome .mh-hero-copy h1 .is-red{
  color:var(--mh-red);
}
html[lang="th"] .mhome .mh-hero-copy>p{
  font-size:16px!important;
  line-height:1.82!important;
  max-width:720px!important;
}

/* Home section display type: cleaner Prompt proportions. */
html[lang="th"] .mhome .mh-section-head h2{
  font-size:clamp(32px,3.8vw,56px)!important;
  line-height:1.22!important;
  letter-spacing:-.012em!important;
  font-weight:700!important;
}
html[lang="th"] .mhome .mh-community-copy h2{
  font-size:clamp(38px,4.8vw,64px)!important;
  line-height:1.18!important;
  letter-spacing:-.012em!important;
}
html[lang="th"] .mhome .mh-cta-box h2{
  line-height:1.20!important;
  letter-spacing:-.01em!important;
}
html[lang="th"] .mhome .mh-news-copy h3,
html[lang="th"] .mhome .mh-news-item h3,
html[lang="th"] .mhome .mh-knowledge-row strong,
html[lang="th"] .mhome .mh-event strong{
  line-height:1.45!important;
  letter-spacing:0!important;
  font-weight:600!important;
}

/* Equipment / catalog headings. */
html[lang="th"] .eq4-page h1{
  font-family:var(--font-th)!important;
  font-size:clamp(42px,5vw,70px)!important;
  line-height:1.16!important;
  letter-spacing:-.015em!important;
  font-weight:700!important;
}
html[lang="th"] .eq4-page h2{
  line-height:1.22!important;
  letter-spacing:-.01em!important;
  font-weight:700!important;
}

/* Community display and messages. */
html[lang="th"] .mc3-hero-copy h1,
html[lang="th"] .mc3-modal-card h2,
html[lang="th"] .mc3-standalone-copy h1{
  font-family:var(--font-th)!important;
  line-height:1.22!important;
  letter-spacing:-.01em!important;
  font-weight:700!important;
}
html[lang="th"] .mc3-text,
html[lang="th"] .mc3-hero-copy p{
  line-height:1.78!important;
}

/* Admin + Workspace: Prompt everywhere, comfortable control height. */
html[lang="th"] .admin-shell,
html[lang="th"] .ws-shell{
  font-family:var(--font-th)!important;
}
html[lang="th"] .admin-shell input,
html[lang="th"] .admin-shell select,
html[lang="th"] .admin-shell textarea,
html[lang="th"] .admin-shell button,
html[lang="th"] .ws-shell input,
html[lang="th"] .ws-shell select,
html[lang="th"] .ws-shell textarea,
html[lang="th"] .ws-shell button{
  font-family:var(--font-th)!important;
  line-height:1.55;
}
html[lang="th"] .admin-shell .topbar strong,
html[lang="th"] .ws-shell .ws-top strong{
  font-weight:600;
}

@media(max-width:760px){
  html[lang="th"] .mhome .mh-hero-copy h1{
    font-size:clamp(44px,13vw,68px)!important;
    line-height:1.12!important;
    gap:.09em!important;
  }
  html[lang="th"] .mhome .mh-hero-copy h1 span{
    line-height:1.12!important;
  }
  html[lang="th"] .mhome .mh-section-head h2{
    font-size:36px!important;
    line-height:1.24!important;
  }
}