/**
 * Waterclick TH/EN language dropdown (site-wide). Namespaced .wclk-lang-*.
 * The toggle inherits the surrounding menu colour (currentColor) so it reads
 * white on the red transparent header and dark on white headers; the dropdown
 * panel is always a light card. The panel anchors to .wclk-lang-wrap (which
 * hugs the toggle) rather than the full-height menu <li>, so it sits right below
 * the button instead of dropping from the bottom of the tall nav row.
 */
.wclk-lang{list-style:none}
.wclk-lang-wrap{position:relative;display:inline-flex}

.wclk-lang-toggle{
	display:inline-flex;align-items:center;gap:6px;cursor:pointer;
	background:none;border:1px solid currentColor;border-radius:999px;padding:5px 12px;
	color:inherit;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;
	letter-spacing:.06em;line-height:1;opacity:.92;transition:opacity .15s ease,background .15s ease}
.wclk-lang-toggle:hover{opacity:1;background:rgba(127,127,127,.14)}
.wclk-lang-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.wclk-lang-caret{margin-top:1px;transition:transform .2s ease}
.wclk-lang.is-open .wclk-lang-caret{transform:rotate(180deg)}

.wclk-lang-menu{
	position:absolute;top:calc(100% + 5px);right:0;min-width:190px;max-width:calc(100vw - 24px);margin:0;padding:7px;
	list-style:none;background:#fff;border:1px solid rgba(20,24,28,.08);border-radius:16px;
	box-shadow:0 18px 44px -14px rgba(20,24,28,.32);
	opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
	transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:1000}
/* invisible bridge across the gap so travelling from the toggle to the menu
   never crosses dead space (a click there won't fall through and close it) */
.wclk-lang-menu::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}
.wclk-lang.is-open .wclk-lang-menu{opacity:1;visibility:visible;transform:none}

/* the parent nav gives these <li> display:flex, which shrink-wraps the link and
   stops the active highlight from spanning the row — force them back to block */
.wclk-lang-menu li[role="none"]{display:block}
/* Selectors are scoped under .wclk-lang-menu so they out-specify the parent
   theme's nav rules (.nav-panel li a, .site-header li a), which otherwise force
   padding:8px 0 — the cause of the text sitting flush against the pill edge. */
.wclk-lang-menu .wclk-lang-opt{
	display:flex;align-items:center;text-decoration:none;padding:12px 16px;border-radius:11px;
	color:#232b30;font-family:'Prompt','Sukhumvit Set','Noto Sans Thai',sans-serif;font-size:15px;
	line-height:1.2;transition:background .12s ease}
.wclk-lang-menu .wclk-lang-opt:hover{background:#f1f4f5;color:#232b30}
/* short code + check are hidden: the language name plus the active pill carry it */
.wclk-lang-opt-short,.wclk-lang-check{display:none}
.wclk-lang-opt-name{flex:0 0 auto}
.wclk-lang-menu .wclk-lang-opt.is-current{color:#d72127;background:rgba(215,33,39,.08)}

@media (max-width:1023px){
	.wclk-lang-menu{right:auto;left:0}
}
@media (prefers-reduced-motion:reduce){
	.wclk-lang-caret,.wclk-lang-menu{transition:none}
}