/*
 * nav-v2.css
 * 新版导航下拉菜单的补充样式，只在子主题 ydo-child 里被引入。
 * 不修改 styles.css / app.css 任何已有规则，只新增下面这些新 class 的样式，
 * 叠加在原有 .submenu / .submenu--wrapper 的定位、背景、动画之上。
 *
 * 断点沿用现有站点约定：桌面端 >= 1024px（与 app/js/global-website.min.js
 * 里 navigationModule 的 this.breakpoint = 1024 保持一致）。
 */

/* ---------- 1. 默认版式（三列版式，如"产品"）---------- */

.btn.with-icon.btn--meta.no-background{ display: flex; align-items: center; gap: 8px; }
.mega-default-ydothree-link{ min-width: 150px; display: inline-flex; align-items: center; gap: 8px; text-align:center;}
@media (min-width: 1024px) {
	.submenu.mega-columns {
		column-count: 1;
		column-gap: 56px;
	}

	.submenu.mega-columns > li {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	.submenu.mega-columns > li > a.menu_nav_subitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.submenu.mega-columns > li > a.menu_nav_subitem .icon-LMHIconrightblack,
	.submenu.mega-columns .mega-col-item .icon-LMHIconrightblack {
		font-size: 12px;
		opacity: .55;
		flex: none;
		transition: opacity .15s ease, transform .15s ease;
	}

	.submenu.mega-columns > li > a.menu_nav_subitem:hover .icon-LMHIconrightblack,
	.submenu.mega-columns .mega-col-item:hover .icon-LMHIconrightblack {
		opacity: 1;
		transform: translateX(3px);
	}
}

@media (max-width: 1023px) {
	/* 移动端沿用原有单列抽屉式导航，不做多列，避免破坏现有 hidden-desktop 逻辑 */
	.submenu.mega-columns {
		column-count: 1;
	}
}

/* ---------- 2. Tab 分类版式（如"全域服务"）---------- */

.mega-tabs-wrapper {
	width: 100%;
}

.mega-tabs-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mega-tab-btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	padding: 10px 20px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mega-tab-btn:hover {
	border-color: #fff;
}

.mega-tab-btn.mega-tab-btn--active {
	background: #aa0020;
	border-color: #aa0020;
	color: #fff;
}

.mega-tab-panel {
	display: none;
}

.mega-tab-panel.mega-tab-panel--active {
	display: block;
}

.mega-columns--tab {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	/* styles.css 里 .navigation_menu>.menu_nav li ul{display:none} 是不分嵌套层级、对
	   .menu_nav下所有li底下所有ul都生效的选择器（优先级2个class+2个元素）；它配的例外
	   .navigation_menu>.menu_nav li.active>.submenu--wrapper>ul{display:block}
	   （优先级4个class+2个元素）只认"直接子级"的ul，只够把最外层的<ul class="submenu mega-tabs">
	   显示出来。.mega-columns--tab是Tab面板里再往下嵌套一层的<ul>（面板div>ul），不是
	   .submenu--wrapper的直接子级，够不到那条例外，还是被最外层的display:none压着——
	   这里必须补一条更具体的规则并加!important才能盖过去，否则Tab面板展开后三级列表内容
	   仍然不可见。 */
	.mega-columns--tab {
		display: block !important;
		column-count: 3;
		column-gap: 56px;
	}

	.mega-columns--tab > li {
		/* styles.css 第6705行 .navigation_menu>.menu_nav li{float:left;display:block;width:auto}
		   这条规则用的是后代选择器（.menu_nav 和 li 之间没有>），不管嵌套多深，
		   .menu_nav 底下所有 <li> 都会被float:left——包括这里三级列表自己的<li>。
		   float让每个<li>变成像inline-block一样紧挨着排、按可用宽度自动换行，
		   这才是"一行显示好几个"的真正原因，不是column-count或者别的flex/grid设置的问题。
		   这里显式把float关掉、改回正常的块级流，<li>才会各自独占一行，
		   配合上面 column-count:3 才能表现成"多列、每列内部纵向排"，而不是横向挤在一起。
		   必须加!important：styles.css那条选择器优先级是2个class+1个元素（(0,2,1)），
		   比这里.mega-columns--tab>li（1个class+1个元素，(0,1,1)）高，上一版没加!important、
		   实际表现就是styles.css那条float:left照样生效、没被盖掉，这次补上。 */
		float: none !important;
		display: block !important;
		width: 100% !important;
		break-inside: avoid;
	}
}

.mega-columns--tab .mega-col-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 0;
}

