/* ASA site chrome (nav v2 + footer v2) — PREVIEW DRAFT 2026-11-09. Loaded by index.html AND all subpages.
   Works on top of the existing site CSS (asa-base.css on subpages / inline styles in index.html).
   Every rule is scoped by an extra class (.nv2 / .lk2 / .ft2 / .mm2 / .nd) so it wins over the base rules
   without relying on stylesheet order. Dark = default; light only under html[data-theme="light"]. */

/* skip link */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:10px;background:#B6FF2E;color:#0b0c0e;font-weight:600;font-size:14px}
.skip:focus{left:16px}

/* ---------- desktop nav ---------- */
.nv2 .links{opacity:1;color:#cfd2d6;align-items:center}
.nv2 .links>a,.nd-b{padding:8px 0;position:relative}
.nv2 .links>a:hover,.nd-b:hover{color:#eef0f2}
.nv2 .links a[aria-current="page"],.nd-b.cur{color:#eef0f2;text-decoration:underline;text-decoration-color:#B6FF2E;text-decoration-thickness:2px;text-underline-offset:8px}
.nd{position:relative;display:flex;align-items:center}
.nd-b{appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nd-b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s}
.nd-b[aria-expanded="true"] svg{transform:rotate(180deg)}
.nd-p{position:absolute;top:calc(100% + 12px);left:-14px;z-index:40;min-width:280px;display:grid;gap:2px;padding:8px;border-radius:14px;background:#121316;border:1px solid #2a2c31;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.nd-p[hidden]{display:none}
.nd-p a{display:block;padding:10px 12px;border-radius:10px;white-space:nowrap;color:#cfd2d6;font-size:14px}
.nd-p a:hover,.nd-p a:focus-visible{background:#1d1f23;color:#eef0f2}
.nd-p a[aria-current="page"]{color:#B6FF2E}
.nd-p a.all{border-bottom:1px solid #24262b;border-radius:10px 10px 0 0;margin-bottom:4px;color:#eef0f2;font-weight:600}
.nd-b:focus{outline:none}.nd-b:focus-visible,.nv2 .links>a:focus-visible,.nd-p a:focus-visible,.mm2 a:focus-visible,.burger:focus-visible,.ft2 a:focus-visible{outline:2px solid #B6FF2E;outline-offset:3px;border-radius:6px}

/* one row from 1320px; 881–1319 keeps the site's existing two-row nav grid */
@media(min-width:1320px){
  .nv.nv2{display:flex;height:72px;padding-top:0;padding-bottom:0;gap:22px}
  .nv2 .links{margin-left:auto;gap:22px}
  .nv2 .rt{gap:10px}
}
@media(min-width:881px) and (max-width:1319px){
  .nv2 .links{gap:20px}
}

/* ---------- mobile menu ---------- */
@media(max-width:880px){
  body.mo .mmenu.mm2{max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);overflow-y:auto;gap:4px;padding:12px 20px 20px}
  .mm2>a:not(.btn){display:block;padding:10px 0;font-size:16px}
  .mm2 .msub{display:grid;gap:0;margin:0 0 6px 4px;padding-left:14px;border-left:1px solid #2a2c31}
  .mm2 .msub a{display:block;padding:8px 0;font-size:15px;color:#cfd2d6}
  .mm2 a[aria-current="page"]{color:#B6FF2E}
  .mm2 .btn{margin-top:10px}
  .nv2 .burger{justify-self:end}
}

/* ---------- footer v2 ---------- */
.ft.ft2{grid-template-columns:1.5fr 1fr 1.1fr 1.4fr;gap:32px}
.ft2 .fh{font-family:Inter,"Noto Sans TC",sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;margin:0 0 14px;max-width:none;color:#9a9ea6}
html[lang=zh-Hant] .ft2 .fh{letter-spacing:.12em;font-weight:500}
.ft2 .fl{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.ft2 .fl a{color:#cfd2d6}
.ft2 .fl a:hover{color:#B6FF2E}
.ft2 .fc p{margin-bottom:10px;opacity:.85}
@media(max-width:880px){
  .ft.ft2{grid-template-columns:1fr 1fr;gap:28px 20px}
  .ft2>.fb,.ft2>.fc{grid-column:1 / -1}
}
@media(max-width:360px){.ft.ft2{grid-template-columns:1fr}}

/* ---------- LIGHT ---------- */
html[data-theme="light"] .skip{background:#0F5C2E;color:#FFFFFF}
html[data-theme="light"] .nv2 .links>a:hover,html[data-theme="light"] .nd-b:hover{color:#14161A}
html[data-theme="light"] .nv2 .links a[aria-current="page"],html[data-theme="light"] .nd-b.cur{color:#14161A;text-decoration-color:#0F5C2E}
html[data-theme="light"] .nd-p{background:#FFFFFF;border:1px solid #8F8A7F;box-shadow:0 20px 48px rgba(20,22,26,.14)}
html[data-theme="light"] .nd-p a{color:#14161A}
html[data-theme="light"] .nd-p a:hover,html[data-theme="light"] .nd-p a:focus-visible{background:#EEEDE8;color:#14161A}
html[data-theme="light"] .nd-p a[aria-current="page"]{color:#0F5C2E;font-weight:600}
html[data-theme="light"] .nd-p a.all{border-bottom-color:#DDD9D0}
html[data-theme="light"] .nd-b:focus-visible,html[data-theme="light"] .nv2 .links>a:focus-visible,html[data-theme="light"] .nd-p a:focus-visible,html[data-theme="light"] .mm2 a:focus-visible,html[data-theme="light"] .burger:focus-visible,html[data-theme="light"] .ft2 a:focus-visible{outline-color:#0F5C2E}
html[data-theme="light"] .mm2 .msub{border-left-color:#DDD9D0}
html[data-theme="light"] .mm2 .msub a{color:#4A4F57}
html[data-theme="light"] .mm2 a[aria-current="page"]{color:#0F5C2E;font-weight:600}
html[data-theme="light"] .ft2 .fh{color:#5C6169}
html[data-theme="light"] .ft2 .fl a{color:#14161A}
html[data-theme="light"] .ft2 .fl a:hover{color:#0F5C2E}
html[data-theme="light"] .ft2 .fc p{opacity:1;color:#4A4F57}
html[data-theme="light"] .ft2 .fc a{color:#14161A}

/* ---------- chat launcher on small screens (fix 2026-11-09) ----------
   Smaller FAB (48px tap target, >=44) + safe-area aware offset, and page-end padding so the
   footer / last lines scroll clear of it. Both themes (colours untouched). Chat logic untouched. */
@media(max-width:560px){
  body #asc-b{width:48px;height:48px;right:max(10px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom))}
  body #asc-b svg{width:22px;height:22px}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body.asc-open{padding-bottom:0}
}