/* =========================================================
   V37 Typography + Hero UI Fix
   Brand Book:
   - English: Red Hat Display
   - Thai: Prompt
   Also fixes hero stat cards and scroll indicator overlap.
   ========================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800;900&family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');

:root {
  --ctl-font-en: "Red Hat Display", "Prompt", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ctl-font-th: "Prompt", "Red Hat Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* English first. Thai glyphs will naturally fall back to Prompt. */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--ctl-font-en) !important;
}

/* If any page/element is explicitly Thai, use Prompt first. */
html[lang^="th"],
html[lang^="th"] body,
:lang(th),
[lang="th"],
.thai,
.text-th {
  font-family: var(--ctl-font-th) !important;
}

/* Keep headings consistent with English Brand Book. */
h1,
h2,
h3,
h4,
h5,
h6,
.nav a,
.btn,
.eyebrow,
.stat-card,
.article-card,
.team-card,
.resource-card {
  font-family: var(--ctl-font-en) !important;
}

/* Thai sections can opt in by adding lang="th" or class="thai". */
html[lang^="th"] h1,
html[lang^="th"] h2,
html[lang^="th"] h3,
html[lang^="th"] h4,
html[lang^="th"] h5,
html[lang^="th"] h6,
:lang(th) h1,
:lang(th) h2,
:lang(th) h3,
:lang(th) h4,
:lang(th) h5,
:lang(th) h6,
.thai h1,
.thai h2,
.thai h3,
.thai h4,
.thai h5,
.thai h6 {
  font-family: var(--ctl-font-th) !important;
}

/* ---------------------------------------------------------
   Hero stats fix
   Prevent 10 min, 2X, 24/7 from jumping in different sizes.
   --------------------------------------------------------- */

.hero-stats,
.stats-grid,
.hero-metrics,
.metric-grid {
  align-items: stretch !important;
}

/* Target common stat card patterns from the CTL layout. */
.hero-sticky .stat,
.hero-sticky .stat-card,
.hero-sticky .metric-card,
.hero-sticky [class*="stat"],
.hero-copy .stat,
.hero-copy .stat-card,
.hero-copy .metric-card,
.hero-copy [class*="stat"] {
  min-height: 116px !important;
  height: 116px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 20px 22px !important;
  overflow: hidden !important;
}

/* Normalize stat number, including mixed values like 10 min / 2X / 24/7. */
.hero-sticky .stat strong,
.hero-sticky .stat-card strong,
.hero-sticky .metric-card strong,
.hero-sticky [class*="stat"] strong,
.hero-copy .stat strong,
.hero-copy .stat-card strong,
.hero-copy .metric-card strong,
.hero-copy [class*="stat"] strong {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  min-height: 30px !important;
  margin: 0 !important;
  color: #075b82 !important;
  font-family: var(--ctl-font-en) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
}

/* If number contains a small unit like min, keep it balanced. */
.hero-sticky .stat strong span,
.hero-sticky .stat-card strong span,
.hero-sticky .metric-card strong span,
.hero-sticky [class*="stat"] strong span,
.hero-copy .stat strong span,
.hero-copy .stat-card strong span,
.hero-copy .metric-card strong span,
.hero-copy [class*="stat"] strong span {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

/* Normalize stat label. */
.hero-sticky .stat small,
.hero-sticky .stat-card small,
.hero-sticky .metric-card small,
.hero-sticky [class*="stat"] small,
.hero-copy .stat small,
.hero-copy .stat-card small,
.hero-copy .metric-card small,
.hero-copy [class*="stat"] small,
.hero-sticky .stat span:not(:first-child),
.hero-copy .stat span:not(:first-child) {
  margin: 0 !important;
  color: #607985 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Specific cards in current markup usually use card style in the hero lower row. */
.hero-sticky .mini-stat,
.hero-sticky .hero-stat,
.hero-copy .mini-stat,
.hero-copy .hero-stat {
  min-height: 116px !important;
  height: 116px !important;
}

/* ---------------------------------------------------------
   Scroll indicator fix
   Move it below the hero card so it no longer overlaps stats.
   --------------------------------------------------------- */

.hero-scroll-stage {
  overflow: visible !important;
  padding-bottom: 94px !important;
}

.hero-sticky {
  overflow: visible !important;
  padding-bottom: 48px !important;
}

.scroll-hint,
.scroll-indicator,
.scroll-down,
.scroll-line,
[class*="scroll-hint"],
[class*="scroll-indicator"] {
  position: absolute !important;
  left: 50% !important;
  bottom: -38px !important;
  top: auto !important;
  z-index: 4 !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* If the scroll hint has an icon + text, align neatly. */
.scroll-hint,
.scroll-indicator,
[class*="scroll-hint"],
[class*="scroll-indicator"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #607985 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: -0.012em !important;
}

/* Prevent bottom metric row from being too close to scroll label. */
.hero-sticky .hero-stats,
.hero-sticky .stats-grid,
.hero-sticky .hero-metrics,
.hero-copy .hero-stats,
.hero-copy .stats-grid,
.hero-copy .hero-metrics {
  margin-bottom: 22px !important;
}

/* Medium screens */
@media (max-width: 1180px) and (min-width: 761px) {
  .hero-sticky .stat,
  .hero-sticky .stat-card,
  .hero-sticky .metric-card,
  .hero-sticky [class*="stat"],
  .hero-copy .stat,
  .hero-copy .stat-card,
  .hero-copy .metric-card,
  .hero-copy [class*="stat"] {
    min-height: 104px !important;
    height: 104px !important;
    padding: 18px 18px !important;
  }

  .hero-sticky .stat strong,
  .hero-sticky .stat-card strong,
  .hero-sticky .metric-card strong,
  .hero-sticky [class*="stat"] strong,
  .hero-copy .stat strong,
  .hero-copy .stat-card strong,
  .hero-copy .metric-card strong,
  .hero-copy [class*="stat"] strong {
    font-size: 24px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .hero-scroll-stage {
    padding-bottom: 72px !important;
  }

  .hero-sticky {
    padding-bottom: 38px !important;
  }

  .hero-sticky .stat,
  .hero-sticky .stat-card,
  .hero-sticky .metric-card,
  .hero-sticky [class*="stat"],
  .hero-copy .stat,
  .hero-copy .stat-card,
  .hero-copy .metric-card,
  .hero-copy [class*="stat"] {
    min-height: 96px !important;
    height: auto !important;
    padding: 18px 20px !important;
  }

  .hero-sticky .stat strong,
  .hero-sticky .stat-card strong,
  .hero-sticky .metric-card strong,
  .hero-sticky [class*="stat"] strong,
  .hero-copy .stat strong,
  .hero-copy .stat-card strong,
  .hero-copy .metric-card strong,
  .hero-copy [class*="stat"] strong {
    font-size: 24px !important;
  }

  .scroll-hint,
  .scroll-indicator,
  .scroll-down,
  .scroll-line,
  [class*="scroll-hint"],
  [class*="scroll-indicator"] {
    bottom: -30px !important;
    font-size: 12px !important;
  }
}