/*
 * Additions on top of the compiled Tailwind stylesheet (assets/css/site.css).
 *
 * The original site set the reveal animation's opacity/transform through inline
 * styles from React; the PHP port uses a class plus a delay custom property so
 * the markup stays clean and the transition itself is identical.
 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Language dropdown: the original widget used a fixed-position portal with
   `transition: opacity .15s, visibility .15s` — reproduce that timing here. */
[data-lang-switcher] [data-lang-menu] {
  min-width: 160px;
  z-index: 9999;
  transition: opacity 150ms, visibility 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Thai typography: the site's stylesheet uses the system UI stack, which on some
   platforms has no Thai glyphs. A self-hosted variable Noto Sans Thai (one 27 KB
   woff2, weights 100–900) guarantees Thai text renders, and only in Thai mode. */
@font-face {
  font-family: 'Noto Sans Thai Local';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/NotoSansThai.woff2') format('woff2');
}

html[lang='th'] body {
  font-family: 'Noto Sans Thai Local', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Certification badges on the food trade page (the compiled Tailwind build has
   no object-contain / h-24 utility, so this is expressed as one small class). */
.cert-badge {
  height: 96px;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Focus visibility for keyboard users on custom controls */
[data-lang-toggle]:focus-visible,
[data-faq-toggle]:focus-visible,
[data-model-filter]:focus-visible,
[data-news-filter]:focus-visible,
[data-case-filter]:focus-visible {
  outline: 2px solid #e8b45a;
  outline-offset: 2px;
}