/* ══════════════════════════════════════════════════════════════
   nav.css — 站台導覽列(唯一來源)
   ──────────────────────────────────────────────────────────────
   ⚠ 這個檔只含 .topbar 底下的規則,沒有任何全域樣式(body/section/h1…),
     所以「刻意不載 sys.css」的頁面(hualien.html / hualien-data.html)
     也可以安全載入它,不會被覆蓋版面。
   ⚠ 色票取自各頁自己的 :root(--bg2 / --line / --gold / --fg / --dim / --mono),
     sys.css 與花蓮兩頁的定義本來就一致。
   歷史:2026-09-10 之前這批規則同時存在 sys.css 與花蓮兩頁的內嵌 style,
        改一邊另一邊不會動;獨立成本檔之後只有這一份。
   ══════════════════════════════════════════════════════════════ */

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(20,26,69,.92);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .tb{
  max-width:1180px;margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.topbar .brand{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--fg);flex:0 1 auto;min-width:0;
}
.topbar .brand img{width:36px;height:36px;border-radius:7px;display:block}
.topbar .brand span{font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.25}
.topbar .brand span b{
  display:block;font-size:11.5px;font-weight:600;color:var(--gold);
  letter-spacing:.22em;font-family:var(--mono);
}

.topbar .lnk{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto}
.topbar .lnk>a{
  font-size:13.5px;color:var(--dim);text-decoration:none;
  padding:6px 11px;border-radius:7px;white-space:nowrap;
}
.topbar .lnk>a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.topbar .lnk>a.on{color:var(--gold);background:rgba(224,185,94,.10)}

/* ── 縣市下拉 ────────────────────────────────────────────────
   用原生 <details>:不需要 JS 就能開合、鍵盤可操作、手機可用。
   (另有一小段 JS 只做「點別處自動關閉」,關掉 JS 也不影響使用) */
.topbar .menu{position:relative}
.topbar .menu>summary{
  font-size:13.5px;color:var(--dim);
  padding:6px 11px;border-radius:7px;white-space:nowrap;
  cursor:pointer;list-style:none;user-select:none;
}
.topbar .menu>summary::-webkit-details-marker{display:none}
.topbar .menu>summary::after{content:"▾";margin-left:6px;font-size:10px;opacity:.75}
.topbar .menu[open]>summary::after{content:"▴"}
.topbar .menu>summary:hover,
.topbar .menu[open]>summary{color:var(--fg);background:rgba(255,255,255,.06)}
.topbar .menu.on>summary{color:var(--gold);background:rgba(224,185,94,.10)}
.topbar .menu>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.topbar .pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:216px;padding:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:1px;
  /* 縣市會愈來愈多,面板本身要能捲 */
  max-height:min(72vh,540px);overflow-y:auto;overscroll-behavior:contain;
}

/* ── 第二層:一個縣市一個 <details> ──────────────────────────
   收合時整份選單只有縣市名那幾行,22 個縣市進來也不會拉成一條長龍。
   目前所在的縣市預設展開;JS 讓同時只有一個縣市是開的。 */
.topbar .sub>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13.5px;font-weight:600;color:var(--fg);
  padding:8px 10px;border-radius:6px;cursor:pointer;list-style:none;user-select:none;
}
.topbar .sub>summary::-webkit-details-marker{display:none}
.topbar .sub>summary::after{content:"›";color:var(--dim);font-size:16px;line-height:1}
.topbar .sub[open]>summary::after{content:"⌄";position:relative;top:-2px}
.topbar .sub>summary:hover{background:rgba(255,255,255,.06)}
.topbar .sub.on>summary{color:var(--gold)}
.topbar .sub>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.topbar .sub-pop{
  display:flex;flex-direction:column;
  margin:2px 0 6px 14px;padding-left:8px;border-left:1px solid var(--line);
}
.topbar .pop a{
  display:block;font-size:13px;color:var(--dim);text-decoration:none;
  padding:6px 10px;border-radius:6px;
}
.topbar .pop a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.topbar .pop a.on{color:var(--gold);background:rgba(224,185,94,.10)}


/* ── 漢堡選單(只在窄螢幕出現)────────────────────────────────
   用 checkbox 而不是 JS —— 關掉 JS 也開得起來。
   桌機把它整個藏起來,連結照舊平鋪。 */
.topbar .navtoggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.topbar .burger{display:none}
.topbar .brand span b .brk{display:none}   /* 英文斷行點,只在手機生效 */

@media(max-width:640px){
  .topbar .tb{padding:10px 16px;gap:10px;flex-wrap:wrap;align-items:center}

  /* 品牌讓出右上角 44px 給漢堡;英文斷成兩行,不再塞滿整行 */
  .topbar .brand{flex:1 1 auto;min-width:0}
  .topbar .brand span{font-size:14px}
  .topbar .brand span b{font-size:10px;letter-spacing:.14em;line-height:1.5}
  .topbar .brand span b .dot{display:none}
  .topbar .brand span b .brk{display:inline}

  /* 用 flex 排在品牌右邊,不用絕對定位 ——
     否則選單展開後 .tb 變高,按鈕會跟著滑到面板的垂直中間 */
  .topbar .burger{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;align-self:center;
    width:38px;height:38px;border-radius:9px;
    border:1px solid var(--line);cursor:pointer;
  }
  .topbar .burger span,
  .topbar .burger span::before,
  .topbar .burger span::after{
    display:block;width:18px;height:1.5px;background:var(--fg);border-radius:2px;
  }
  .topbar .burger span{position:relative}
  .topbar .burger span::before,
  .topbar .burger span::after{content:"";position:absolute;left:0}
  .topbar .burger span::before{top:-6px}
  .topbar .burger span::after{top:6px}
  .topbar .navtoggle:focus-visible ~ .burger{outline:2px solid var(--gold);outline-offset:2px}

  /* 打開時三條線收成一個叉 */
  .topbar .navtoggle:checked ~ .burger span{background:transparent}
  .topbar .navtoggle:checked ~ .burger span::before{top:0;transform:rotate(45deg)}
  .topbar .navtoggle:checked ~ .burger span::after{top:0;transform:rotate(-45deg)}
  @media(prefers-reduced-motion:no-preference){
    .topbar .burger span,
    .topbar .burger span::before,
    .topbar .burger span::after{transition:transform .18s ease,background .18s ease,top .18s ease}
  }

  /* 連結收進漢堡,展開後直式排列 */
  .topbar .lnk{
    display:none;width:100%;order:3;margin:6px 0 2px;
    flex-direction:column;align-items:stretch;gap:2px;
    border-top:1px solid var(--line);padding-top:8px;
  }
  .topbar .navtoggle:checked ~ .lnk{display:flex}
  .topbar .lnk>a{padding:9px 10px;font-size:14px}
  .topbar .menu>summary{padding:9px 10px;font-size:14px}
  .topbar .menu{width:100%}
  .topbar .pop{position:static;width:100%;min-width:0;box-shadow:none;margin-top:4px;max-height:none}
}

/* 簡報頁(owl / press)的投影片是固定尺寸,sticky 導覽列會壓到內容 —— 改成不黏頂。
   ⚠ 這條原本在 sys.css 的 @media screen 裡,隨 topbar 規則一起搬過來,別漏掉。 */
@media screen{ body.deck .topbar{position:static} }

@media print{ .topbar,.noprint{display:none !important} }