/**
 * 移动端菜单增强样式
 * 提供更好的移动端导航体验
 */

/* 移动端导航栏增强 */
@media (max-width: 575px) {
    /* 导航栏固定定位优化 */
    #top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        transition: transform 0.3s ease-in-out;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* 移动端顶部栏 */
    #top-bar .mobile-bar {
        background: linear-gradient(135deg, #1e2432 0%, #2a3244 100%);
        border-bottom: 1px solid rgba(34, 211, 182, 0.2);
        position: relative;
    }
    
    /* Logo区域增强 */
    #top-bar .navbar-brand {
        transition: all 0.2s ease;
    }
    
    #top-bar .navbar-brand:hover {
        transform: scale(1.05);
    }
    
    /* 二维码按钮增强 */
    #top-bar .qrcode-button {
        position: relative;
        transition: all 0.2s ease;
        border-radius: 8px;
    }
    
    #top-bar .qrcode-button:hover,
    #top-bar .qrcode-button:focus {
        background-color: rgba(34, 211, 182, 0.1);
        transform: scale(1.1);
    }
    
    #top-bar .qrcode-button:active {
        transform: scale(0.95);
    }
    
    /* 二维码按钮图标增强 */
    #top-bar .qrcode-button .icon {
        transition: all 0.2s ease;
        filter: brightness(1);
    }
    
    #top-bar .qrcode-button:hover .icon {
        filter: brightness(1.2);
    }
    
    /* 底部导航栏增强 */
    #top-bar .navbar-nav {
        background: linear-gradient(135deg, #1e2432 0%, #2a3244 100%);
        border-top: 2px solid #22d3b6;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* 导航项增强 */
    #top-bar .nav-item {
        position: relative;
        overflow: hidden;
    }
    
    #top-bar .nav-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent, rgba(34, 211, 182, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    #top-bar .nav-item:hover::before {
        transform: translateX(100%);
    }
    
    /* 导航链接增强 */
    #top-bar .nav-link {
        position: relative;
        transition: all 0.2s ease;
        border-radius: 8px 8px 0 0;
        font-weight: 500;
    }
    
    #top-bar .nav-link:hover {
        background-color: rgba(34, 211, 182, 0.1);
        transform: translateY(-2px);
    }
    
    #top-bar .nav-link:active {
        transform: translateY(0) scale(0.95);
        background-color: rgba(34, 211, 182, 0.2);
    }
    
    /* 活跃状态增强 */
    #top-bar .nav-item.active {
        background: linear-gradient(135deg, #22d3b6 0%, #1ba89a 100%);
        box-shadow: 0 -2px 10px rgba(34, 211, 182, 0.3);
    }
    
    #top-bar .nav-item.active::after {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: #fff;
        border-radius: 0 0 3px 3px;
    }
    
    #top-bar .nav-item.active .nav-link {
        color: #fff;
        font-weight: 600;
    }
    
    /* 图标增强 */
    #top-bar .nav-link i {
        transition: all 0.2s ease;
        filter: brightness(0.9);
    }
    
    #top-bar .nav-item.active .nav-link i,
    #top-bar .nav-link:hover i {
        filter: brightness(1.2);
        transform: scale(1.1);
    }
    
    /* 文字标签增强 */
    #top-bar .nav-link {
        font-size: 0.85rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    /* 触摸反馈 */
    #top-bar .nav-link:focus {
        outline: 2px solid rgba(34, 211, 182, 0.5);
        outline-offset: 2px;
    }
}

/* 平板设备优化 */
@media (min-width: 576px) and (max-width: 991px) {
    #top-bar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    #top-bar .nav-link {
        transition: all 0.2s ease;
    }
    
    #top-bar .nav-link:hover {
        background-color: rgba(34, 211, 182, 0.1);
        transform: translateY(-1px);
    }
    
    #top-bar .nav-item.active {
        box-shadow: inset 0 -3px 0 #22d3b6;
    }
}

/* 桌面设备增强 */
@media (min-width: 992px) {
    #top-bar {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    #top-bar .nav-link {
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }
    
    #top-bar .nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        background-color: #22d3b6;
        transition: width 0.3s ease;
    }
    
    #top-bar .nav-link:hover::before {
        width: 100%;
    }
    
    #top-bar .nav-item.active .nav-link::before {
        width: 100%;
    }
}

/* 动画关键帧 */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 加载动画 */
.navbar-loading {
    position: relative;
}

.navbar-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #22d3b6, transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* 无障碍访问增强 */
@media (prefers-reduced-motion: reduce) {
    #top-bar,
    #top-bar .nav-link,
    #top-bar .qrcode-button,
    #top-bar .navbar-brand {
        transition: none;
        animation: none;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    #top-bar {
        border-bottom: 2px solid #22d3b6;
    }
    
    #top-bar .nav-item.active {
        border: 2px solid #fff;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    #top-bar .mobile-bar {
        background: linear-gradient(135deg, #0f1419 0%, #1e2432 100%);
    }
    
    #top-bar .navbar-nav {
        background: linear-gradient(135deg, #0f1419 0%, #1e2432 100%);
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    #top-bar .nav-link:hover {
        background-color: transparent;
        transform: none;
    }
    
    #top-bar .nav-link:active {
        background-color: rgba(34, 211, 182, 0.2);
    }
}

/* 性能优化 */
#top-bar {
    will-change: transform;
}

#top-bar .nav-link {
    will-change: transform, background-color;
}

/* 确保在所有设备上的可用性 */
@media (max-height: 500px) {
    #top-bar .navbar-nav {
        height: 50px;
    }
    
    #top-bar .nav-link {
        padding: 0.125rem 0;
        font-size: 0.75rem;
    }
    
    #top-bar .nav-link i {
        height: 1.5rem;
    }
}
/* ==========================================================================
   手机端保留页脚的备案信息
   screen.min.css 在 max-width:575px 下把 #footer 整个 display:none,
   导致 ICP 备案号与公安备案号在手机上完全不可见 —— 工信部要求网站首页
   底部标明备案号。这里只恢复备案/联系那一段,logo、公司简介、二维码
   仍然隐藏,不影响移动端观感。
   ========================================================================== */
@media (max-width: 575px) {
    #footer {
        display: block !important;
        /* 底部导航栏是 fixed 3.75rem,留出空间免得被压住 */
        padding: 1.25rem 1rem 5rem;
        text-align: center;
    }

    /* 手机端不需要的部分 */
    #footer h3,
    #footer > div > p.pb-3,
    #footer figure {
        display: none;
    }

    #footer .row {
        display: block;
        margin: 0;
    }

    #footer .row > div {
        max-width: 100%;
        flex: none;
        padding: 0;
    }

    #footer p {
        font-size: 0.75rem;
        line-height: 1.9;
        margin-bottom: 0;
    }

    #footer .gongan {
        line-height: 1.9;
        text-indent: 1.6em;
        background-size: 1.2em;
    }

    #footer a {
        word-break: break-all;
    }
}