/**
 * 主题预设变量 + 工具类 —— 补 WordPress 核心「主题有 theme.json 才会自动生成」
 * 的那一层 CSS。
 *
 * 根因：这一批快照 HTML 是从参考站真实 Gutenberg 编辑器输出里原样复制的，
 * 里面大量用了 `has-secondary-color`、`has-huge-font-size`、
 * `has-harmonyos-sans-font-family` 这类 class——这些不是通用 WordPress 类，
 * 是参考站自己的 theme.json 定义了「secondary」「huge」「harmonyos-sans」
 * 这些具体名字之后，WordPress 才会连带生成对应的 `.has-xxx-color{color:...}`
 * 工具类。咱们这个主题是经典主题、没有 theme.json，这些名字在咱们站上根本
 * 不存在，所以这些 class 全部不生效——不是漏冻了某个具体样式，是漏了
 * "给这些名字下定义"这一整层，用到这些 class 的地方全部继承默认值（通常
 * 就是黑色文字、默认字号），跟参考站看起来"差很多"很大一部分原因在这。
 *
 * 数值来源：参考站首页 `global-styles-inline-css` 内联样式块原样摘录
 * （只留咱们快照里实际用到的那些 slug，没有照抄参考站整份默认调色板）。
 * 用到的 slug 清单靠这条命令核实过：
 *   grep -ohE "has-[a-z0-9-]+-color|has-[a-z0-9-]+-background-color|
 *   has-[a-z0-9-]+-font-size|has-[a-z0-9-]+-font-family" snapshots/*.html | sort -u
 */

/* HarmonyOS Sans 网页字体——全站 `font-family` 一直写的是这个名字，但从来没有
   `@font-face` 把它跟真实字体文件绑起来，浏览器找不到本机同名字体，一直在悄悄
   跳到 fallback 字体渲染（Windows 上落到微软雅黑/Segoe UI），字体名对了、实际
   渲染的字体是错的，人工看不出来——2026-08-29 用 tools/probe 逐属性比对页头
   页尾才挖出来。字重映射原样照抄参考站同名 @font-face 块（归档
   `wp-content/uploads/fonts/HarmonyOS_Sans_*.ttf`），文件搬到主题自己的
   assets/fonts/ 下。 */
@font-face {
	font-family: "HarmonyOS Sans";
	font-style: normal;
	font-weight: 250;
	font-display: fallback;
	src: url("../fonts/HarmonyOS_Sans_Thin.ttf") format("truetype");
}
@font-face {
	font-family: "HarmonyOS Sans";
	font-style: normal;
	font-weight: 300;
	font-display: fallback;
	src: url("../fonts/HarmonyOS_Sans_Light.ttf") format("truetype");
}
@font-face {
	font-family: "HarmonyOS Sans";
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url("../fonts/HarmonyOS_Sans_Regular.ttf") format("truetype");
}
@font-face {
	font-family: "HarmonyOS Sans";
	font-style: normal;
	font-weight: 500;
	font-display: fallback;
	src: url("../fonts/HarmonyOS_Sans_Medium.ttf") format("truetype");
}
@font-face {
	font-family: "HarmonyOS Sans";
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url("../fonts/HarmonyOS_Sans_Bold.ttf") format("truetype");
}
@font-face {
	font-family: "HarmonyOS Sans";
	font-style: normal;
	font-weight: 900;
	font-display: fallback;
	src: url("../fonts/HarmonyOS_Sans_Black.ttf") format("truetype");
}

/* is-layout-constrained / is-layout-flow「限最大宽度、左右自动留白」的默认
   行为，同样是靠 theme.json 里的 --wp--style--global--content-size 才会生成，
   咱们站上一样完全没有——这是首页/其他页面大片区块"左右挤满、没有留白"的
   共同根源，不是哪一个区块单独漏写了 padding。数值原样照抄参考站根变量。
   个别区块参考站本来就用更窄的专属宽度（比如首页快捷入口横条是 1100px，
   不是这里的默认 1500px），那种在各自页面的 CSS 里单独覆盖，不在这条改。 */
