/* ============================================================
   PANTOR — header.css
   04 Header/Nav · mnav__eyebrow · responsive สำหรับ header
   (แยกออกจาก style.css — ต้องโหลดหลัง style.css)
   ============================================================ */

/* ── 04 HEADER / NAV ───────────────────────────────────── */
.mnav__eyebrow{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);line-height:1.4;
}

.hdr{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.mark{display:flex;align-items:center;gap:10px}
.mark__logo{
  width:40px;height:40px;flex:none;
  object-fit:contain;
  display:block;
}
.mark__text{display:flex;align-items:baseline;gap:9px}
.mark__en{
  font-size:1.25rem;font-weight:700;letter-spacing:.14em;color:var(--ink);
}
.mark__th{
  font-family:var(--font-th);font-size:.95rem;font-weight:500;
  color:var(--brand);letter-spacing:.02em;
}
.nav{display:flex;align-items:center;gap:clamp(22px,3vw,46px)}
.nav__list{display:flex;gap:clamp(18px,2.4vw,34px)}
.nav__list a{
  position:relative;font-size:var(--fs-nav);font-weight:500;
  color:var(--ink);line-height:1.4;padding-block:6px;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav__list a:hover::after{transform:scaleX(1)}
.nav__cta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-nav);font-weight:500;color:#fff;background:var(--brand);
  padding:10px 18px;border:1px solid var(--brand);border-radius:2px;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.nav__cta:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

.burger{display:none;width:40px;height:40px;margin-right:-8px;position:relative}
.burger span{
  position:absolute;left:9px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:80;background:var(--white);
  padding:calc(var(--hdr-h) + 28px) var(--gut) 40px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.mnav.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mnav__in{display:flex;flex-direction:column;height:100%;width:100%}
.mnav__eyebrow{padding-bottom:16px;border-bottom:1px solid var(--line)}
.mnav ul{margin-top:8px}
.mnav li{border-bottom:1px solid var(--line)}
.mnav li a{
  display:block;padding:20px 0;
  font-size:clamp(1.75rem,7vw,2.25rem);font-weight:500;color:var(--ink);
  letter-spacing:-.01em;line-height:1.15;
  opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mnav.is-open li a{opacity:1;transform:none}
.mnav li:nth-child(1) a{transition-delay:.05s}
.mnav li:nth-child(2) a{transition-delay:.09s}
.mnav li:nth-child(3) a{transition-delay:.13s}
.mnav li:nth-child(4) a{transition-delay:.17s}
.mnav li:nth-child(5) a{transition-delay:.21s}
.mnav__foot{
  margin-top:auto;padding-top:28px;
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
}
body.is-locked{overflow:hidden}

/* ── RESPONSIVE (header) ───────────────────────────────── */
@media (max-width:900px){
  .nav__list{display:none}
  .nav__cta{display:none}
  .burger{display:block}
}