/* 
 * 导航按钮高度调整样式
 * nav-height-adjust.css
 * 将导航按钮高度缩小40%，不改变字体大小
 */

/* ===== 1. 基础高度调整 ===== */

/* 导航按钮基础样式 - 高度缩小40% */
.nav a {
    /* 原padding: 10px 16px，高度 = 10px(top) + 字体高度 + 10px(bottom) */
    /* 缩小40%：将垂直padding从10px改为6px */
    padding: 6px 16px !important; /* 垂直缩小40%，水平保持不变 */
    
    /* 保持字体大小不变 */
    font-size: 1rem !important;
    
    /* 保持其他样式不变 */
    border-radius: 6px !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);
    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(-2px) 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;
}

/* ===== 3. 图标大小保持 ===== */
.nav a i {
    /* 保持图标大小不变 */
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    color: #D4AF37 !important;
}

/* ===== 4. 响应式调整 - 同步缩小40% ===== */

/* 中等屏幕（992px-1200px） */
@media (max-width: 1200px) and (min-width: 993px) {
    .nav a {
        /* 原padding: 10px 14px，改为6px 14px（缩小40%） */
        padding: 6px 14px !important;
        font-size: 0.95rem !important; /* 字体按原比例调整 */
        gap: 6px !important;
    }
}

/* 小屏幕（768px-992px） */
@media (max-width: 992px) and (min-width: 769px) {
    .nav a {
        /* 原padding: 8px 12px，改为4.8px 12px（缩小40%） */
        padding: 4.8px 12px !important;
        font-size: 0.9rem !important;
        gap: 5px !important;
        border-radius: 5px !important;
    }
}

/* 平板端（576px-768px） */
@media (max-width: 768px) and (min-width: 577px) {
    .nav a {
        /* 原padding: 7px 10px，改为4.2px 10px（缩小40%） */
        padding: 4.2px 10px !important;
        font-size: 0.85rem !important;
        gap: 4px !important;
        border-radius: 4px !important;
        letter-spacing: 0.5px !important;
    }
}

/* 手机端（480px-576px） */
@media (max-width: 576px) and (min-width: 481px) {
    .nav a {
        /* 原padding: 6px 8px，改为3.6px 8px（缩小40%） */
        padding: 3.6px 8px !important;
        font-size: 0.8rem !important;
        gap: 3px !important;
        border-radius: 3px !important;
        letter-spacing: 0.3px !important;
        font-weight: 500 !important;
    }
}

/* 小手机端（480px以下） */
@media (max-width: 480px) {
    .nav a {
        /* 原padding: 5px 6px，改为3px 6px（缩小40%） */
        padding: 3px 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;
    }
}

/* ===== 5. 大屏幕调整 - 同步缩小40% ===== */

/* 大屏幕（1200px以上） */
@media (min-width: 1200px) {
    .nav a {
        /* 原padding: 12px 20px，改为7.2px 20px（缩小40%） */
        padding: 7.2px 20px !important;
        font-size: 1.05rem !important;
        border-radius: 8px !important;
    }
}

/* 超大屏幕（1400px以上） */
@media (min-width: 1400px) {
    .nav a {
        /* 原padding: 14px 24px，改为8.4px 24px（缩小40%） */
        padding: 8.4px 24px !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
    }
}

/* 超宽屏幕（1600px以上） */
@media (min-width: 1600px) {
    .nav a {
        /* 原padding: 16px 28px，改为9.6px 28px（缩小40%） */
        padding: 9.6px 28px !important;
        font-size: 1.15rem !important;
        border-radius: 10px !important;
    }
}

/* ===== 6. 导航容器微调 ===== */
.nav ul {
    /* 稍微调整容器内边距，适应更小的按钮 */
    padding: 10px 0 !important; /* 原15px，适当减小 */
    
    /* 其他样式保持不变 */
    gap: 8px !important;
    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;
    -ms-overflow-style: none !important;
}

/* ===== 7. 悬停时图标效果调整 ===== */
.nav a:hover i {
    /* 保持图标效果，但稍微减小缩放比例 */
    transform: scale(1.15) !important; /* 原1.2，稍微减小 */
    color: #FFD700 !important;
}

/* ===== 8. 活动状态调整 ===== */
.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);
}

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

/* ===== 10. 调整说明 ===== */
/*
 * 高度调整计算：
 * 原垂直padding: 10px (上) + 10px (下) = 20px垂直padding
 * 缩小40%: 20px × 0.6 = 12px总垂直padding
 * 新垂直padding: 6px (上) + 6px (下) = 12px垂直padding
 * 
 * 字体大小保持不变，只调整按钮容器高度
 * 水平padding保持不变，保持按钮宽度
 * 所有响应式断点同步缩小40%
 */