@charset "utf-8";
/* ==========================================================================
   BICML 实验室网站模板 移动端交互样式
   说明：本文件只承载"行为态"类（菜单展开/抽屉），不写排版断点。
   ========================================================================== */

/* 移动端导航抽屉 ------------------------------------------------------------ */
@media screen and (max-width: 999px) {
	.menu-toggle { display: block; }

	#nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		width: 280px;
		max-width: 82%;
		overflow-y: auto;
		background: #ffffff;
		border-left: 1px solid var(--line);
		box-shadow: -12px 0 32px rgba(13, 40, 59, 0.12);
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	#nav > .inner {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}

	.navi-slide-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		min-height: 52px;
		border-bottom: 1px solid var(--line);
	}

	.navi-slide-title {
		font-size: 0.94rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		color: var(--blue-dark);
	}

	.navi-slide-arrow {
		position: relative;
		width: 22px;
		height: 22px;
	}

	.navi-slide-arrow::before,
	.navi-slide-arrow::after {
		content: "";
		position: absolute;
		top: 10px;
		left: 3px;
		width: 16px;
		height: 2px;
		background: #7b8a93;
	}

	.navi-slide-arrow::before { transform: rotate(45deg); }
	.navi-slide-arrow::after { transform: rotate(-45deg); }

	.wp-menu {
		display: block;
		padding: 8px 0 20px;
	}

	.wp-menu > .menu-item { border-bottom: 1px solid #eceff0; }

	.wp-menu > .menu-item > .menu-link {
		display: flex;
		align-items: center;
		min-height: 46px;
		padding: 0 18px;
		line-height: 1.4;
		font-size: 0.98rem;
		white-space: normal;
	}

	.menu-switch-arrow {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 46px;
		height: 46px;
		cursor: pointer;
	}

	.menu-switch-arrow::before,
	.menu-switch-arrow::after {
		content: "";
		position: absolute;
		top: 22px;
		left: 15px;
		width: 16px;
		height: 2px;
		background: #9aa8b0;
		transition: transform 0.25s ease;
	}

	.menu-switch-arrow::before { transform: rotate(0deg); }
	.menu-switch-arrow::after { transform: rotate(90deg); }

	.menu-item.menu-open > .menu-switch-arrow::after { transform: rotate(0deg); }

	.sub-menu,
	.sub-menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	.menu-item.menu-open > .sub-menu { display: block; }

	.sub-menu > .sub-item > .sub-link {
		padding: 10px 18px 10px 32px;
		color: var(--muted);
		white-space: normal;
	}

	.sub-menu > .sub-item > .sub-link:hover {
		color: var(--blue-dark);
		background: #f2f6f7;
	}

	.sub-menu .sub-item > .sub-link { padding-left: 46px; }
	.sub-menu .sub-menu .sub-item > .sub-link { padding-left: 60px; }

	/* 导航打开态 */
	body.nav-open { overflow: hidden; }

	body.nav-open #nav { transform: translateX(0); }

	.navi-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 899;
		display: none;
		background: rgba(5, 24, 39, 0.5);
	}

	body.nav-open .navi-mask { display: block; }
}

/* 桌面端：二级菜单悬停展开，不显示抽屉相关元素 ------------------------ */
@media screen and (min-width: 1000px) {
	.navi-mask { display: none; }

	/* masthead 里的导航：不画底色、直接坐在 banner 图上
	   （必须只在 >=1000px 生效，手机上 #nav 是固定定位的抽屉） */
	#nav.nav--over {
		position: relative;
		z-index: 2;
		background: transparent;
	}

	/* 首页首屏：页头 / 导航都压在轮播图上，文字转白 */
	#banner .banner-top #nav {
		background: transparent;
	}

	#banner .banner-top .wp_nav > li > a,
	#banner .banner-top .menu-link {
		color: rgba(255, 255, 255, 0.86);
	}

	#banner .banner-top .wp_nav > li > a:hover,
	#banner .banner-top .menu-link:hover,
	#banner .banner-top .menu-item.is-active > .menu-link {
		color: #ffffff;
	}

	/* hover / 选中：不要用浅色底（浅底 + 白字会看不见），
	   改成一层很淡的白色叠加，文字保持白色 */
	#banner .banner-top .wp-menu > .menu-item > .menu-link:hover,
	#banner .banner-top .wp-menu > .menu-item.selected > .menu-link,
	#banner .banner-top .wp-menu > .menu-item.on > .menu-link,
	#banner .banner-top .wp-menu > .menu-item.cur > .menu-link,
	#banner .banner-top .wp-menu > .menu-item.is-active > .menu-link {
		background: rgba(255, 255, 255, 0.16);
		color: #ffffff;
	}

	/* 二级菜单：深色半透明 + 毛玻璃，压在照片上不突兀 */
	#banner .banner-top .sub-menu {
		background: rgba(9, 26, 40, 0.86);
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 3px;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
		-webkit-backdrop-filter: blur(10px) saturate(120%);
		backdrop-filter: blur(10px) saturate(120%);
	}

	#banner .banner-top .sub-menu .sub-link {
		color: rgba(255, 255, 255, 0.82);
	}

	#banner .banner-top .sub-menu .sub-link:hover {
		color: #ffffff;
		background: rgba(255, 255, 255, 0.12);
	}

	.wp-menu > .menu-item:hover > .sub-menu,
	.wp-menu > .menu-item:focus-within > .sub-menu,
	.wp-menu .sub-item:hover > .sub-menu,
	.wp-menu .sub-item:focus-within > .sub-menu {
		display: block;
	}
}