.mega-columns--tab .mega-col-item .icon-LMHIconrightblack {
	font-size: 12px;
	opacity: .55;
	flex: none;
}

.mega-columns--tab .mega-col-item:hover .icon-LMHIconrightblack {
	opacity: 1;
}

@media (max-width: 1023px) {
	.mega-tabs-bar {
		flex-wrap: nowrap;
	}

	.mega-columns--tab {
		column-count: 1;
	}
}

/* ---------- 3. 默认版式 - 桌面新结构（左20% ydothree固定列 + 右80% 分组flex）---------- */
/*
 * 由 ydo_render_mega_default_menu()（ydo-child/functions.php）输出两份并存的DOM：
 *   - 旧结构：<ul class="submenu mega-columns">…</ul>，跟父主题一模一样，专门留给移动端
 *     的抽屉式三级导航用，一个字节都没改。
 *   - 新结构：<div class="mega-default-desktop">…</div>，只在桌面端显示。
 * 两者靠下面这组media query互斥显示，不依赖JS判断视口，也不会同时出现在页面上。
 */

.mega-default-desktop {
	display: none;
}

@media (min-width: 1024px) {
	/* 桌面端隐藏旧的三级抽屉列表（.menu_back除外——它在.mega-columns和新结构外层共用同一个
	   submenu--wrapper，不属于要隐藏的范围，这里只隐藏mega-columns这个ul本身即可）。
	   这里必须加!important：styles.css里已有的
	   .navigation_menu>.menu_nav li.active>.submenu--wrapper>ul{display:block；...}
	   选择器优先级是4个class+2个元素，比这里.submenu.mega-columns（2个class）高得多，
	   不加!important的话不管这条规则写在哪个文件、哪个位置，都会被那条旧规则盖掉，
	   实际表现就是"新旧两套下拉结构同时显示、旧的怎么都关不掉"。 */
	.submenu.mega-columns {
		display: none !important;
	}

	/* .mega-default-desktop 是<div>，不是<ul>，styles.css里那条desktop默认隐藏规则
	   .navigation_menu>.menu_nav li ul{display:none}只认<ul>，管不到它，之前只按视口宽度
	   切换display，完全没管当前这一项菜单到底有没有被hover/点开（.active），
	   结果是桌面端下所有顶级菜单的这块新结构会同时全部显示，不是"跟旧列表一样只有当前展开
	   的那一项才显示"——这才是"新结构默认就显示、大小跳来跳去"的真正原因。
	   这里必须照抄旧列表.navigation_menu>.menu_nav li.active>.submenu--wrapper>ul那条规则
	   的思路，同样用li.active限定，只有当前展开的下拉才让它display:flex，
	   没展开的（.mega-default-desktop本身不带.active限定）保持上面的display:none不变。 */
	.navigation_menu > .menu_nav li.active > .submenu--wrapper .mega-default-desktop {
		display: flex !important;
		align-items: flex-start;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 32px 40px 40px;
		box-sizing: border-box;
	}

	/* 整个下拉的深色渐变背景通过PHP端给.submenu--wrapper加layout-bg-dark-liner-t-b class实现
	   （见ydo_render_mega_default_menu()），这里不重复定义颜色值，只处理文字颜色适配深色背景、
	   以及"移动端不能被这个深色背景影响"（下面第4节会把它在移动端还原掉）。 */
	.mega-default-wrapper {
		color: #fff;
	}

	/* 同样是"styles.css里.navigation_menu>.menu_nav li ul{display:none}管到深层嵌套ul、
	   而它配的例外li.active>.submenu--wrapper>ul{display:block}只认.submenu--wrapper的
	   直接子级"这个问题（跟上面.mega-columns--tab那条是同一个根因，详细说明见那边注释）。
	   .mega-default-group-list（每个分组下的三级子菜单列表）和.mega-default-ydothree-list
	   （ydothree万一配了不止一项时的兜底列表）都是<ul>，而且都嵌套在
	   .submenu--wrapper>.mega-default-desktop>...好几层div之下，不是直接子级，
	   同样够不到那条例外，会被通用的display:none压住——实际表现就是桌面下拉整体框架
	   （.mega-default-desktop）虽然正常显示了，但里面的三级子菜单列表内容却是空白/不可见，
	   即"第三级不可见"。这里必须补上并加!important才能盖过去。 */
	.mega-default-group-list,
	.mega-default-ydothree-list {
		display: block !important;
	}

	/* 需求"检查一下，现在还是styles优先"：上一版给 .mega-default-group-list>li /
	   .mega-default-ydothree-list>li / .mega-columns--tab>li 加的 float:none 都没写
	   !important，选择器优先级只有(0,1,1)，styles.css第6705行那条
	   .navigation_menu>.menu_nav li{float:left;...}是(0,2,1)（2个class+1个元素），
	   优先级更高，实际还是它的float:left生效，跟没改一样。这里统一补上!important。 */
	.mega-default-group-list > li,
	.mega-default-ydothree-list > li {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin-bottom: 8px;
	}

	.mega-default-col--ydothree {
		flex: 0 0 20%;
		max-width: 20%;
		box-sizing: border-box;
		padding-right: 28px;
		display: flex;
		align-items: flex-start;
	}

	/* a:active/a:focus/a:visited全局覆盖问题：styles.css里 a, a:active, a:focus, a:visited{color:#AA0020}
	   是不分场景的全站默认色，优先级(0,1,1)。这个色块下面几处链接（ydothree单链接/分组标题/
	   分组三级项/ydothree兜底列表）本来只写了默认态和:hover的白色，没管:active/:focus/:visited这三个
	   伪类，选择器优先级只有(0,1,0)，比全局的(0,1,1)低，所以点击过（:visited会一直生效）、
	   聚焦、按住的链接会被全局规则盖回品红色，在深色渐变背景上完全看不清。
	   下面统一把:active/:focus/:visited也列进对应选择器里，让它们跟默认态用同一份声明、
	   同一份优先级，不改styles.css里那条全局规则本身，只在这几个新组件自己的类名上补全。 */

	/* 只有一项时（最常见的情况，比如"产品概览"）直接是一个<a>，不再套ul>li，
	   视觉上做成跟右侧分组标题（.mega-default-group-title）同一量级的醒目链接，
	   而不是缩在列表里的一小行字——它是这一列唯一的内容，应该看得清楚。 */
	.mega-default-ydothree-link,
	.mega-default-ydothree-link:active,
	.mega-default-ydothree-link:focus,
	.mega-default-ydothree-link:visited {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		justify-content: center;
		color: #fff;
		font-weight: 600;
		font-size: 16px;
		line-height: 1.3;
		text-decoration: none;
		padding: 10px 16px;
		border: 1px solid rgba(255, 255, 255, .35);
		border-radius: 4px;
		transition: background-color .15s ease, border-color .15s ease;
	}

	.mega-default-ydothree-link:hover {
		background-color: rgba(255, 255, 255, .1);
		border-color: #fff;
	}

	/* 万一后台真配了不止一项ydothree，退回列表结构时的样式 */
	.mega-default-ydothree-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* .mega-default-ydothree-list>li 的 float:none 覆盖统一放在上面
	   .mega-default-group-list,.mega-default-ydothree-list 那个 display:block!important
	   块附近了（带!important，这里之前那版没加!important没生效，已合并过去，避免两处重复）。 */

	.mega-default-ydothree-list > li + li {
		margin-top: 2px;
	}

	.mega-default-ydothree-list .menu_nav_subitem,
	.mega-default-ydothree-list .menu_nav_subitem:active,
	.mega-default-ydothree-list .menu_nav_subitem:focus,
	.mega-default-ydothree-list .menu_nav_subitem:visited {
		display: block;
		color: #fff;
		padding: 8px 0;
		font-size: 14px;
	}

	.mega-default-ydothree-list .menu_nav_subitem:hover {
		/* color: rgba(255, 255, 255, .7); */
		color:#aa0020;
	}

	.mega-default-right {
		/*flex: 1 1 0;*/
		max-width: 80%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		box-sizing: border-box;
	}

	/* 极少数情况下顶级菜单底下完全没设ydothree分组（旧设计本来就假设有），左侧20%列不会输出，
	   这时右侧改成占满100%，而不是被空出来的20%晾在那 */
	.mega-default-desktop--full .mega-default-right {
		max-width: 100%;
	}

	/* 右侧80%现在分两类区块（需求3/需求4，见 ydo_render_mega_default_menu() 注释）：
	   - .mega-default-col--leaf：没有三级子菜单的二级项，当"按钮"处理，纵向竖排堆叠，
	     每列最多7个（PHP端按7个一组array_chunk切好，这里每组就是一列）。
	   - .mega-default-group：有三级子菜单的二级项，逐个并列显示，各占一栏
	     （顶部二级名称+下面三级列表），不做7个一列的堆叠。
	   两类区块、以及区块内部列与列之间，都用同一套"flex横向平铺+浅色竖线分隔"规则。 */
	.mega-default-right > .mega-default-group,
	.mega-default-right > .mega-default-col--leaf {
		box-sizing: border-box;
		padding: 0 28px;
		flex: 1 1 0;
	}

	/* .mega-default-group-list 现在是2栏CSS多栏布局（见下面该class的注释），
	   min-width:0会让flex子项在空间紧张时无限收缩，两栏文字会挤在一起甚至重叠；
	   这里给"有三级子菜单"的栏一个更大的最小宽度，保证两栏能正常排开。
	   按钮列（.mega-default-col--leaf）本身只有一列、内容更短，不需要这么宽，维持上面的0。 */
	.mega-default-right > .mega-default-group {
		min-width: 260px;
	}

	.mega-default-right > .mega-default-group:first-child,
	.mega-default-right > .mega-default-col--leaf:first-child {
		padding-left: 0;
	}

	/* 竖线分隔条：原来是"除第一列外，每列左侧加一条竖线"（用相邻兄弟选择器+
	   border-left实现）。改成"除最后一列外，每列右侧加一条竖线"——效果上竖线的
	   位置不变（还是画在两栏之间），只是改成挂在前一列的右边而不是后一列的左边。
	   .mega-default-right的直接子元素只有.mega-default-group和.mega-default-col--leaf
	   这两种，用:not(:last-child)统一处理，不用再列4种"谁挨着谁"的组合。 */
	/* .mega-default-right > .mega-default-group:not(:last-child),
	.mega-default-right > .mega-default-col--leaf:not(:last-child) {
		border-right: 1px solid rgba(255, 255, 255, .18);
	} */

	/* 需求3：按钮列——没有三级子菜单的二级项纵向竖排堆叠成按钮，默认维持220px上限
	   （普通菜单内容短，不需要太宽）。"产品"（打了nav-product-finder标签的顶级菜单）
	   例外：右侧容器会多带一个.mega-default-right--product-finder标记类（PHP端
	   ydo_render_mega_default_menu()里加的，见该函数注释），下面单独覆盖去掉上限。 */
	.mega-default-col--leaf {
		display: flex;
		flex-direction: column;
		gap: 8px;
		flex-basis: auto;
		max-width: 220px;
	}

	/* "产品"专属：按钮列不设最大宽度上限，其它菜单不受影响（选择器带
	   .mega-default-right--product-finder前缀，只在"产品"的右侧容器下生效）。 */
	.mega-default-right--product-finder > .mega-default-col--leaf {
		max-width: none;
	}

	.mega-default-leaf-btn,
	.mega-default-leaf-btn:active,
	.mega-default-leaf-btn:focus,
	.mega-default-leaf-btn:visited {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		position: relative;
		color: #fff;
		font-size: 14px;
		line-height: 1.3;
		text-decoration: none;
		padding: 10px 14px;
		/* border: 1px solid rgba(255, 255, 255, .3); */
		/* border-radius: 4px; */
		white-space: nowrap;
		transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	}

	/* 鼠标经过时：文字变红(#aa0020)，底部展开一条1px红线（left到right展开，见::after） */
	.mega-default-leaf-btn::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 1px;
		background-color: #aa0020;
		transition: width .3s ease;
	}

	.mega-default-leaf-btn:hover {
		/* background-color: rgba(255, 255, 255, .1); */
		/* border-color: #fff; */
		color: #aa0020;
	}

	.mega-default-leaf-btn:hover::after {
		width: 100%;
	}

	.mega-default-leaf-btn .icon-LMHIconrightblack {
		font-size: 12px;
		opacity: .55;
		flex: none;
	}

	.mega-default-leaf-btn:hover .icon-LMHIconrightblack {
		opacity: 1;
	}

	.mega-default-leaf-btn-label {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	/* 加了图标以后按钮内文字可用宽度变窄，补一条溢出省略，避免长分类名把按钮撑破/
	   超出.mega-default-col--leaf的220px上限；改动前没有图标时文字本来就短，
	   这条规则不会带来任何肉眼可见的变化。 */
	.mega-default-leaf-btn-text {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* nogo：二级菜单项打了nogo这个CSS类时（见 ydo_render_mega_default_menu() 里的说明），
	   PHP端已经不再输出<a href>，改成不可点击的<span>，这里只需要让它继续保留跟按钮/分组标题
	   一致的视觉样式，同时去掉:hover的变色反馈（避免"看起来能点、其实点了没反应"），
	   鼠标样式也改回默认箭头，不用手型指针。 */
	.mega-default-leaf-btn--nogo,
	.mega-default-leaf-btn--nogo:hover {
		cursor: default;
		background-color: transparent;
		border-color: rgba(255, 255, 255, .3);
		color: #fff;
	}

	.mega-default-leaf-btn--nogo:hover::after {
		width: 0;
	}

	/* 原来这里是"产品"菜单(.mega-default-right--product-finder)按钮悬停时展开分类图标
	   背景图+文字右移51px的整套规则；需求"去掉经过展示图标"后已整段删除，PHP端也不再给
	   按钮输出background-image，产品按钮现在跟其它菜单按钮的悬停效果完全一致。 */

	/* 需求"group-title不要用超链接，改成正常的div标签"：现在PHP端统一输出<div>，
	   不再是<a>/<span>，去掉:active/:focus/:visited/:hover这些链接相关的伪类选择器
	   和文字hover变色，cursor也不用手型指针，跟其它已经是<div>/<span>的nogo标题
	   保持一致（不再需要mega-default-group-title--nogo这个修饰类来单独处理）。 */
	.mega-default-group-title {
		display: flex;
		align-items: center;
		gap: 10px;
		color: #fff;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.3;
		margin-bottom: 10px;
		cursor: default;
	}

	.mega-default-group-icon {
		width: 28px;
		height: 28px;
		flex: none;
	}

	.mega-default-group-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 之前按"第三级导航需要column显示"的要求加过 column-count:2（一行两个），
	   现在按最新反馈改回一行一个、竖向单列排版：column-count 改成 1（column-gap对单列没有
	   实际效果，留着不影响）。break-inside:avoid 留着也无妨，单列下不会触发列内断行。 */
	.mega-default-group-list {
		list-style: none;
		margin: 0;
		padding: 0;
		column-count: 1;
		column-gap: 24px;
	}

	/* .mega-default-group-list>li 的 float:none 覆盖统一放在前面
	   .mega-default-group-list,.mega-default-ydothree-list 那个 display:block!important
	   块附近了（带!important才能真正盖过styles.css的float:left，这里之前那版没加
	   !important没生效，已合并过去，避免两处重复）。 */

	.mega-default-group-list .mega-default-group-item,
	.mega-default-group-list .mega-default-group-item:active,
	.mega-default-group-list .mega-default-group-item:focus,
	.mega-default-group-list .mega-default-group-item:visited {
		display: flex;
		align-items: center;
		gap: 8px;
		position: relative;
		padding: 10px 0;
		color: rgba(255, 255, 255, .95);
		font-size: 14px;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		transition: color .15s ease;
	}

	/* 跟 .mega-default-leaf-btn 保持一致的划线效果：鼠标经过时底部展开一条1px红线 */
	.mega-default-group-list .mega-default-group-item::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 1px;
		background-color: #aa0020;
		transition: width .3s ease;
	}

	.mega-default-group-list .mega-default-group-item:hover::after {
		width: 100%;
	}

	/* 文字左对齐、箭头右对齐：文字部分是 .mega-default-group-item-text（PHP端已包成span），
	   flex:1让它占满除箭头以外的所有空间、text-align:left保证换行时每一行都靠左，不会因为
	   父级flex布局被误撑成居中；箭头 .icon-LMHIconrightblack（下面已有 flex:none）
	   不参与拉伸，天然贴在行的最右边。 */
	.mega-default-group-list .mega-default-group-item-text {
		flex: 1 1 auto;
		text-align: left;
	}

	.mega-default-group-list .mega-default-group-item:hover {
		color: #aa0020;
	}

	.mega-default-group-list .mega-default-group-item .icon-LMHIconrightblack {
		font-size: 11px;
		opacity: .5;
		flex: none;
	}
}

