/* 只作用于导航：避免影响站点其它元素 */
.nav-wrapper {
    width: 100%;
    z-index: 10300; /* 保持在顶部 */
    background-color: #111111; /* 默认深色背景（文字白色） */
}

/* 如果用户偏好浅色，可以覆盖为浅色背景 */
@media (prefers-color-scheme: light) {
    .nav-wrapper { background-color: #ffffff; }
}

/* 紧凑的 navbar：背景由外层容器提供 */
.nav-wrapper > .compact-nav {
    /* 将不透明背景直接应用在 <nav> 上，避免被页面背景图或父容器影响 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.nav-wrapper > .compact-nav.compact { padding-top: 0; padding-bottom: 0; }

/* 强化：确保 <nav> 主要容器与关键内部结构具有不透明背景和合适对比度，
   但避免对所有子元素使用通配符（以便下拉等可被主题覆盖） */
.nav-wrapper > .compact-nav,
.nav-wrapper > .compact-nav .navbar,
.nav-wrapper > .compact-nav .navbar-collapse {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* 深色与浅色主题分别控制关键区域的背景色（细化到必要元素） */
.nav-wrapper.nav-theme-dark > .compact-nav,
.nav-wrapper.nav-theme-dark > .compact-nav .navbar,
.nav-wrapper.nav-theme-dark > .compact-nav .navbar-collapse {
    background-color: #111111 !important;
}
.nav-wrapper.nav-theme-light > .compact-nav,
.nav-wrapper.nav-theme-light > .compact-nav .navbar,
.nav-wrapper.nav-theme-light > .compact-nav .navbar-collapse {
    background-color: #ffffff !important;
}

/* 如果没有显式主题类，保留 prefers-color-scheme 的建议行为 */
@media (prefers-color-scheme: light) {
    .nav-wrapper:not(.nav-theme-dark):not(.nav-theme-light) > .compact-nav,
    .nav-wrapper:not(.nav-theme-dark):not(.nav-theme-light) > .compact-nav .navbar,
    .nav-wrapper:not(.nav-theme-dark):not(.nav-theme-light) > .compact-nav .navbar-collapse {
        background-color: #ffffff;
    }
}

/* 仅修改导航内的文字颜色与间距，避免全站影响 */
.nav-wrapper.nav-theme-dark > .compact-nav .navbar-brand,
.nav-wrapper.nav-theme-dark > .compact-nav .navbar-nav .nav-link,
.nav-wrapper.nav-theme-dark > .compact-nav .menu a,
.nav-wrapper.nav-theme-dark > .compact-nav a,
.nav-wrapper.nav-theme-dark > .compact-nav .dropdown-toggle,
.nav-wrapper.nav-theme-dark > .compact-nav .navbar-text,
.nav-wrapper.nav-theme-dark > .compact-nav .navbar-nav > li > a {
    color: #ffffff !important; /* 深色主题：白色文字 */
    font-weight: 600;
    letter-spacing: 0.2px;
}

.nav-wrapper.nav-theme-light > .compact-nav .navbar-brand,
.nav-wrapper.nav-theme-light > .compact-nav .navbar-nav .nav-link,
.nav-wrapper.nav-theme-light > .compact-nav .menu a,
.nav-wrapper.nav-theme-light > .compact-nav a,
.nav-wrapper.nav-theme-light > .compact-nav .dropdown-toggle,
.nav-wrapper.nav-theme-light > .compact-nav .navbar-text,
.nav-wrapper.nav-theme-light > .compact-nav .navbar-nav > li > a {
    color: #111111 !important; /* 浅色主题：深色文字 */
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* 在浅色偏好下将文字切换为深色以配合浅色背景 */
/* 保留 prefers-color-scheme 的自动建议，但主题类优先 */
@media (prefers-color-scheme: light) {
    .nav-wrapper:not(.nav-theme-dark):not(.nav-theme-light) > .compact-nav { background-color: #ffffff; }
}

.nav-wrapper .fa,
.nav-wrapper .navbar-toggler-icon,
.nav-wrapper .navbar-toggler { color: #ffffff !important; }
.nav-wrapper .navbar-toggler { border-color: rgba(255,255,255,0.12) !important; }
@media (prefers-color-scheme: light) {
    .nav-wrapper .fa,
    .nav-wrapper .navbar-toggler-icon { color: #111 !important; }
    .nav-wrapper .navbar-toggler { border-color: rgba(0,0,0,0.08); }
}

/* 可选： 调整切换按钮位置，仅作用于导航 */
.nav-wrapper > .compact-nav .navbar-toggler { margin-top: 0.1rem; }

@media (min-width: 768px) {
    .nav-wrapper > .compact-nav { padding-top: 0.15rem; padding-bottom: 0.15rem; }
}

/* 下拉菜单：确保背景与文字配对，避免出现白字在白底上的情况 */
.nav-wrapper > .compact-nav .dropdown-menu {
    background-color: #111111 !important;
    color: #ffffff;
    border: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
    z-index: 2000 !important;
}
.nav-wrapper > .compact-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
}
.nav-wrapper > .compact-nav .dropdown-menu .dropdown-item:hover,
.nav-wrapper > .compact-nav .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}
.nav-wrapper > .compact-nav .dropdown-menu .dropdown-divider {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

@media (prefers-color-scheme: light) {
    .nav-wrapper > .compact-nav .dropdown-menu {
        background-color: #ffffff !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    }
    .nav-wrapper > .compact-nav .dropdown-menu .dropdown-item {
        color: #111111 !important;
    }
    .nav-wrapper > .compact-nav .dropdown-menu .dropdown-item:hover,
    .nav-wrapper > .compact-nav .dropdown-menu .dropdown-item:focus {
        background-color: rgba(0,0,0,0.04) !important;
        color: #111111 !important;
    }
    .nav-wrapper > .compact-nav .dropdown-menu .dropdown-divider {
        border-top: 1px solid rgba(0,0,0,0.06) !important;
    }
}

/* 确保当使用 nav-theme-light 时，下拉菜单为白底深字 */
.nav-wrapper.nav-theme-light > .compact-nav .dropdown-menu {
    background-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}
.nav-wrapper.nav-theme-light > .compact-nav .dropdown-menu .dropdown-item {
    color: #111111 !important;
}
.nav-wrapper.nav-theme-light > .compact-nav .dropdown-menu .dropdown-item:hover,
.nav-wrapper.nav-theme-light > .compact-nav .dropdown-menu .dropdown-item:focus {
    background-color: rgba(0,0,0,0.04) !important;
    color: #111111 !important;
}
.nav-wrapper.nav-theme-light > .compact-nav .dropdown-menu .dropdown-divider {
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}