/* ============================================
   通用下拉菜单系统 - Mega Menu (纯CSS优化版本)
   支持所有一级菜单共用
   ============================================ */

/* 导航项基础样式 - 使用 static 定位让下拉菜单可以全宽显示 */
.nav-item.has-mega-menu {
    position: static;
}

/* 移除桥接区域，改用下拉菜单向上扩展的方式 */

/* 为有下拉菜单的导航项添加箭头 - 缩小版本 */
.nav-item.has-mega-menu .nav-link::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid currentColor;
    transition: transform 0.2s ease;
}

.nav-item.has-mega-menu:hover .nav-link::after {
    transform: rotate(180deg);
}

.nav-item.has-mega-menu .nav-link {
    padding-right: var(--space-md);
}

/* 下拉菜单容器 - 默认隐藏，透明背景 */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    background: transparent; /* 改为透明，移除白色背景 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 0;
    z-index: var(--z-dropdown);
    overflow: visible;
    max-height: 80vh;
    transition: opacity 0.15s ease 0s, visibility 0s linear 0.6s;
    border: none !important; /* 强制移除所有边框 */
    border-bottom: none !important; /* 强制移除底部边框 */

    /* 关键修复：添加更大的负上边距，确保鼠标移动时不会丢失 hover 状态 */
    margin-top: -20px;
    padding-top: 20px; /* 补偿负边距，保持视觉位置 */
}

/* 菜单内容包装器 - 处理滚动 */
.mega-menu > .container {
    max-height: 80vh;
    overflow-y: auto;
}

/* 显示状态 - 鼠标悬停在导航项或菜单上时显示，或者有 active 类时显示 */
.nav-item.has-mega-menu:hover .mega-menu,
.nav-item.has-mega-menu.active .mega-menu,
.nav-item.has-mega-menu .mega-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease 0s, visibility 0s linear 0s;
}


/* 当菜单被 JavaScript 关闭时（没有 active 类且没有 hover），强制隐藏 */
.nav-item.has-mega-menu:not(:hover):not(.active) .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 强制关闭状态 - 点击链接后立即隐藏，忽略 hover */
.nav-item.has-mega-menu.force-close .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.1s ease 0s, visibility 0s linear 0s !important;
}

/* 顶部装饰条 - 已移除，避免显示蓝色条 */
/* .mega-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    z-index: 1;
} */

/* 菜单内容容器 - 紧凑版，居中卡片式布局 */
.mega-menu .container {
    max-width: 1100px; /* 限制最大宽度，不要铺满 */
    width: auto;
    margin: 0 auto;
    padding: 24px 40px 20px; /* 增加左右内边距 */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: none !important; /* 完全移除阴影 */
    border: none !important; /* 强制确保没有边框 */
    outline: none !important; /* 强制确保没有轮廓 */
}

.mega-menu-content {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 增加行间距 */
    border: none !important; /* 强制确保没有边框 */
}

/* 菜单行 - 卡片式布局 */
.mega-menu-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px; /* 增加间距 */
    padding: 12px 0; /* 增加上下内边距 */
    border: none !important; /* 强制移除所有边框 */
    position: relative;
}

.mega-menu-row:last-child {
    padding-bottom: 0;
}

.mega-menu-row:first-child {
    padding-top: 0;
}

/* 菜单列 - 优化布局 */
.mega-menu-column {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px; /* 增加间距 */
    flex: 1;
    width: 100%;
}

/* 分类标题 - 优化样式，可点击 */
.mega-menu-title {
    font-size: 15px; /* 稍微增大字体 */
    font-weight: 700;
    color: var(--color-dark);
    min-width: 100px; /* 增加宽度 */
    max-width: 100px;
    padding-right: 16px; /* 增加右边距 */
    position: relative;
    flex-shrink: 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    cursor: pointer; /* 添加鼠标指针 */
    transition: color 0.2s ease; /* 添加过渡效果 */
}

.mega-menu-title:hover {
    color: var(--color-primary); /* 悬停时变色 */
}

/* 分类标题链接样式 */
.mega-menu-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-menu-title a:hover {
    color: var(--color-primary);
}

.mega-menu-title::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px; /* 增加宽度 */
    height: 20px; /* 增加高度 */
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 2px;
}

/* 菜单项列表 - 卡片式，自适应布局 */
.mega-menu-list {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important; /* 增加间距 */
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
    align-items: start;
}

.mega-menu-list li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important; /* 不拉伸，不收缩，自动宽度 */
}

/* 菜单项链接 - 卡片式，自适应宽度 */
.mega-menu-list li a {
    display: inline-block !important;
    padding: 6px 16px !important; /* 减小上下内边距 */
    color: var(--color-gray-700) !important;
    font-size: 14px !important; /* 稍微增大字体 */
    font-weight: 500 !important;
    line-height: 1.1 !important; /* 大幅减小行间距 */
    border-radius: 6px !important; /* 增加圆角 */
    background: var(--color-gray-100) !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    min-width: 120px !important; /* 增加最小宽度 */
}

/* 悬停效果 - 优化版 */
.mega-menu-list li a:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 139, 139, 0.25) !important;
}

/* ============================================
   移动端菜单样式 (无动画版本)
   ============================================ */

.mobile-nav {
    position: fixed;
    top: calc(var(--top-bar-height) + var(--header-height));
    left: 0;
    width: 100%;
    height: calc(100vh - var(--top-bar-height) - var(--header-height));
    background: var(--color-white);
    z-index: var(--z-fixed);
    transform: translateX(-100%);
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav-content {
    padding: var(--space-xl);
}

.mobile-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid var(--color-gray-200);
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    color: var(--color-gray-800);
    font-size: var(--text-lg);
    font-weight: 500;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.mobile-nav-link:hover {
    color: var(--color-primary);
}

.mobile-nav-toggle {
    font-family: var(--font-primary);
}

.mobile-nav-toggle .icon-chevron {
    flex-shrink: 0;
}

/* 移动端子菜单 */
.mobile-submenu {
    display: none;
    background: var(--color-gray-50);
    margin: 0 calc(var(--space-md) * -1);
    padding: var(--space-md);
}

.mobile-nav-item.active .mobile-submenu {
    display: block;
}

.mobile-submenu-group {
    margin-bottom: var(--space-lg);
}

.mobile-submenu-group:last-child {
    margin-bottom: 0;
}

.mobile-submenu-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 2px solid var(--color-primary);
}

.mobile-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
}

.mobile-submenu-list li a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.mobile-submenu-list li a:hover,
.mobile-submenu-list li a:active {
    background: var(--color-primary);
    color: var(--color-white);
    border-left-color: var(--color-secondary);
}