/* 全站主選單 (etf_web/site_nav.py 輸出的 <header class="site-hdr">)。
   兩個 app 都載入這一份。兩邊的 style.css 還有舊的 nav{overflow-x:auto}
   (會把下拉選單切掉) 與全域 button{background:藍} —— 這裡一律用
   .site-hdr 開頭的選擇器蓋過去, 不必去動兩邊的舊樣式。 */

.site-hdr{position:sticky;top:0;z-index:50}
.site-hdr .hdr-top{display:flex;align-items:center;justify-content:space-between}
.site-hdr .nav-toggle{display:none}
.site-hdr .nav-burger{display:none}

.site-hdr .site-nav{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px;
  padding:0 12px;overflow:visible;border:0}
.site-hdr .navgrp{position:relative}
.site-hdr .navgrp-btn,
.site-hdr .site-nav a.navtop{display:block;background:none;border:0;border-radius:0;
  box-shadow:none;filter:none;margin:0;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--mut,#64748b);padding:10px 14px 12px;cursor:pointer;white-space:nowrap;
  text-decoration:none;border-bottom:2.5px solid transparent}
.site-hdr .navgrp-btn::after{content:"▾";font-size:11px;margin-left:5px;opacity:.6}
.site-hdr .navgrp-btn:hover,
.site-hdr .site-nav a.navtop:hover,
.site-hdr .navgrp:focus-within > .navgrp-btn{color:var(--ink,#0f172a);background:none}
.site-hdr .navgrp.on > .navgrp-btn,
.site-hdr .site-nav a.navtop.on{color:var(--brand,#2563eb);
  border-bottom-color:var(--brand,#2563eb)}

.site-hdr .navmenu{display:none;position:absolute;left:0;top:100%;min-width:200px;
  background:var(--panel,#fff);border:1px solid var(--line,#e2e8f0);border-radius:10px;
  box-shadow:0 10px 30px rgba(15,23,42,.12);padding:6px;z-index:60}
.site-hdr .navgrp:hover > .navmenu,
.site-hdr .navgrp:focus-within > .navmenu{display:block}
.site-hdr .navmenu a{display:block;padding:8px 12px;border:0;border-radius:7px;
  color:var(--ink2,#334155);font-size:14px;white-space:nowrap;text-decoration:none}
.site-hdr .navmenu a:hover{background:var(--brand-weak,#eaf0ff);color:var(--brand,#2563eb)}
.site-hdr .navmenu a.on{color:var(--brand,#2563eb);font-weight:700}

/* ── 手機: 漢堡按鈕展開, 分組直接攤開成清單 ── */
@media (max-width:760px){
  /* 站名較長 (台灣ETF資料站與理財試算): 不換行, 按鈕不縮, 站名必要時截斷 */
  .site-hdr .hdr-top{flex-wrap:nowrap}
  .site-hdr .brand{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-hdr .nav-burger{flex-shrink:0}
  .site-hdr .nav-burger{display:inline-block;margin-right:12px;padding:6px 12px;
    border:1px solid var(--line,#e2e8f0);border-radius:8px;font-size:14px;
    color:var(--ink2,#334155);cursor:pointer;user-select:none}
  .site-hdr .site-nav{display:none;flex-direction:column;padding:4px 14px 14px;
    max-height:calc(100vh - 56px);overflow-y:auto}
  .site-hdr .nav-toggle:checked ~ .site-nav{display:flex}
  .site-hdr .navgrp-btn{padding:12px 2px 4px;cursor:default;font-size:13px;
    color:var(--mut,#64748b);border-bottom:0}
  .site-hdr .navgrp-btn::after{content:none}
  .site-hdr .navgrp.on > .navgrp-btn{border-bottom:0}
  .site-hdr .navmenu{display:flex;flex-wrap:wrap;gap:6px;position:static;
    min-width:0;border:0;box-shadow:none;padding:2px 0;background:none}
  .site-hdr .navmenu a{padding:7px 12px;border:1px solid var(--line,#e2e8f0);
    background:var(--panel,#fff)}
  .site-hdr .navmenu a.on{border-color:var(--brand,#2563eb)}
  /* 沒有子選單的頂層連結 (文章): 做成跟子項一樣的按鈕, 不然看起來像分組標題 */
  .site-hdr .site-nav a.navtop{align-self:flex-start;margin-top:12px;padding:7px 12px;
    border:1px solid var(--line,#e2e8f0);border-radius:7px;background:var(--panel,#fff);
    color:var(--ink2,#334155);font-size:14px;font-weight:400}
  .site-hdr .site-nav a.navtop.on{border-color:var(--brand,#2563eb);color:var(--brand,#2563eb)}
}
@media (max-width:360px){
  .site-hdr .brand{font-size:14px;padding-left:10px}
  .site-hdr .nav-burger{margin-right:8px;padding:5px 9px;font-size:13px}
}