/**
 * Layout 核心樣式（navbar / bottom-nav / mobile header）
 * 依賴：site.css 的 --zen-* 設計 Token
 */

:root {
    /* 底部行動導覽列實際佔位 = 視覺高度(70px) + iOS home indicator 安全區。
       供所有 position:fixed 貼底元素（推播提醒、PWA 安裝橫幅等）閃避，避免被導覽列遮住。
       lg 以上導覽列隱藏（.d-lg-none），佔位歸零。 */
    --bottom-nav-clearance: calc(70px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    :root { --bottom-nav-clearance: 0px; }
}

body {
    background-color: var(--zen-bg);
    font-family: 'Noto Sans TC', sans-serif;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

.navbar {
    background: linear-gradient(135deg, var(--zen-primary) 0%, #1B4D19 100%) !important;
    border-bottom: 3px solid var(--zen-gold);
    padding: 0.75rem 0;
    z-index: 1055 !important;
}

.navbar-brand {
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    color: var(--zen-gold) !important;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.nav-link {
    font-weight: 500;
    margin: 0 3px;
    white-space: nowrap;
}

.navbar-collapse > .navbar-nav.me-auto { flex-shrink: 1; min-width: 0; }

.role-switcher-item { min-width: 0; }

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 10px;
}

.dropdown-item {
    border-radius: 8px;
    padding: 8px 15px;
    margin-bottom: 2px;
}

.dropdown-item:hover {
    background-color: #f0f4f0;
    color: var(--zen-primary);
}

.bottom-nav {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    height: 70px;
    z-index: 1045;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav .nav-link {
    color: #666;
    font-size: 0.8125rem;
    padding: 8px 0;
}

.bottom-nav .nav-link.active {
    color: var(--zen-primary);
    font-weight: 700;
}

.bottom-nav i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 2px;
}

.btn-primary { background-color: var(--zen-primary); border-color: var(--zen-primary); }
.btn-primary:hover { background-color: #234a1e; border-color: #234a1e; }

main[role="main"] { padding-top: 1.5rem; }

.mobile-page-header {
    position: sticky;
    top: 56px;
    z-index: 1045;
}