/* ==========================================================================
   主导航 · 6 项 + 超级面板（mega menu）
   1.25.1

   参考 come-to-china 的超级导航：白色浮层、分组标题、每组链接带一句说明、
   底部「查看全部」。不同之处是它左边还有一列分组 tab，我们链接量没那么大，
   平铺成 2–3 列一屏看完更快，所以不做 tab。

   两个硬约束：
     1. 顶层项最多 6 个，整条导航居中；
     2. 移动端折叠后，面板必须变成可点开的手风琴，不能悬停才出来。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 整条居中
   -------------------------------------------------------------------------- */

/*
 * 必须带上 :not(.mobile-menu-control-wrapper)：
 * layout.css 里那条同样写法的规则是 (0,3,0) 的 flex-end，
 * 只写 .main-navigation .inside-navigation 是 (0,2,0)，压不住 ——
 * 实测菜单还是贴右，左边空 450px。
 */
.main-navigation:not(.mobile-menu-control-wrapper) .inside-navigation {
	justify-content: center;
}

/* 搜索图标与菜单同处一行时，跟菜单一起居中即可；
   给它一点左侧留白，避免贴在「提交需求」按钮上。 */
/*
 * 搜索图标原来跟在菜单后面，会把整组的重心往右拉（实测偏右 76px）。
 * 让它脱离主轴钉在最右，居中的就只剩「6 项 + 2 个按钮」。
 */
.main-navigation:not(.mobile-menu-control-wrapper) .inside-navigation {
	position: relative;
}

.main-navigation:not(.mobile-menu-control-wrapper) .menu-bar-items {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0;
}

/* --------------------------------------------------------------------------
   2. 顶层项：文字 + 独立箭头按钮
   -------------------------------------------------------------------------- */

.main-navigation .menu > li.zhl-mega {
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
}

.main-navigation .menu > li.zhl-mega > .zhl-mega__top {
	padding-right: 4px;
}

.zhl-mega__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0 2px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--zhl-ink-soft);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.zhl-mega__toggle:hover,
.zhl-mega__toggle:focus-visible {
	background: color-mix(in srgb, var(--zhl-brand) 8%, transparent);
	color: var(--zhl-brand);
	outline: none;
}

.zhl-mega__caret {
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.18s ease;
}

.main-navigation .menu > li.zhl-mega:hover .zhl-mega__caret,
.main-navigation .menu > li.zhl-mega:focus-within .zhl-mega__caret,
.main-navigation .menu > li.zhl-mega.is-open .zhl-mega__caret {
	transform: rotate(225deg) translate(-1px, -1px);
}

/* 展开时顶层文字也变品牌色，和 hover 状态一致 */
.main-navigation .menu > li.zhl-mega:hover > .zhl-mega__top,
.main-navigation .menu > li.zhl-mega:focus-within > .zhl-mega__top,
.main-navigation .menu > li.zhl-mega.is-open > .zhl-mega__top {
	color: var(--zhl-brand);
	background: color-mix(in srgb, var(--zhl-brand) 7%, transparent);
}

/* --------------------------------------------------------------------------
   3. 面板本体
   -------------------------------------------------------------------------- */

.zhl-mega__panel {
	position: absolute;
	/*
	 * 100% 是 li 的高度，而 li 在 header 里垂直居中，
	 * 所以 li 底边比 header 底边高约 13px —— 用 +10 时面板上沿会压在
	 * 导航栏内部 3px，顶部圆角被吃掉，看起来像没有圆角。
	 * +18 让它落在导航栏下方，同时只隔一条细缝，不像飘着。
	 */
	top: calc(100% + 18px);
	left: 0;
	z-index: 60;

	width: max-content;
	max-width: min(940px, calc(100vw - 32px));
	padding: 20px 22px 0;
	/* 左对齐触发项：面板从菜单文字下方展开，比居中更好认；
	   右侧越界由 JS 写 --zhl-shift 拉回来。 */

	background: var(--zhl-page);
	border: 1px solid var(--zhl-line);
	border-radius: var(--zhl-radius-lg);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--zhl-ink) 6%, transparent),
		0 22px 48px color-mix(in srgb, var(--zhl-ink) 13%, transparent);

	/*
	 * 收起时必须是 display:none，不能用 visibility:hidden。
	 * visibility 仍占布局：第 5 项藏在导航右侧，面板宽 830，
	 * 绝对定位后右边缘到 1606，页面被撑出 166px 横向滚动 ——
	 * 用户没展开任何菜单也会看到滚动条。display 切换才真正脱离布局。
	 * 代价是没法用 transition，改用 animation 补入场。
	 */
	display: none;
	transform: translate(var(--zhl-shift, 0px), 6px);
}

