/* 汉堡菜单容器*/
.menu-container {
	position: relative;
	width: 0rem;
	height: 1.2rem;
	cursor: pointer;
	z-index: 100;
}

/* 隐藏原生复选框*/
.menu-toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

/* 汉堡线条容器*/
.hamburger {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

/* 汉堡线条样式*/
.hamburger-line {
	width: 1.2rem;
	height: 0.12rem;
	 background: linear-gradient(51.17deg, rgba(254, 232, 143, 0) 40.66%, #D29E61 54.99%),linear-gradient(0deg, #D29E61, #D29E61);

	border-radius: 0.2rem;
	transition: all 0.3s ease;
	position: absolute;
}

/* 三条线条的初始位置*/
.hamburger-line:nth-child(1) {
	top: 0.1rem;
}

.hamburger-line:nth-child(2) {
	top: 0.5rem;
}

.hamburger-line:nth-child(3) {
	top: 0.9rem;
}

/* 复选框选中时的动画*/
.menu-toggle:checked+.hamburger .hamburger-line:nth-child(1) {
	transform: translateY(0.4rem) rotate(45deg);
}

.menu-toggle:checked+.hamburger .hamburger-line:nth-child(2) {
	opacity: 0;
}

.menu-toggle:checked+.hamburger .hamburger-line:nth-child(3) {
	transform: translateY(-0.4rem) rotate(-45deg);
}

/* 导航菜单样式*/
.nav-menu {
	position: fixed;
	top: 0;
	right: 0;
	max-width: 23.4375rem;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.75);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	padding-top: 2.5rem;
	box-shadow: 0.0625rem 0 0.15625rem rgba(0, 0, 0, 0.1);
}

.nav-menu ul {
	list-style: none;
}

.nav-menu li {
	padding: 0.46875rem 0.625rem;
}

.nav-menu a {
	text-decoration: none;
	color: #fff;
	font-size: 0.68rem;
	
}

/* 复选框选中时展开菜单*/
.menu-toggle:checked~.nav-menu {
	transform: translateX(0);
}

@media (max-width: 500px) {

	/* 显示汉堡菜单 */
	.hamburger {
		display: flex;
	}

	/* 隐藏桌面端导航 */
	.desktop-nav {
		display: none;
	}

	.menu-container {
		width: 1.57rem;
	}

	/* 当手机端导航被激活时显示 */
	.mobile-nav.active {
		display: flex;
	}
}



/* 核心：去掉A标签默认下划线 */
.desktop-nav a {
	text-decoration: none;
	/* 移除默认下划线 */
	color: #aaa;
	/* 文字颜色 */
	font-size: 16px;
	position: relative;
	padding: 0.5rem 0;
	margin: 0 0.5rem;
	transition: color 0.3s ease;
	font-weight: 700;
}

/* 自定义底部下划线动画（仅占文字一半） */
.desktop-nav a::after {
	content: '';
	position: absolute;
	left: 50%;
	/* 从中间开始 */
	bottom: 0;
	width: 0;
	/* 初始隐藏 */
	height: 2px;
	/* 下划线厚度 */
	background-color: #D29293;
	/* 下划线颜色 */
	transition: width 0.3s ease, left 0.3s ease;
	transform: translateX(-50%);
	/* 保持居中 */
}

/* 点击/激活时显示下划线（占文字一半） */
.desktop-nav a:active::after,
.desktop-nav a:focus::after {
	width: 50%;
	/* 仅文字一半宽度 */
	left: 50%;
}

/* 可选： hover 效果 */
.desktop-nav a:active,
.desktop-nav a:hover {
	color: #fff;
	/* 文字变色 */
}

.desktop-nav a:active,
.desktop-nav a:focus {
	color: #fff;
	/* 选中时文字颜色 */
}

.desktop-nav a:hover::after {
	width: 50%;
	/* hover 时也显示下划线 */
	left: 50%;
}


/* 高亮项（active）核心样式 - 50%宽度下划线 */
.desktop-nav a.active {
	color: #D29293;
	/* 高亮文字色（可替换为品牌色） */
	/* font-weight: 600; */
}

/* 50%宽度下划线（居中显示） */
.desktop-nav a.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	/* 靠底部对齐 */
	left: 50%;
	/* 水平居中第一步：左移50% */
	transform: translateX(-50%);
	/* 水平居中第二步：左移自身50% */
	width: 50%;
	/* 下划线宽度设为50% */
	height: 2px;
	/* 下划线高度 */
	background-color: #D29293;
	/* 下划线颜色与文字一致 */
	border-radius: 1px;
	/* 下划线圆角，避免尖锐 */
}

/* 非高亮项 hover 效果 */
.desktop-nav a:not(.active):hover {
	color: #D29293;
	/* hover 文字色 */
}