/* Critical CSS for language switching - loaded before React hydration */

/* Define font variables */
:root {
  --font-sans: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-thai: 'Noto Sans Thai', 'Thonburi', 'Tahoma', sans-serif;
}

/* Font smoothing for better rendering */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base HTML language settings */
html[lang="en"] {
  font-family: var(--font-sans);
}

html[lang="th"] {
  font-family: var(--font-thai) !important;
  font-size: 101%; /* Slightly larger font size for Thai */
}

/* Thai font class for explicit targeting */
.thai-font {
  font-family: var(--font-thai) !important;
}

/* Prevent transitions on font-family to avoid flickering */
*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-box-shadow, -webkit-transform !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

/* Font-specific elements */
span, a, button, p, h1, h2, h3, h4, h5, h6, input, textarea, select, label {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-box-shadow, -webkit-transform !important;
}

/* Prevent all transitions during language change to avoid flicker */
html.language-transition * {
  transition: none !important;
}

/* Force Thai font on specific elements */
html[lang="th"] span,
html[lang="th"] a,
html[lang="th"] button,
html[lang="th"] p,
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6,
html[lang="th"] input,
html[lang="th"] textarea,
html[lang="th"] select,
html[lang="th"] label,
.thai-font span,
.thai-font a,
.thai-font button,
.thai-font p,
.thai-font h1,
.thai-font h2,
.thai-font h3,
.thai-font h4,
.thai-font h5,
.thai-font h6,
.thai-font input,
.thai-font textarea,
.thai-font select,
.thai-font label {
  font-family: var(--font-thai) !important;
}

/* Hide content during font loading to prevent flashing */
html:not(.fonts-loaded) .font-sensitive {
  visibility: hidden;
}

/* Fallback for older browsers */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}