/* Orca Systems - Thai typography layer.
   Linked ONLY from the pages under /th/, after /css/styles.css (or after the landing-page sheet).

   Why Noto Sans Thai: Plus Jakarta Sans (the site's Latin face) has no Thai glyphs, so the browser
   falls back glyph by glyph. Noto Sans Thai is a clean, loopless, modern sans that pairs with it, has a
   full weight range (one variable file covers 400 to 800), and is the Thai face most browsers and
   devices already know. Latin text (Orca Systems, $100, TM30, OTA) keeps the site's own Latin faces.

   Thai rules this file enforces:
   - never letter-spaced, never uppercased, never faux-italic;
   - taller line-height (tone marks and vowels sit above and below the line);
   - slightly larger small text (Thai under about 14px is hard to read);
   - no word spaces in Thai, so every text container may break anywhere if it must. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400..800&display=swap');

html[lang="th"] {
  --font-sans: 'Plus Jakarta Sans', 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', system-ui, -apple-system, sans-serif;
  /* Landing-page sheet (Ledger) uses --sans and --serif. */
  --sans: 'Work Sans', 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', system-ui, -apple-system, sans-serif;
  --serif: 'Source Serif 4', 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', Georgia, serif;
}

html[lang="th"] body {
  font-size: 1.0625rem;
  line-height: 1.8;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Display face: Bricolage Grotesque has no Thai glyphs, so Thai headings fall through to Noto Sans Thai.
   Latin words and figures inside a Thai heading (Orca Systems, PMS, $100) keep Bricolage. */
html[lang="th"] {
  --font-display: 'Bricolage Grotesque', 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', system-ui, -apple-system, sans-serif;
}

/* Headings: more room above and below, no tracking at all (Thai tone marks and vowels stack above and below the
   line, and negative tracking collides them), weight 700, may break if a compound is longer than the line.
   The display tracking and tight leading from styles.css are switched off for Thai here. */
html[lang="th"] :is(h1, h2, h3, h4) {
  line-height: 1.4;
  letter-spacing: 0;
  word-spacing: 0;
  font-weight: 700;
  text-transform: none;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
html[lang="th"] h1 { font-size: clamp(2.125rem, 5vw, 3.75rem); line-height: 1.3; }
html[lang="th"] h2 { font-size: clamp(1.625rem, 3.2vw, 2.5rem); line-height: 1.35; }
html[lang="th"] .price-lead h1 { line-height: 1.35; max-width: none; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
html[lang="th"] .price-lead h1 .fig { line-height: 0.95; letter-spacing: -0.04em; }
html[lang="th"] .page-lead--wide h1 { max-width: none; }
html[lang="th"] .hero-lede, html[lang="th"] .page-lead .lede { max-width: 44ch; }
html[lang="th"] .shot figcaption strong, html[lang="th"] .frame figcaption strong, html[lang="th"] .brand, html[lang="th"] .next-steps strong { letter-spacing: 0; }
html[lang="th"] .logo-strip .container { letter-spacing: 0; font-weight: 600; }
html[lang="th"] .review-feature blockquote p, html[lang="th"] .review.is-short blockquote p, html[lang="th"] .review-strip figure:first-child blockquote { letter-spacing: 0; line-height: 1.6; font-weight: 500; }
html[lang="th"] .status-row::before { letter-spacing: 0; }
html[lang="th"] .page-lead h1 { max-width: 28ch; }
html[lang="th"] .hero h1 { max-width: none; }
html[lang="th"] .guide-wrap .page-lead h1 { max-width: 28ch; }
html[lang="th"] .price-band .big small { line-height: 1.5; }
html[lang="th"] .calc-total { line-height: 1.25; }
html[lang="th"] .calc-unit { line-height: 1.5; }

/* Anything that holds running Thai text may wrap at any point rather than overflow a narrow column. */
html[lang="th"] :is(p, li, summary, figcaption, blockquote, label, legend, .card, .choice, .field-error, .form-status, .hint, a, cite, .role) {
  overflow-wrap: anywhere;
}

/* Buttons: allow two lines, centred, never clipped. */
html[lang="th"] .btn {
  white-space: normal;
  text-align: center;
  line-height: 1.5;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow-wrap: anywhere;
}
/* The header sign-up button is short on purpose and stays on one line. */
html[lang="th"] .nav-actions .btn,
html[lang="th"] .site-header .btn { white-space: nowrap; }
@media (max-width: 360px) {
  html[lang="th"] .nav-actions .btn { font-size: 0.85rem; padding-left: 9px; padding-right: 9px; }
}
html[lang="th"] .nav-links a { line-height: 1.5; }

/* No tracking, no capitals, no slanted Thai. */
html[lang="th"] :is(.eyebrow, .kicker, .hero-eyebrow, .footer-title, .footer-grid h4, .price-tier, .sample-badge, .sample-label, .sample-tag, .featured-badge, .note-pill) {
  text-transform: none;
  letter-spacing: 0;
}
/* Numerals only (Latin digits and $): the price figures keep their display tracking. Every Thai text run is at 0. */
html[lang="th"] :is(.calc-total, .bands .rate, .stat-value) { letter-spacing: 0; }
html[lang="th"] :is(blockquote, cite, em, i, .testimonial-card blockquote) { font-style: normal; }

/* Small text is raised so Thai stays legible. */
html[lang="th"] :is(.hero-badge, .logo-strip .container, .field .hint, .field-error, .form-note, .footer-bottom, .footer-note, .footer-legal,
  .note-pill, .sample-badge, .sample-label, .sample-tag, .review-by .feat, .review-meta .feat,
  .calc .calc-help, table.data thead th, table.data .sum, .kicker, .hero-eyebrow, .testimonial-card .feat,
  .testimonial-card .role, .featured-badge, .review-strip figcaption, .lang-switch__label) {
  font-size: 0.9rem;
}
html[lang="th"] .logo-strip .container { line-height: 1.6; }
html[lang="th"] .footer-title { font-size: 0.95rem; line-height: 1.5; }
html[lang="th"] .field label, html[lang="th"] fieldset.field legend { font-size: 0.95rem; }
html[lang="th"] .field input, html[lang="th"] .field select, html[lang="th"] .field textarea { font-size: 1rem; line-height: 1.5; }

/* Table headers and numbers: keep the numbers on one line, let Thai labels wrap. */
html[lang="th"] table.data th, html[lang="th"] table.data td { overflow-wrap: break-word; }
html[lang="th"] table.data td.num, html[lang="th"] table.data th.num { overflow-wrap: normal; }

/* Marker for links that lead to a page that exists in English only. */
.en-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
  white-space: nowrap;
}

/* Footer note explaining the EN marker. */
.th-footer-note { margin: var(--space-3) 0 0; font-size: 0.9rem; color: var(--color-muted-foreground); max-width: 70ch; }

/* Between the width where the full nav appears and a wide desktop, tighten the header so the Thai labels
   and the extra Blog link fit on one row. */
@media (min-width: 1041px) and (max-width: 1200px) {
  html[lang="th"] .site-header .container { gap: var(--space-3); }
  html[lang="th"] .nav-links { gap: var(--space-3); }
  html[lang="th"] .nav-links a { font-size: 0.9rem; }
  html[lang="th"] .nav-actions { gap: var(--space-2); }
}

/* The landing-page language switcher (.lang-switch--ledger) lives in /sales/css/hotsoft-switch.css so the English
   and Thai versions of that page share it. */

/* Landing page (Ledger sheet) specifics. */
html[lang="th"] .hero h1, html[lang="th"] .section-head h2 { max-width: none; }
html[lang="th"] .testimonial-card blockquote { line-height: 1.7; }
html[lang="th"] .feature-item .num { width: 2.6rem; }
html[lang="th"] .faq-item summary { line-height: 1.5; }
html[lang="th"] .form-status { line-height: 1.6; }