/* ================================================================
   Palang Sattha Tham Foundation — WordPress additions.
   main.css is the untouched mockup stylesheet. Everything WordPress
   needs on top of it lives here: the classes that replace the mockup's
   inline styles (same values), WP menus (any depth), the dock, the
   transfer form additions, Gravity Forms, single posts.
   ================================================================ */

/* ---------- classes replacing the mockup inline styling (values copied 1:1) ---------- */
.h2-split{font-size:clamp(26px,3.4vw,38px);margin:14px 0 18px}
.h2-wa{font-size:clamp(28px,3.6vw,40px);margin:14px 0 10px}
.h2-intro{font-size:clamp(28px,3.6vw,40px);margin:14px 0 18px}
.h2-std{font-size:clamp(24px,3vw,34px);margin:14px 0}
.h2-form{font-size:clamp(24px,3vw,32px)}
.row-btns.center{justify-content:center}
.frame img.ar-45{aspect-ratio:4/5}
.oy-40{object-position:50% 40%}
.oy-35{object-position:50% 35%}
.frame img.ar-portrait{aspect-ratio:1091/1499}
.org-img img.ar-1610{aspect-ratio:16/10}
.sec-pt-56{padding-top:clamp(56px,7vw,96px)}
.sec-pt-48-pb-28{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(28px,4vw,48px)}
.sec-pt-48{padding-top:clamp(48px,6vw,80px)}
.sec-pt-0{padding-top:0}
.sec-pb-40{padding-bottom:clamp(40px,5vw,64px)}
.sec-pb-36{padding-bottom:clamp(36px,5vw,64px)}
.sec-pb-32{padding-bottom:clamp(32px,4vw,56px)}
.sec-head.mb-0{margin-bottom:0}
.sec-head.mt-sec{margin-top:clamp(48px,6vw,80px)}
.note.mt-28{margin-top:28px}
.facts.mt-22{margin-top:22px}
.band h2.mt-14{margin-top:14px}
.phero-about{--pd:76% 0%;--pm:86% 0%}
.phero-monk{--pd:72% 0%;--pm:81% 0%}
.slip.slip-1col{grid-template-columns:1fr}
.slip-actions.slip-actions-1{grid-template-columns:max-content}
.acct.acct-28{font-size:28px}
.acct.acct-sm{font-size:clamp(26px,3vw,34px)}
.bigslip.no-shadow{box-shadow:none}
.burger.show{display:inline-flex}
.chip.chip-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.stack-18{display:grid;gap:18px}
.org-img.org-img-1{grid-template-columns:1fr}
.link-more.sm{min-height:0;padding:4px 0 0;font-size:14px}
.muted.p-lead{font-size:16.5px;margin-top:14px}
.prose.prose-17{font-size:17px}
.muted.acc-intro{margin:6px 0 10px}
.ftr p.mb-12{margin-bottom:12px}
.stack-8{display:grid;gap:8px}
.rel{position:relative}
.tnum{font-variant-numeric:tabular-nums}
.mdl-in h2.p-0{padding:0}
.gold{color:var(--gold-ink)}
.btns.btns-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.ta-c{text-align:center}
.sr-only{position:absolute;left:-9999px}
.btn.btn-plain{border-color:var(--line)}
.btn.btn-plain:hover,.btn.btn-plain:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
#slipZone.mt-6{margin-top:6px}
.nform-lbl{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.muted.p-165{font-size:16.5px}
.svg-sprite{position:absolute}

/* ---------- runtime helpers (replace element.style writes) ---------- */
.subnav .wrap.is-dragging{cursor:grabbing;user-select:none}
.subnav .wrap.is-dragging a{pointer-events:none}
body.no-scroll{overflow:hidden}
.sr-copy{position:fixed;opacity:0}

/* ---------- WP menus: <ul>/<li> boxes removed so the links lay out like the mockup's flat <a> list ---------- */
.nav .menu,.dnav .menu,.nav .sub-menu,.dnav .sub-menu{list-style:none;margin:0;padding:0}
.nav .menu{display:contents}
.nav .menu > li{display:contents}
.nav .menu > li.menu-item-has-children{display:flex;align-items:center;position:relative}
.nav .menu > li.menu-item-has-children > a{padding-right:4px}
.nav .current-menu-ancestor > a,.nav .current-menu-parent > a{color:var(--gold-ink)}
.nav .sub-menu{position:absolute;top:100%;left:0;z-index:5;min-width:230px;padding:8px 0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu,.nav li.is-open > .sub-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .sub-menu li{display:flex;align-items:center;position:relative}
.nav .sub-menu li > a{flex:1;display:block;padding:10px 18px;white-space:normal;font-size:14.5px}
.nav .sub-menu li > a::after{display:none}
.nav .sub-menu .sub-menu{top:-9px;left:100%}
.nav .sub-menu .sub-menu.is-flipped{left:auto;right:100%}
.sub-toggle{display:inline-grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--ink-2);padding:8px 4px;opacity:.7;transition:opacity .2s}
.sub-toggle svg{width:12px;height:12px;transform:none;transition:transform .2s}
.sub-toggle:hover{opacity:1}
.menu-item.is-open > .sub-toggle svg{transform:rotate(180deg)}
.nav .sub-menu .sub-toggle svg{transform:rotate(-90deg)}
.nav .sub-menu .is-open > .sub-toggle svg{transform:rotate(90deg)}
.nav .sub-menu .sub-toggle{padding:8px 12px 8px 4px}
/* mobile drawer: same flat look, nested lists indented */
.dnav{display:grid}
.dnav li{display:grid}
.dnav .menu > li > a{padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:18px;font-family:var(--f-head)}
.dnav li.menu-item-has-children{grid-template-columns:1fr 48px;align-items:stretch}
.dnav li.menu-item-has-children > .sub-menu{grid-column:1/-1}
.dnav .sub-menu{display:none;padding-left:16px}
.dnav li.is-open > .sub-menu{display:grid}
.dnav .sub-menu a{display:block;padding:10px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:16px}
.dnav a[aria-current="page"],.dnav .current-menu-item > a{color:var(--gold-ink)}
.dnav .sub-toggle{width:48px;height:auto;padding:0;opacity:1;border-bottom:1px solid var(--line)}
.dnav .sub-toggle svg{width:16px;height:16px}

/* ---------- footer: logo lockup is a link to the home page; menu list ---------- */
a.fbrand{text-decoration:none}
.ftr .menu{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}

/* ---------- upcoming events: posts are linked ---------- */
.event .event-img{display:block;min-height:260px}
.event .event-img img{height:100%}
.event h3 a{text-decoration:none}
.event h3 a:hover{color:var(--gold-ink)}
@media (max-width:620px){.event .event-img{min-height:0}.event .event-img img{min-height:0;aspect-ratio:16/10}}

/* ---------- donate page: fund cover focal point (ACF "จุดโฟกัส" 0–100 → class) ---------- */
/* see end of file (.cover-y-0 … .cover-y-100) */

/* ---------- floating dock (not in the mockup) ---------- */
.dock{position:fixed;right:clamp(12px,2vw,22px);bottom:clamp(14px,2.4vw,24px);z-index:45;display:grid;gap:10px;justify-items:end}
.dock-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);background:var(--card);color:var(--gold-ink);box-shadow:var(--shadow);cursor:pointer;text-decoration:none;transition:transform .25s,background .25s,color .25s,opacity .25s,visibility .25s}
.dock-btn svg{width:22px;height:22px}
.dock-btn:hover{background:var(--gold);color:var(--on-gold);transform:translateY(-2px)}
.dock-btn.totop{opacity:0;visibility:hidden;transform:translateY(8px)}
.dock-btn.totop.is-visible{opacity:1;visibility:visible;transform:none}
.dock-list{display:grid;gap:10px;justify-items:end}
.dock-toggle{display:none}
@media (max-width:640px){.dock{bottom:calc(88px + env(safe-area-inset-bottom,0px))}.dock-btn{width:46px;height:46px}
.dock-toggle{display:grid}
.dock-list{display:none}
.dock.open .dock-list{display:grid}
.dock-btn.totop{position:absolute;right:0;bottom:calc(100% + 10px)}
.dock-toggle .ic-close{display:none}
.dock.open .dock-toggle .ic-open{display:none}
.dock.open .dock-toggle .ic-close{display:block}
.dock.open .dock-toggle{background:var(--gold);color:var(--on-gold)}}

