/* ==========================================================
   header.css
   模块：顶部导航
   作用：PC/移动端导航、下拉菜单、搜索弹窗、语言入口和 Logo 状态
   说明：从原首页内联样式拆分，保留原视觉效果与响应式行为。
   ========================================================== */

/* ==========================================================
   header.css - 顶部导航样式（独立样式表）
   ========================================================== */

/* ===================== 三层宽度居中规范 ===================== */
.wrap-1960 {
	width: 100%;
	max-width: 1960px;
	margin: 0 auto;
}
.container-1600 {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}
.nav-inner-1440 {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 15px;
}
/* ===================== 固定置顶导航容器 ===================== */
.header-fixed {
	width: 100%;
	max-width: 1960px;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	background: transparent;
	transition: all 0.3s ease;
}
.header-fixed.scroll-active {
	background: #ffffff;
}
.header-fixed.scroll-active .nav-main>li>a, .header-fixed.scroll-active .top-right-tools .tel, .header-fixed.scroll-active .lang-switch, .header-fixed.scroll-active .search-icon {
	color: #000000;
}
.header-fixed.scroll-active .mobile-menu-btn span {
	background: #000000;
}
.header-fixed:hover {
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.header-fixed:hover .nav-main>li>a, .header-fixed:hover .top-right-tools .tel, .header-fixed:hover .lang-switch, .header-fixed:hover .search-icon {
	color: #000000;
}
.header-fixed:hover .mobile-menu-btn span {
	background: #000;
}
/* ★★★ 修改：一级导航悬停文字颜色改为 #f0cb58 ★★★ */
.header-fixed:hover .nav-main>li:hover>a, .header-fixed.scroll-active .nav-main>li:hover>a {
	color: #f0cb58;
}
/* ===================== 导航主体 ===================== */
.nav-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 110px;
}
.logo {
	display: flex;
	align-items: center;
}
.logo img {
	height: 58px;
	object-fit: contain;
	transition: opacity 0.3s;
}
.logo picture {
	display: flex;
	align-items: center;
}
.nav-right-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.top-right-tools {
	display: flex;
	align-items: center;
	gap: 26px;
}
.tel {
	font-size: 17px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.lang-switch {
	font-size: 17px;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
}
.nav-wrap {
	display: flex;
	align-items: center;
	gap: 46px;
	position: relative;
}
.nav-main {
	display: flex;
	align-items: center;
	gap: 46px;
}
.nav-main>li {
	position: relative;
	padding: 8px 8px;
}
.nav-main>li>a {
	font-size: 17px;
	color: #ffffff;
	padding: 8px 0;
	display: block;
	white-space: nowrap;
}
/*.search-icon {
	font-size: 18px;
	color: #fff;
	cursor: pointer;
	margin-left: 10px;
}*/
/* ===================== 搜索图标 ===================== */
/* SVG 使用 currentColor，颜色跟随导航文字状态变化 */
.search-icon {
	width: 20px;
	height: 20px;
	color: #ffffff;
	cursor: pointer;
	margin-left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color 0.3s ease;
}

.search-icon__svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: currentColor;
}

.search-icon__svg path {
	fill: currentColor;
}

