/**
 * polaris/nav + polaris/nav-item 样式 —— 前台 + 编辑器共用(nav-item 没有自己的
 * style.css,规则跟父块一起加载,和 polaris/tab 依赖 polaris/tabs 的样式是同一约定)。
 *
 * 桌面巨幕的展开/收起完全靠 CSS(:hover / :focus-within / JS 的 is-open 类取并集),
 * 面板物理上嵌套在触发器内部——这是取代旧 Snippets 方案 MENU_MAP 手工配对的核心决策,
 * 见 docs/mega-nav-block-plan.md。移动端断点相关的规则由 render.php 按
 * mobileBreakpoint 属性动态生成内联 <style>(本文件不写死断点数值)。
 *
 * DOM 结构(2026-07-09 追加一层):`<nav>` 现在只有一个直接子级
 * `.polaris-nav__inner-container`,真正的 InnerBlocks 内容都在它里面——照抄
 * core/cover 的 `.wp-block-cover__inner-container`,原因是「更改内容位置」九宫格
 * 需要定位的是"内容作为一个整体",不能让 flex 直接作用到 `<nav>` 的每个直接子块上
 * (导航内部经常不止一段内容,会被错误地挤成同一行,实测过的真实 bug)。本文件里
 * 凡是原来写 `.polaris-nav > 某选择器` 的地方,都已经改成经过
 * `.polaris-nav__inner-container` 再往下一层。
 */

/* ═══════════════════════════════════════════
   根容器
═══════════════════════════════════════════ */
/*
 * `position` 单独用 :where() 包裹(权重归零),不占用一个普通类选择器的权重。
 * 原因:开启原生「吸顶」后,WP 会生成一条 `.wp-container-XXXX { position: sticky }`
 * 规则(单类选择器,权重和普通写法的 `.polaris-nav{position:relative}` 打平),打平后
 * 谁赢看两份样式表谁后加载,不可控——实测确实出现过 sticky 被我们自己的
 * `position:relative` 悄悄盖掉、吸顶完全不生效的情况。用 :where() 让我们这条
 * "没开吸顶时的默认 relative" 权重归零,保证 WP 的原生 sticky 规则一定赢,不用赌
 * 样式表加载顺序。（`position:sticky` 本身也是"已定位"元素,同样能当 is-panel-full
 * 面板的定位基准,不需要额外兼容处理。） */