/* ---------- 4. 去掉父主题下拉底部那条57px白色分隔条 ---------- */
/*
 * 父主题styles.css里 .navigation_menu>.menu_nav li.active>.submenu--wrapper:after
 * 原本是给旧版三列下拉在底部留一条57px高的分隔条用的（配合旧版>ul那56px的padding-bottom）。
 * 新结构.mega-default-desktop用的是自己的padding，没有预留这57px，这条线留着会跟内容
 * 对不上、还可能盖住/顶开左侧ydothree列或分组底部的内容。用content:none直接清掉这个伪元素
 * （不生成任何盒子），只在子主题nav-v2.css里生效，父主题ydo一个字节没动。
 */
.navigation_menu > .menu_nav li.active > .submenu--wrapper:after {
	content: none !important;
}

/* ---------- 5. 移动端安全阀：新版式的深色渐变背景不能影响移动端原有抽屉式导航配色 ---------- */
@media (max-width: 1023px) {
	/* .mega-default-wrapper只会出现在走了新版默认菜单的下拉上，这里用两个class叠加提高优先级，
	   把移动端的背景改回原样（transparent，交给.navigation_menu li ul原有的移动端样式接管），
	   跟改动前完全一致；桌面端不受影响，见上面@media(min-width:1024px)那部分。 */
	.mega-default-wrapper.layout-bg-dark-liner-t-b {
		background: none !important;
	}
}

