/* ============================================================
   通用 NAV 爆格保底 + 「更多」收納
   assets/css/nav-overflow.css   (全站載入,所有前台主題通用)

   - 保底:menu link 唔再逐字壓爛(white-space:nowrap;item 唔縮)
   - nav-overflow.js 會將爆出嘅頂層 item 自動收落「更多 ▾」
   - 「更多」trigger 係插入主題自己個 <nav>,自動繼承主題 nav 樣式 → 唔似硬砌
   - dropdown 面板用主題 CSS 變數(--header-bg / --header-text / --primary)→ 同主題一致
   - 原生已有 overflow 嘅主題(default / classic,有 [data-nav-overflow])會自動跳過
   ============================================================ */

/* ── 保底:防止頂層 menu 逐字斷行壓爛(只限桌面 ≥769px)──
   提高 specificity(body[data-template] 前綴)確保蓋過主題自己嘅 flex 設定;
   flex-shrink:0 阻止 item 被壓窄,white-space:nowrap 令每個 menu 字保持單行。

   ⚠️ 必須包喺 min-width:769px:手機版主題會用 .xxx-nav{display:none} 隱藏
   desktop nav 改用漢堡 drawer。若喺手機都套呢段,會干擾 nav 佈局、撐爆 layout
   遮住漢堡掣 / 語言選擇器。故此手機完全唔好掂 nav。 */
@media (min-width: 769px) {
  body[data-template] header nav:not([class*="drawer"]):not([class*="mobile"]) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  body[data-template] header nav:not([class*="drawer"]):not([class*="mobile"]) > ul {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  body[data-template] header nav:not([class*="drawer"]):not([class*="mobile"]) > ul.is-overflow-managed {
    overflow: visible;
  }
  body[data-template] header nav:not([class*="drawer"]):not([class*="mobile"]) > ul > li {
    flex-shrink: 0;
  }
  body[data-template] header nav:not([class*="drawer"]):not([class*="mobile"]) > ul > li > a {
    white-space: nowrap;
  }
}

/* ── 「更多」收納項(JS 動態插入)── */
.nav-of-more { position: relative; }
.nav-of-more > .nav-of-more-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nav-of-caret { font-size: .7em; line-height: 1; transition: transform .2s ease; }
.nav-of-more.is-open > .nav-of-more-link .nav-of-caret { transform: rotate(180deg); }

/* ── dropdown 面板:用主題變數,融入主題 ── */
.nav-of-pop {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--header-bg, var(--white, #ffffff));
  color: var(--header-text, var(--text, #1e293b));
  border: 1px solid color-mix(in srgb, var(--header-text, #888888) 16%, transparent);
  border-top: 2px solid var(--primary, #0d9488);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1200;
}
.nav-of-more:hover > .nav-of-pop,
.nav-of-more.is-open > .nav-of-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── dropdown 內嘅 item:由橫向 nav item 變直向 list ── */
.nav-of-pop > li { display: block; width: 100%; margin: 0; }
.nav-of-pop > li > a {
  display: block;
  padding: 9px 16px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: inherit;
  transition: background .15s ease, color .15s ease;
}
.nav-of-pop > li > a:hover {
  background: color-mix(in srgb, var(--primary, #0d9488) 12%, transparent);
  color: var(--primary, #0d9488);
}

/* 如果收落嚟嘅 item 本身有 submenu,攤平喺面板入面 */
.nav-of-pop ul { list-style: none; margin: 0; padding: 0 0 0 12px; }
.nav-of-pop ul > li > a {
  display: block;
  padding: 7px 16px;
  font-size: 13px;
  opacity: .85;
  color: inherit;
  text-decoration: none;
}
.nav-of-pop ul > li > a:hover { color: var(--primary, #0d9488); opacity: 1; }

/* 細螢幕行 mobile drawer,唔需要「更多」 */
@media (max-width: 768px) {
  .nav-of-more { display: none !important; }
}