/**
 * Desktop navigation — enWsPro visual language
 * Visible at min-width: 768px (see style.css @max-width 760px hide)
 */

@media only screen and (min-width: 768px) {
	.menuline2 {
		--dnav-navy: var(--enWsPro-navy, #002852);
		--dnav-navy-mid: #00396e;
		--dnav-teal: var(--enWsPro-teal, #008c89);
		--dnav-teal-dark: var(--enWsPro-teal-dark, #006d7a);
		--dnav-blue: var(--enWsPro-blue, #006db9);
		--dnav-text: rgba(255, 255, 255, 0.94);
		--dnav-text-muted: rgba(255, 255, 255, 0.62);
		--dnav-border: rgba(255, 255, 255, 0.14);
		--dnav-submenu-bg: var(--enWsPro-surface-alt, #f7fafc);
		--dnav-submenu-text: var(--enWsPro-text, #3d5260);

		background:
			radial-gradient(ellipse 72% 90% at 50% -20%, rgba(0, 140, 137, 0.18) 0%, transparent 58%),
			radial-gradient(ellipse 42% 55% at 100% 100%, rgba(0, 109, 185, 0.14) 0%, transparent 52%),
			linear-gradient(180deg, var(--dnav-navy) 0%, var(--dnav-navy-mid) 100%) !important;
		padding-top: clamp(28px, 3.5vw, 50px) !important;
		padding-bottom: 0 !important;
	}

	.menuline2 .logo-row {
		padding: 0 clamp(20px, 5vw, 70px);
	}

	.menuline2 .headNav {
		display: flex !important;
		align-items: stretch !important;
		justify-content: center !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: var(--enWsPro-wrap-max, 1220px) !important;
		margin: clamp(1.5rem, 2.5vw, 2.25rem) auto clamp(1.25rem, 2vw, 1.75rem) !important;
		padding: 0 clamp(12px, 2.5vw, 48px) !important;
		height: auto !important;
		background: transparent !important;
		border-top: 1px solid var(--dnav-border);
		box-sizing: border-box;
	}

	.menuline2 .headNav > li {
		flex: 1 1 0;
		min-width: 0;
		max-width: 168px;
		height: auto !important;
		line-height: normal !important;
		padding: 0 !important;
		width: auto !important;
		position: relative;
	}

	.menuline2 .headNav > li > a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 48px !important;
		line-height: 1.2 !important;
		padding: 0 10px !important;
		font-size: clamp(11px, 0.72vw, 13px);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--dnav-text) !important;
		transition: color 0.2s ease, background 0.2s ease;
		position: relative;
		box-sizing: border-box;
	}

	.menuline2 .headNav > li > a::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 6px;
		width: 0;
		height: 2px;
		border-radius: 1px;
		background: var(--dnav-teal);
		transform: translateX(-50%);
		transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.menuline2 .headNav > li:hover > a,
	.menuline2 .headNav > li:focus-within > a {
		color: #fff !important;
		background: rgba(255, 255, 255, 0.06);
	}

	.menuline2 .headNav > li:hover > a::after,
	.menuline2 .headNav > li:focus-within > a::after {
		width: calc(100% - 22px);
	}

	.menuline2 .menusplit {
		border-right: none !important;
	}

	.menuline2 .menusplit:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 18px;
		background: var(--dnav-border);
		pointer-events: none;
	}

	/* Dropdown — padding-top 作透明 hover 桥，避免移入子菜单前 hover 断开 */
	.menuline2 .headNav ul {
		display: block !important;
		position: absolute;
		z-index: 10001 !important;
		top: 100%;
		left: 50%;
		min-width: 210px;
		margin: 0;
		padding: 12px 0 8px;
		list-style: none;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%);
		transition:
			opacity 0.18s ease,
			visibility 0s linear 0.2s;
		pointer-events: none;
		overflow: visible;
	}

	.menuline2 .headNav ul::before {
		content: "";
		position: absolute;
		top: 12px;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--dnav-submenu-bg);
		border: 1px solid rgba(0, 40, 82, 0.08);
		border-radius: 0;
		box-shadow:
			0 4px 6px rgba(0, 40, 82, 0.04),
			0 16px 40px rgba(0, 40, 82, 0.14);
		z-index: -1;
	}

	.menuline2 .headNav > li:hover > ul,
	.menuline2 .headNav > li:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
		transition-delay: 0s;
		pointer-events: auto;
	}

	.menuline2 .headNav ul li {
		position: relative;
		z-index: 1;
		width: 100% !important;
		height: auto !important;
		line-height: normal !important;
		text-align: left;
	}

	.menuline2 .headNav ul li a {
		display: flex !important;
		align-items: center;
		width: 100% !important;
		height: auto !important;
		min-height: 44px !important;
		line-height: 1.3 !important;
		padding: 10px 20px 10px 28px !important;
		font-size: 13px !important;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--dnav-navy) !important;
		background: transparent !important;
		transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
		position: relative;
		box-sizing: border-box;
	}

	.menuline2 .headNav ul li a::before {
		content: "";
		position: absolute;
		left: 16px;
		top: 50%;
		width: 4px;
		height: 4px;
		margin-top: -2px;
		border-radius: 50%;
		background: var(--dnav-teal);
		opacity: 0.45;
		transition: opacity 0.2s ease;
	}

	.menuline2 .headNav ul li + li a {
		border-top: 1px solid rgba(0, 40, 82, 0.06);
	}

	.menuline2 .headNav ul li:hover a,
	.menuline2 .headNav ul li:focus-within a {
		background: rgba(0, 140, 137, 0.08) !important;
		color: var(--dnav-teal-dark) !important;
		padding-left: 32px !important;
	}

	.menuline2 .headNav ul li:hover a::before,
	.menuline2 .headNav ul li:focus-within a::before {
		opacity: 1;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.menuline2 .headNav > li {
		max-width: 140px;
	}

	.menuline2 .headNav > li > a {
		font-size: 11px;
		letter-spacing: 0.06em;
		padding: 0 6px !important;
	}

	.menuline2 .headNav ul {
		min-width: 190px;
	}
}