/* ══════════════════════════════════════════
   LANGUAGE SWITCHER — shared across all pages
══════════════════════════════════════════ */
.lang-switcher{display:flex;align-items:center;gap:5px;background:rgba(27,58,107,0.08);border:1px solid rgba(27,58,107,0.18);border-radius:30px;padding:4px 8px 4px 7px;cursor:pointer;transition:background .2s}
.lang-switcher:hover{background:rgba(27,58,107,0.14)}
.ls-globe{font-size:15px;line-height:1}
.lang-btn{background:none;border:none;cursor:pointer;font-size:12px;font-weight:700;font-family:Inter,sans-serif;padding:3px 7px;border-radius:20px;transition:all .15s;display:flex;align-items:center;gap:4px;color:rgba(27,58,107,0.55);white-space:nowrap}
.lb-flag{font-size:14px;line-height:1}
.lang-btn.active{
  background:var(--navy) !important;
  color:white !important;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(15,35,71,0.25);
  transform:scale(1.05);
}
/* Hero mode — light active */
.nav.hero-mode .lang-btn.active{
  background:rgba(255,255,255,0.92) !important;
  color:#0F2347 !important;
}
.lang-btn{transition:all .2s ease}
.lang-btn:not(.active):hover{opacity:0.75}
.lang-divider{width:1px;height:13px;background:rgba(27,58,107,0.20)}

/* On hero-mode (transparent) nav */
.nav.hero-mode .lang-switcher{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.22)}
.nav.hero-mode .lang-btn{color:rgba(255,255,255,0.65)}
.nav.hero-mode .lang-btn.active{background:rgba(255,255,255,0.22);color:white}
.nav.hero-mode .lang-divider{background:rgba(255,255,255,0.25)}

/* ── TRANSLATION SHOW/HIDE ── */
.th-text{display:none}
.en-text{display:inline}
body.lang-th .th-text{display:inline}
body.lang-th .en-text{display:none}
.th-block{display:none}
.en-block{display:block}
body.lang-th .th-block{display:block}
body.lang-th .en-block{display:none}
.th-flex{display:none}
.en-flex{display:flex}
body.lang-th .th-flex{display:flex}
body.lang-th .en-flex{display:none}

/* ── NAV ACTIVE HIGHLIGHT ── */
.nav-link {
  transition: color .2s, font-weight .1s;
  position: relative;
}

/* Active page — works on all nav types */
/* Bold + slightly bigger + gold underline only — no padding change */
.nav-link.active {
  color: #0F2347 !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  letter-spacing: -.2px;
  position: relative;
}

/* Gold underline bar underneath active link */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background: #C8970A;
  border-radius: 3px;
}

/* Hero-mode (dark transparent nav on homepage) */
.nav.hero-mode .nav-link.active {
  color: white !important;
}
.nav.hero-mode .nav-link.active::after {
  background: #E8C96A;
}

/* ── FLAG IMAGE SWITCHER ── */
.lang-switcher{
  background:rgba(27,58,107,0.08) !important;
  border:1px solid rgba(27,58,107,0.18) !important;
  border-radius:24px !important;
  padding:3px 4px !important;
}
.lang-btn img{display:inline-block;vertical-align:middle;border-radius:2px;flex-shrink:0}
.lang-btn.active{
  background:#0F2347 !important;
  color:white !important;
  border-radius:18px;
  box-shadow:0 2px 6px rgba(15,35,71,0.22);
}
.nav.hero-mode .lang-switcher{
  background:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.22) !important;
}
.nav.hero-mode .lang-btn{color:rgba(255,255,255,0.75)}
.nav.hero-mode .lang-btn.active{
  background:rgba(255,255,255,0.90) !important;
  color:#0F2347 !important;
}
.lang-divider{width:1px;height:14px;background:rgba(27,58,107,0.20);margin:0 2px}
.nav.hero-mode .lang-divider{background:rgba(255,255,255,0.25)}
/* TWF global mobile-menu fix — all pages */
#mobileMenu.open{
  height:100vh !important;
  height:100dvh !important;
  max-height:none !important;
  overflow-y:auto !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:999999 !important;
}
/* Free the mobile menu from the nav's backdrop-filter containing block */
/* Mobile: remove nav backdrop-filter so fixed mobile menu isn't trapped (WebKit containing block) */
@media (max-width:1024px){
  .nav{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}
/* ── HAMBURGER VISIBILITY ON WHITE/SCROLLED NAV ── */
.nav.scrolled .hamburger{color:#0F2347 !important}
.hamburger{color:#0F2347 !important;border-color:rgba(15,35,71,.18) !important;background:rgba(15,35,71,.08) !important}
@media(max-width:1024px){#tw-lang-switcher{display:none!important}.nav-inner{overflow:visible}}