:root {
	--wp--style--global--content-size: 1500px;
	--wp--style--global--wide-size: 1800px;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

.is-layout-flow > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-flow > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* alignleft/alignright/aligncenter 在 constrained/flow 布局下的默认行为
   （`float` + 单侧 margin），同一批"theme.json 才会自动生成"的缺失层。
   2026-08-29 用 tools/probe --map 比对"关于我们"企业文化卡片才发现：卡片里
   标题和正文本来是 `alignleft` 浮动并排（title 用 margin-right 让正文紧跟在
   右边），我们这边完全没有对应 float 规则，两个 <p> 各自占满整行、纵向堆叠，
   数值原样照抄参考站根变量生成的规则。 */
.is-layout-constrained > .alignleft,
.is-layout-flow > .alignleft {
	float: left;
	margin-inline-start: 0;
	margin-inline-end: 2em;
}

.is-layout-constrained > .alignright,
.is-layout-flow > .alignright {
	float: right;
	margin-inline-start: 2em;
	margin-inline-end: 0;
}

.is-layout-constrained > .aligncenter,
.is-layout-flow > .aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 默认元素间距：同样只有 theme.json 才会生成，我们退到了核心更小的
   默认间距（约 8px），参考站实际是 20px（1.25rem），一起补上。 */
:root {
	--wp--custom--vertical-spacing: 1.25rem;
	--wp--style--block-gap: var(--wp--custom--vertical-spacing);
}

:root :where(.is-layout-flow) > :first-child { margin-block-start: 0; }
:root :where(.is-layout-flow) > :last-child { margin-block-end: 0; }
:root :where(.is-layout-flow) > * { margin-block-start: var(--wp--custom--vertical-spacing); margin-block-end: 0; }
:root :where(.is-layout-constrained) > :first-child { margin-block-start: 0; }
:root :where(.is-layout-constrained) > :last-child { margin-block-end: 0; }
:root :where(.is-layout-constrained) > * { margin-block-start: var(--wp--custom--vertical-spacing); margin-block-end: 0; }
:root :where(.is-layout-flex) { gap: var(--wp--custom--vertical-spacing); }
:root :where(.is-layout-grid) { gap: var(--wp--custom--vertical-spacing); }

:root {
	--wp--preset--color--base: #ffffff;
	--wp--preset--color--contrast: #000000;
	--wp--preset--color--primary: #1c1c1c;
	--wp--preset--color--secondary: #ea1823;
	--wp--preset--color--secondary-background: #ffffff;
	--wp--preset--color--custom-1-1-1: #3d3d3d;
	--wp--preset--color--custom-1-1-1-1: #dbd9d9;
	--wp--preset--color--vivid-red: #cf2e2e;

	--wp--preset--font-size--x-small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 1), 0.875rem);
	--wp--preset--font-size--small: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.086), 1.08rem);
	--wp--preset--font-size--normal: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.135), 1.125rem);
	--wp--preset--font-size--medium: clamp(1.3rem, 1.3rem + ((1vw - 0.2rem) * 0.216), 1.5rem);
	--wp--preset--font-size--large: clamp(1.3125rem, 1.313rem + ((1vw - 0.2rem) * 0.472), 1.75rem);
	--wp--preset--font-size--x-large: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 0.541), 2rem);
	--wp--preset--font-size--huge: clamp(2.1875rem, 2.188rem + ((1vw - 0.2rem) * 0.878), 3rem);

	--wp--preset--font-family--harmonyos-sans: "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--harmonyos-sans);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--harmonyos-sans);
}