/* ---------- language switcher driven by GTranslate: its own widget stays hidden ---------- */
.gt-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
html:lang(zh-CN){--f-head:"Noto Serif SC","Trirong",serif;--f-body:"Noto Sans SC","Noto Sans Thai",system-ui,sans-serif}
html:lang(zh-CN) .eyebrow{letter-spacing:.02em;font-size:14px}
html:lang(zh-TW){--f-head:"Noto Serif SC","Trirong",serif;--f-body:"Noto Sans SC","Noto Sans Thai",system-ui,sans-serif}
.skiptranslate iframe,body > .skiptranslate{display:none!important}
body{top:0!important}

/* ---------- transfer form additions: honeypot, reCAPTCHA ---------- */
.nform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rc-box{--s:1;width:100%;height:calc(78px * var(--s));overflow:hidden}
.rc-box > div{transform:scale(var(--s));transform-origin:0 0}
.rc-s95{--s:.95}.rc-s90{--s:.9}.rc-s85{--s:.85}.rc-s80{--s:.8}.rc-s75{--s:.75}.rc-s70{--s:.7}.rc-s65{--s:.65}.rc-s60{--s:.6}.rc-s55{--s:.55}.rc-s50{--s:.5}
.nform .req{margin-left:2px;color:#c02b0a;font-size:13px;font-weight:400}
.nform label.chk{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--ink-2);cursor:pointer}
.nform label.chk input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold);cursor:pointer}
.nform.is-anon .two{display:none}
.grecaptcha-badge{bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;z-index:44!important}