@keyframes zhl-mega-in {
	from {
		opacity: 0;
		transform: translate(var(--zhl-shift, 0px), 6px);
	}
	to {
		opacity: 1;
		transform: translate(var(--zhl-shift, 0px), 0);
	}
}

/*
 * 面板与按钮之间有 10px 空隙，鼠标斜着移过去会离开 li，
 * 面板瞬间收起，看起来像闪断。用一层透明伪元素把缝补上。
 */
.zhl-mega__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}

.main-navigation .menu > li.zhl-mega:hover > .zhl-mega__panel,
.main-navigation .menu > li.zhl-mega:focus-within > .zhl-mega__panel,
.main-navigation .menu > li.zhl-mega.is-open > .zhl-mega__panel {
	display: block;
	animation: zhl-mega-in 0.16s ease both;
}

.main-navigation .zhl-mega__panel .zhl-mega__lede {
	margin: 0 0 16px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--zhl-ink-soft);
}

/* --------------------------------------------------------------------------
   4. 分列与链接
   -------------------------------------------------------------------------- */

.zhl-mega__grid {
	display: grid;
	gap: 18px 26px;
}

.zhl-mega__grid--1 {
	grid-template-columns: minmax(0, 1fr);
}

.zhl-mega__grid--2 {
	grid-template-columns: repeat(2, minmax(190px, 1fr));
}

.zhl-mega__grid--3 {
	grid-template-columns: repeat(3, minmax(178px, 1fr));
}

.main-navigation .zhl-mega__panel .zhl-mega__head {
	margin: 0 0 7px;
	padding-left: 8px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.4;
	color: var(--zhl-ink-faint);
}

/*
 * 这三个选择器都带 .main-navigation 前缀，是为了压过 layout.css 里的
 * `.main-navigation .menu ul li > a`（(0,2,2)，display:flex）。
 * 不压的话链接会变成一行 flex，标题和说明挤成一句话。
 */
.main-navigation .zhl-mega__panel .zhl-mega__link {
	display: grid;
	gap: 2px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
	white-space: normal;
	transition: background 0.14s ease;
}

.main-navigation .zhl-mega__panel .zhl-mega__link:hover,
.main-navigation .zhl-mega__panel .zhl-mega__link:focus-visible {
	background: color-mix(in srgb, var(--zhl-ink) 4%, transparent);
	outline: none;
}

.main-navigation .zhl-mega__panel .zhl-mega__name {
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--zhl-ink);
}

.main-navigation .zhl-mega__panel .zhl-mega__link:hover .zhl-mega__name,
.main-navigation .zhl-mega__panel .zhl-mega__link:focus-visible .zhl-mega__name {
	color: var(--zhl-brand);
}

.main-navigation .zhl-mega__panel .zhl-mega__desc {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--zhl-ink-faint);
}

/* --------------------------------------------------------------------------
   5. 底部「查看全部」
   -------------------------------------------------------------------------- */

.zhl-mega__foot {
	margin: 16px -22px 0;
	padding: 11px 22px;
	border-top: 1px solid var(--zhl-line);
	background: color-mix(in srgb, var(--zhl-ink) 2.5%, transparent);
	border-radius: 0 0 var(--zhl-radius-lg) var(--zhl-radius-lg);
}

.zhl-mega__foot a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--zhl-brand);
	text-decoration: none;
}

.zhl-mega__foot a span {
	transition: transform 0.16s ease;
}

.zhl-mega__foot a:hover span {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. 中等宽度：列数收窄，避免面板被压得每个词都折行
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.zhl-mega__grid--3 {
		grid-template-columns: repeat(2, minmax(170px, 1fr));
	}

	.zhl-mega__panel {
		max-width: min(720px, calc(100vw - 32px));
	}
}

