/* * Module: MX About Sub-Navigation
 * Path: assets/css/components/about-subnav.css 
 */

.mx-about-subnav-wrapper {
    width: 100%;
    margin-bottom: 40px;
    background: #ffffff;
    /* 底部加一条极细的分割线，提升质感 */
    border-bottom: 1px solid #e2e8f0; 
}

.mx-subnav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px;
}

/* 💡 核心修复 1：强制干掉主题可能赋予 li 的任何默认外边距和内边距 */
.mx-subnav-list li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1; /* 防止字体行高撑开底部 */
}

.mx-subnav-link {
    display: block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0;
    /* 让按钮底部刚好盖住那一像素的边框，实现严丝合缝 */
    border-bottom: 1px solid transparent; 
    margin-bottom: -1px; 
}

.mx-subnav-link:hover {
    color: #111418;
}

/* 激活状态：纯黑底白字 */
.mx-subnav-link.mx-active {
    background-color: #111418;
    color: #ffffff;
    border-bottom: 1px solid #111418; /* 激活时底边也变黑，与灰色线融合 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .mx-subnav-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
        gap: 5px;
        /* 💡 核心修复 2：删除了之前的 padding-bottom: 2px，彻底消除悬空缝隙 */
    }
    
    .mx-subnav-link {
        white-space: nowrap; 
        padding: 12px 16px;
        font-size: 14px;
    }
    
    /* 隐藏横向滚动条 */
    .mx-subnav-list::-webkit-scrollbar {
        display: none;
    }
}