/* =========================================================
 * mega-menu.css — 站外学堂 主导航下拉
 * ========================================================= */

/* CSS 变量定义 */
.mvp-mega {
	--mvp-max: 1280px;
	--mvp-line: #e0e0e0;
	--mvp-radius: 8px;
	--mvp-text: #333333;
	--mvp-text-2: #666666;
	--mvp-primary: #00cfcf;
}

/* 站外学堂箭头样式 */
.has-mega .mvp-caret {
	display: inline-block;
	font-style: normal;
	font-size: 10px;
	color: #565656;
}

/* Bootstrap 导航兼容 */
.navbar-nav > li.has-mega { 
	position: static; 
}

.mvp-mega {
	position: absolute;
	left: 50%;
	width: var(--mvp-max);
	max-width: calc(100vw - 32px);
	margin-left: calc(var(--mvp-max) / -2);
	top: 100%;
	background: #fff;
	border-top: 1px solid var(--mvp-line);
	border-radius: 0 0 var(--mvp-radius) var(--mvp-radius);
	box-shadow: 0 12px 30px rgba(16,36,62,.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 90;
}

/* 窄屏改用居中定位 */
@media (max-width: 1320px) {
	.mvp-mega {
		left: 16px;
		right: 16px;
		width: auto;
		margin-left: 0;
	}
}

/* 悬停展开 */
.navbar-nav > li.has-mega:hover .mvp-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mvp-mega-inner {
	max-width: var(--mvp-max);
	margin: 0 auto;
	padding: 26px 16px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}

.mvp-mega-col { 
	border-right: 1px solid var(--mvp-line); 
	padding: 0 14px; 
}
.mvp-mega-col:last-child { 
	border-right: none; 
}

.mvp-mega-title {
	display: block;
	font-size: 15px; 
	font-weight: 700; 
	color: var(--mvp-text);
	margin-bottom: 10px; 
	padding-bottom: 8px;
	border-bottom: 2px solid var(--mvp-primary);
	text-decoration: none;
}
.mvp-mega-title:hover { 
	color: var(--mvp-primary); 
	text-decoration: none;
}

.mvp-mega-list { 
	list-style: none; 
	padding: 0; 
	margin: 0;
}
.mvp-mega-list li { 
	padding: 5px 0;
}
.mvp-mega-list a { 
	font-size: 13px; 
	color: var(--mvp-text-2);
	text-decoration: none;
	padding: 0 !important;
	line-height: 1.5;
}
.mvp-mega-list a:hover { 
	color: var(--mvp-primary);
	text-decoration: none;
}

/* 移动端隐藏 */
@media (max-width: 980px) {
	.mvp-mega { 
		display: none; 
	}
}