/* ---------- latest donors ticker waits while a popup is open, so the newest name is still at the start when it closes ---------- */
body.no-scroll .tk-track{animation-play-state:paused}
.tk-track{animation-delay:var(--tk-delay,0s)}

/* ---------- count-up numbers (final value stays for screen readers) ---------- */
.count{position:relative;display:inline-block}
.count.is-counting .count__end{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}

/* ---------- Gravity Forms inside the mockup .form card ---------- */
.form-gf .gform_wrapper,.form-gf .gform_wrapper form{display:grid;gap:16px}
.form-gf .gform_wrapper .gform_body{display:grid}
.form-gf .gform_wrapper .gform_fields{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.form-gf .gform_wrapper .gfield{grid-column:span 12}
.form-gf .gform_wrapper .gfield--width-half{grid-column:span 6}
.form-gf .gform_wrapper .gfield--width-third{grid-column:span 4}
.form-gf .gform_wrapper .gfield_label{display:block;margin-bottom:6px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.form-gf .gform_wrapper .gfield_required{color:var(--gold-ink);font-weight:500}
.form-gf .gform_wrapper .gfield_required_text,.form-gf .gform_wrapper .gfield_required_asterisk{font:inherit;padding:0;margin-left:2px}
.form-gf .gform_wrapper input[type=text],.form-gf .gform_wrapper input[type=email],.form-gf .gform_wrapper input[type=tel],.form-gf .gform_wrapper input[type=number],.form-gf .gform_wrapper textarea,.form-gf .gform_wrapper select{font:16px/1.5 var(--f-body);padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.form-gf .gform_wrapper input:focus,.form-gf .gform_wrapper textarea:focus,.form-gf .gform_wrapper select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.form-gf .gform_wrapper textarea{min-height:130px;resize:vertical}
.form-gf .gform_wrapper .gfield_description{font-size:13.5px;color:var(--muted);margin-top:6px}
.form-gf .gform_wrapper .gfield_validation_message,.form-gf .gform_wrapper .validation_message,.form-gf .gform_wrapper.gravity-theme .gfield_validation_message,.form-gf .gform_wrapper.gravity-theme .validation_message{font-size:13px;color:#B3261E;margin:6px 0 0;background:none;border:0;padding:0}
.form-gf .gform_wrapper .gform_validation_errors{border:1px solid #B3261E;border-radius:12px;padding:12px 14px;background:#fff5f4;color:#8a2a1e;font-size:14px}
.form-gf .gform_wrapper .gform_validation_errors h2{font-size:15px;font-family:var(--f-body);font-weight:600}
.form-gf .gform_wrapper .gform_footer,.form-gf .gform_wrapper.gravity-theme .gform_footer{display:grid;margin:0;padding:0}
.form-gf .gform_wrapper .gform_footer .btn{width:100%}
.form-gf .gform_wrapper .gfield--type-captcha{margin:0}
.form-gf .gform_wrapper .ginput_container_recaptcha,.form-gf .gform_wrapper .ginput_recaptcha{max-width:100%;overflow:hidden}
.form-gf .gform_wrapper .gfield--type-honeypot{position:absolute;left:-9999px}
.form-gf .gform_wrapper .gform_required_legend,.form-gf .gform_wrapper .gform_heading{display:none}
.gform_ajax_frame{display:none;width:0;height:0}
.form-gf .gform_wrapper .gform_ajax_spinner{display:none}
@media (max-width:520px){.form-gf .gform_wrapper .gfield--width-half,.form-gf .gform_wrapper .gfield--width-third{grid-column:span 12}}

/* ---------- plain pages, single posts, lists (components from the mockup) ---------- */
.prose.prose-wide{max-width:72ch}
.entry h2,.entry h3{margin-top:12px}
.entry ul,.entry ol{padding-left:1.3em;display:grid;gap:6px;margin:0}
.entry a{color:var(--gold-ink)}
.entry img{border-radius:var(--r)}
.post-grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(24px,4vw,48px);align-items:start}
.event-aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.event-aside .event-body{gap:12px}
@media (max-width:900px){.post-grid{grid-template-columns:1fr}.event-aside{position:static}}
.acard h3 a{text-decoration:none}
.acard figure a{display:block;height:100%}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink-2)}
.pagination .page-numbers.current{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}

/* ---------- WordPress toolbar (logged-in users): the sticky header and sub nav sit right under it ---------- */
body.admin-bar .hdr{top:calc(env(safe-area-inset-top,0px) + 32px)}
body.admin-bar .subnav{top:calc(env(safe-area-inset-top,0px) + 108px)}
@media (max-width:782px){body.admin-bar .hdr{top:calc(env(safe-area-inset-top,0px) + 46px)}body.admin-bar .subnav{top:calc(env(safe-area-inset-top,0px) + 122px)}}
@media (max-width:600px){body.admin-bar .hdr{top:env(safe-area-inset-top,0px)}body.admin-bar .subnav{top:calc(env(safe-area-inset-top,0px) + 76px)}}

/* ---------- fund cover focal point: .cover-y-N = object-position:50% N% (ACF number 0–100) ---------- */
.cover-y-0{object-position:50% 0%}
.cover-y-1{object-position:50% 1%}
.cover-y-2{object-position:50% 2%}
.cover-y-3{object-position:50% 3%}
.cover-y-4{object-position:50% 4%}
.cover-y-5{object-position:50% 5%}
.cover-y-6{object-position:50% 6%}
.cover-y-7{object-position:50% 7%}
.cover-y-8{object-position:50% 8%}
.cover-y-9{object-position:50% 9%}
.cover-y-10{object-position:50% 10%}
.cover-y-11{object-position:50% 11%}
.cover-y-12{object-position:50% 12%}
.cover-y-13{object-position:50% 13%}
.cover-y-14{object-position:50% 14%}
.cover-y-15{object-position:50% 15%}
.cover-y-16{object-position:50% 16%}
.cover-y-17{object-position:50% 17%}
.cover-y-18{object-position:50% 18%}
.cover-y-19{object-position:50% 19%}
.cover-y-20{object-position:50% 20%}
.cover-y-21{object-position:50% 21%}
.cover-y-22{object-position:50% 22%}
.cover-y-23{object-position:50% 23%}
.cover-y-24{object-position:50% 24%}
.cover-y-25{object-position:50% 25%}
.cover-y-26{object-position:50% 26%}
.cover-y-27{object-position:50% 27%}
.cover-y-28{object-position:50% 28%}
.cover-y-29{object-position:50% 29%}
.cover-y-30{object-position:50% 30%}
.cover-y-31{object-position:50% 31%}
.cover-y-32{object-position:50% 32%}
.cover-y-33{object-position:50% 33%}
.cover-y-34{object-position:50% 34%}
.cover-y-35{object-position:50% 35%}
.cover-y-36{object-position:50% 36%}
.cover-y-37{object-position:50% 37%}
.cover-y-38{object-position:50% 38%}
.cover-y-39{object-position:50% 39%}
.cover-y-40{object-position:50% 40%}
.cover-y-41{object-position:50% 41%}
.cover-y-42{object-position:50% 42%}
.cover-y-43{object-position:50% 43%}
.cover-y-44{object-position:50% 44%}
.cover-y-45{object-position:50% 45%}
.cover-y-46{object-position:50% 46%}
.cover-y-47{object-position:50% 47%}
.cover-y-48{object-position:50% 48%}
.cover-y-49{object-position:50% 49%}
.cover-y-50{object-position:50% 50%}
.cover-y-51{object-position:50% 51%}
.cover-y-52{object-position:50% 52%}
.cover-y-53{object-position:50% 53%}
.cover-y-54{object-position:50% 54%}
.cover-y-55{object-position:50% 55%}
.cover-y-56{object-position:50% 56%}
.cover-y-57{object-position:50% 57%}
.cover-y-58{object-position:50% 58%}
.cover-y-59{object-position:50% 59%}
.cover-y-60{object-position:50% 60%}
.cover-y-61{object-position:50% 61%}
.cover-y-62{object-position:50% 62%}
.cover-y-63{object-position:50% 63%}
.cover-y-64{object-position:50% 64%}
.cover-y-65{object-position:50% 65%}
.cover-y-66{object-position:50% 66%}
.cover-y-67{object-position:50% 67%}
.cover-y-68{object-position:50% 68%}
.cover-y-69{object-position:50% 69%}
.cover-y-70{object-position:50% 70%}
.cover-y-71{object-position:50% 71%}
.cover-y-72{object-position:50% 72%}
.cover-y-73{object-position:50% 73%}
.cover-y-74{object-position:50% 74%}
.cover-y-75{object-position:50% 75%}
.cover-y-76{object-position:50% 76%}
.cover-y-77{object-position:50% 77%}
.cover-y-78{object-position:50% 78%}
.cover-y-79{object-position:50% 79%}
.cover-y-80{object-position:50% 80%}
.cover-y-81{object-position:50% 81%}
.cover-y-82{object-position:50% 82%}
.cover-y-83{object-position:50% 83%}
.cover-y-84{object-position:50% 84%}
.cover-y-85{object-position:50% 85%}
.cover-y-86{object-position:50% 86%}
.cover-y-87{object-position:50% 87%}
.cover-y-88{object-position:50% 88%}
.cover-y-89{object-position:50% 89%}
.cover-y-90{object-position:50% 90%}
.cover-y-91{object-position:50% 91%}
.cover-y-92{object-position:50% 92%}
.cover-y-93{object-position:50% 93%}
.cover-y-94{object-position:50% 94%}
.cover-y-95{object-position:50% 95%}
.cover-y-96{object-position:50% 96%}
.cover-y-97{object-position:50% 97%}
.cover-y-98{object-position:50% 98%}
.cover-y-99{object-position:50% 99%}
.cover-y-100{object-position:50% 100%}

/* fund article: gallery thumbnails open the lightbox */
.art-gal button{display:block;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--sand);line-height:0}
.art-gal button img{transition:transform .35s}
.art-gal button:hover img{transform:scale(1.05)}
.art-gal button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* home: space under the donation account card, same as above it */
.quick{padding-bottom:clamp(28px,4vw,44px)}

/* translated text (EN / 中文) is longer: let brand lines and the drawer account card wrap instead of widening the page */
.fbrand,.fbrand b{min-width:0}
.fbrand b .nw,.ac-h1 .nw{white-space:normal}
.drawer .slip{min-width:0}
.drawer .slip .btn{width:100%;max-width:100%;justify-content:center;gap:6px;padding-inline:12px;height:auto;min-height:44px;padding-block:8px;line-height:1.3;white-space:normal;text-align:center}
/* drawer account card: the number must keep side padding on narrow phones in every language */
.drawer .bigslip{padding:20px 18px}
.drawer .acct.acct-28{font-size:clamp(22px,7vw,28px);letter-spacing:.02em}

/* hover feedback: sub menu rows (the whole path stays highlighted), drawer links, toggles */
.nav .sub-menu li > a{transition:background .2s,color .2s}
.nav .sub-menu li:hover > a,.nav .sub-menu li:focus-within > a,.nav .sub-menu li.is-open > a{color:var(--gold-ink)}
.nav .sub-menu li{transition:box-shadow .2s}
.nav .sub-menu li:hover,.nav .sub-menu li:focus-within,.nav .sub-menu li.is-open{box-shadow:inset 3px 0 0 var(--gold)}
.nav .menu > li.menu-item-has-children:hover > a,.nav .menu > li.menu-item-has-children:focus-within > a,.nav .menu > li.menu-item-has-children.is-open > a{color:var(--gold-ink)}
.nav .sub-menu li:hover > .sub-toggle,.nav .sub-menu li:focus-within > .sub-toggle{color:var(--gold-ink);opacity:1}
.sub-toggle:hover,.sub-toggle:focus-visible{color:var(--gold-ink)}
.dnav a:hover{color:var(--gold-ink)}

/* the copy confirmation must show above the open modal (modal z-index is 90) */
.toast{z-index:120}

/* 404: quick links under the hero */
.nf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nf-card{position:relative;display:grid;gap:10px;align-content:start;padding:24px 60px 24px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:inherit;text-decoration:none;transition:border-color .3s,box-shadow .3s,transform .3s}
.nf-card .ri{width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-ink)}
.nf-card .ri svg{width:24px;height:24px}
.nf-card h3{font-size:19px;line-height:1.4}
.nf-card p{font-size:15px;color:var(--ink-2);line-height:1.7}
.nf-go{position:absolute;right:20px;top:26px;width:28px;height:28px;display:grid;place-items:center;color:var(--gold-ink);opacity:.6;transition:transform .3s,opacity .3s}
.nf-go svg{width:18px;height:18px}
.nf-card:hover,.nf-card:focus-visible{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-3px)}
.nf-card:hover .nf-go,.nf-card:focus-visible .nf-go{opacity:1;transform:translateX(4px)}
.nf-help{margin-top:22px;text-align:center;color:var(--muted);font-size:15px}
.nf-help a{color:var(--gold-ink);font-weight:600}
@media (max-width:1024px){.nf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.nf-grid{grid-template-columns:1fr}}
/* Translated pages (GTranslate sets <html lang>): longer English text wraps instead of overflowing (QR placeholder, buttons). */
html:not([lang^="th"]) .qr-wip b{white-space:normal;overflow-wrap:anywhere}
html:not([lang^="th"]) .btn{white-space:normal;text-align:center}

