/* Thai glyphs for display text; Latin keeps the original studio typeface. */
@font-face {
  font-family: "CheemsRed Bouncy Thai";
  src: url("fonts/CheemsRedBouncyThai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0E00-0E7F;
}
html[lang="th"] {
  --studio-display: "CheemsRed Bouncy Thai", "CheemsRed Display";
}
/* Shared navigation typography on all five pages. */
@font-face {
  font-family: "CheemsRed Display";
  src: url("fonts/CheemsRedDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
html body .site-header :is(nav a, button),
html body .site-header :is(nav a, button) span {
  font-family: var(--studio-display, "CheemsRed Display"), Anuphan, sans-serif;
}
html body .site-header .nav-side a {
  font-size: 18px;
  padding-inline: 10px;
}
html body .site-header .mobile-nav a {
  font-size: 20px;
}
html body .site-header .language-switch {
  font-size: 16px;
}
/* Enlarge mobile labels without widening the language control. */
@media (min-width: 961px) and (max-width: 1100px) {
  html body .site-header .nav-side a {
    min-width: 70px;
    padding-inline: 6px;
    font-size: 17px;
  }
}

/* ---- Liquid glass nav: แผ่นกระจกใส เบลอพื้นหลัง มีไฮไลต์ขอบแบบสะท้อนแสง ---- */
html body .site-header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 45%, rgba(255,255,255,.1)),
    rgba(20, 22, 30, .28);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.18),
    inset 0 0 22px rgba(255,255,255,.07),
    0 10px 34px rgba(0,0,0,.22);
}
html body .site-header .nav-side a[aria-current="page"] {
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.15), 0 4px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (prefers-reduced-transparency: reduce) {
  html body .site-header.is-scrolled { background: rgba(20,22,30,.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Shared mobile drawer. The hamburger keeps its keyboard focus indicator. */
@media (max-width: 960px) {
  html body .site-header .menu {
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  html body .site-header .menu:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
  }

  html body .site-header .mobile-nav {
    background: #471327;
    color: white;
    border-radius: 22px;
    box-shadow: inset 0 1px 0 #ffd0e575, 0 14px 35px #18091059;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body .site-header .mobile-nav {
      background: linear-gradient(135deg, #80233dd9, #310f25c9 62%, #541934d4);
      -webkit-backdrop-filter: blur(24px) saturate(155%);
      backdrop-filter: blur(24px) saturate(155%);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    html body .site-header .mobile-nav {
      background: #471327;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* Keep the drawer outside an ancestor backdrop-filter compositing layer. */
@media (max-width: 960px) {
  html body .site-header.is-scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  html body .site-header.is-scrolled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, #80233d66, #310f2559);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    box-shadow: inset 0 1px 0 #ffd0e575, 0 8px 28px #18091033;
  }
}