/* ---------- 6. "主页"(.menu_homelink)桌面端也显示 ---------- */
/*
 * 父主题 styles.css 里：
 *   @media (min-width:1024px) {
 *     .navigation_menu>.menu_nav li a.menu_homelink,
 *     .navigation_menu>.menu_nav li.menu_mobile { display: none }
 *   }
 * 是刻意把"主页"文字链接和"菜单"分类标题在桌面端隐藏掉（这两个本来是给移动端抽屉式
 * 导航准备的，桌面端设计上靠点击左上角logo回首页，不需要这个文字链接）。
 * 这里按需求把"主页"链接在桌面端也显示出来，"菜单"文字标签(.menu_mobile)保持不动
 * （只处理.menu_homelink，没有一并处理.menu_mobile）。
 *
 * 选择器 .navigation_menu>.menu_nav li a.menu_homelink 优先级是(0,3,2)，跟父主题
 * 那条完全一样，靠nav-v2.css在文档里排在styles.css之后加载，同优先级后加载的生效，
 * 不需要!important。display等具体数值直接照抄同一断点下.menu_nav_mainitem（"产品"/
 * "全域服务"这些顶级菜单项）已有的桌面样式，让"主页"看起来和其它顶级菜单项对齐、
 * 高度一致，不另外发明一套新样式。
 */

