/* ==========================================================================
   桌面导航皮肤：dark（2026 首页改版的深色导航）
   由 inc/nav-skin.php 在皮肤为 dark 时加载，并给 <body> 加 nav-skin-dark。
   怎么切换、优先级见 inc/nav-skin.php 文件头；不想要时切成 classic 即可，本文件就不加载。

   范围：桌面 ≥1024px 的 #masthead。手机导航 #nav-shell 保持站点白底（它只有绿色 logo，
   语言下拉是深色描边，放到深底上看不清），只补了吸顶时的防跳动。
   结构和数据仍是 dten-navigation 插件 + ACF，这里只换样式：
   - 未吸顶 / 吸顶（.myfixed）都用深色实底 + 浅色 logo + 白字，悬停 #70c873
   - Solutions 下拉（layout_1）按设计稿：三栏、88×72 白底缩略图（#142009）、17px 标题、
     加粗子链接、Accessories 渐变卡；layout_2（Services 等，设计稿未画）只统一外框和字体
   - 下拉面板改为贴 header 底边、离开有宽限期，修「看得到点不到」
   - 吸顶时给 #page 补位，内容不跳

   选择器一律以 body.nav-skin-dark.nav-skin-dark 开头（同一 class 写两遍，只为加特异性）：
   要同时压过 navigation.css 的透明态规则（body.header-overlay #masthead:not(.myfixed) …，
   部分带 !important）、吸顶态的 .myfixed{background:white !important}，以及默认白底时
   插件模板上的 Tailwind 类。打平的几条靠加载顺序胜出（本文件声明依赖 navigation.css）。

   限制：插件按钮用了 Tailwind v4 的 text-white! / hover:text-[#4eb857]!，层内 !important
   压过层外 !important，Contact Sales 与 Accessories 里的 Learn More 按钮文字色改不动，
   保持站点的绿色胶囊。
   ========================================================================== */
body.nav-skin-dark.nav-skin-dark #masthead,
body.nav-skin-dark.nav-skin-dark #masthead.myfixed {
	background-color: rgba(20, 22, 19, 0.98) !important;
	/* 设计稿的 1px 底边用内阴影画：用 border 会把 header 撑到 106px，吸顶补位就差 1px */
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

body.nav-skin-dark.nav-skin-dark #masthead .header_light_logo { display: block !important; }
body.nav-skin-dark.nav-skin-dark #masthead .header_dark_logo  { display: none  !important; }

/* 一级菜单（只管顶栏这一层，下拉里的链接另写，免得被染成白字） */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] > ul > li > a {
	color: #ffffff;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] > ul > li:not(.request-demo-menu-btn):hover > a,
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] > ul > li:not(.request-demo-menu-btn) > a:focus-visible {
	color: #70c873;
}

/* WPML 语言切换：白字白框、透明底（非透明态页面上 WPML 默认是白底，白字会看不见）。
   展开的语言列表会伸出 header、落在下面的白底内容上，给它补上顶栏同色的底 */
body.nav-skin-dark.nav-skin-dark #masthead .wpml-ls-legacy-dropdown a {
	color: #ffffff !important;
	border-color: #ffffff !important;
	background-color: transparent !important;
}

body.nav-skin-dark.nav-skin-dark #masthead .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
	background-color: #141613 !important;
}

body.nav-skin-dark.nav-skin-dark #masthead .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover {
	color: #70c873 !important;
}

/* Sign in 下拉是白底，链接保持深色（透明态规则只管未吸顶） */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] .group > ul a {
	color: #474747;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] .group > ul a:hover,
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] .group > ul a.font-bold {
	color: #4eb857;
}

/* ---- 下拉面板定位 ----
   插件里面板是 fixed top:85px（按视口算）：header 上方有别的内容（首页的公告条、
   登录态的 admin bar）时，面板会盖住导航本身。改成相对满宽的 .top-navigation 绝对定位、贴 header 底边：
   公告条在不在、吸不吸顶都对得上。.site-identity 原本是 relative（容器宽），
   要让开，面板才能铺满整行。 */
body.nav-skin-dark.nav-skin-dark #masthead .site-identity,
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group:has(> div) {
	position: static;
}

/* 能不能点到面板，有两处要处理（显隐本身仍由插件的 group-hover:opacity-100 控制）：
   1. 一级菜单项只有 85px 高，在 105px 的 header 里上下各空 10px。面板贴 header 底边时，
      鼠标往下移会先经过这 10px 空隙，li 丢了 :hover，面板就收起了。这里让面板往上多伸
      12px 透明边框盖住空隙（background-clip 让白底仍从 header 底边开始）。
   2. 插件用 pointer-events-none 关面板，鼠标一离开立刻点不到；斜着往右下移去点别的栏，
      会先从菜单项侧边出去。改成 visibility 控制，离开后保留 0.25s 再淡出，期间仍可点，
      鼠标进到面板里（面板是 li 的子元素）:hover 就接上了。 */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div {
	position: absolute;
	top: calc(100% - 12px);
	right: 0;
	left: 0;
	width: auto;
	max-height: calc(100vh - 105px);
	overflow-y: auto;
	border-top: 12px solid transparent;
	background: #ffffff;
	background-clip: padding-box;
	color: #272c29;
	box-shadow: inset 0 1px 0 #e3e6e3, 0 24px 50px rgba(0, 0, 0, 0.2);
	pointer-events: auto;
	visibility: hidden;
	transition: opacity 0.2s ease 0.25s, visibility 0s linear 0.45s;
}

