/**
 * 导航栏组件样式 - 深色主题（Dark Mode）
 * 适用于深色背景页面（如 photography.html）
 * 
 * 使用方式：在页面中引入此文件，将覆盖 navbar-component.css 的浅色样式
 */

/* ==================== 深色主题覆盖样式 ==================== */

/* 基础导航栏深色覆盖 */
.navbar.dark-nav {
    background: rgba(17, 17, 17, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ==================== Frosted Glass Fix (Dark Mode) ==================== */
body.nav-open-mobile .navbar.dark-nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.nav-open-mobile .navbar.dark-nav .nav-menu.open {
    background: rgba(17, 17, 17, 0.5) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
}

.navbar.dark-nav .logo,
.navbar.dark-nav .logo a {
    color: #FFFFFF !important;
}

.navbar.dark-nav .nav-menu a {
    color: #FFFFFF !important;
}

.navbar.dark-nav .nav-menu a:hover {
    color: #FFFFFF !important;
}

.navbar.dark-nav .nav-menu a::after {
    background-color: #FFFFFF !important;
}

.navbar.dark-nav .nav-menu a.active::after {
    background-color: #FFFFFF !important;
}

.navbar.dark-nav .hamburger {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar.dark-nav .hamburger span {
    background: #FFFFFF !important;
}

.navbar.dark-nav .hamburger:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.navbar.dark-nav .lang-toggle {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar.dark-nav .lang-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* ==================== 深色主题：平板端（768px - 1023px） ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar.dark-nav .nav-menu {
        border-top-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* 深色主题：展开菜单全屏样式 */
    .navbar.dark-nav .nav-menu.open {
        background: rgba(10, 10, 10, 0.5) !important;
        backdrop-filter: blur(30px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
        border: none !important;
    }

    .navbar.dark-nav .nav-menu.open li a {
        color: #FFFFFF !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    .navbar.dark-nav .nav-menu.open li a::after {
        background-color: #FFFFFF !important;
    }

    /* 深色主题：关闭按钮 */
    .navbar.dark-nav .nav-close-btn {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #FFFFFF !important;
    }

    .navbar.dark-nav .nav-close-btn:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: rotate(90deg);
    }

    /* 汉堡按钮在深色模式下 */
    .navbar.dark-nav .hamburger {
        display: flex;
        border: none !important;
    }
}

/* ==================== 深色主题：移动端（≤ 767px） ==================== */
@media (max-width: 767px) {
    .navbar.dark-nav .nav-menu {
        border-top-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* 深色主题：展开菜单全屏样式 */
    .navbar.dark-nav .nav-menu.open {
        background: rgba(10, 10, 10, 0.5) !important;
        backdrop-filter: blur(30px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
        border: none !important;
    }

    .navbar.dark-nav .nav-menu.open li a {
        color: #FFFFFF !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    .navbar.dark-nav .nav-menu.open li a::after {
        background-color: #FFFFFF !important;
    }

    /* 深色主题：关闭按钮 */
    .navbar.dark-nav .nav-close-btn {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #FFFFFF !important;
    }

    .navbar.dark-nav .nav-close-btn:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: rotate(90deg);
    }

    /* 汉堡按钮在深色模式下 */
    .navbar.dark-nav .hamburger {
        display: flex;
        border: none !important;
    }
}

/* ==================== 深色主题：超小屏（≤ 480px） ==================== */
@media (max-width: 480px) {
    .navbar.dark-nav .nav-menu.open li a {
        font-size: 16px;
        color: #FFFFFF !important;
    }

    .navbar.dark-nav .lang-toggle {
        padding: 0 12px;
        font-size: 12px;
    }
}