/* ===================== 下拉子菜单 ===================== */
.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-radius: 0 0 6px 6px;
	padding: 18px 34px;
	min-width: 180px;
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.nav-main>li:hover>.submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.submenu-multi {

	display: grid;
	gap: 30px 40px;
	white-space: nowrap;
}
.submenu-col h4 {
	display: inline-block;
	position: relative;
	font-size: 16px;
	color: #111;
	margin-bottom: 18px;
	padding-bottom: 10px;
	font-weight: 600;
	line-height: 1.4;
}
.submenu-col h4::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #004099 0%, rgba(0, 64, 153, 0) 100%);
}
/* ★★★ 修改：二级导航统一行间距，全部按照“行业文化研究” gap:6px 20px 规则 ★★★ */
.submenu-col ul, .submenu-single ul {
	display: grid;
	gap: 6px 20px;
}
.submenu-col li, .submenu-single li {
	margin: 0;
	padding: 0;
}
.submenu-col li a, .submenu-single li a {
	display: block;
	font-size: 15px;
	color: #444;
	line-height: 2.4;
	transition: color 0.2s;
}
.submenu-col li a:hover, .submenu-single li a:hover {
	color: #f0cb58;
}
.nav-main li:nth-child(3) .submenu-multi {
	left: 0;
	transform: translateX(-30%);
}
.nav-main li:nth-child(6) .submenu-multi {
	left: 0;
	transform: translateX(-65%);
}
/* ===================== 搜索弹窗 ===================== */
.search-popup {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-width: 1960px;
	background: #fff;
	padding: 20px 0;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0.08);
	z-index: 9999;
}
.search-inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.search-input {
	flex: 1;
	height: 46px;
	border: 1px solid #004099;
	border-radius: 4px;
	padding: 0 16px;
	font-size: 16px;
	outline: none;
}
.search-btn {
	height: 46px;
	padding: 0 28px;
	background: #004099;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}
.search-popup.show {
	display: block;
}
/* ===================== 移动端汉堡 ===================== */
.mobile-menu-btn {
	display: none;
	width: 38px;
	height: 32px;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
}
.mobile-menu-btn span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	transition: background 0.3s;
}
.mobile-nav {
	display: none;
	width: 100%;
	background: #fff;
	padding: 24px 15px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
.mobile-nav>li {
	border-bottom: 1px solid #eee;
}
/* ★★★ 修改：移动端一级导航悬停颜色改为 #f0cb58 ★★★ */
.mobile-nav>li>a {
	display: block;
	padding: 14px 0;
	font-size: 17px;
	color: #000;
}
.mobile-nav>li>a:hover {
	color: #f0cb58;
}
.mobile-submenu {
	padding: 0 12px 12px;
	display: none;
}
.mobile-submenu li a {
	display: block;
	padding: 10px 0;
	font-size: 14px;
	color: #444;
}
.mobile-submenu li a:hover {
	color: #f0cb58;
}
.mobile-submenu.show {
	display: block;
}
.mobile-top-tool {
	margin-top: 16px;
	border-top: 1px solid #eee;
	padding-top: 16px;
	display: flex;
	gap: 26px;
}

/* ===================== 移动端适配 ===================== */
@media screen and (max-width:768px) {
.nav-box {
	height: 72px;
}
.logo img {
	height: 46px;
}
.nav-right-wrap {
	display: none;
}
.mobile-menu-btn {
	display: flex;
}
.container-1600 {
	padding: 0 12px;
}
.nav-inner-1440 {
	padding: 0 10px;
}
}

/* 子菜单列数：从 HTML 内联 style 移入 CSS，便于维护 */
.submenu-multi.submenu--cols-4 { grid-template-columns: repeat(4, 1fr); }
.submenu-multi.submenu--cols-3 { grid-template-columns: repeat(3, 1fr); }
.submenu-multi.submenu--cols-2 { grid-template-columns: repeat(2, 1fr); }
/*.submenu-col ul.submenu-list--two-col { grid-template-columns: 1fr 1fr; }*/
/* 仅行业双列li调整间距，其他子菜单不受影响 */
.submenu-col ul.submenu-list--two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 36px; /* 自定义垂直、水平间距 */
}

/* ===================== 中英文切换链接与移动端工具修正 ===================== */

/*
 * 新版语言切换结构：
 * .lang-switch
 *   ├─ .lang-switch__link
 *   ├─ .lang-switch__separator
 *   └─ .lang-switch__link
 */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 17px;
	line-height: 1.4;
	color: #ffffff;
	white-space: nowrap;
	cursor: default;
}

.lang-switch__link {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.lang-switch__separator {
	color: inherit;
	opacity: 0.72;
	user-select: none;
}

/* PC端语言链接悬停、键盘聚焦 */
.lang-switch__link:hover,
.lang-switch__link:focus-visible {
	color: #f0cb58 !important;
	outline: none;
}

/*
 * 导航变成白底后，语言链接继承黑色；
 * 当前悬停链接仍保持金色。
 */
.header-fixed:hover .lang-switch,
.header-fixed.scroll-active .lang-switch {
	color: #000000;
}

.header-fixed:hover .lang-switch__link:hover,
.header-fixed.scroll-active .lang-switch__link:hover,
.header-fixed:hover .lang-switch__link:focus-visible,
.header-fixed.scroll-active .lang-switch__link:focus-visible {
	color: #f0cb58 !important;
}

/* 移动端子菜单栏目标题改为可点击链接 */
.mobile-submenu-title {
	margin-top: 8px;
	color: #004099;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.mobile-submenu-title:first-child {
	margin-top: 0;
}

.mobile-submenu-title > a {
	display: block;
	padding: 12px 0 8px;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
}

.mobile-submenu-title > a:hover,
.mobile-submenu-title > a:focus-visible {
	color: #f0cb58;
	outline: none;
}

/*
 * 移动导航背景为白色。
 * 原.tel和.lang-switch默认白色，会导致手机号和语言入口不可见，
 * 因此移动端工具区强制改为深色。
 */
.mobile-top-tool {
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mobile-top-tool .tel,
.mobile-top-tool .lang-switch {
	color: #222222;
}

.mobile-top-tool .tel {
	font-size: 15px;
}

.mobile-top-tool .lang-switch {
	font-size: 15px;
}

/* 手机端点击区域稍微放大 */
.mobile-top-tool .lang-switch__link {
	min-height: 32px;
	padding: 4px 2px;
}

@media screen and (max-width: 420px) {
	.mobile-top-tool {
		gap: 12px;
	}

	.mobile-top-tool .tel,
	.mobile-top-tool .lang-switch {
		font-size: 14px;
	}
}

/* ===================== 帝国CMS站内搜索 V3 ===================== */

.search-popup {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	width: 100%;
	max-width: 1960px;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 12px 26px rgba(16, 42, 74, 0.12);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px);
	transition:
		opacity 0.28s ease,
		visibility 0.28s ease,
		transform 0.28s ease;
}

.search-popup.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.search-inner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 22px 15px 26px;
}

