/* ==========================================================================
   NAVBAR｜導覽列
   手機版：漢堡選單 + 置中 Logo + 登入/註冊
   桌機版：第一列 Logo + 登入/註冊；第二列紅底分類選單
   ========================================================================== */

/* 顏色變數／box-sizing／body 基礎重置都移到 css/main.css（全站共用，載入順序在此檔之前） */

/* navbar 改用 fixed 脫離文件流，body 用 padding-top 預留版位；
   兩者高度變化互不牽動，才不會在滾動臨界值來回抖動（比照 2022sc-bank .Header.fixed_header + .Body.Scrolling） */
body {
  padding-top: 50px;
  transition: padding-top 0.3s ease;
  /* padding-top 隨 .is-scrolled 縮小時，瀏覽器的 scroll anchoring 會偵測到視窗上方
     版面尺寸變化，自動幫忙「補償」把 scrollY 往回調，結果剛好把 scrollY 調回門檻
     另一側，又把 is-scrolled 觸發掉、padding-top 變回去、scrollY 又被補償回來……
     來回抖動。關掉 scroll anchoring，讓 padding-top 的變化不會反過來影響捲動位置 */
  overflow-anchor: none;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(37, 37, 37, 0.3);
  /* transition: transform 0.3s ease; */
}


/* 比照 2022sc-bank .Header-content：固定列高 + 左右內距，取代原本靠 padding 撐高度 */
.navbar__top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 50px;
  padding: 0 16px 8px;
  transition: height 0.2s ease;
}

/* 漢堡選單按鈕：僅手機顯示 */
.navbar__menu-btn {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  color: var(--brand-red);
}

.navbar__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  text-decoration: none;
}

/* 比照 2022sc-bank .Header-logo：手機基準 60x32，且手機/1024px 範圍滾動時不縮小 */
.navbar__logo img {
  display: block;
  width: auto;
  height: 32px;
}

.navbar__auth-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* .navbar__auth-group 自己設了 display:flex，跟瀏覽器內建的 [hidden]{display:none}
   規則特異度相同，同特異度時 author CSS 會贏過 UA 預設樣式，導致 hidden 屬性形同虛設，
   兩個區塊會同時顯示。這裡補一個特異度更高的規則讓 hidden 真的生效 */
.navbar__auth-group[hidden] {
  display: none;
}

/* 比照 2022sc-bank .nologin .Header-login-register-btn：手機 0.95rem（約 15px） */
.navbar__auth {
  font-size: 15px;
  color: var(--brand-red);
  text-decoration: none;
  white-space: nowrap;
}

/* 比照 2022sc-bank .nologin span：分隔線用灰色，不跟登入/註冊同色 */
.navbar__auth-group span.navbar__auth {
  color: #999;
}

/* 登入後：頭像 + 下拉選單（樣式參考 bwg_com .Header-user / .Header-user-info） */
.navbar__user {
  position: relative;
}

.navbar__user-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 8px 4px;
  margin: -8px -4px;
  cursor: pointer;
}

.navbar__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.navbar__username {
  font-size: 14px;
  color: var(--text-primary);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar__user-arrow {
  font-size: 16px;
  color: var(--text-primary);
  transition: transform 0.2s ease;
}

.navbar__user-trigger[aria-expanded="true"] .navbar__user-arrow {
  transform: rotate(180deg);
}

.navbar__user-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  z-index: 9;
  width: 255px;
  padding: 24px;
  background: rgba(37, 37, 37, 0.9);
  border-radius: 4px;
}

.navbar__user-panel.is-open {
  display: block;
}

.navbar__user-links {
  text-align: center;
}

.navbar__logout-btn {
  min-width: 84px;
  height: 40px;
  padding: 0 16px;
  margin: 8px auto 0;
  border: 1px solid #fff;
  background: none;
  color: #fff;
  font-size: 14px;
  line-height: 38px;
  cursor: pointer;
}

.navbar__logout-btn:hover {
  border-color: #b9b9b9;
}

/* 分類選單：手機版預設收合，點擊漢堡按鈕後展開為深色下拉選單 */
.navbar__menu {
  display: none;
}

.navbar__menu.is-open {
  display: block;
  background: var(--menu-overlay);
}

.navbar__menu ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.navbar__menu a {
  display: block;
  padding: 14px 16px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

/* 手機版展開時改為覆蓋層，不推擠下方內容 */
@media screen and (max-width: 1023.98px) {
  .navbar__menu.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
}



@media screen and (min-width: 1024px) {
  /* 1024~1279px：navbar__top(58px) + navbar__menu(40px)，滾動後頻道列收合只剩 58px */
  body {
    padding-top: 98px;
  }

  body.is-scrolled {
    padding-top: 58px;
  }

  .navbar__menu-btn {
    display: none;
  }

  /* 比照 2022sc-bank .Header-content：1024~1279px 固定 58px，滾動不再縮小 */
  .navbar__top {
    height: 58px;
    padding: 0 24px 8px;
  }

  .navbar__logo {
    position: static;
    transform: none;
    margin: 0 auto;
    align-self: center;
  }

  .navbar__logo img {
    width: auto;
    height: 42px;
  }

  .navbar__auth {
    font-size: 16px;
  }

  /* 比照 2022sc-bank .Header-nav 樣式 */
  .navbar__menu {
    display: block;
    height: 45px;
    background: #cd0505;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
    transition: height .5s ease;
  }

  .navbar__menu ul {
    display: flex;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .navbar__menu li {
    position: relative;
    width: 84px;
    height: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 45px;
    text-align: center;
  }

  .navbar__menu li:hover,
  .navbar__menu li:active {
    cursor: pointer;
    background: #900101;
  }

  .navbar__menu a {
    display: inline;
    padding: 0;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
  }

}

/* 比照 2022sc-bank .Header-content：≥1280px 基準 100px，滾動後縮為 58px */
@media screen and (min-width: 1280px) {
  /* ≥1280px：navbar__top(100px) + navbar__menu(40px)，滾動後 top 縮為 58px、頻道列收合為 0 */
  body {
    padding-top: 140px;
  }

  body.is-scrolled {
    padding-top: 58px;
  }

  .navbar__top {
    height: 100px;
    padding: 0 24px 0px;
  }

  .navbar.is-scrolled .navbar__top {
    height: 58px;
  }

  .navbar__logo img {
    width: auto;
    height: 65px;
  }

  .navbar.is-scrolled .navbar__logo img {
    height: 42px;
  }

  .navbar__menu li {
    width: 101px;
  }
}

/* 頁面上方有廣告版位（<body class="has-top-ad">）時：導覽列改用 sticky，
   讓它照文件流排在廣告下面，捲動超過廣告高度才貼齊頂端；
   fixed 是脫離文件流固定在最頂端，不管 DOM 順序永遠蓋在最上面，
   廣告放在導覽列前面也沒用，只有 sticky 才能真的把導覽列往下推。
   這段放最後面，確保各斷點、is-scrolled 狀態都蓋得過去 */
body.has-top-ad,
body.has-top-ad.is-scrolled {
  padding-top: 0;
}

body.has-top-ad .navbar {
  position: sticky;
}