/* ========== navigation_meta 整行改黑底白字 ==========
 * 需求：顶部 .navigation_meta 这一行（凯傲商城/租赁商城/在线客服/语言切换 + 右侧
 * "服务网络查询"按钮所在的整个容器，桌面端和移动端抽屉菜单复用的是同一段HTML结构），
 * 背景改成纯黑#000，里面的链接文字改成白色。没有加 @media 限制，桌面/移动端都生效；
 * 如果之后只想改桌面端，需要另外套一层 @media (min-width:1024px)。
 *
 * .navigation_meta 本身父主题没有设背景色，这里直接补background-color:#000即可，
 * 不存在覆盖冲突。
 *
 * .menu_meta_item 父主题在 styles.css 里有一条不带媒体查询限制的
 * `.menu_meta_item{background:#fff}`（同优先级单class选择器），这里选择器多套一层
 * .navigation_meta 前缀，优先级 (0,2,0) 高于它的 (0,1,0)，稳定覆盖，不用!important。
 *
 * 链接文字颜色：父主题全局有一条 `a,a:active,a:focus,a:visited{color:#AA0020}`
 * （元素选择器/单伪类选择器，优先级(0,0,1)/(0,1,1)），这里选择器同样多套一层
 * .navigation_meta 前缀，优先级(0,1,1)/(0,2,1)更高，稳定压过去，不用!important。
 * "服务网络查询"按钮文字本来就是白色（.btn--primary自带的红底白字，跟这条规则无关），
 * 不受影响；"在线客服"那个链接原本在header.php里写了内联style="color:#000"，
 * 内联样式优先级比外部CSS规则更高，光靠这里的CSS覆盖不掉，已经直接在header.php里
 * 把内联的color:#000改成了color:#fff，两处配合才能保证"在线客服"文字也变白。
 */