.search-label {
	color: #1f2b38;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.search-field {
	position: relative;
	min-width: 0;
}

.search-field__icon {
	position: absolute;
	top: 50%;
	left: 15px;
	width: 19px;
	height: 19px;
	color: #718096;
	pointer-events: none;
	transform: translateY(-50%);
}

.search-input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 16px 0 46px;
	border: 1px solid #cdd6e1;
	border-radius: 4px;
	background: #ffffff;
	color: #26313d;
	font-size: 16px;
	line-height: 48px;
	outline: none;
	appearance: none;
	transition:
		border-color 0.24s ease,
		box-shadow 0.24s ease;
}

.search-input::placeholder {
	color: #929ba6;
}

.search-input:focus {
	border-color: #004099;
	box-shadow: 0 0 0 3px rgba(0, 64, 153, 0.10);
}

.search-input.is-error {
	border-color: #cc3d3d;
	box-shadow: 0 0 0 3px rgba(204, 61, 61, 0.10);
}

.search-btn {
	height: 48px;
	padding: 0 30px;
	border: 0;
	border-radius: 4px;
	background: #004099;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background-color 0.24s ease,
		transform 0.24s ease;
}

.search-btn:hover,
.search-btn:focus-visible {
	background: #002f75;
	outline: none;
}

.search-close {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #586473;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition:
		color 0.24s ease,
		transform 0.24s ease;
}

.search-close:hover,
.search-close:focus-visible {
	color: #004099;
	outline: none;
	transform: rotate(90deg);
}

.search-message {
	position: absolute;
	right: 74px;
	bottom: 3px;
	left: 94px;
	min-height: 18px;
	margin: 0;
	color: #c23838;
	font-size: 12px;
	line-height: 1.45;
}

.search-icon {
	padding: 0;
	border: 0;
	background: transparent;
}

.search-icon:hover,
.search-icon:focus-visible {
	color: #f0cb58 !important;
	outline: none;
}

.mobile-header-tools {
	display: none;
	align-items: center;
	gap: 18px;
}

.mobile-search-btn {
	display: inline-flex;
	width: 34px;
	height: 34px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

.mobile-search-btn svg {
	display: block;
	width: 22px;
	height: 22px;
}

.mobile-search-btn:hover,
.mobile-search-btn:focus-visible {
	color: #f0cb58;
	outline: none;
}

.header-fixed:hover .mobile-search-btn,
.header-fixed.scroll-active .mobile-search-btn {
	color: #000000;
}

.mobile-menu-btn {
	padding: 0;
	border: 0;
	background: transparent;
}

@media screen and (max-width: 768px) {
	.mobile-header-tools {
		display: flex;
	}

	.search-popup {
		position: fixed;
		top: 72px;
		right: 0;
		left: 0;
		max-width: none;
	}

	.search-inner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		padding: 16px;
	}

	.search-label {
		grid-column: 1 / -1;
		font-size: 15px;
	}

	.search-field {
		grid-column: 1;
	}

	.search-btn {
		grid-column: 2;
		padding: 0 22px;
	}

	.search-close {
		position: absolute;
		top: 7px;
		right: 10px;
		width: 38px;
		height: 38px;
	}

	.search-message {
		position: static;
		grid-column: 1 / -1;
		min-height: 16px;
		margin-top: -4px;
	}

	.search-input {
		height: 46px;
		font-size: 15px;
		line-height: 46px;
	}
}