:where( .polaris-nav ) {
	position: relative; /* 通栏铺满面板(is-panel-full)的定位基准 */
	background-color: var( --wp--preset--color--base, #ffffff );
	box-sizing: border-box;
	width: 100%;
	text-decoration: none;
}

.polaris-nav {
	--polaris-nav-scrolled-bg: var( --wp--preset--color--base, rgba( 255, 255, 255, 0.85 ) );
	--polaris-nav-scrolled-blur: 10px;
	--polaris-nav-transparent-color: #ffffff;
	--polaris-nav-panel-bg: var( --wp--preset--color--base, #ffffff );
	--polaris-nav-panel-shadow: 0 12px 32px rgba( 0, 0, 0, 0.12 );
	--polaris-nav-cart-badge-bg: rgba( 0, 0, 0, 0.75 );
	--polaris-nav-cart-badge-color: #ffffff;
}

.polaris-nav.is-nav-transparent:not(.is-scrolled) {
	background-color: transparent !important;
}

.polaris-nav.is-scrolled {
	background-color: var( --polaris-nav-scrolled-bg, var( --wp--preset--color--base, #ffffff ) );
	-webkit-backdrop-filter: blur( var( --polaris-nav-scrolled-blur, 10px ) );
	backdrop-filter: blur( var( --polaris-nav-scrolled-blur, 10px ) );
	z-index: 500;
}

/*
 * 导航条悬停、聚焦或下拉展开时,提升层叠上下文至 z-index: 500,
 * 确保多级下拉菜单与巨幕面板不会被页面后续的文档流元素(如卡片、图片、轮播、栏目等)遮挡。
 */
.polaris-nav:hover,
.polaris-nav:focus-within,
.polaris-nav:has( .is-open ),
.polaris-nav:has( .has-menu:hover ),
.polaris-nav:has( .has-panel:hover ),
.polaris-nav.has-dropdown-open {
	z-index: 500;
}

/*
 * 滚动后的背景色 + 毛玻璃,对标 core/cover 的"覆盖"颜色:用 ::before 伪元素
 * 铺满视口宽度(width:100vw + translateX(-50%))而非局限在 nav 自身的内容宽度——
 * 内容宽度/宽幅模式下导航条可能只是页面中间一段,但滚动变色要像封面覆盖层一样
 * 通栏贯穿。
 */
.polaris-nav.is-scrolled::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 100vw;
	height: 100%;
	background-color: var( --polaris-nav-scrolled-bg );
	-webkit-backdrop-filter: blur( var( --polaris-nav-scrolled-blur ) );
	backdrop-filter: blur( var( --polaris-nav-scrolled-blur ) );
	z-index: -1;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/*
 * 「仅导航组件吸顶」模式下的吸顶样式(由 view.js initStickySelf 动态接管)
 */
.polaris-nav.is-sticky-fixed {
	position: fixed !important;
	top: var( --wp-admin--admin-bar--height, 0px ) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	z-index: 500 !important;
	background-color: var( --polaris-nav-scrolled-bg, var( --wp--preset--color--base, #ffffff ) );
}
.polaris-nav-sticky-placeholder {
	width: 100%;
	visibility: hidden;
	pointer-events: none;
}

/*
 * 布局模型(2026-07-09 更新):彻底对齐 core/cover 才发现"constrained 流式"是早期
 * 理解错了——Cover 自己 supports.layout 就一个 allowJustification:false,不声明
 * type。这里的默认流式布局延续原来的写法不动(产品决定不跟 Cover 一样无条件转 flex,
 * 只有设了「更改内容位置」才切 flex,见下方 has-custom-content-position 那段)。
 * nav 自身宽度走原生「对齐」工具栏(宽幅/全幅,同封面组件),默认全幅。
 *
 * 设置了自定义「最小高度」(minHeight/minHeightUnit,和 core/cover 同款参数,UI 抄的
 * 是 Cover 的 CoverHeightInput)时,才切换为 flex **列**布局(flex-direction:column):
 * - 交叉轴=水平,align-items:stretch 让子元素撑满宽度(和流式布局一致)
 * - 主轴(竖直)的撑高**不**走 flex-grow/align-items:stretch 链路——实测在
 *   nav → wp:columns → wp:column → nav-menu → nav-item → link 这条至少 5 层深、
 *   且真实菜单里几乎必然会插入 wp:columns(站点标题/菜单/汉堡三栏头部布局)的链路上,
 *   stretch/flex-grow 会在多处失效或互相钳制(某一栏自己声明「垂直居中对齐」会
 *   跳出 stretch;<button> 触发器——巨幕面板开启且未勾选「标题本身也可点击跳转」
 *   时是 <button>——在 Chromium/WebKit 里不参与 flex 的 stretch/百分比高度解析,
 *   是浏览器对表单控件的已知特殊处理;而且这条链路一旦出现"某层显式定高+其余层
 *   继续 stretch"的混用,会触发 flex 算法的循环相互撑高,实测让 nav 的高度从
 *   64px 跳到 96px,比设定值还夸张)。
 *
 *   唯一可靠的办法:放弃"某一层撑满、其余层跟着 stretch"的间接链路,链路上每一
 *   层都直接吃同一个显式长度值——render.php/edit.js 把「最小高度」(minHeight +
 *   minHeightUnit 拼出的 CSS 长度值)同时写成 --polaris-nav-height 自定义属性
 *   (和 min-height 用的是同一个值,变量名保留旧名字,纯内部实现细节,和属性叫什么
 *   没关系),自定义属性天然沿 DOM 树逐层继承,不受中间 wp:columns/wp:group/表单
 *   控件是否参与 flex 跨轴拉伸算法的影响,每一层都直接 height:var(...) 取显式长度,
 *   不留任何"由父级尺寸倒推"的环节,自然也就没有循环撑高的可能。 */
.polaris-nav.has-custom-height {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
}
.polaris-nav.has-custom-height .polaris-nav__inner-container,
.polaris-nav.has-custom-height .polaris-nav__inner-container > .wp-block-columns,
.polaris-nav.has-custom-height .polaris-nav__inner-container > .wp-block-group,
.polaris-nav.has-custom-height .wp-block-columns:has( .polaris-nav-menu ),
.polaris-nav.has-custom-height .wp-block-column:has( .polaris-nav-menu ),
.polaris-nav.has-custom-height .wp-block-group:has( .polaris-nav-menu ),
.polaris-nav.has-custom-height .polaris-nav-menu,
.polaris-nav.has-custom-height .polaris-nav-item,
.polaris-nav.has-custom-height .polaris-nav-item__link {
	height: var( --polaris-nav-height );
}
.polaris-nav.has-custom-height .polaris-nav-menu {
	align-items: stretch;
}

/*
 * 工具栏「更改内容位置」九宫格,照搬 core/cover 的 contentPosition 语义(class 名字
 * 和取值范围完全对齐,edit.js/render.php 各自手抄了一份同款映射表)。默认「居中」
 * (undefined / "center" / "center center")不加任何 class,维持默认的流式布局不变;
 * 只有真的选了非居中的位置才切成 flex 行布局,justify-content 管水平、align-items
 * 管垂直。
 *
 * 和「最小高度」(.has-custom-height,flex **列**布局,见上方大段注释)同时设置时,
 * 两者方向语义相反——这里显式把 flex-direction 转回 row 且放在更靠后的位置,让
 * 内容位置赢:用户同时设置了高度和位置,大概率是想在这个高度的盒子里挑个九宫格
 * 位置摆内容(封面组件的经典用法),不是继续要纵向撑高。子元素各自的
 * height:var(--polaris-nav-height) 不受影响,只是排列方向变了。
 */
.polaris-nav.has-custom-content-position {
	display: flex;
	flex-wrap: wrap;
}
.polaris-nav.has-custom-height.has-custom-content-position {
	flex-direction: row;
}
.polaris-nav.is-position-top-left      { justify-content: flex-start; align-items: flex-start; }
.polaris-nav.is-position-top-center    { justify-content: center;     align-items: flex-start; }
.polaris-nav.is-position-top-right     { justify-content: flex-end;   align-items: flex-start; }
.polaris-nav.is-position-center-left   { justify-content: flex-start; align-items: center; }
.polaris-nav.is-position-center-center { justify-content: center;     align-items: center; }
.polaris-nav.is-position-center-right  { justify-content: flex-end;   align-items: center; }
.polaris-nav.is-position-bottom-left   { justify-content: flex-start; align-items: flex-end; }
.polaris-nav.is-position-bottom-center { justify-content: center;     align-items: flex-end; }
.polaris-nav.is-position-bottom-right  { justify-content: flex-end;   align-items: flex-end; }

/*
 * 菜单项之间的间距完全交给 nav-item 自己的 __link padding(0.5rem 1rem)控制,
 * 不需要 nav-menu 的 flex gap 再叠加一层——block.json 里给 blockGap 声明的
 * "0" 默认值只在编辑器新插入区块 / 读取 $attributes 时生效,WP 的布局间距
 * (gap)CSS 是 layout 支持在渲染早期直接读取"已保存内容里的原始 attrs"生成的,
 * 老内容(comment 里压根没写 style.spacing.blockGap 这个 key)不会补上这个默认值。
 * 而且实测这里根本轮不到 --wp--style--block-gap 这个自定义属性生效:主题全局
 * 样式表里有条 `:root :where(.is-layout-flex){gap:1.5rem}`,是写死的字面量,不走
 * var(...) 表达式,选择器特异度和 .polaris-nav-menu 打平(:where() 内部特异度清零,
 * :root 只贡献 1 个),谁赢全看源码顺序——主题全局样式表在编辑器/前台都比插件
 * 样式表晚打印,稳定压过我们。只能直接对 gap 加 !important 硬顶掉。
 * 用户在「块间距」面板里手动设置过具体数值后,WP 会生成
 * .wp-container-polaris-nav-menu-xxx{gap:该值}——同样没有 !important,依然会被这条
 * 规则压住,所以只对默认场景(没有 wp-container 规则、或那条规则的值恰好也是
 * 0/未设置)生效即可;后续如果要支持"用户自定义间距覆盖这条默认值",需要把这条
 * 规则收窄成只在没有 style.spacing.blockGap 属性时生效(比如反过来在 nav-menu 的
 * render.php/edit.js 里显式判断该属性是否存在,自己拼一条内联 gap:0 兜底,而不是
 * 用样式表硬顶)。 */
.polaris-nav-menu {
	gap: 0 !important;
}

.polaris-nav.is-scrolled {
	/* 背景色/毛玻璃已移至 ::before 伪元素(通栏全幅,对标封面覆盖层) */
}

/* 透明导航(服务端按页面判定,见 render.php):滚动前透明背景 + 指定文字色,
   滚动超过阈值后(.is-scrolled)自动恢复正常配色。颜色直接设在根节点上,靠 CSS
   继承铺到导航条内所有文字/图标(用 currentColor 的 SVG 图标同样吃得到),不再只挑
   .polaris-nav-item__link 单点覆盖——折叠菜单入口(polaris-nav-toggle)是独立块,
   不在这棵 DOM 子树里,继承够不到它,颜色由 view.js 的 syncToggleColor 单独同步。 */
.polaris-nav.is-nav-transparent:not( .is-scrolled ) {
	background-color: transparent;
	color: var( --polaris-nav-transparent-color );
}
/* 普通 <a> 标签的 color 通常由主题全局样式表直接写在 `a` 选择器上(哪怕零特异度的
   :where(a)),这类显式声明会挡住上面根节点的继承,链接还是显示主题原本的链接色——
   这里显式声明,让导航条内所有超链接(不只是 .polaris-nav-item__link)也跟着配置色走。
   巨幕面板(见下方,白底浮层)不跟着一起变色,这里直接用 :not() 把面板内的 <a> 排除在
   源头之外——而不是"先覆盖全部、再针对面板改回来"。后一种写法必须用一条特异度更高的
   `.polaris-nav-item__panel a{ color:xxx }` 才能盖过这里,但那条规则会连带盖掉面板
   内容里本来就自己设置了颜色的链接(按钮块/主题着色链接/预置功能里的链接等),把它们
   强制改写成同一个颜色,这就是曾经出现过的"透明导航颜色污染巨幕面板链接"的根因。 */
.polaris-nav.is-nav-transparent:not( .is-scrolled ) a:not( .polaris-nav-item__panel a ):not( .polaris-nav-item__menu a ) {
	color: var( --polaris-nav-transparent-color );
}
/* 巨幕面板是白底浮层(见下方「巨幕面板」区块 --polaris-nav-panel-bg),不能跟着导航条
   一起变白字——否则面板展开时白字盖白底,内容读不出来,这里截断继承,退回默认深色。
   面板内的链接不需要再单独处理:上面那条规则已经用 :not() 把面板内的 <a> 整体排除
   在外,链接走正常级联——没自定义颜色的跟着这里的 initial 继承,已经设置了颜色的
   保留自己的颜色,不会被强制覆盖。 */
.polaris-nav.is-nav-transparent:not( .is-scrolled ) .polaris-nav-item__panel,
/* 「导航」模式的下拉同理:也是白底浮层,同样在上面那条规则的 :not() 里被排除在源头。 */
.polaris-nav.is-nav-transparent:not( .is-scrolled ) .polaris-nav-item__menu {
	color: initial;
}

/* WooCommerce 迷你购物车徽标(圆点里的数字)不是靠继承拿颜色的——它是 WC 自己的
   Interactivity API 状态(view.js 里的 state.badgeBackgroundColor/badgeTextColor)算出来
   再以行内样式(data-wp-style--*)写上去的:badge 底色抄图标当前的 currentColor,数字色
   则采样"图标背后的实际背景色"、想做成"数字从底色里挖空"的视觉效果——这个算法假设
   头部背景是它能可靠采到的纯色。导航条的背景状态在这个块里是可配的(透明/自定义
   scrolledBgColor/毛玻璃),不保证符合它的假设,实测两种状态各出一种问题:透明时
   底色和挖空色一起趋近页面浅色背景,白上白读不出来;滚动吸顶变实底后,它反过来算出
   "白底黑字"——底色和白色导航条背景融在一起,视觉上圆点直接消失,只剩一个孤零零的
   黑色数字飘着,前后两种状态的配色逻辑完全不统一,忽黑底白字忽白底黑字。
   行内样式优先级本来就压过普通选择器,两条规则都必须 !important 才能盖过 WC 算出来
   的值。基线规则(非透明 / 滚动吸顶后)用固定深底白字兜底,可通过
   --polaris-nav-cart-badge-bg / --polaris-nav-cart-badge-color 这两个自定义属性按品牌
   色改;透明且未滚动这一档单独更具体的规则接管,背景直接跟透明导航文字色一致
   (--polaris-nav-transparent-color),字色用 render.php 按 YIQ 感知亮度公式现算出来的
   黑/白对比色(--polaris-nav-cart-badge-contrast-color,算不出来时才落回基线的固定
   配色),这样徽标背景始终等于用户实际配置的透明导航颜色,不需要额外维护一份重复
   配置。 */
.polaris-nav .wc-block-mini-cart__badge {
	background-color: var( --polaris-nav-cart-badge-bg ) !important;
	color: var( --polaris-nav-cart-badge-color ) !important;
}
.polaris-nav.is-nav-transparent:not( .is-scrolled ) .wc-block-mini-cart__badge {
	background-color: var( --polaris-nav-transparent-color ) !important;
	color: var( --polaris-nav-cart-badge-contrast-color, var( --polaris-nav-cart-badge-color ) ) !important;
}

/* ═══════════════════════════════════════════
   Logo(polaris/nav-logo,没有自己的 style.css,和 nav-item 一样跟父块共用这份——
   默认图/反白图两张都原样渲染,谁显示谁隐藏纯靠这几条 CSS 状态位规则,不需要
   navId 弱引用也不需要前台 JS,和上面「巨幕面板」「透明导航文字色」同一个思路)
═══════════════════════════════════════════ */
.polaris-nav-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0; /* 消掉 inline 图片默认的行高空隙,避免比相邻菜单项高一截 */
	/* inline-flex 在"栏目"这类普通块级流式父容器(不是它自己声明 flex 布局)里,是当成
	   一段行内内容排版的,默认 vertical-align:baseline 会按父级文字的行高基线量出几像素
	   偏移(经典的"行内替换元素莫名偏几像素"问题,和 <img> 直接摆在文字行里是同一个坑)。
	   父级本身是 flex 容器(比如挨着菜单项横排)时 vertical-align 直接被忽略,不受影响。 */
	vertical-align: middle;
	text-decoration: none;
}
.polaris-nav-logo__img {
	display: block;
	width: auto; /* 宽度始终按图片原始比例自动缩放,只有高度受控 */
	max-width: 100%;
}
/* 「扩展」:和 nav-item 撑高同一套思路,直接吃 --polaris-nav-height 这个显式长度值
   (nav 设了「最小高度」时才会有),而不是赌 height:100%/align-self:stretch 在
   InnerBlocks 常见的 Group/Columns 多层嵌套里一定生效——没设「最小高度」时兜底
   100%,交给外层自己是不是撑满高度的 flex 容器决定。 */
.polaris-nav-logo.is-height-stretch,
.polaris-nav-logo.is-height-stretch .polaris-nav-logo__img {
	height: var( --polaris-nav-height, 100% );
}
/* 「固定」:render.php/edit.js 把 fixedHeight+fixedHeightUnit 拼成的 CSS 长度值写成
   --polaris-nav-logo-height 内联自定义属性(和 nav 的 --polaris-nav-height 同一手法)。 */
.polaris-nav-logo.is-height-fixed,
.polaris-nav-logo.is-height-fixed .polaris-nav-logo__img {
	height: var( --polaris-nav-logo-height, 32px );
}
/* 默认显示"默认图",反白图缺省态不占位;透明导航生效且未滚动时反过来——和「透明导航
   文字色」那条规则同一个状态位(.polaris-nav.is-nav-transparent:not(.is-scrolled)),
   靠这个块在 DOM 里本来就是 polaris/nav 的后代,不需要额外挂 class/属性。 */
.polaris-nav-logo__img--inverted {
	display: none;
}
.polaris-nav.is-nav-transparent:not( .is-scrolled ) .polaris-nav-logo__img--default {
	display: none;
}
.polaris-nav.is-nav-transparent:not( .is-scrolled ) .polaris-nav-logo__img--inverted {
	display: block;
}
/* 编辑器画布里没有滚动/透明的真实生效条件,只预览「默认图」,避免摆一个看起来
   什么都没做的空白块;没传默认图时给个占位提示文案,和其它区块的空态一致。 */
.polaris-nav-logo.is-editor {
	min-height: 24px;
}
.polaris-nav-logo__placeholder {
	font-size: 12px;
	color: #757575;
	white-space: nowrap;
}

/*
 * .polaris-nav 默认是普通流式布局(不依赖原生「布局」supports 的 constrained 类型——
 * 那本来就不是 core/cover 真正用的机制,见文件顶部/edit.js 里 2026-07-09 的更正说明)。
 * 工具栏「宽幅/全幅」控制自身宽度(supports.align),内部区块在流式布局中自然撑满
 * 对应宽度。「菜单」内部排列是 nav-menu 自己独立的 flex layout。
 */
.polaris-nav {
	list-style: none;
}

/*
 * 这里原来有一条"全幅模式下解除内部区块宽度上限"的防御规则,实测发现是错的,已删除
 * (2026-07-09):`.polaris-nav.alignfull > .polaris-nav__inner-container > *`
 * 两个类 + 两层子代选择器,特异度比 WP 原生约束宽度规则
 * `.wp-container-polaris-nav-is-layout-xxx > :where(...)` 高得多(`:where()` 特异度
 * 恒为 0)——用户开启原生"内部区块使用内容宽度"、把内容宽度设成比如 1280px 后,这条
 * 防御规则会无条件把 max-width 重新压回 none,设置形同虚设,内容依旧撑满全宽。
 * `.polaris-nav__inner-container` 本身现在已经正确带上 is-layout-constrained/
 * wp-container-* class(见 includes/class-registry.php 的
 * restore_nav_inner_container_layout_classes()),WP 原生那条
 * `.wp-container-xxx .alignfull{max-width:none}` 规则已经会正确处理"子块自己声明了
 * alignfull 就该无视内容宽度"这件事,不需要再手写一条更粗暴的规则重复干这件事——
 * 之前那条防御规则纯粹是在猜"某些主题/浏览器可能残留 max-width",没有验证过就写上了,
 * 实测证明既没必要、还会连累合法场景。
 */

/* ═══════════════════════════════════════════
   菜单项(触发器)
═══════════════════════════════════════════ */
.polaris-nav-item {
	display: flex;
	align-items: center;
	/* nav-item 自带原生「间距」block support(可以在样式面板给单个菜单项加内边距)。
	   默认 box-sizing 是 content-box,一旦某个菜单项自己被加了内边距,
	   has-custom-height 那条 height:var(--polaris-nav-height) 就会被内边距撑到
	   比设定的导航高度还高(实测 64px 高度 + 上下各 16px 内边距变成 96px)——
	   和 .polaris-nav-item__link 那条早就写明的 box-sizing 注释是同一类问题,
	   这里显式声明,让「导航高度」在有内边距的菜单项上也如实生效。 */
	box-sizing: border-box;
}

/* 收敛宽度模式下,菜单项自己是面板的定位基准;通栏铺满模式下菜单项保持 static,
   让面板的 position:absolute 穿透到 .polaris-nav(见下方「巨幕面板」)。 */
.polaris-nav-item.is-panel-contained {
	position: relative;
}

.polaris-nav-item__link {
	position: relative; /* 下划线指示条的定位基准 */
	display: inline-flex;
	align-items: center;
	appearance: none;
	background: none;
	background-color: var( --polaris-nav-item-bg, transparent );
	border: 0;
	padding: 0.5rem 1rem;
	font: inherit;
	color: var( --polaris-nav-item-color, inherit );
	text-decoration: inherit;
	cursor: pointer;
	white-space: nowrap;
	/* 必须显式声明:has-custom-height 时会给这个元素设 height:100%,如果外层主题/
	   浏览器默认 box-sizing 不是 border-box,padding 会加算在 100% 之外,让这个元素
	   实际渲染高度比父级(.polaris-nav-item,已撑满导航高度)还高,溢出到导航条背景
	   以下——底部的下划线指示条(::after,bottom:0)会跟着一起被推出导航条外面。 */
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.polaris-nav-item:hover > .polaris-nav-item__link,
.polaris-nav-item__link:hover,
.polaris-nav-item__link:focus-visible {
	background-color: var( --polaris-nav-item-hover-bg, var( --polaris-nav-item-bg, transparent ) );
	color: var( --polaris-nav-item-hover-color, var( --polaris-nav-item-color, inherit ) );
}

.polaris-nav-item.is-current > .polaris-nav-item__link,
.polaris-nav-item.is-active > .polaris-nav-item__link,
.polaris-nav-item__link.is-current,
.polaris-nav-item__link[aria-current="page"] {
	background-color: var( --polaris-nav-item-active-bg, var( --polaris-nav-item-hover-bg, var( --polaris-nav-item-bg, transparent ) ) );
	color: var( --polaris-nav-item-active-color, var( --polaris-nav-item-hover-color, var( --polaris-nav-item-color, inherit ) ) );
}

.polaris-nav-item__link::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.2s ease;
}
.polaris-nav-item:hover > .polaris-nav-item__link::after,
.polaris-nav-item__link:hover::after,
.polaris-nav-item__link:focus-visible::after,
.polaris-nav-item.is-current > .polaris-nav-item__link::after,
.polaris-nav-item.is-active > .polaris-nav-item__link::after,
.polaris-nav-item__link.is-current::after,
.polaris-nav-item__link[aria-current="page"]::after {
	transform: scaleX( 1 );
}

/* 关闭底部指示条开关时隐藏动画线条 */
.polaris-nav.no-item-indicator .polaris-nav-item__link::after {
	display: none !important;
}

/* ═══════════════════════════════════════════
   巨幕面板
═══════════════════════════════════════════ */
.polaris-nav-item__panel {
	position: absolute;
	top: 100%;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background-color: var( --polaris-nav-panel-bg, var( --wp--preset--color--base, #ffffff ) );
	box-shadow: var( --polaris-nav-panel-shadow, 0 12px 32px rgba( 0, 0, 0, 0.12 ) );
	border-radius: 0;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	/* 面板内边距(panelPad*)是内联样式加在这个元素上的,浏览器默认 box-sizing
	   是 content-box,padding 会加在既定 width/max-width 之外,导致面板实际
	   宽度比设置值更大;必须显式声明 border-box,让内边距向内收缩而不撑宽面板。 */
	box-sizing: border-box;
}
/* 相邻菜单项瞬切时临时关掉过渡(view.js 加/删这个类),避免快速扫过整排菜单时反复闪烁重播动画 */
.polaris-nav-item__panel.no-transition {
	transition: none !important;
}

/*
 * 内容宽度 / 宽幅 / 全幅:按浏览器视口计算,不受 .polaris-nav 自身所在容器宽度限制
 * (哪怕导航条被塞在一个窄的「内容宽度」容器里,面板也要能撑到视口的宽幅/全幅)。
 * position:absolute 的宽度上限永远是最近定位祖先的渲染宽度,做不到"比 .polaris-nav
 * 自己还宽",所以这三档改用 position:fixed(定位基准是视口,和祖先宽度完全无关)。
 * 代价是 top 偏移不能再靠"处于文档流之外、百分比天然等于导航条高度"这个技巧算,
 * 需要 view.js 在展开时用 getBoundingClientRect() 量一次(见 view.js initHoverPanels)。
 */
.polaris-nav-item.is-panel-content > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-wide > .polaris-nav-item__panel {
	position: fixed;
	left: 50%;
	width: calc( 100vw - 2rem );
	transform: translateX( -50% ) translateY( -4px );
}
.polaris-nav-item.is-panel-content > .polaris-nav-item__panel {
	max-width: var( --wp--style--global--content-size, 1200px );
}
.polaris-nav-item.is-panel-wide > .polaris-nav-item__panel {
	max-width: var( --wp--style--global--wide-size, 1400px );
}

/* 全幅:视口边到边,同样 position:fixed(不受 .polaris-nav 容器宽度限制) */
.polaris-nav-item.is-panel-full > .polaris-nav-item__panel {
	position: fixed;
	left: 0;
	right: 0;
	transform: translateY( -4px );
}

/*
 * 编辑器画布是 iframe,`position: fixed` 的包含块判定在 iframe 里不可靠——画布祖先链
 * 上任何一层被 Gutenberg 加了 transform/will-change/contain(编辑器自己用来定位选中框、
 * 拖拽动画等),都会让 fixed 退化成"相对那一层定位",实测表现为面板收窄成一条紧贴
 * 菜单项的窄条(内容被挤到逐字换行)。编辑时不追求 100% 还原视口边到边的效果,退化成
 * "相对 .polaris-nav 绝对定位"的近似预览即可(全幅=撑满/宽幅=wide-size/内容=content-size),
 * 真实 effect 以前台为准(前台是真实顶层文档,没有 iframe 的 fixed→absolute 降级问题)。
 *
 * 全部带 !important:WP 编辑器给画布里每个区块自己的 wrapper 都会注入一批默认样式
 * (定位/尺寸相关),经实测优先级/`!important` 都压得过普通写法的自定义 CSS(和
 * carousel-arrow 当年踩过的坑同一个原因,见 docs/carousel-block-plan.md 的
 * "编辑器内子块跟在轮播项后面" 那条记录)。收起态/展开态各自成对独立写(而不是像
 * 前台那样和通用展开态规则拼权重博弈),避免自己和自己打架。
 *
 * 关键的第二层坑(用浏览器实测才挖出来,不是这段注释能靠推理想到的):WP 编辑器给
 * 画布里**每一个**区块自己的 wrapper 都默认加了 `position: relative`(供选中框/
 * 悬浮工具条定位,和 carousel-arrow 那次是同一条 WP 内置规则)。这意味着即使我们自己
 * 从来没给 `.polaris-nav-item.is-panel-full`(等非 contained 档位)写过
 * `position:relative`,WP 也会替它加上——面板的 `width:90%`/`left:50%` 这些百分比值
 * 因此会相对**这个意外变成"已定位"的 nav-item 自己**(实测宽度只有 ~42px)计算,而不是
 * 相对 `.polaris-nav` 计算,表现为面板被挤成宽度只有几十像素的窄条。**修复**:显式把
 * 这三档 nav-item 在编辑器里强制退回 `position:static`,面板的 `position:absolute`
 * 才能正确穿透它,以 `.polaris-nav` 为基准计算百分比。
 *
 * 第四层坑(nav-menu 独立块 + 用户把菜单放进栏目/群组后再犯):同一条 WP 编辑器
 * 内置规则会给 `.wp-block-columns`/`.wp-block-column`/`.wp-block-group` 的 wrapper
 * 注入 `position:relative`,面板绝对定位被拦在这些通用容器上,`width:90%` 变成相对
 * 一个窄"栏目"计算的百分比。**修复**:nav→nav-item 路径上所有已知容器块类型一律
 * 强制 static,面板直接穿透到 `.polaris-nav`(全幅容器)为基准。 */
.polaris-nav.is-editor .polaris-nav-menu,
.polaris-nav.is-editor .wp-block-columns,
.polaris-nav.is-editor .wp-block-column,
.polaris-nav.is-editor .wp-block-group,
.polaris-nav.is-editor .polaris-nav-item.is-panel-content,
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide,
.polaris-nav.is-editor .polaris-nav-item.is-panel-full {
	position: static !important;
}
.polaris-nav.is-editor .polaris-nav-item.is-panel-full > .polaris-nav-item__panel {
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	width: 100vw !important;
	max-width: none !important;
	transform: translateX( -50% ) translateY( -4px ) !important;
}
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide > .polaris-nav-item__panel {
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	width: calc( 100vw - 2rem ) !important;
	max-width: var( --wp--style--global--wide-size, 1400px ) !important;
	transform: translateX( -50% ) translateY( -4px ) !important;
}
.polaris-nav.is-editor .polaris-nav-item.is-panel-content > .polaris-nav-item__panel {
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	width: calc( 100vw - 2rem ) !important;
	max-width: var( --wp--style--global--content-size, 1200px ) !important;
	transform: translateX( -50% ) translateY( -4px ) !important;
}
/* 展开态:三档都用 left:50% + translateX(-50%) 居中,统一规则 */
.polaris-nav.is-editor .polaris-nav-item.is-panel-full.has-panel:hover > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-full.has-panel:focus-within > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-full.has-panel.is-open > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-full.has-panel.is-selected > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-full.has-panel:has( .is-selected ) > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide.has-panel:hover > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide.has-panel:focus-within > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide.has-panel.is-open > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide.has-panel.is-selected > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-wide.has-panel:has( .is-selected ) > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-content.has-panel:hover > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-content.has-panel:focus-within > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-content.has-panel.is-open > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-content.has-panel.is-selected > .polaris-nav-item__panel,
.polaris-nav.is-editor .polaris-nav-item.is-panel-content.has-panel:has( .is-selected ) > .polaris-nav-item__panel {
	transform: translateX( -50% ) translateY( 0 ) !important;
}

/* 收敛宽度:relative 基准是触发它的菜单项自己,按 data-panel-align 三态对齐 */
.polaris-nav-item.is-panel-contained > .polaris-nav-item__panel {
	max-width: var( --polaris-nav-panel-max-width, var( --wp--style--global--content-size, 1200px ) );
	width: max-content;
	transform: translateY( -4px );
}
.polaris-nav-item.is-panel-contained > .polaris-nav-item__panel[ data-panel-align="start" ] {
	left: 0;
}
.polaris-nav-item.is-panel-contained > .polaris-nav-item__panel[ data-panel-align="end" ] {
	right: 0;
}
.polaris-nav-item.is-panel-contained > .polaris-nav-item__panel[ data-panel-align="center" ] {
	left: 50%;
	transform: translateX( -50% ) translateY( -4px );
}

/*
 * 展开态取并集:纯 CSS :hover/:focus-within(零 JS 依赖的基线,面板嵌套在触发器
 * 内部,鼠标从标题移到面板内容全程都算悬停同一棵子树,天然不需要 JS)+ JS 的
 * is-open(宽限延时 + 相邻瞬切,锦上添花)。
 */
.polaris-nav-item.has-panel:hover > .polaris-nav-item__panel,
.polaris-nav-item.has-panel:focus-within > .polaris-nav-item__panel,
.polaris-nav-item.has-panel.is-open > .polaris-nav-item__panel,
.polaris-nav-item.has-panel.is-selected > .polaris-nav-item__panel,
.polaris-nav-item.has-panel:has( .is-selected ) > .polaris-nav-item__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY( 0 );
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
/*
 * 居中类目要保留 translateX(-50%),比上面的通用规则更具体(选择器权重更高),自动覆盖生效:
 *  - 收敛宽度 + 居中对齐(相对菜单项居中)
 *  - 内容宽度 / 宽幅(相对视口居中,position:fixed 的 left:50% 天然需要配 translateX(-50%))
 */
.polaris-nav-item.is-panel-contained.has-panel:hover > .polaris-nav-item__panel[ data-panel-align="center" ],
.polaris-nav-item.is-panel-contained.has-panel:focus-within > .polaris-nav-item__panel[ data-panel-align="center" ],
.polaris-nav-item.is-panel-contained.has-panel.is-open > .polaris-nav-item__panel[ data-panel-align="center" ],
.polaris-nav-item.is-panel-contained.has-panel.is-selected > .polaris-nav-item__panel[ data-panel-align="center" ],
.polaris-nav-item.is-panel-contained.has-panel:has( .is-selected ) > .polaris-nav-item__panel[ data-panel-align="center" ],
.polaris-nav-item.is-panel-content.has-panel:hover > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-content.has-panel:focus-within > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-content.has-panel.is-open > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-content.has-panel.is-selected > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-content.has-panel:has( .is-selected ) > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-wide.has-panel:hover > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-wide.has-panel:focus-within > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-wide.has-panel.is-open > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-wide.has-panel.is-selected > .polaris-nav-item__panel,
.polaris-nav-item.is-panel-wide.has-panel:has( .is-selected ) > .polaris-nav-item__panel {
	transform: translateX( -50% ) translateY( 0 );
}

/* ═══════════════════════════════════════════
   「导航」模式的多级下拉(menuMode = menu)
   —————————————————————————————————————————
   和上面的巨幕面板是两套并行的下拉形态,共用触发器(.polaris-nav-item__link)和
   同一套展开时机(:hover / :focus-within / .is-open 取并集),但定位方式完全不同:
   巨幕要"比导航条还宽"所以用 position:fixed + JS 量 top;这里是贴着菜单项的窄下拉,
   position:absolute 就够,没有 fixed 那套包含块/编辑器 iframe 的坑。

   所有外观都走 --polaris-nav-dd-* 变量,默认值直接取设计系统的 preset 色 —— 这个模式
   存在的意义就是"一项都不配也能直接看",不像巨幕那样要求先把背景/内边距/阴影配一遍。
═══════════════════════════════════════════ */
/*
 * 定位基准:和上面 `.polaris-nav-item.is-panel-contained` 完全同一个道理——`.polaris-nav-item`
 * 的基线是 static(编辑器画布里 WP 会给每个区块 wrapper 注入 relative,但前台没有,不能指望),
 * 不声明的话下拉的包含块会一路上溯到 `:where(.polaris-nav){position:relative}`,left:0 变成
 * "贴导航条左边缘"而不是"贴菜单项左边缘"。这个下拉永远贴着菜单项,所以无条件加在 has-menu 上;
 * 巨幕面板那几档不动(通栏/宽幅/内容宽度是故意要绕开就近定位祖先、直接定位到视口的)。
 */
.polaris-nav-item.has-menu {
	position: relative;
}

.polaris-nav-item__menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( -4px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;

	--polaris-nav-dd-bg: var( --wp--preset--color--base, #ffffff );
	--polaris-nav-dd-color: var( --wp--preset--color--ink-85, #1f2328 );
	--polaris-nav-dd-hover-bg: var( --wp--preset--color--primary, #c8102e );
	--polaris-nav-dd-hover-color: var( --wp--preset--color--base, #ffffff );
	--polaris-nav-dd-min-width: 12rem;
	--polaris-nav-dd-border: var( --wp--preset--color--ink-15, rgba( 0, 0, 0, 0.1 ) );
}

/* 展开态:和巨幕面板同一套并集(纯 CSS 基线 + view.js 的 is-open 宽限延时;
   编辑器画布里额外认 is-selected,方便选中菜单项时直接看到下拉)。 */
.polaris-nav-item.has-menu:hover > .polaris-nav-item__menu,
.polaris-nav-item.has-menu:focus-within > .polaris-nav-item__menu,
.polaris-nav-item.has-menu.is-open > .polaris-nav-item__menu,
.polaris-nav-item.has-menu.is-selected > .polaris-nav-item__menu,
.polaris-nav-item.has-menu:has( .is-selected ) > .polaris-nav-item__menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY( 0 );
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
/* 触发器下划线指示条:has-panel 已有同款规则,has-menu 补一份对应的。 */
.polaris-nav-item.has-menu.is-open > .polaris-nav-item__link::after,
.polaris-nav-item.has-menu:focus-within > .polaris-nav-item__link::after {
	transform: scaleX( 1 );
}
/* 相邻菜单项瞬切时临时关掉过渡(view.js 加/删这个类)。 */
.polaris-nav-item__menu.no-transition {
	transition: none !important;
}

/* ——— 列表本身 ——— */
.polaris-nav-dd {
	list-style: none;
	margin: 0;
	/* 容器内边距:每一级下拉都吃同一组变量(变量定义在 .polaris-nav-item__menu 上,
	   继承下来),留空即 0 —— 和原来写死的 padding:0 完全一致,不改老页面的观感。 */
	padding:
		var( --polaris-nav-dd-pad-top, 0 )
		var( --polaris-nav-dd-pad-right, 0 )
		var( --polaris-nav-dd-pad-bottom, 0 )
		var( --polaris-nav-dd-pad-left, 0 );
	min-width: var( --polaris-nav-dd-min-width );
	/*
	 * 宽度按内容自适应,上限可配(留空 = 不限)。max-content 的含义是"不折行时需要的宽度",
	 * 所以没有上限时文字永远排成一行、和写死 white-space:nowrap 的效果一致;一旦给了
	 * max-width,盒子被压窄,文字才开始折行——「文字省略行数」正是在这个前提下才有意义。
	 */
	width: max-content;
	max-width: var( --polaris-nav-dd-max-width, none );
	background: var( --polaris-nav-dd-bg );
	box-shadow: var( --polaris-nav-panel-shadow, 0 12px 32px rgba( 0, 0, 0, 0.12 ) );
	box-sizing: border-box;
	border-radius:
		var( --polaris-nav-dd-radius-tl, 0 )
		var( --polaris-nav-dd-radius-tr, 0 )
		var( --polaris-nav-dd-radius-br, 0 )
		var( --polaris-nav-dd-radius-bl, 0 );
}

.polaris-nav-dd__item {
	position: relative; /* 二级往右飞出 + 分隔线伪元素的定位基准 */
	margin: 0;
}

/*
 * 分隔线:默认开(截图那种一条条分明的下拉),最后一项不画,避免和面板底边重线。
 *
 * 用绝对定位的伪元素而不是 border-top —— border 没有自己的外边距,做不到"线两端相对
 * 下拉宽度缩进"这种要求。上下留白则必须真的占布局空间(否则两个选项还是贴在一起),
 * 所以由选项自己的 margin-top 撑开"上+下"之和,线再用负 top 挪回这段空隙的中间位置:
 * 线到上一个选项的距离 = mt,到下一个选项的距离 = mb。四项全留空时 margin 是 0、
 * 线落在 top:0,和 1.19.0 的 border-top 像素级一致。
 *
 * z-index 是必须的:伪元素挂在选项上,而选项的悬停底色画在子元素 __link 上(子元素比
 * 父元素的 ::before 后绘制),不抬一层的话悬停时这条线会被红底盖掉——border 时代
 * 没这个问题,因为 border 画在选项自己的边框盒上,子元素的背景盖不到那里。
 */
.polaris-nav-item__menu.is-divided .polaris-nav-dd__item + .polaris-nav-dd__item {
	margin-top: calc( var( --polaris-nav-dd-divider-mt, 0px ) + var( --polaris-nav-dd-divider-mb, 0px ) );
}
.polaris-nav-item__menu.is-divided .polaris-nav-dd__item + .polaris-nav-dd__item::before {
	content: "";
	position: absolute;
	top: calc( -1 * var( --polaris-nav-dd-divider-mb, 0px ) );
	left: var( --polaris-nav-dd-divider-ml, 0px );
	right: var( --polaris-nav-dd-divider-mr, 0px );
	height: 1px;
	background: var( --polaris-nav-dd-border );
	pointer-events: none;
	z-index: 1;
}

.polaris-nav-dd__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	/* 选项内边距:同上,留空即这里的默认值(0.75rem / 1.25rem)。 */
	padding:
		var( --polaris-nav-dd-item-pad-top, 0.75rem )
		var( --polaris-nav-dd-item-pad-right, 1.25rem )
		var( --polaris-nav-dd-item-pad-bottom, 0.75rem )
		var( --polaris-nav-dd-item-pad-left, 1.25rem );
	/* 选项圆角:悬停底色画在这个元素上,所以圆角也加在这里(不是加在 <li> 上)。 */
	border-radius:
		var( --polaris-nav-dd-item-radius-tl, 0 )
		var( --polaris-nav-dd-item-radius-tr, 0 )
		var( --polaris-nav-dd-item-radius-br, 0 )
		var( --polaris-nav-dd-item-radius-bl, 0 );
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	line-height: 1.4;
	text-align: left;
	text-decoration: inherit;
	/* 这里不写 white-space:nowrap:上面 .polaris-nav-dd 的 width:max-content 已经保证了
	   不设宽度上限时文字排成一行,写死 nowrap 反而会让「下拉最大宽度」压不住长标题
	   (盒子收窄了、文字却照样溢出去)。 */
	color: var( --polaris-nav-dd-color );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
/*
 * 首/末选项自动跟随容器圆角。不这么做的话,菜单内边距为 0 时(默认)选项的悬停底色是
 * 直角,会从容器的圆角处溢出一个小三角。不能用 `overflow:hidden` 一刀切——二级菜单是
 * 定位到容器外面的飞出层,裁切掉就整个看不见了。
 * 选项自己设了圆角时以选项的为准(var() 的第一参数),没设才回退到容器圆角。
 */
.polaris-nav-dd__item:first-child > .polaris-nav-dd__link {
	border-top-left-radius: var( --polaris-nav-dd-item-radius-tl, var( --polaris-nav-dd-radius-tl, 0 ) );
	border-top-right-radius: var( --polaris-nav-dd-item-radius-tr, var( --polaris-nav-dd-radius-tr, 0 ) );
}
.polaris-nav-dd__item:last-child > .polaris-nav-dd__link {
	border-bottom-right-radius: var( --polaris-nav-dd-item-radius-br, var( --polaris-nav-dd-radius-br, 0 ) );
	border-bottom-left-radius: var( --polaris-nav-dd-item-radius-bl, var( --polaris-nav-dd-radius-bl, 0 ) );
}

/*
 * 悬停/聚焦高亮。有下级的项在"子级树里有任何东西被悬停/聚焦"时也要保持高亮
 * (截图里 Excavators 是红底的同时它的子面板开着),所以除了自身 :hover 还要认
 * 父 li 的 :hover —— 但只能认**直接子级**那条 `>`,否则三级悬停会把整条祖先链
 * 全部点亮成一片红。
 */
.polaris-nav-dd__link:hover,
.polaris-nav-dd__link:focus-visible,
.polaris-nav-dd__item:hover > .polaris-nav-dd__link,
.polaris-nav-dd__item:focus-within > .polaris-nav-dd__link {
	background: var( --polaris-nav-dd-hover-bg );
	color: var( --polaris-nav-dd-hover-color );
}
/* 透明导航态不会污染这里的链接色:文件上方那条 is-nav-transparent 的规则已经用 :not()
   把 .polaris-nav-item__menu 内的 <a> 排除在源头(和巨幕面板同一处理,别在这里反向覆盖)。 */

/* 文字部分吃掉剩余宽度并允许被压窄:不给 min-width:0,flex 子项的最小尺寸是它的
   内容宽度,长标题会把整行顶破,max-width 形同虚设。 */
.polaris-nav-dd__label {
	min-width: 0;
}
/*
 * 文字省略行数(is-clamped + --polaris-nav-dd-item-clamp,见 render.php)。
 * -webkit-box + -webkit-line-clamp 是目前唯一跨浏览器可用的多行省略方案(标准的
 * `line-clamp` 尚未普及),它需要三条声明凑齐才生效,所以整组挂在 class 上开关,
 * 而不是单靠一个变量——变量没定义时 `-webkit-line-clamp` 那条会作废,但 `display`
 * 那条照样生效,布局会莫名其妙变样。
 */
.polaris-nav-item__menu.is-clamped .polaris-nav-dd__label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --polaris-nav-dd-item-clamp, 1 );
	line-clamp: var( --polaris-nav-dd-item-clamp, 1 );
	overflow: hidden;
}

.polaris-nav-dd__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	opacity: 0.6;
	transform: rotate(-90deg);
	transform-origin: center center;
	transition: opacity 0.15s ease, transform 0.2s ease;
}
.polaris-nav-dd__item:hover > .polaris-nav-dd__link .polaris-nav-dd__arrow,
.polaris-nav-dd__item:focus-within > .polaris-nav-dd__link .polaris-nav-dd__arrow {
	opacity: 1;
}
/* 贴近右边缘向左展开或 RTL 模式时,箭头翻转为向左 */
.polaris-nav-dd__item.is-flipped > .polaris-nav-dd__link .polaris-nav-dd__arrow,
.polaris-nav[dir="rtl"] .polaris-nav-dd__arrow {
	transform: rotate(90deg);
}
.polaris-nav[dir="rtl"] .polaris-nav-dd__item.is-flipped > .polaris-nav-dd__link .polaris-nav-dd__arrow {
	transform: rotate(-90deg);
}
/* core/page-list 在编辑器里不展开,给一行说明占位(见 edit.js 的 menuBlocksToTree)。 */
.polaris-nav-dd__item.is-note > .polaris-nav-dd__link {
	color: var( --wp--preset--color--ink-45, rgba( 0, 0, 0, 0.55 ) );
	font-style: italic;
	cursor: default;
}

/* ——— 二级及以下:往右飞出 ——— */
/*
 * 子菜单偏移(--polaris-nav-dd-sub-offset):子菜单和父级选项之间的距离。
 * 0(默认)= 完全贴着;负数 = 叠在父级选项上;正数 = 留出间隔。翻转到左侧展开时
 * 用 right 而不是 left,同一个值天然镜像,不需要用户再配一遍。
 */
.polaris-nav-dd__sub {
	position: absolute;
	top: 0;
	left: calc( 100% + var( --polaris-nav-dd-sub-offset, 0px ) );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX( -4px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.polaris-nav-dd__item:hover > .polaris-nav-dd__sub,
.polaris-nav-dd__item:focus-within > .polaris-nav-dd__sub {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX( 0 );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
/* 贴近视口右边缘时改成往左飞出(view.js 量一次实际位置后加这个类)。 */
.polaris-nav-dd__item.is-flipped > .polaris-nav-dd__sub {
	left: auto;
	right: calc( 100% + var( --polaris-nav-dd-sub-offset, 0px ) );
	transform: translateX( 4px );
}

/*
 * 悬停桥接:偏移为正数时父级选项和子菜单之间是一段空白,鼠标横穿这段空白会同时移出
 * 两者,纯 CSS 的 :hover 立刻收起子菜单——表现就是"设了间隔以后二级菜单点不到"。
 * (顶层菜单项有 view.js 的 HIDE_DELAY 宽限延时兜底,但那只管第一级,更深的层级
 * 一直是纯 CSS。)这里在子菜单朝向父级的那一侧垫一块等宽的透明区域把空白填上:
 * 它在子菜单内部 → DOM 上仍属于父级 <li> 的子树 → 鼠标停在上面 :hover 不断。
 * 宽度取 max(偏移, 0):负数(叠在父级上)本来就没有空白,不需要桥。
 * 收起态的子菜单是 pointer-events:none,桥跟着失效,不会挡住底下的东西。
 */
.polaris-nav-dd__sub::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: max( var( --polaris-nav-dd-sub-offset, 0px ), 0px );
	left: calc( -1 * max( var( --polaris-nav-dd-sub-offset, 0px ), 0px ) );
}
.polaris-nav-dd__item.is-flipped > .polaris-nav-dd__sub::before {
	left: auto;
	right: calc( -1 * max( var( --polaris-nav-dd-sub-offset, 0px ), 0px ) );
}
.polaris-nav-dd__item.is-flipped:hover > .polaris-nav-dd__sub,
.polaris-nav-dd__item.is-flipped:focus-within > .polaris-nav-dd__sub {
	transform: translateX( 0 );
}

/* 一级下拉本身贴右:菜单项靠近导航条右端时(view.js 同样按实测位置加类)。 */
.polaris-nav-item__menu.is-flipped {
	left: auto;
	right: 0;
}

/* 编辑器画布:下拉只是静态预览(<span> 而非 <a>),不需要指针手势;
   其余定位/配色规则和前台完全共用,不另写一套。 */
.polaris-nav.is-editor .polaris-nav-dd__link {
	cursor: default;
}

/* ═══════════════════════════════════════════
   移动端抽屉(view.js 挂到 document.body 的独立节点,
   断点相关的显示/隐藏由 render.php 按 mobileBreakpoint 动态生成的内联 <style> 控制)
═══════════════════════════════════════════ */
.polaris-nav__drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: var( --polaris-nav-panel-bg, #fff );
	z-index: 10000;
	transform: translateX( 100% );
	transition: transform 0.35s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.polaris-nav__drawer.is-open {
	transform: translateX( 0 );
}
.admin-bar .polaris-nav__drawer {
	top: 32px;
	height: calc( 100% - 32px );
}
@media screen and ( max-width: 782px ) {
	.admin-bar .polaris-nav__drawer {
		top: 46px;
		height: calc( 100% - 46px );
	}
}

.polaris-nav__drawer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	height: 56px;
	flex: none;
	border-bottom: 1px solid var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
}
.polaris-nav__drawer-back {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	font-size: 16px;
	padding: 0;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 4px;
	visibility: hidden;
}
.polaris-nav__drawer.level-2 .polaris-nav__drawer-back {
	visibility: visible;
}
/* 「返回」「关闭」两个图标都是内置图标库(tab 区块 edit.js 里 ICON_SET 同一套 feather
   风格:viewBox 0 0 24 24、stroke=currentColor、stroke-width=2)里现成的 arrow-left/close
   SVG,view.js 直接内联对应的 <path>,不再手写 CSS 边框/旋转拼形状——同一套图标库出来
   的线条,粗细、圆角风格天然就是统一的,不需要再靠 border-width/transform 单独凑。 */
.polaris-nav__drawer-back-icon,
.polaris-nav__drawer-close-box {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
}
.polaris-nav__drawer-back-icon svg,
.polaris-nav__drawer-close-box svg {
	display: block;
	width: 100%;
	height: 100%;
}
.polaris-nav__drawer-back-label {
	display: block;
}
.polaris-nav__drawer-close {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	flex: none;
	color: inherit;
}

.polaris-nav__drawer-slider {
	flex: 1;
	display: flex;
	width: 200%;
	transform: translateX( 0 );
	transition: transform 0.3s ease;
	overflow: hidden;
}
.polaris-nav__drawer.level-2 .polaris-nav__drawer-slider {
	transform: translateX( -50% );
}
.polaris-nav__drawer-level {
	width: 50%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.polaris-nav__drawer-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	font-size: 18px;
	border-bottom: 1px solid var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.06 ) ) );
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.polaris-nav__drawer-arrow {
	font-size: 20px;
	opacity: 0.5;
}

/*
 * 「导航」模式在抽屉里的手风琴(view.js 的 buildMenuAccordion 生成)。
 * 和上面 has-panel 的二级滑动是两种形态并存:那边整块面板推到第二屏,这边一棵链接树
 * 原地缩进展开(理由见 view.js 里 buildMenuAccordion 的注释)。缩进量由 JS 按层级写
 * 内联 padding-left,这里不写死每一层的选择器——层数不封顶。
 */
.polaris-nav__drawer-item.is-sub {
	font-size: 16px;
	background: rgba( 0, 0, 0, 0.02 );
}
/* 文字部分吃满剩余宽度,点空白也能触发链接/展开,不必精准点中文字。 */
.polaris-nav__drawer-item-label {
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.polaris-nav__drawer-expand {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -10px -8px -10px 8px;
	padding: 0;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
}
.polaris-nav__drawer-expand-icon {
	display: inline-flex;
	transition: transform 0.2s ease;
}
.polaris-nav__drawer-expand-icon svg {
	width: 20px;
	height: 20px;
}
.polaris-nav__drawer-group.is-expanded > .polaris-nav__drawer-item > .polaris-nav__drawer-expand {
	opacity: 1;
}
.polaris-nav__drawer-group.is-expanded > .polaris-nav__drawer-item > .polaris-nav__drawer-expand .polaris-nav__drawer-expand-icon {
	transform: rotate( 180deg );
}

.polaris-nav__drawer-panel-host {
	padding: 0;
}

/* 克隆进抽屉的面板内容:去掉桌面态的绝对定位/宽度限制,回到纵向静态排版 */
.polaris-nav__drawer-panel {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
	max-width: none !important;
	width: auto !important;
	box-shadow: none !important;
	display: block !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
}

/* ═══════════════════════════════════════════
   编辑器辅助：面板内边距控件(对齐 tabs 交互)
═══════════════════════════════════════════ */
.polaris-pad-control {
	margin-bottom: 16px;
}
.polaris-pad-control__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.polaris-pad-control__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}
.polaris-pad-control__actions .components-button svg {
	fill: none !important;
	stroke: currentColor;
}
.polaris-pad-control__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: #1e1e1e;
}
.polaris-pad-control__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* ═══════════════════════════════════════════
   编辑器 Inspector:「基础设置」三个子组件按钮(菜单/折叠菜单/Logo,见 edit.js 的
   subBlockButton)——grid 三等分宽度,行内最高的按钮撑开高度、其余自动跟着等高
   (grid 每行统一 row 高度,不用像 flex 那样另外声明 align-items:stretch)。
   图标在上,动词/名词各占一行,避免整句拼成一行在面板变窄时溢出容器。
═══════════════════════════════════════════ */
.polaris-nav-subblock-row {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	margin-bottom: 16px;
}
.polaris-nav-subblock-btn.components-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	min-height: 64px;
	padding: 8px 4px;
	white-space: normal;
}
.polaris-nav-subblock-btn__icon {
	display: flex;
	flex: none;
	width: 18px;
	height: 18px;
}
.polaris-nav-subblock-btn__icon svg {
	width: 100%;
	height: 100%;
	/* 覆盖原生 .components-button svg 的 fill:currentColor——不然带闭合图形
	   (rect/circle)的图标会被实心填充盖成一个色块,只有纯线条图标(hamburger
	   的三条 line)因为没有可填充面积才幸免。 */
	fill: none !important;
	stroke: currentColor;
}
.polaris-nav-subblock-btn__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.3;
	font-size: 12px;
}
.polaris-nav-subblock-btn__verb,
.polaris-nav-subblock-btn__noun {
	display: block;
}

/* ═══════════════════════════════════════════
   编辑器 Inspector:一行式颜色控件(colorField,见 edit.js)——外观照抄原生「样式」
   tab「颜色」面板里的行(色块+label 整行都是同一个按钮,不是色块单独一个小圆按钮)
═══════════════════════════════════════════ */
.polaris-nav-color-row {
	display: block;
	margin-bottom: 8px;
}
.polaris-nav-color-row__toggle.components-button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: auto;
	padding: 6px 8px;
	border-radius: 2px;
	justify-content: flex-start;
}
.polaris-nav-color-row__toggle.components-button:hover,
.polaris-nav-color-row__toggle.components-button:focus {
	background: #f0f0f0;
}
.polaris-nav-color-row__label {
	font-size: 13px;
	font-weight: 400;
	color: #1e1e1e;
}
.polaris-nav-color-row__swatch {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	/* 未设置颜色时用棋盘格底纹表示"透明/默认",和原生 ColorIndicator 的空态一致 */
	background-image: conic-gradient( #ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0 );
	background-size: 8px 8px;
}
.polaris-nav-color-row__popover {
	padding: 16px;
	min-width: 260px;
}

/* ═══════════════════════════════════════════
   编辑器 Inspector:Logo 子组件(polaris/nav-logo,见 nav-logo/edit.js)的两张图片字段
═══════════════════════════════════════════ */
.polaris-nav-logo-field {
	margin-bottom: 16px;
}
.polaris-nav-logo-field__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: #1e1e1e;
	margin: 0 0 8px;
}
.polaris-nav-logo-field__preview {
	margin-bottom: 8px;
	padding: 8px;
	background: repeating-conic-gradient( #ccc 0 25%, #fff 0 50% ) 0 0 / 16px 16px;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 2px;
}
.polaris-nav-logo-field__preview img {
	display: block;
	max-width: 100%;
	max-height: 80px;
	margin: 0 auto;
}
.polaris-nav-logo-field__button {
	margin-right: 8px;
}

/* ═══════════════════════════════════════════
   编辑器 Inspector:菜单项 / Logo 的「跳转至」字段(polaris/nav-item & polaris/nav-logo)
   —— 只读输入框(点击打开链接面板)+ 移除按钮。输入框外观走原生
   .components-text-control__input,这里只补一行式布局和字段间距。
═══════════════════════════════════════════ */
.polaris-nav-item__link-field {
	margin-bottom: 16px;
}
.polaris-nav-item__link-row {
	display: flex;
	align-items: center;
	gap: 4px;
}
.polaris-nav-item__link-input.components-text-control__input {
	flex: 1;
	min-width: 0;
	/* 只读但可点:光标提示这是个触发器,不是能直接敲字的框 */
	cursor: pointer;
}
.polaris-nav-item__link-clear.components-button {
	flex-shrink: 0;
}

/* 字段底部间距。原生控件传了 __nextHasNoMarginBottom(新行为,自身不带外边距)之后
   需要外面补一层,否则和下一个控件贴在一起。 */
.polaris-nav-item__field,
.polaris-nav-item__menu-field,
.polaris-nav-page-picker-field,
.polaris-nav-templates-field {
	margin-bottom: 20px;
}
.polaris-nav-page-picker-field .components-form-token-field__help {
	display: none;
}
.polaris-nav-template-list {
	margin-top: 8px;
	padding-left: 2px;
}
.polaris-nav-template-list .components-checkbox-control {
	margin-bottom: 10px;
}
.polaris-nav-template-list .components-checkbox-control:last-child {
	margin-bottom: 0;
}
.polaris-nav-item__menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
/* VisualLabel 自带的下外边距在这一行里是多余的(间距由 __menu-head 统一给)。 */
.polaris-nav-item__menu-head .components-base-control__label {
	margin-bottom: 0;
}
.polaris-nav-item__menu-edit.components-button {
	flex-shrink: 0;
	height: auto;
	padding: 0;
	font-size: 12px;
}
/* 两个单值控件并排一行(下拉最小宽度 / 子菜单偏移)。和 .polaris-pad-control__grid
   同一套两栏栅格,只是不限制高度——UnitControl 的标签在窄栏里会折行,压高度会被裁掉。 */
.polaris-nav-item__menu-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}
/* 栅格子项要能被压窄:UnitControl 内部的输入框有 min-width,不解开会把栏撑破。 */
.polaris-nav-item__menu-row > * {
	min-width: 0;
}

/* 禁用态的文字链接:原生 link variant 禁用后仍是主题色,容易看着像还能点。 */
.polaris-nav-item__menu-edit.components-button:disabled,
.polaris-nav-item__menu-edit.components-button[aria-disabled="true"] {
	color: #949494;
	text-decoration: none;
	cursor: default;
}