/* 舊站樣式與新站 Tailwind 之間的橋接層。
 *
 * /legacy/** 要維持舊站（Joomla + Helix II + Bootstrap 2）的外觀，但整個 Nuxt app
 * 都會載入 Tailwind v4，它的 preflight 會動到所有元素。
 *
 * 大部分衝突不需要處理：preflight 的選擇器是單一元素（特異度 0,0,1），而舊站的
 * stylesheet 由 app/layouts/legacy.vue 以 useHead 掛在 main.css 之後，同分時後載入
 * 的贏——`a { color: inherit }`、`h1 { font-size: inherit }`、`p { margin: 0 }`
 * 這些都會被 Bootstrap 2 / template.css 蓋回去。
 *
 * 真正需要橋接的只有兩件 Bootstrap 2 自己沒有重設、因此會一路留著的事：
 *
 *   1. box-sizing: border-box —— Bootstrap 2 的 .span* 欄寬是 content-box 算出來的
 *   2. list-style: none      —— Bootstrap 2 不會把內文清單的項目符號設回來
 *
 * 這兩條都得用 `.legacy-site` 當祖先（0,1,x）才蓋得過 preflight 的 `*`。
 * 這裡不做任何視覺設計，版面一律交給舊站原本的 CSS。 */

.legacy-site,
.legacy-site *,
.legacy-site *::before,
.legacy-site *::after {
  box-sizing: content-box;
}

/* Bootstrap 2 本來就要求這幾類元素用 border-box。 */
.legacy-site input[type='search'],
.legacy-site .navbar-search .search-query,
.legacy-site textarea,
.legacy-site .uneditable-input {
  box-sizing: border-box;
}

.legacy-site ul {
  list-style: disc;
}

.legacy-site ol {
  list-style: decimal;
}

/* 導覽、麵包屑、分頁、以及我們自己排的格線都是無項目符號的清單。 */
.legacy-site .sp-menu,
.legacy-site .sp-menu ul,
.legacy-site .breadcrumb,
.legacy-site .pagination ul,
.legacy-site .legacy-grid,
.legacy-site .legacy-inline-list {
  list-style: none;
}

/* Tailwind 也有一個叫 .container 的 utility（width:100% + 各斷點的 max-width）。
 * 舊站的版面骨架用的也是 .container，兩者同名會打架。舊站原本就用
 * `.container{max-width:1170px}` 定寬（見 template-settings.css），那條排在最後且
 * 未分層，蓋得過 Tailwind 的版本，所以這裡不需要再處理。 */

/* 字體。新站的 main.css 有 `body { font-family: var(--font-sans) }`（Noto Sans TC），
 * 跟舊站的 `body { font-family: 黑體,微軟正黑體,... }` 特異度相同（0,0,1），誰贏看載入
 * 順序——dev 模式下 Vite 把 main.css 插在 <head> 最後，舊站那份就輸了。
 *
 * 用 `.legacy-site` 當祖先（0,1,0）改成宣告在容器上，靠繼承傳給所有子元素，
 * 就跟載入順序無關。值與舊站 custom.css 的 body 規則一致。 */
.legacy-site {
  font-family: 黑體, 微軟正黑體, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 標題沿用舊站 template 設定的字體堆疊。 */
.legacy-site h1,
.legacy-site h2,
.legacy-site h3 {
  font-family: 'AdobeFanHeitiStd-Bold', 'LiHei Pro', 'Xin6', 微軟正黑體,
    sans-serif;
}

/* 選單展開 —— 舊站是 jQuery（helix menu.js）在 hover 時加 .open，Bootstrap 2 的
   collapse 則靠 .in。那兩支 JS 沒有搬過來，這裡用等價的 CSS / class 補上，
   數值與 template.css 的 .sp-submenu.open、bootstrap.min.css 的 .collapse.in 相同。 */
/* 位置：舊站是 menu.js 算完寫成 inline style——第一層是 top = 選單項目高度、
   left = 0；第二層以下是 top = 0、left = 父層寬度（往右展開）。 */
#sp-main-menu > ul.level-0 > li > .sp-submenu {
  top: 100%;
  left: 0;
}

#sp-main-menu > ul.level-0 li li > .sp-submenu {
  top: 0;
  left: 100%;
}

#sp-main-menu li:hover > .sp-submenu {
  z-index: 99999;
  visibility: visible;
  opacity: 1;
  margin-top: 0;
}

#sp-main-menu li:hover > .sp-submenu.sub-level-child {
  margin-left: 0;
}

.sp-mobile-menu.collapse {
  height: 0;
  overflow: hidden;
}

.sp-mobile-menu.collapse.in {
  height: auto;
  overflow: visible;
}

.sp-mobile-menu ul ul.collapse {
  height: 0;
  overflow: hidden;
}

.sp-mobile-menu ul ul.collapse.in {
  height: auto;
  overflow: visible;
}

/* Tailwind 也有一個 .collapse（visibility: collapse），跟 Bootstrap 2 的收合同名。
   舊站的手機選單用的是 Bootstrap 那個意思，在 /legacy 底下要把 Tailwind 的擋掉。 */
.legacy-site .collapse {
  visibility: visible;
}