/*
 * Vue Nav/Footer 佈局調整
 * 用於 Nav/Footer 整合至 MVC 佈局的必要樣式
 *
 * ========================================
 * 結構索引：
 * 1. CSS 隔離層 - 抵消 BS3/main.css 全域影響
 * 2. 導覽列高度與間距修正
 * 3. 搜尋框修正
 * 4. Role Section 修正
 * 5. 佈局調整（Footer 置底、Body padding）
 * ======================================== */

/* ==================== 1. CSS 隔離層 ==================== */
/* 1a. Font Awesome 7 字體隔離
   _Layout.cshtml 同時載入 FA7(CDN) → FA5(本地) → FA4(Bundle)，
   FA5 的 .fas/.far/.fab 會覆蓋 FA7 的 font-family。
   使用 #id (specificity 1,1,0) 強制 Nav/Footer 內使用 FA7 字體，
   穩定勝過全域 .class (0,1,0) */

/* Solid 圖標 */
#nav-root .fa,
#nav-root .fas,
#nav-root .fa-solid,
#footer-root .fa,
#footer-root .fas,
#footer-root .fa-solid {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
}

/* Regular 圖標 */
#nav-root .far,
#nav-root .fa-regular,
#footer-root .far,
#footer-root .fa-regular {
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
}

/* Brands 圖標 */
#nav-root .fab,
#nav-root .fa-brands,
#footer-root .fab,
#footer-root .fa-brands {
    font-family: "Font Awesome 7 Brands";
    font-weight: 400;
}

/* 1b. 基礎樣式隔離
   抵消 Bootstrap 3 (line-height: 1.42857, font-size: 14px) 和
   main.css 全域樣式對 Vue 元件的干擾。
   使用屬性選擇器 [id=...] (specificity 0,1,0) 而非 #id (1,0,0)，
   讓元件的 scoped CSS (.class[data-v-xxx], specificity 0,2,0) 能覆蓋基準值 */

[id="nav-root"], [id="footer-root"] {
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
    line-height: 1.6;        /* 匹配首頁 body line-height（非 BS5 預設 1.5） */
    font-size: 1rem;         /* BS5 預設，BS3 是 14px */
    color: var(--text-color, #1e293b);  /* 匹配首頁 body color */
    -webkit-font-smoothing: antialiased;  /* 匹配首頁文字渲染 */
    -moz-osx-font-smoothing: grayscale;
}

/* 低 specificity reset (0,1,0)：模擬首頁 main.css 的 * { margin: 0; padding: 0; }
   BS4 會對 h1-h6, p, ul, ol, li 等加上預設 margin/padding，
   使用 [id=...] 確保 scoped CSS (0,2,0) 能覆蓋 */
[id="nav-root"] *, [id="nav-root"] *::before, [id="nav-root"] *::after,
[id="footer-root"] *, [id="footer-root"] *::before, [id="footer-root"] *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Footer 的 .container：覆蓋 BS3 的固定寬度 .container，
   改用首頁 main.css 的流式寬度 + CSS 變數 */
[id="footer-root"] .container {
    width: 100%;
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--container-padding, clamp(1rem, 5vw, 2rem));
}

/* 確保 Vue Nav 樣式優先，並設定正確的 z-index */
#nav-root {
    position: relative;
    z-index: 1050;
}

/* 修正與現有 Bootstrap 的衝突 */
#nav-root .main-nav,
#nav-root .navbar {
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

/* 抵消 main.css:349 的 .navbar { min-height: 60px } 規則 */
#nav-root .navbar,
#nav-root .main-nav {
    min-height: auto;
}

/* ==================== 2. 導覽列高度與間距修正 ==================== */

/* nav-container 使用 min-height，讓元件能自適應 */
#nav-root .nav-container {
    min-height: 64px;
    padding: 10px 16px;
}

/* main-nav 整體高度與邊框（統一為 1px） */
#nav-root .main-nav {
    min-height: 64px;
    border-bottom-width: 1px;
}

/* ==================== 3. 搜尋框修正 ==================== */

/* 搜尋框高度使用 min-height，與首頁一致 (44px) */
#nav-root .nav-search .search-input,
#nav-root .main-nav .nav-search input.search-input {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 10px 20px;
}

#nav-root .nav-search .search-btn,
#nav-root .main-nav .nav-search .search-btn {
    height: 44px;
    min-height: 44px;
}

/* search-category 下拉選單高度與寬度 */
#nav-root .nav-search .search-category,
#nav-root .main-nav .nav-search .search-category {
    height: 44px;
    min-height: 44px;
    min-width: 120px;
    line-height: 22.4px;
}

/* ==================== 4. Role Section 修正 ==================== */

/* role-section 位置與邊框（與 Nuxt 原始設定一致） */
#nav-root .role-section {
    top: 64px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* role-section 字體，確保與首頁一致 */
#nav-root .role-section,
#nav-root .role-section a,
#nav-root .role-section .role-menu-link {
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif !important;
}

/* ==================== 5. 佈局調整 ==================== */

/* Footer 容器樣式 */
#footer-root {
    margin-top: auto;
    width: 100%;
}

/* 抵消 project/main.css 的 footer { margin-top: -60px } 元素選擇器 */
#footer-root footer {
    margin-top: 0;
}

/* 確保 body 使用 flexbox 以便 footer 置底 */
body:not(:has(> .pageBody > footer.footer)):not(:has(footer.footer)) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body {
    padding-top: var(--navbar-height, 64px) !important;
}

/* 登入後：navbar + role-section */
html.mosme-logged-in body {
    padding-top: calc(var(--navbar-height, 64px) + var(--nav-section-height, 45px)) !important;
}

/* pageBody 填滿剩餘空間（僅在 flex 佈局時生效） */
body:not(:has(footer.footer)) > .pageBody {
    flex: 1 0 auto;
    margin-bottom: 0;  /* 抵消 project/main.css 的 .pageBody { margin-bottom: 60px } */
}

/* 修正 Admin 側邊欄被 NAV 遮擋的問題 */
html.mosme-logged-in #slide-menu {
    margin-top: calc(var(--navbar-height, 64px) + var(--nav-section-height, 45px));
}

/* 手機版不顯示 role-section，維持原本設定 */
@media (max-width: 768px) {
    html.mosme-logged-in #slide-menu {
        margin-top: var(--navbar-height, 64px);
    }
}