@media screen and (max-width: 420px) {
	.mobile-header-tools {
		gap: 14px;
	}

	.search-inner {
		padding-right: 12px;
		padding-left: 12px;
	}

	.search-btn {
		padding: 0 17px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-popup,
	.search-btn,
	.search-close {
		transition: none;
	}
}

/* ==========================================================
   V4 移动端导航统一最终规则
   首页、二级页面、动态搜索页面统一使用：
   1. 白色背景；
   2. 64px导航高度；
   3. 38px Logo；
   4. 30×23px三横线；
   5. 深色搜索图标；
   6. 导航保持在页面顶部；
   7. 搜索弹层位于导航下方。
   ========================================================== */

@media screen and (max-width: 768px) {
	.header-fixed,
	#headerBox {
		position: fixed !important;
		top: 0 !important;
		right: auto !important;
		bottom: auto !important;
		left: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		transform: none !important;
		z-index: 9999 !important;
		background: #ffffff !important;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
	}

	.header-fixed .nav-inner-1440,
	#headerBox .nav-inner-1440 {
		width: 100% !important;
		max-width: none !important;
		padding-right: 14px !important;
		padding-left: 14px !important;
	}

	.header-fixed .nav-box,
	#headerBox .nav-box {
		width: 100% !important;
		height: 64px !important;
		min-height: 64px !important;
	}

	.header-fixed .logo,
	#headerBox .logo {
		min-width: 0 !important;
		max-width: none !important;
	}

	.header-fixed .logo img,
	#headerBox .logo img {
		width: auto !important;
		height: 38px !important;
		max-width: none !important;
	}

	.header-fixed .nav-right-wrap,
	#headerBox .nav-right-wrap {
		display: none !important;
	}

	.header-fixed .mobile-header-tools,
	#headerBox .mobile-header-tools {
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
	}

	.header-fixed .mobile-search-btn,
	#headerBox .mobile-search-btn {
		display: inline-flex !important;
		width: 34px !important;
		height: 34px !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		border: 0 !important;
		background: transparent !important;
		color: #111111 !important;
	}

	.header-fixed .mobile-search-btn svg,
	#headerBox .mobile-search-btn svg {
		width: 22px !important;
		height: 22px !important;
		fill: currentColor !important;
	}

	.header-fixed .mobile-search-btn svg path,
	#headerBox .mobile-search-btn svg path {
		fill: currentColor !important;
	}

	.header-fixed .mobile-menu-btn,
	#headerBox .mobile-menu-btn {
		display: flex !important;
		width: 30px !important;
		height: 23px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	.header-fixed .mobile-menu-btn span,
	#headerBox .mobile-menu-btn span {
		width: 100% !important;
		height: 2px !important;
		background: #111111 !important;
	}

	.header-fixed .search-popup,
	#headerBox .search-popup {
		position: fixed !important;
		top: 64px !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-width: none !important;
		z-index: 10000 !important;
	}

	.header-fixed .mobile-nav,
	#headerBox .mobile-nav {
		position: fixed !important;
		top: 64px !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-height: calc(100dvh - 64px) !important;
		padding: 10px 18px 18px !important;
		overflow-y: auto !important;
		background: #ffffff !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
		z-index: 9999 !important;
	}

	.header-fixed.scroll-active,
	#headerBox.scroll-active {
		background: #ffffff !important;
	}

	.header-fixed:hover .mobile-search-btn,
	.header-fixed.scroll-active .mobile-search-btn,
	#headerBox:hover .mobile-search-btn,
	#headerBox.scroll-active .mobile-search-btn {
		color: #111111 !important;
	}
}

@media screen and (max-width: 420px) {
	.header-fixed .nav-inner-1440,
	#headerBox .nav-inner-1440 {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	.header-fixed .mobile-header-tools,
	#headerBox .mobile-header-tools {
		gap: 14px !important;
	}
}

/* ==========================================================
   V5 移动端固定导航文档流补偿
   ========================================================== */

@media screen and (max-width: 768px) {
	html {
		scroll-padding-top: 64px;
	}

	body {
		padding-top: 64px !important;
	}

	.header-gap {
		display: none !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* ==========================================================
   V6 导航Logo首页链接
   PC端与移动端统一可点击返回首页。
   ========================================================== */

.logo__link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	color: inherit;
	text-decoration: none;
	line-height: 0;
}

.logo__link picture,
.logo__link img {
	display: block;
}

.logo__link:focus-visible {
	outline: 2px solid #f0cb58;
	outline-offset: 4px;
	border-radius: 2px;
}

.logo__link img {
	transition: opacity 0.24s ease;
}

.logo__link:hover img {
	opacity: 0.88;
}

@media screen and (max-width: 768px) {
	.header-fixed .logo__link,
	#headerBox .logo__link {
		display: inline-flex !important;
		height: 38px !important;
		align-items: center !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo__link img {
		transition: none;
	}
}