/* ============================================================
   DAAISTUDIO — site navigation + sitemap footer (all pages, th/en/jp)
   Loads after project.css / pages.css. Reuses the site tokens only:
   --bg --ink --navy --muted --line --sans --mono.
   Header: logo, language links, "free plan" button (768px and up) and the menu
   button at every size; the full-screen menu holds the 5 grouped items.
   ============================================================ */

/* ---------- desktop top bar ---------- */
.site-nav{display:none}
.sn-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.sn-item{position:relative}
.sn-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:14.3px;font-weight:400;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;padding:12px 12px;background:none;border:0;cursor:pointer}
.sn-link:hover,.sn-has.is-open>.sn-link{color:var(--navy)}
.sn-link[aria-current="page"],.sn-item.is-current>.sn-link{color:var(--navy)}
.sn-caret{width:12px;height:12px;flex:none;transition:transform .25s ease}
.sn-has.is-open .sn-caret{transform:rotate(180deg)}
.sn-panel{display:none;position:absolute;top:100%;left:0;min-width:260px;margin-top:8px;padding:8px 0;background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 40px rgba(17,17,17,.08)}
.sn-panel::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.sn-has.is-open>.sn-panel{display:block}
.sn-panel ul{list-style:none;margin:0;padding:0}
.sn-panel a{display:block;font-family:var(--sans);font-size:14.3px;font-weight:400;line-height:1.4;color:var(--ink);text-decoration:none;padding:11px 20px;white-space:nowrap}
.sn-panel a:hover,.sn-panel a:focus-visible{background:#f1efeb;color:var(--navy)}
.sn-panel a[aria-current="page"]{color:var(--navy)}
.sn-panel .sn-sep{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.sn-cta{display:none;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;padding:11px 18px;background:var(--navy);border:1px solid var(--navy);color:#f7f6f4;transition:background .3s,border-color .3s}
.sn-cta:hover{background:var(--ink);border-color:var(--ink);color:#f7f6f4}
body.lang-th .sn-cta,body.lang-jp .sn-cta{font-family:var(--sans)!important;font-size:13.2px;letter-spacing:normal!important;text-transform:none;font-weight:500}
.sn-link:focus-visible,.sn-cta:focus-visible,.burger:focus-visible,.menu-close:focus-visible,.mn-toggle:focus-visible,.mn-sub a:focus-visible,.menu-link:focus-visible,.footer-col a:focus-visible,.footer-bottom a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

@media(min-width:768px){.sn-cta{display:inline-flex}}

/* ---------- full-screen menu ---------- */
/* project.css, pages.css and the homepage set the overlay to overflow:hidden; when the
   open groups make the menu taller than the screen it must scroll inside itself
   (the page behind stays locked). Works on short laptop windows and landscape phones. */
.menu-overlay{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu-overlay .menu-overlay-inner{height:auto;min-height:100%;overflow:visible;flex:none}
.menu-nav .mn-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--sans);font-weight:300}
body.lang-th .menu-link{letter-spacing:normal}
.mn-plus{position:relative;width:18px;height:18px;flex:none}
.mn-plus::before,.mn-plus::after{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--ink);transition:transform .3s ease}
.mn-plus::after{transform:rotate(90deg)}
.mn-toggle[aria-expanded="true"] .mn-plus::after{transform:rotate(0)}
.menu-nav li.mn-group{overflow:visible}
.mn-sub{list-style:none;margin:4px 0 10px;padding:0 0 0 2px}
.mn-sub[hidden]{display:none}
.mn-sub li{overflow:visible}
.mn-sub a{display:block;font-family:var(--sans);font-size:17.6px;font-weight:300;line-height:1.35;color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.mn-sub a:hover,.mn-sub a[aria-current="page"]{color:var(--navy)}
.menu-cta .mc-plan{grid-column:1/-1;background:var(--navy);color:#f7f6f4;border:1px solid var(--navy)}
.menu-cta .mc-plan:hover{background:var(--ink);border-color:var(--ink);color:#f7f6f4}
/* the header shows the free-plan button from 768px up, so the menu only needs it on phones */
@media(min-width:768px){.menu-cta .mc-plan{display:none}}
/* phones: room between the close button and the first menu item */
@media(max-width:767px){.menu-overlay .menu-overlay-inner{padding-top:84px}}
body.lang-th .menu-cta-btn,body.lang-jp .menu-cta-btn{font-family:var(--sans)!important;letter-spacing:normal!important;text-transform:none;font-size:14.3px}

/* ---------- sitemap footer ---------- */
.footer-cols.sitemap{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px}
.footer-cols.sitemap .footer-col{min-width:0}
.footer-cols.sitemap .footer-col a,.footer-cols.sitemap .footer-col p{line-height:1.6;padding:5px 0;overflow-wrap:anywhere}
.footer-cols.sitemap .footer-col p{margin:0}
.footer-bottom .fb-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-bottom a{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.footer-bottom a:hover{color:var(--ink)}
body.lang-th .footer-bottom a,body.lang-jp .footer-bottom a{font-family:var(--sans)!important;letter-spacing:normal!important;text-transform:none;font-size:12.1px}
@media(max-width:1100px){.footer-cols.sitemap{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.footer-cols.sitemap{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media(max-width:360px){.footer-cols.sitemap{grid-template-columns:minmax(0,1fr)}}

@media(prefers-reduced-motion:reduce){.sn-caret,.mn-plus::before,.mn-plus::after,.sn-cta{transition:none}}
/* when the menu scrolls, items fade out under the close button instead of colliding with it */
.menu-overlay::before{content:"";position:sticky;top:0;display:block;height:64px;margin-bottom:-64px;background:linear-gradient(var(--bg) 62%,rgba(247,246,244,0));z-index:2;pointer-events:none}
/* safety: project.css hides the system pointer for the custom cursor; any page without the
   cursor dots must keep the normal pointer, otherwise the mouse disappears */
body:not(:has(#cur)){cursor:auto}