/* 参考站 Global Styles 的"标题元素"（elements.heading）单独覆盖了一层，
   比上面这条 h1~h6 更具体（`:where()` 不增加选择器权重，但 `.wp-block-heading`
   这个类本身让匹配范围更窄，源码顺序也排在后面，两条一起让它赢）：字体换成
   "Changa One"、字重压到 400（不是浏览器默认的 700）。2026-08-29 用
   tools/probe --map 逐属性比对"关于我们"页发现的——参考站页面里根本没有这个
   字体的 @font-face/Google Fonts 引用，"Changa One" 从来没真正加载成功，
   浏览器会静默退回默认字体渲染；这不是我们要补一个字体文件，是要原样复刻
   参考站这条（大概率是它自己没配对的）全局样式，包括它引用了一个不存在
   字体这件事本身——两边用同一个浏览器兜底，视觉才能真正一致。 */
h1:where(.wp-block-heading),
h2:where(.wp-block-heading),
h3:where(.wp-block-heading),
h4:where(.wp-block-heading),
h5:where(.wp-block-heading),
h6:where(.wp-block-heading) {
	font-family: "Changa One";
	font-weight: 400;
}

/* 重置链接默认颜色/下划线——这条之前漏抄了。浏览器 UA 样式表会直接给
   <a> 上蓝色+下划线，且这条规则不受父级 has-base-color 这类颜色 class
   的继承影响（UA 样式对 a 元素是直接赋值，不是继承链），不专门覆盖的话，
   任何"整块可点击"的卡片/链接（比如首页快捷入口横条）里的文字都会露出
   默认蓝色下划线——参考站截图里红框标出来的那个问题就是这条。 */
a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* 按钮默认样式：没有内联 style 覆盖背景色的按钮（比如首页产品卡片的
   "查看更多"）全靠这条规则才会显示成红底白字，之前完全空着。 */
:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: var(--wp--preset--color--secondary);
	border-radius: 4px;
	border-width: 0;
	border-style: solid;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--harmonyos-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

:root :where(.wp-element-button:hover, .wp-block-button__link:hover),
:root :where(.wp-element-button:focus, .wp-block-button__link:focus),
:root :where(.wp-element-button:active, .wp-block-button__link:active) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-contrast-color { color: var(--wp--preset--color--contrast) !important; }
.has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
.has-vivid-red-color { color: var(--wp--preset--color--vivid-red) !important; }
.has-custom-1-1-1-color { color: var(--wp--preset--color--custom-1-1-1) !important; }
/* 参考站这个 slug 名字本身叫「secondary-background」，跟「secondary 的背景色
   工具类」重名，两条规则都要——一条管文字色，一条管背景色，同时生效 */
.has-secondary-background-color { color: var(--wp--preset--color--secondary-background) !important; }

.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-secondary-background-color { background-color: var(--wp--preset--color--secondary) !important; }
.has-vivid-red-background-color { background-color: var(--wp--preset--color--vivid-red) !important; }
.has-custom-1-1-1-1-background-color { background-color: var(--wp--preset--color--custom-1-1-1-1) !important; }

.has-secondary-border-color { border-color: var(--wp--preset--color--secondary) !important; }

.has-x-small-font-size { font-size: var(--wp--preset--font-size--x-small) !important; }
.has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; }
.has-normal-font-size { font-size: var(--wp--preset--font-size--normal) !important; }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; }
.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; }
.has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; }
.has-huge-font-size { font-size: var(--wp--preset--font-size--huge) !important; }

.has-harmonyos-sans-font-family { font-family: var(--wp--preset--font-family--harmonyos-sans) !important; }

/* 分割线默认样式：跟前面 has-*-color 一样，是「主题有 theme.json 才自动生成」
   的那层，规则原样照抄参考站，覆盖 is-style-default / 没写 style 变体 /
   is-style-wide 三种全站都在用的组合（core-block-supports 之外，`grep -r
   "wp-block-separator" snapshots themes` 核实过用到的组合）。 */
.wp-block-separator {
	border: none;
	border-bottom: 2px solid;
	margin-left: auto;
	margin-right: auto;
	flex-shrink: 0;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 100px;
}

.wp-block-separator.has-background:not(.is-style-dots) {
	border-bottom: none;
	height: 1px;
}

.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
	height: 2px;
}