/* --------------------------------------------------------------------------
   7. 折叠菜单（≤768）：面板变手风琴
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.main-navigation:not(.mobile-menu-control-wrapper) .inside-navigation {
		justify-content: flex-end;
	}

	.main-navigation:not(.mobile-menu-control-wrapper) .menu-bar-items {
		position: static;
		transform: none;
		margin-left: 0;
	}

	.main-navigation:not(.mobile-menu-control-wrapper) .inside-navigation {
		position: static;
	}

	/*
	 * 折叠面板必须是纵向排列。
	 * 实测 ul 拿到了 absolute + 390 宽（定位是对的），但 flex 方向仍是 row：
	 * 6 个 li 并排，每个占满 390，右边只剩每个词的首字「供 / 翻 / 展 / 案 / 关」。
	 * layout.css 里设过 column，但没压住，这里用同权重重申一次。
	 */
	.main-navigation .main-nav > ul,
	.main-navigation .menu {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
	}

	.main-navigation .menu > li.zhl-mega {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		width: 100%;
		border-bottom: 1px solid var(--zhl-line);
	}

	.main-navigation .menu > li.zhl-mega > .zhl-mega__top {
		display: flex;
		align-items: center;
		padding: 14px 4px;
		font-size: 1rem;
		border-radius: 0;
		background: transparent;
	}

	.main-navigation .menu > li.zhl-mega:hover > .zhl-mega__top,
	.main-navigation .menu > li.zhl-mega:focus-within > .zhl-mega__top,
	.main-navigation .menu > li.zhl-mega.is-open > .zhl-mega__top {
		background: transparent;
	}

	.zhl-mega__toggle {
		width: 40px;
		height: 40px;
		margin: 0;
		border-radius: 8px;
		color: var(--zhl-ink-soft);
	}

	.zhl-mega__panel {
		position: static;
		grid-column: 1 / -1;
		display: none;
		width: auto;
		max-width: none;
		padding: 0 0 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		transform: none;
		animation: none;
	}

	.main-navigation .menu > li.zhl-mega.is-open > .zhl-mega__panel {
		display: block;
	}

	/* 折叠状态下 hover 不应该让面板冒出来 —— 触屏没有 hover，只有点箭头才算数 */
	.main-navigation .menu > li.zhl-mega:hover > .zhl-mega__panel,
	.main-navigation .menu > li.zhl-mega:focus-within > .zhl-mega__panel {
		display: none;
	}

	.main-navigation .menu > li.zhl-mega.is-open > .zhl-mega__panel {
		display: block;
	}

	.zhl-mega__lede {
		display: none;
	}

	.zhl-mega__grid,
	.zhl-mega__grid--2,
	.zhl-mega__grid--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding-left: 4px;
	}

	.main-navigation .zhl-mega__panel .zhl-mega__head {
		margin-bottom: 4px;
		padding-left: 0;
		font-size: 0.72rem;
	}

	.main-navigation .zhl-mega__panel .zhl-mega__link {
		padding: 7px 0;
		border-radius: 0;
	}

	.main-navigation .zhl-mega__panel .zhl-mega__link:hover {
		background: transparent;
	}

	.main-navigation .zhl-mega__panel .zhl-mega__desc {
		font-size: 0.78rem;
	}

	.zhl-mega__foot {
		margin: 10px 0 0;
		padding: 10px 0 0;
		border-top: 1px dashed var(--zhl-line);
		background: transparent;
		border-radius: 0;
	}

	/* 移动端两个按钮保持原有块级样式（layout.css 里已有），这里只兜底 */
	.main-navigation .menu > li.zhl-nav-ghost,
	.main-navigation .menu > li.zhl-nav-cta {
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   8. 移动端头部：搜索与菜单图标右对齐、按钮去底色

   两个问题都不是本主题写的，来源在 GeneratePress：
   1. .mobile-menu-control-wrapper 是 .inside-header 的第二个 flex 子元素，
      没有 auto 外边距，就紧跟在 logo 后面 —— 实测右边缘停在 268，
      而头部容器右边缘是 366，右侧空出 98px，两个图标看着像"贴"在 logo 上。
   2. GP 生成的动态样式给 .mobile-menu-control-wrapper .menu-toggle 写了
      background-color: rgba(0, 0, 0, 0.02)（含 :hover / :focus），
      在浅色页头上就是一块淡灰方块，和"图标按钮"的观感不符。

   末位按钮的右内边距要归零：容器本身已有 24px 侧边距，按钮再留 20px，
   图标会停在距屏幕右边 44px，而 logo 距左边只有 24px —— 左右不对称。
   收掉后图标右沿正好落在容器边（距屏 24px），与 logo 左沿对齐。
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/*
	 * 不能用 margin-left: auto。
	 * 这一行里还有 #site-navigation，它 flex: 0 0 100%（342px），
	 * logo(110) + 间距(24) + 图标组(90) + 间距(24) + 342 = 590 > 342，
	 * 自由空间是负的 —— auto 外边距按规范解析为 0，元素纹丝不动（实测左沿始终 158）。
	 *
	 * 改成绝对定位挂到 .inside-header 上：right: 0 就是容器的右边界，
	 * 不重复写 24px 这个数，换边距时自动跟随。
	 * .inside-header 高度由 logo + 上下留白决定（32 + 14×2 = 60），
	 * 图标组脱离流不会让页头变矮。
	 */
	.inside-header {
		position: relative;
	}

	.inside-header .mobile-menu-control-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		/*
		 * 必须是页头高度，不能写 100%。
		 * 菜单在流里展开后 .inside-header 会长到 500 上下，
		 * 100% 会让图标组跟着长高、图标垂直居中到菜单中段 ——
		 * 实测关闭按钮跑到菜单中部，点不到，还会挡住菜单项。
		 */
		height: var(--zhl-header-h);
		align-items: center;
	}

	/*
	 * 四个状态一起写：触屏点完会残留 :focus，
	 * 只写常态的话，点一次菜单图标那块灰底就一直挂着。
	 */
	.mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:focus,
	.mobile-menu-control-wrapper .menu-toggle:active {
		background-color: transparent;
	}

	.mobile-menu-control-wrapper button.menu-toggle {
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   9. 移动端菜单：展开在主导航下方，随文档流自然撑开

   目标是"页头长高一截"，而不是"盖一层"：
   - #site-navigation 变成整行（flex-basis 100%），换行落到 logo 那一行下面；
   - 外层负边距吃掉容器左右留白，让白色背景与页头同宽（满幅），
     文字仍由 ul 自己的 padding 收回到 --zhl-gutter；
   - ul 常态就参与布局（max-height: 0 + overflow: hidden），
     展开时过渡到实测高度 —— 不用 display 切换，否则过渡无从谈起。

   为什么不用 position: absolute / fixed：
   两者都不占位，页面内容会被盖住。这里要的是把内容顶下去。

   高度不写死：--zhl-menu-h 由 nav.js 量出 scrollHeight 后写入，
   手风琴展开时再量一次，所以菜单能跟着变高，不会把内容裁掉。
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/*
	 * 允许换行：logo 一行，菜单整行落到下一行。
	 * 必须带 .site-header 前缀 —— layout.css 里写的是
	 * `.site-header .inside-header { flex-wrap: nowrap }`（(0,2,0)），
	 * 只写 .inside-header 是 (0,1,0)，压不住，实测仍是 nowrap，
	 * 菜单挤在第一行并撑出 111px 横向溢出。
	 */
	.site-header .inside-header {
		flex-wrap: wrap;
		align-content: flex-start;
	}

	/*
	 * logo 所在那一行要占满页头高度。
	 * 换行后 flex 行高度改为各自内容决定，不加这句 logo 会贴到顶边
	 * （本来靠 align-items: center 在 60px 里居中）。
	 */
	.site-header .site-logo {
		min-height: var(--zhl-header-h);
		display: flex;
		align-items: center;
	}

	/*
	 * 导航本体：整行、满幅（负边距吃掉容器留白，与白色页头同宽）。
	 * 选择器必须带 id —— GP 有 `.nav-float-right #site-navigation { margin-left: auto }`
	 * 和主题自己的 `.main-navigation:not(...)`，都是 (1,1,0)/(0,2,0)，
	 * 只用类名压不住，实测菜单被 auto 外边距推到 x=48。
	 */
	#site-navigation.main-navigation {
		/*
		 * 不用 flex-basis: 100% —— 它按容器内容宽度算（342），
		 * 负边距只会把盒子整体左移，宽度不会跟着涨，
		 * 实测菜单停在 x=48、右侧空一条。
		 * 直接用 width 加上两侧留白，才能满幅。
		 */
		flex: 0 0 auto;
		order: 10;
		width: calc(100% + 2 * var(--zhl-gutter));
		margin-inline: calc(-1 * var(--zhl-gutter));
	}

	/*
	 * GP 有 `.has-inline-mobile-toggle #site-navigation.toggled { margin-top: 1.5em }`，
	 * 展开时会在 logo 行和菜单之间留 24px 缝。这里按同样权重抵消。
	 */
	#site-navigation.main-navigation.toggled {
		margin-top: 0;
	}

	.main-navigation .inside-navigation {
		position: static;
		width: 100%;
		padding: 0;
	}

	.main-navigation .main-nav {
		position: static;
		width: 100%;
		min-width: 0;
		overflow: visible;
	}

	/* 收起态：留在流里但不占高度，也点不到、聚焦不到 */
	.main-navigation .main-nav > ul,
	.main-navigation .menu {
		position: static;
		display: block;
		width: 100%;
		max-height: 0;
		padding: 0 var(--zhl-gutter);
		overflow: hidden;
		visibility: hidden;
		background: var(--zhl-page);
		border-bottom: 0;
		box-shadow: none;
		transition: max-height 0.3s cubic-bezier(0.2, 0.85, 0.25, 1),
			padding 0.3s ease,
			visibility 0s linear 0.3s;
	}

	/*
	 * 展开态：高度由 JS 实测写入，但不超过「一屏减去页头」。
	 *
	 * 上限是必须的：六个分组全展开时内容约 1260px，而页头是 sticky ——
	 * 页头一旦高过视口，贴住之后底部就永远够不到（页面再滚，页头也不动）。
	 * 常见状态（不展开分组，444px）远低于上限，仍是自然撑开、由内容决定高度；
	 * 只有超过一屏时才在菜单内部滚动。
	 */
	.main-navigation.toggled .main-nav > ul,
	.main-navigation.toggled .menu {
		max-height: min(var(--zhl-menu-h, 100dvh), calc(100dvh - var(--zhl-header-h)));
		padding: 10px var(--zhl-gutter) 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: visible;
		border-bottom: 1px solid var(--zhl-line);
		transition: max-height 0.3s cubic-bezier(0.2, 0.85, 0.25, 1),
			padding 0.3s ease,
			visibility 0s;
	}

	.main-navigation.toggled .main-nav > ul > li:last-child {
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   10. 粘性页头：向下滚隐藏，向上滚出现

   纯 CSS 的 position: sticky 负责"始终贴顶"，隐藏与出现交给
   .is-hidden（transform: translateY(-100%)）—— 只动 transform，
   不碰 top / height，滚动过程中不会触发重排。

   为什么不用 position: fixed：
   fixed 脱离文档流，得给 body 补等高的 padding，且宽度要自己锁 100%，
   移动端地址栏伸缩时容易错位。sticky 天然占位，滚动锚点、页内跳转都对得上。

   两条硬约束（都在 JS 里）：
   1. 菜单展开时不隐藏 —— 否则页头带着菜单一起滑出屏幕；
   2. 顶部 120px 内不隐藏 —— 刚进页面往下滚一点就收起，会显得页面在抖。
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* 只过渡 transform：其它属性交给布局，避免滚动时抖动 */
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

/*
 * 菜单展开期间收起底部的 AI 浮标。
 * 它自带 z-index: 2147482000（就是冲着"永远最上层"写的），菜单压不住；
 * 而菜单展开后基本占满一屏，浮标会盖住最后几项，点不到。
 * 状态由 nav.js 跟着 #site-navigation 的 toggled 类同步。
 */
body.zhl-menu-open #zhl-askai-dock {
	display: none;
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: none;
	}
}