/*
 * 顶部导航（tab）交互优化 —— 本静态副本的附加层，原站没有。
 * 由 tools/build-site.mjs 注入；删除该注入步骤重新构建即可还原。
 *
 * ── 原站为什么会抖 ────────────────────────────────────────────────
 * 原站用 border-bottom 画下划线，而 <a> 是固定 28px 高、border-box：
 *   .elementskit-navbar-nav > li:hover > a             { border-bottom: 4px solid }
 *   .elementskit-navbar-nav > li.current-menu-item > a { border-bottom: 4px solid }
 * 4px 边框一加，内容区就从 28px 缩到 24px，文字被顶高 2px。1440px 宽下实测：
 *     当前页 tab : box.h=28.0  text.top=1.0  border=4px
 *     其它 tab   : box.h=28.0  text.top=3.0  border=0px
 *     悬停某 tab : box.h=28.0  text.top=1.0   ← 文字瞬移 2px，这就是抖动
 *
 * ── 现在怎么做 ────────────────────────────────────────────────────
 * 下划线一律改成「不参与布局」的绝对定位绘制：
 *   当前页 → 一条共享的实心线（.fx-nav-indicator），点击时平滑滑到目标 tab
 *   悬停   → 该 tab 底部淡入一条浅线（::after），文字同时变绿
 * 所有状态下 <a> 的尺寸、文字位置、header 高度都不变 —— 不再有任何抖动。
 * 顺带修正：当前页 tab 的文字原本比其它 tab 高 2px，现在对齐了。
 */

/* ── 1. 停用 border 下划线（抖动的根源） ────────────────────────── */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li:hover > a,
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.current-menu-item > a,
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-current > a,
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-ancestor > a {
	border-bottom-width: 0;
}

/* ── 2. 悬停浅线：绝对定位，零布局影响 ──────────────────────────── */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li > a {
	position: relative;
	transition: color .16s ease;
}

.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--e-global-color-primary, #006d48);
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s ease;
}

.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li:hover > a::after {
	opacity: .3;
}

/* 当前页 / 被点中的 tab 由滑动实心线负责，不叠加浅线 */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.current-menu-item > a::after,
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-current > a::after,
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-ancestor > a::after {
	opacity: 0;
}

/* ── 3. 被点的 tab：立刻变绿、立刻拿到标记 ──────────────────────── */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-current > a {
	color: var(--e-global-color-primary, #006d48);
}

.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-ancestor > a {
	color: var(--e-global-color-primary, #006d48);
}

.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.fx-nav-ancestor > a .elementskit-submenu-indicator {
	color: var(--e-global-color-primary, #006d48);
}

/* ── 4. 被取代的旧「当前页」恢复普通外观 ────────────────────────── */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.current-menu-item.fx-nav-previous > a,
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.current-menu-ancestor.fx-nav-previous > a {
	color: #666666;
}

.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li.current-menu-ancestor.fx-nav-previous > a .elementskit-submenu-indicator {
	color: var(--e-global-color-secondary, #666666);
}

/* ── 5. 按下瞬间的即时反馈 ──────────────────────────────────────── */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li > a:active {
	color: #004d33;
}

/* ── 6. 共享的滑动实心线 ────────────────────────────────────────── */
.fx-nav-host {
	position: relative;
}

.fx-nav-indicator {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 4px;
	background: var(--e-global-color-primary, #006d48);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	transition: transform .2s cubic-bezier(.4, 0, .2, 1),
	            width .2s cubic-bezier(.4, 0, .2, 1),
	            opacity .16s ease;
}

.fx-nav-indicator.fx-on {
	opacity: 1;
}

/* 首次就位 / 窗口缩放：瞬间贴合，不播动画 */
.fx-nav-indicator.fx-no-anim {
	transition: none;
}

/* ── 7. 键盘焦点 ───────────────────────────────────────────────── */
.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li > a:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #006d48);
	outline-offset: 2px;
}

/* ── 8. 移动端是抽屉式竖排菜单，滑动线没有意义 ──────────────────── */
@media (max-width: 1024px) {
	.fx-nav-indicator {
		display: none !important;
	}
}

/* ── 9. 系统开启「减少动态效果」 ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.fx-nav-indicator,
	.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li > a,
	.elementor-17 .elementor-element.elementor-element-f90e8b5 .elementskit-navbar-nav > li > a::after {
		transition: none !important;
	}
}
