/**
 * Mobile Logo Responsive Styles
 * 控制桌面端和移动端 logo 的显示/隐藏
 */

/* 默认情况下，在桌面端显示桌面 logo，隐藏移动端 logo */
.desktop-logo {
    display: inline-block;
}

.mobile-logo {
    display: none;
}

/* 在移动设备上（768px 以下），显示移动端 logo，隐藏桌面端 logo */
@media (max-width: 767.98px) {
    .desktop-logo {
        display: none !important;
    }
    
    .mobile-logo {
        display: inline-block !important;
    }
    
    /* 调整移动端 logo 的尺寸 */
    .navbar-brand .mobile-logo {
        max-width: 140px;
        width: auto;
        height: auto;
    }
}

/* 平板设备优化（768px - 991px） */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 可以选择在平板上显示移动端或桌面端 logo */
    /* 当前设置：平板显示桌面端 logo */
    .desktop-logo {
        display: inline-block;
    }
    
    .mobile-logo {
        display: none;
    }
    
    /* 如需在平板上也显示移动端 logo，取消下面的注释 */
    /*
    .desktop-logo {
        display: none !important;
    }
    
    .mobile-logo {
        display: inline-block !important;
    }
    */
}

/* 导航栏透明/深色状态下的 logo 切换 - 桌面端 */
@media (min-width: 768px) {
    .navbar-dark .logo-dark.desktop-logo {
        display: none;
    }
    
    .navbar-dark .logo-light.desktop-logo {
        display: inline-block;
    }
    
    .navbar-dark .logo-dark.mobile-logo,
    .navbar-dark .logo-light.mobile-logo {
        display: none;
    }
    
    .navbar-light .logo-dark.desktop-logo,
    .navbar:not(.navbar-dark) .logo-dark.desktop-logo {
        display: inline-block;
    }
    
    .navbar-light .logo-light.desktop-logo,
    .navbar:not(.navbar-dark) .logo-light.desktop-logo {
        display: none;
    }
    
    .navbar-light .logo-dark.mobile-logo,
    .navbar-light .logo-light.mobile-logo,
    .navbar:not(.navbar-dark) .logo-dark.mobile-logo,
    .navbar:not(.navbar-dark) .logo-light.mobile-logo {
        display: none;
    }
}

/* 导航栏透明/深色状态下的 logo 切换 - 移动端 */
@media (max-width: 767.98px) {
    .navbar-dark .logo-dark.mobile-logo {
        display: none !important;
    }
    
    .navbar-dark .logo-light.mobile-logo {
        display: inline-block !important;
    }
    
    .navbar-dark .logo-dark.desktop-logo,
    .navbar-dark .logo-light.desktop-logo {
        display: none !important;
    }
    
    .navbar-light .logo-dark.mobile-logo,
    .navbar:not(.navbar-dark) .logo-dark.mobile-logo {
        display: inline-block !important;
    }
    
    .navbar-light .logo-light.mobile-logo,
    .navbar:not(.navbar-dark) .logo-light.mobile-logo {
        display: none !important;
    }
    
    .navbar-light .logo-dark.desktop-logo,
    .navbar-light .logo-light.desktop-logo,
    .navbar:not(.navbar-dark) .logo-dark.desktop-logo,
    .navbar:not(.navbar-dark) .logo-light.desktop-logo {
        display: none !important;
    }
}

/* 移动端导航菜单中的 logo 样式 */
.offcanvas-header img {
    max-width: 140px;
    width: auto;
    height: auto;
}

/* 确保 logo 在不同背景下的可见性 - 桌面端 */
@media (min-width: 768px) {
    .transparent.navbar-dark .logo-light.desktop-logo {
        display: inline-block;
    }
    
    .transparent.navbar-dark .logo-dark.desktop-logo {
        display: none;
    }
    
    .transparent.navbar-dark .logo-light.mobile-logo,
    .transparent.navbar-dark .logo-dark.mobile-logo {
        display: none;
    }
}

/* 确保 logo 在不同背景下的可见性 - 移动端 */
@media (max-width: 767.98px) {
    .transparent.navbar-dark .logo-light.desktop-logo,
    .transparent.navbar-dark .logo-dark.desktop-logo {
        display: none !important;
    }
    
    .transparent.navbar-dark .logo-light.mobile-logo {
        display: inline-block !important;
    }
    
    .transparent.navbar-dark .logo-dark.mobile-logo {
        display: none !important;
    }
}

/* 滚动后导航栏背景变化时的 logo 切换 - 桌面端 */
@media (min-width: 768px) {
    .navbar.navbar-bg-dark .logo-light.desktop-logo {
        display: inline-block;
    }
    
    .navbar.navbar-bg-dark .logo-dark.desktop-logo {
        display: none;
    }
    
    .navbar.navbar-bg-dark .logo-light.mobile-logo,
    .navbar.navbar-bg-dark .logo-dark.mobile-logo {
        display: none;
    }
}

/* 滚动后导航栏背景变化时的 logo 切换 - 移动端 */
@media (max-width: 767.98px) {
    .navbar.navbar-bg-dark .logo-light.desktop-logo,
    .navbar.navbar-bg-dark .logo-dark.desktop-logo {
        display: none !important;
    }
    
    .navbar.navbar-bg-dark .logo-light.mobile-logo {
        display: inline-block !important;
    }
    
    .navbar.navbar-bg-dark .logo-dark.mobile-logo {
        display: none !important;
    }
}

/* Logo 动画效果 */
.navbar-brand img {
    transition: opacity 0.3s ease;
}

.navbar-brand a:hover img {
    opacity: 0.9;
}