.navigation_meta a,
.navigation_meta a:active,
.navigation_meta a:focus,
.navigation_meta a:hover,
.navigation_meta a:visited {
	color: #fff;
}

/* 移动端（<1024px）：父主题只在桌面端给 .navigation_meta 设了深色背景（#02050a），
   移动端抽屉菜单里这一行是白底，上面的白字会看不见。这里只把 .menu_meta 里的文字链接
   （凯傲商城/租赁商城/在线客服/语言切换）改成 #aa0020；"服务网络查询"按钮（.dealer-btn-wrapper）
   不在 .menu_meta 里，不受影响。优先级 (0,3,1) 高于上面的 (0,2,1)，不用 !important。
   "在线客服"原来的内联 style="color:#fff" 已从 header.php 去掉，否则内联样式会压过这里。 */
@media (max-width: 1023px) {
	.navigation_meta .menu_meta a,
	.navigation_meta .menu_meta a:active,
	.navigation_meta .menu_meta a:focus,
	.navigation_meta .menu_meta a:hover,
	.navigation_meta .menu_meta a:visited {
		color: #aa0020;
	}
}

@media (min-width: 1024px) {
	.navigation_menu > .menu_nav li a.menu_homelink {
		display: flex;
		align-items: center;
		justify-content: center;
		float: left;
		height: 100px;
		line-height: normal;
		padding: 0 40px;
		text-align: center;
		background: transparent;
		border: none;
	}

	.navigation_menu > .menu_nav li a.menu_homelink:hover {
		background: #f5f6fa;
		cursor: pointer;
	}

	.navigation_menu > .menu_nav li a.menu_homelink:active {
		color: #AA0020;
	}

	/* 顶部header滚动时会在.header上切换normal-state/small-state两种收缩状态，
	   父主题对应把.menu_nav_mainitem的高度联动改成100px/61px，这里给"主页"补上同样的
	   联动，滚动收缩时才不会跟旁边"产品"等菜单项高度对不齐、看起来忽高忽低。 */
	.header.normal-state .navigation_menu > .menu_nav li a.menu_homelink {
		height: 100px !important;
	}

	.header.small-state .navigation_menu > .menu_nav li a.menu_homelink {
		height: 61px !important;
	}
}