/* 展开也等 0.15s（插件 group-hover:delay-150 的本意）：从 Solutions 斜着往右下移会划过
   Services，若 visibility 立刻生效，Services 的面板虽然还透明却已能接鼠标，会盖住
   Solutions 的面板把它顶掉。只是路过的菜单项在这 0.15s 内不会出面板。 */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group:hover > div {
	visibility: visible;
	transition: opacity 0.3s ease 0.15s, visibility 0s linear 0.15s;
}

/* 展开的那一项标题保持绿色（设计稿 aria-expanded 态） */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] > ul > li.group:has(> div):hover > a {
	color: #70c873;
}

/* ---- Solutions（layout_1）：两列产品 + 右侧 sidebar，排成设计稿的三栏 ---- */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px;
	width: min(1180px, calc(100% - 48px));
	max-width: none;
	margin: 0 auto;
	padding: 38px 0 44px;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.flex-1 {
	display: grid;
	align-content: start;
	gap: 28px;
	padding: 0;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 {
	margin: 0;
}

/* 产品条目：去掉插件的绿框 hover，改成「缩略图 + 文字」两栏 */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 > div,
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 > a,
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 div.flex-1 > div:first-child {
	border: 0;
	border-radius: 0;
	padding: 0;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 > div > div.flex,
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 > a.flex {
	align-items: flex-start;
	gap: 16px;
}

/* #142009 10-16：缩略图白底，图片缩小留边、完整显示（设计稿是浅灰底 + 放大裁切） */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 .w-1\/3 {
	width: 88px;
	height: 72px;
	flex: none;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 8px;
	background: #ffffff;
	padding: 4px;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 .w-1\/3 > a {
	display: block;
	width: 100%;
	height: 100%;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 .w-1\/3 img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div h2 {
	margin: 0 0 3px;
	color: #1f2421;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.15s ease;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div h2 + p {
	margin: 0;
	color: #535a56;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div a:hover h2 {
	color: #3d8142;
}

/* 子链接（DTEN D7X 55"/75" 这类）：加粗灰字，悬停绿 */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 h3 {
	margin: 5px 0 0;
	border: 0;
	border-radius: 0;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 h3:first-of-type {
	margin-top: 8px;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 h3 > a {
	display: inline-block;
	padding: 0;
	color: #535a56;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] div.flex-1 > .mb-3 h3 > a:hover {
	color: #3d8142;
}

/* 右侧 sidebar → 设计稿的 Accessories 卡：渐变底、居中。
   插件用行内 style 铺了背景图和 min-height，只能 !important 盖 */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.shrink-0 {
	width: auto;
	min-height: 210px !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-radius: 10px;
	background: linear-gradient(145deg, #f0f2f0, #e4e8e5) !important;
	padding: 30px;
	text-align: center;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.shrink-0 > div {
	text-align: center;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.shrink-0 h2 {
	margin: 0 0 12px;
	font-size: 20px;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.shrink-0 h2 a {
	color: #303632;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.shrink-0 h2 a:hover {
	color: #3d8142;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div.flex > div.shrink-0 p {
	max-width: 22ch;
	margin: 0 auto;
	color: #303632;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

/* ---- Services / Industries / Alliances（layout_2 图片卡）：统一外框和字体 ---- */
body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div:not(.flex) {
	width: min(1180px, calc(100% - 48px));
	max-width: none;
	margin: 0 auto;
	padding: 38px 0 44px;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div:not(.flex) > .grid {
	gap: 28px 56px;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div:not(.flex) > .grid > div {
	border: 0;
	border-radius: 0;
	padding: 0;
}

body.nav-skin-dark.nav-skin-dark #masthead [data-nav-root] li.group > div > div:not(.flex) > .grid img {
	margin-bottom: 14px;
	border-radius: 8px;
	background: #f7f8f7;
}

/* ---- 内容不再钻到 header 下面 ----
   custom/css/style.css 给 #page 全局 margin-top:-9%（按宽度算，1440 宽约 -128px、
   1920 宽约 -171px，比 105px 的 header 还多），landing.php 内联 -10%：当初是为了让 hero
   顶到透明导航后面。深色实底导航下，hero 上半截被盖住，看起来又矮又挤（标题离导航底边
   普遍只剩 42px）。归零后 hero 完整排在 header 下方，相当于原构图整体下移一个 header。
   只管桌面：≤480px 的 -23% 和移动导航（仍是白底）这次不动。D7X / 新首页 / 帮助中心等
   模板本来就自己归零，不受影响。
   例外 posts 模板（News / Blog / Insights / Customer Stories 列表）：顶部是白底、没有 hero，
   被盖住的只是白色留白，归零反而让标题上方空出一大截，保持原来的重叠。
   以后发现别的白底顶部模板，把它的 body class 加进下面的 :not() 即可。 */
@media (min-width: 1024px) {
	body.nav-skin-dark.nav-skin-dark:not(.page-template-posts) #page {
		margin-top: 0;
	}
}

/* ---- 吸顶时补位 ----
   footer.js 滚过 100px 给 #masthead 加 .myfixed（position:fixed），header 脱离文档流，
   下面的内容会整体上跳 105px（全站原有现象），补回同样的高度。
   手机导航 #nav-shell 吸顶时同理（64px）。 */
@media (min-width: 1024px) {
	body.nav-skin-dark:has(#masthead.myfixed) #page {
		padding-top: 105px;
	}
}

@media (max-width: 1023.98px) {
	body.nav-skin-dark:has(#nav-shell.fixed) #page {
		padding-top: 64px;
	}
}