/* 
 * 导航栏按钮增强样式
 * nav-enhanced.css
 * 修改导航栏按钮为长方形带圆角，加大字体
 */

/* ===== 1. 导航栏按钮基础样式修改 ===== */
.nav a {
    /* 修改圆角：从25px改为6px，更接近长方形 */
    border-radius: 6px !important;
    
    /* 字体大小适中 */
    font-size: 1rem !important;
    
    /* 调整内边距：减少水平内边距，确保6个按钮在一行 */
    padding: 10px 16px !important;
    
    /* 增加字重，更醒目 */
    font-weight: 600 !important;
    
    /* 适当字母间距 */
    letter-spacing: 1px !important;
    
    /* 修改背景，更突出 */
    background: rgba(40, 30, 25, 0.85) !important;
    border: 2px solid rgba(212, 175, 55, 0.6) !important;
    
    /* 修改过渡效果 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* 添加文字阴影，增强可读性 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    
    /* 确保flex布局 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    
    /* 确保按钮不换行 */
    white-space: nowrap !important;
    
    /* 最小宽度确保一致性 */
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

/* ===== 2. 悬停效果增强 ===== */
.nav a:hover {
    /* 悬停时背景渐变 */
    background: linear-gradient(135deg, #8B0000, #D4AF37) !important;
    
    /* 悬停时边框加亮 */
    border-color: #FFD700 !important;
    border-width: 2px !important;
    
    /* 悬停时上浮效果 */
    transform: translateY(-3px) scale(1.05) !important;
    
    /* 悬停时阴影增强 */
    box-shadow: 
        0 8px 20px rgba(212, 175, 55, 0.5),
        0 0 30px rgba(139, 0, 0, 0.3) !important;
    
    /* 悬停时文字颜色 */
    color: #FFFFFF !important;
    
    /* 悬停时图标效果 */
    .nav a:hover i {
        transform: scale(1.2) rotate(5deg) !important;
        color: #FFD700 !important;
    }
}

/* ===== 3. 活动状态样式 ===== */
.nav a.active {
    /* 活动状态背景渐变 */
    background: linear-gradient(135deg, #D4AF37, #8B0000) !important;
    
    /* 活动状态边框 */
    border-color: #FFD700 !important;
    border-width: 2px !important;
    
    /* 活动状态阴影 */
    box-shadow: 
        0 0 25px rgba(212, 175, 55, 0.8),
        inset 0 0 15px rgba(255, 215, 0, 0.3) !important;
    
    /* 活动状态文字 */
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    
    /* 活动状态图标 */
    .nav a.active i {
        transform: scale(1.3) !important;
        color: #FFFFFF !important;
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
    }
}

/* ===== 4. 图标样式增强 ===== */
.nav a i {
    /* 图标大小适应新字体 */
    font-size: 1.2rem !important;
    
    /* 图标过渡效果 */
    transition: all 0.3s ease !important;
    
    /* 图标颜色 */
    color: #D4AF37 !important;
}

/* 悬停时图标 */
.nav a:hover i {
    transform: scale(1.2) !important;
    color: #FFD700 !important;
}

/* 活动状态图标 */
.nav a.active i {
    transform: scale(1.3) !important;
    color: #FFFFFF !important;
}

/* ===== 5. 导航容器调整 ===== */
.nav ul {
    /* 减少按钮间距，确保6个按钮在一行 */
    gap: 8px !important;
    
    /* 调整内边距 */
    padding: 15px 0 !important;
    
    /* 确保flex布局，不换行 */
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 确保容器宽度足够 */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    
    /* 隐藏滚动条但保持可滚动 */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

/* 隐藏Webkit滚动条 */
.nav ul::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===== 6. 响应式调整 - 确保6个按钮在一行 ===== */

/* 中等屏幕（992px-1200px） */
@media (max-width: 1200px) and (min-width: 993px) {
    .nav a {
        padding: 10px 14px !important;
        font-size: 0.95rem !important;
        gap: 6px !important;
    }
    
    .nav ul {
        gap: 6px !important;
    }
    
    .nav a i {
        font-size: 1rem !important;
    }
}

/* 小屏幕（768px-992px） */
@media (max-width: 992px) and (min-width: 769px) {
    .nav a {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        gap: 5px !important;
        border-radius: 5px !important;
    }
    
    .nav ul {
        gap: 5px !important;
        padding: 12px 0 !important;
    }
    
    .nav a i {
        font-size: 0.95rem !important;
    }
}

/* 平板端（576px-768px） */
@media (max-width: 768px) and (min-width: 577px) {
    .nav a {
        padding: 7px 10px !important;
        font-size: 0.85rem !important;
        gap: 4px !important;
        border-radius: 4px !important;
        letter-spacing: 0.5px !important;
    }
    
    .nav ul {
        gap: 4px !important;
        padding: 10px 0 !important;
    }
    
    .nav a i {
        font-size: 0.9rem !important;
    }
}

/* 手机端（480px-576px） */
@media (max-width: 576px) and (min-width: 481px) {
    .nav a {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
        gap: 3px !important;
        border-radius: 3px !important;
        letter-spacing: 0.3px !important;
        font-weight: 500 !important;
    }
    
    .nav ul {
        gap: 3px !important;
        padding: 8px 0 !important;
    }
    
    .nav a i {
        font-size: 0.85rem !important;
    }
}

/* 小手机端（480px以下） */
@media (max-width: 480px) {
    .nav a {
        padding: 5px 6px !important;
        font-size: 0.75rem !important;
        gap: 2px !important;
        border-radius: 3px !important;
        letter-spacing: 0.2px !important;
        font-weight: 500 !important;
        border-width: 1px !important;
    }
    
    .nav ul {
        gap: 2px !important;
        padding: 6px 0 !important;
        /* 小屏幕允许水平滚动 */
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }
    
    .nav a i {
        font-size: 0.8rem !important;
    }
    
    /* 隐藏部分文字，只显示图标 */
    .nav a span {
        display: inline-block;
        max-width: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ===== 7. 大屏幕优化 ===== */
@media (min-width: 1200px) {
    .nav a {
        /* 大屏幕适当增加内边距，但仍保持6个按钮在一行 */
        padding: 12px 20px !important;
        
        /* 大屏幕增加字体 */
        font-size: 1.05rem !important;
        
        /* 大屏幕圆角 */
        border-radius: 8px !important;
    }
    
    .nav ul {
        /* 大屏幕增加间距 */
        gap: 10px !important;
    }
}

/* 超大屏幕（1400px以上） */
@media (min-width: 1400px) {
    .nav a {
        padding: 14px 24px !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
    }
    
    .nav ul {
        gap: 12px !important;
    }
}

/* 超宽屏幕（1600px以上） */
@media (min-width: 1600px) {
    .nav a {
        padding: 16px 28px !important;
        font-size: 1.15rem !important;
        border-radius: 10px !important;
    }
    
    .nav ul {
        gap: 15px !important;
    }
}

/* ===== 8. 焦点状态（无障碍访问） ===== */
.nav a:focus {
    outline: 3px solid #D4AF37 !important;
    outline-offset: 3px !important;
    background: linear-gradient(135deg, #D4AF37, #8B0000) !important;
}

/* ===== 9. 加载状态 ===== */
.nav a.loading {
    position: relative;
    overflow: hidden;
}

.nav a.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: loadingShine 1.5s infinite;
}

@keyframes loadingShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== 10. 特殊效果类 ===== */
/* 金色边框效果 */
.nav-btn-gold {
    border: 2px solid #D4AF37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5) !important;
}

/* 红色边框效果 */
.nav-btn-red {
    border: 2px solid #8B0000 !important;
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.5) !important;
}

/* 发光效果 */
.nav-btn-glow {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    }
}

/* ===== 11. 性能优化 ===== */
.nav a {
    /* 启用硬件加速 */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* 优化渲染 */
    will-change: transform, background, box-shadow;
}

/* 减少动画对性能的影响 */
@media (prefers-reduced-motion: reduce) {
    .nav a {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== 12. 兼容性说明 ===== */
/*
 * 此样式表修改了导航栏按钮：
 * 1. 圆角从25px改为8px，更接近长方形
 * 2. 字体从0.9rem加大到1.1rem
 * 3. 增加了内边距和视觉效果
 * 4. 优化了响应式设计
 * 5. 增强了交互反馈
 */