/* ---------- 7. "主页"改用 .menu_nav_mainitem 后的文字颜色 ----------
 * 其它顶级菜单项是 <span class="menu_nav_mainitem">，文字颜色继承父级（深色）；
 * "主页"是 <a>，会吃到父主题全局 `a, a:active, a:focus, a:visited { color:#AA0020 }`，
 * 显示成红色、和其它项不一致。这里改回 inherit；:active 仍走父主题的 #AA0020 按下反馈，
 * 和其它顶级菜单项一样。 */
.navigation_menu > .menu_nav > li > a.menu_nav_mainitem,
.navigation_menu > .menu_nav > li > a.menu_nav_mainitem:focus,
.navigation_menu > .menu_nav > li > a.menu_nav_mainitem:visited {
	color: inherit;
}

/* ---------- 8. 移动端 .menu_meta_item 里商城/客服链接改为竖排列表 ----------
 * 背景：header.php 里 .menu_meta_item > .btn.with-icon.btn--meta.no-background 这个容器
 * （凯傲商城/租赁商城/在线客服/语言切换这组链接）在移动端抽屉菜单里排版不对：
 *   1) styles.css 的基础规则 .btn--meta{height:32px}（不带媒体查询）把容器钉在 32px 高，
 *      里面的链接却是 56px 行高（.menu_meta_item a），内容溢出、挤压错位；
 *   2) 本文件第1节给这个容器加了 display:flex（桌面端横排用的），移动端这些链接
 *      也跟着横排挤在一行；
 *   3) app.css 里 .btn.with-icon.btn--meta.no-background a{margin-right:20px}（桌面端
 *      横排时链接之间的间距）在移动端竖排后变成每行右侧多出 20px 空白。
 * 处理（只挂在 @media max-width:1023px 断点下，桌面端不受影响；断点跟本文件其它
 * 规则一样沿用 1024 站点约定）：
 *   a) .btn--meta 高度放开成 auto——同时压掉 styles.css 里移动端那条
 *      .menu_meta_item a .btn--meta{height:56px}（同在移动断点、优先级(0,2,1)高于
 *      裸 .btn--meta 的(0,1,0)，所以这里也用 .menu_meta_item a .btn--meta 这个选择器
 *      显式再写一次 height:auto，nav-v2.css 排在 styles.css 之后，同优先级后加载生效）；
 *   b) 容器在 .menu_meta_item 下改回 display:block，里面的每个 a 也 display:block
 *      竖向堆叠——每个 a 自己吃 .menu_meta_item a{height:56px;border-bottom:...}
 *      那套移动端抽屉列表样式，跟其它 meta 菜单项视觉一致；
 *   c) 链接 margin-right 归零：选择器 .btn.with-icon.btn--meta.no-background a 跟
 *      app.css 那条完全同名同优先级(0,4,0)，本文件加载在 app.css 之后
 *      （header.php 里 nav-v2.css 在 app.css 后引入），同优先级后加载生效，不用!important。 */
@media (max-width: 1023px) {
	.btn--meta,
	.menu_meta_item a .btn--meta {
		height: auto;
	}

	.menu_meta_item .btn.with-icon.btn--meta.no-background {
		display: block;
		height: auto;
	}

	.menu_meta_item .btn--meta a {
		display: block;
	}

	.btn.with-icon.btn--meta.no-background a {
		margin-right: 0;
		text-align:left;
	}
}