/* -------------------------------------
THAI BLOG TYPOGRAPHY OVERRIDES
Load AFTER /styles/blog.css
------------------------------------- */

html[lang="th"] .article-main,
html[lang="th"] .seo-main,
html[lang="th"] .article-side,
html[lang="th"] .mag-card-body,
html[lang="th"] .card,
html[lang="th"] .breadcrumbs,
html[lang="th"] .navlinks,
html[lang="th"] .mobileLinks{
  font-family: "Noto Sans Thai", "Tahoma", "Leelawadee UI", "Segoe UI", system-ui, sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* -------------------------------------
MAIN ARTICLE TEXT
Thai should NOT use first-line indent or justification
------------------------------------- */

html[lang="th"] .article-main p,
html[lang="th"] .seo-main p,
html[lang="th"] .seo-container p{
  text-indent: 0;
  text-align: left;
  text-wrap: pretty;
  hyphens: none;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.9;
  font-size: 1.04rem;
  margin: 0 0 16px;
  max-width: 72ch;
  color: var(--muted);
}

html[lang="th"] .lead{
  text-indent: 0;
  text-align: left;
  line-height: 1.92;
  font-size: 1.08rem;
  color: var(--text);
}

/* -------------------------------------
HEADINGS
Thai usually benefits from slightly looser line-height
------------------------------------- */

html[lang="th"] .article-main h1,
html[lang="th"] .seo-main h1{
  letter-spacing: 0;
  line-height: 1.2;
  word-break: break-word;
}

html[lang="th"] .article-main h2,
html[lang="th"] .seo-main h2,
html[lang="th"] .seo-container h2{
  letter-spacing: 0;
  line-height: 1.42;
  margin: 34px 0 12px;
}

html[lang="th"] .article-main h3,
html[lang="th"] .seo-main h3,
html[lang="th"] .seo-container h3{
  letter-spacing: 0;
  line-height: 1.45;
}

/* -------------------------------------
META / BREADCRUMBS / LABELS
------------------------------------- */

html[lang="th"] .breadcrumbs{
  letter-spacing: 0;
  line-height: 1.6;
}

html[lang="th"] .crumb-current,
html[lang="th"] .crumb-sep{
  letter-spacing: 0;
}

html[lang="th"] .eyebrow,
html[lang="th"] .article-meta,
html[lang="th"] .mag-meta,
html[lang="th"] .card-meta,
html[lang="th"] .section-badge,
html[lang="th"] .toc-label,
html[lang="th"] .hero-badge{
  letter-spacing: 0;
}

html[lang="th"] .article-meta span{
  line-height: 1.4;
}

/* -------------------------------------
BUTTONS / NAV
Thai labels can wrap differently, so keep them comfortable
------------------------------------- */

html[lang="th"] .btn{
  line-height: 1.35;
  letter-spacing: 0;
}

html[lang="th"] .navlinks a,
html[lang="th"] .mobileLinks a,
html[lang="th"] .smallLinks a{
  letter-spacing: 0;
}

/* -------------------------------------
CARDS / BLOG INDEX
------------------------------------- */

html[lang="th"] .mag-card-body p,
html[lang="th"] .card p{
  text-align: left;
  text-indent: 0;
  line-height: 1.82;
}

html[lang="th"] .mag-card-body h3,
html[lang="th"] .card h3{
  line-height: 1.38;
  letter-spacing: 0;
}

html[lang="th"] .mag-tag,
html[lang="th"] .card-tag{
  letter-spacing: 0;
}

/* -------------------------------------
TOC / SIDEBAR
------------------------------------- */

html[lang="th"] .toc a{
  line-height: 1.65;
  letter-spacing: 0;
}

html[lang="th"] .callout p{
  text-indent: 0;
  text-align: left;
  line-height: 1.82;
}

/* -------------------------------------
LISTS / FAQ
------------------------------------- */

html[lang="th"] .article-main ul,
html[lang="th"] .article-main ol,
html[lang="th"] .seo-main ul,
html[lang="th"] .seo-main ol{
  line-height: 1.85;
}

html[lang="th"] .faq-compact summary{
  line-height: 1.55;
  letter-spacing: 0;
}

html[lang="th"] .faq-compact p{
  text-indent: 0;
  text-align: left;
  line-height: 1.82;
}

/* -------------------------------------
WIDE SCREEN BALANCE
Keep same structure as English
------------------------------------- */

@media (min-width: 1200px){
  html[lang="th"] .article-main{
    margin-left: auto;
    margin-right: auto;
    padding-left: 34px;
    padding-right: 34px;
  }
}

/* -------------------------------------
RESPONSIVE
------------------------------------- */

@media (max-width: 760px){
  html[lang="th"] .article-main p,
  html[lang="th"] .seo-main p,
  html[lang="th"] .seo-container p{
    font-size: 1rem;
    line-height: 1.88;
  }

  html[lang="th"] .lead{
    font-size: 1.04rem;
    line-height: 1.9;
  }

  html[lang="th"] .article-main h1,
  html[lang="th"] .seo-main h1{
    line-height: 1.22;
  }

  html[lang="th"] .article-main h2,
  html[lang="th"] .seo-main h2{
    line-height: 1.45;
  }
}