/*
 * Vue Nav/Footer 佈局調整
 * 用於 Nav/Footer 整合至 MVC 佈局的必要樣式
 * （不再需要還原 entry.css 的覆蓋規則）
 */

/* ==================== Vue Nav/Footer 樣式 ==================== */

/* 確保 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;
}

/* 修正搜尋框和按鈕高度，與首頁一致 (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;
    box-sizing: border-box;
}

#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;
    box-sizing: border-box;
}

/* 修正 nav-container 高度，確保與首頁一致 */
#nav-root .nav-container {
    height: 64px;
    padding: 10px 16px;
    box-sizing: border-box;
}

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

/* 修正 role-section 位置與邊框（與 Nuxt 原始設定一致） */
#nav-root .role-section {
    top: 64px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-sizing: border-box;
    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;
    line-height: 1.6 !important;
}

#nav-root .role-section .section-nav a {
    font-size: .9375rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

/* ==================== 佈局調整 ==================== */

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

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

body {
    padding-top: 64px !important;
}

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

/* pageBody 填滿剩餘空間（僅在 flex 佈局時生效） */
body:not(:has(footer.footer)) > .pageBody {
    flex: 1 0 auto;
}

/* 修正 Admin 側邊欄被 NAV 遮擋的問題 */
html.mosme-logged-in #slide-menu {
    margin-top: 109px !important;
}

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