/* 站台共用的手機標題列選單，讓分頁與首頁呈現一致。
   首頁不載入本檔（它的 <style> 內已有同款規則），只共用行為（site-header.js）。 */

/* 桌機：讓分頁的標題列與首頁逐像素對齊。
   三處數值需與首頁一致，否則使用者從首頁點到分頁會看到整排按鍵挪位：
     · 容器寬度　5 個頁面是 980px（指南／治理／FAQ／隱私權／服務條款），其餘 1180px
     · 容器內距　分頁 20px ／ 首頁 24px
     · 選單間距　分頁 gap 14px ／ 首頁 gap 18px
     · box-sizing 分頁多半是 content-box，max-width:1180 加上內距後實際寬 1220
   這裡只統一「標題列」的容器；文章內文另有自己的容器，980px 的窄版行寬不受影響。 */
.sub-header-inner {
  box-sizing: border-box;
  max-width: 1180px;
  padding: 0 24px;
}

.sub-nav {
  gap: 18px;
}

.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid #E5C88A;
  border-radius: 8px;
  background: transparent;
  color: #E5C88A;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.mobile-menu {
  display: none;
  border-top: 4px solid #C9A227;
  background: #0A2A5E;
}

.mobile-menu.open {
  display: block;
}

.mobile-menu a {
  display: block;
  padding: 12px 24px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.90);
  font-weight: 600;
  border-bottom: 1px solid rgba(229, 200, 138, 0.20);
}

/* 當前頁沿用分頁既有的 .current，首頁捲動高亮用 .is-active，兩者同一個外觀 */
.mobile-menu a.current,
.mobile-menu a.is-active {
  color: #0A2A5E;
  background: #E5C88A;
}

/* 導覽 8 項時，861–980px 這段的可用寬度不足以排成一行，收間距即可。
   不動字級也不動斷點：把 860 斷點往上拉會讓這段從桌機導覽
   變成漢堡選單，那是行為改變。 */
@media (min-width: 861px) and (max-width: 980px) {
  .sub-nav {
    gap: 12px;
  }
}
@media (max-width: 860px) {
  .sub-nav {
    display: none;
  }

  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 有漢堡鈕之後不需要為換行的連結預留空間，垂直置中即可，避免標題列變高。
     內距維持 24px 與首頁 .container 一致。 */
  .sub-header-inner {
    align-items: center;
    padding: 0 24px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu a:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.10);
  }
}