/* Light / dark switch: a round button next to the language pill (header, wide screens) or in the menu drawer (small screens). Moon = switch to dark, sun = switch to light. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.theme-toggle:hover{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink)}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-toggle svg{width:20px;height:20px;flex:none}
.theme-toggle svg:last-child{display:none}
:root[data-theme="dark"] .theme-toggle svg:first-child{display:none}
:root[data-theme="dark"] .theme-toggle svg:last-child{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle svg:first-child{display:none}:root:not([data-theme="light"]) .theme-toggle svg:last-child{display:block}}
.drawer-tools{display:flex;align-items:center;gap:8px;min-width:0}
@media (max-width:1279px){.hdr .theme-toggle{display:none}}

/* Header in English only (the translated labels are much longer than the Thai or Chinese ones): more room on big screens and a slightly tighter nav; app.js adds .is-compact (menu button instead of the nav) when it still does not fit one row. */
html:lang(en) .hdr .wrap{max-width:1640px}
html:lang(en) .nav a{font-size:13.5px;padding:8px 6px}
html:lang(en) .nav a::after{left:6px;right:6px}
.hdr.is-compact .nav,.hdr.is-compact .lang,.hdr.is-compact .theme-toggle{display:none}
.hdr.is-compact .burger{display:inline-flex}
@media (max-width:340px){.drawer-tools{gap:6px}.drawer-tools .theme-toggle{width:36px;height:36px}}
/* Small screens with long (translated) labels: app.js tightens the header step by step - smaller type, then no brand text, then no donate button - so nothing runs past the container. */
.hdr.is-tight .wrap{gap:8px}
.hdr.is-tight .brand{gap:8px}
.hdr.is-tight .brand img{height:40px}
.hdr.is-tight .brand-txt b{font-size:12px}
.hdr.is-tight .hdr-donate{font-size:12.5px;padding:8px 12px;min-height:38px}
.hdr.is-tight .burger{width:42px;height:42px}
.hdr.is-wrap .hdr-donate{white-space:normal;text-align:center;line-height:1.15;max-width:124px;padding:6px 10px;font-size:12px}
.hdr.is-wrap .brand-txt b{font-size:11px}
.hdr.is-wrap .burger{width:40px;height:40px}
.hdr.is-nobrand .brand-txt{display:none}
.hdr.is-nocta .hdr-donate{display:none}
/* English menus: the machine translation sometimes returns a label in lower case ("activity"), so the first letter of every menu link is shown as a capital. */
html:lang(en) .nav a::first-letter,html:lang(en) .dnav a::first-letter,html:lang(en) .ftr li.menu-item::first-letter{text-transform:uppercase}