/* WordPress 适配层：抵消父级主题影响，使首页计算样式与静态基准稿一致。每条规则都由 _dev/脚本工具/elem-diff.js 实测得出。 */

body.sj { position: static; overflow: visible; }

.sj h1, .sj h2, .sj h3 { color: inherit; }

/* Astra 给 h1-h6 写了 font-weight:600，而各页静态稿的 h2/h3 靠的是浏览器默认加粗（700）。
   静态稿没写这条声明，所以补在适配层，各页正文 CSS 保持与基准稿逐字对应。
   2026-10-24 复测 solutions/products/applications/contact 时发现三页同样命中，一并覆盖。 */
.page-about h2, .page-about h3,
.page-solutions h2, .page-solutions h3,
.page-products h2, .page-products h3,
.page-applications h2, .page-applications h3,
.page-contact h2, .page-contact h3 { font-weight: 700; }

.sj button { box-shadow: none; }
.sj input, .sj textarea, .sj select { box-shadow: none; line-height: normal; height: auto; }

/* 2026-10-24 首页复测：Astra 动态按钮 CSS 借 body 的 woocommerce-js 类写成 .woocommerce-js a.button（0,2,1），
   WooCommerce 自己的 grid CSS 也有一条同名 position:relative。设计稿里这些值靠浏览器默认或继承
   （.button 不声明 background/position/line-height，p 的下边距走 UA 默认 1em，menu-toggle 走按钮 UA 内边距），
   被上面两条无争抢占据；按实测值在此压回，只动首页正文。 */
.sj .page-home a.button { position: static; line-height: inherit; }
.sj .page-home a.button:not(.button--primary) { background-color: transparent; }
.sj .page-home p { margin-bottom: 1em; }
.sj .menu-toggle { padding: 1px 6px; }

/* Astra 的 reset 把 ::before/::after 的 box-sizing 设成 inherit，伪元素跟着元素走 border-box；
   定稿没给伪元素写 box-sizing（浏览器默认 content-box），带 1px 边框的装饰圆因此整体大 2px
   （hero/purpose/value-proposition 三处，2026-10-24 逐元素实测）。显式压回 content-box。 */
.sj ::before, .sj ::after { box-sizing: content-box; }

/* About「我们的价值」官方口径为四条（供电连续性/连接可靠性/电能质量/系统集成），
   设计稿原则卡是三列；第 4 条加入后桌面端改四列保持一行（2026-10-25）。 */
@media (min-width: 761px) {
	.sj .page-about .principles { grid-template-columns: repeat(4, 1fr); }
}

/* 2026-10-25 用户裁定：全站页脚改用更新包子页设计的深色版（颜色口径：
   _dev/3js-website-pages/solutions.html 的 .footer 规则，映射到现有页脚结构）。
   深底上品牌 logo 垫白色圆角板（设计稿同款做法）。 */
.sj .site-footer { background: #062E25; color: var(--white); }
.sj .footer-brand img { background: var(--white); border-radius: 6px; padding: 6px; }
.sj .footer-brand span { color: #B7CBC1; }
.sj .footer-copy { color: #9BB6A8; }
.sj .footer-links a { color: #D7E5DD; }
.sj .footer-links a:hover { color: var(--white); }

/* 蜜罐字段（.jm-form__hp，插件定位在 -9999px 的 1px 裁剪区里）在静态稿中没有任何样式：
   label 继承正文 Typography（Inter 栈 / --ink / 16px-400-1.65），input 保持浏览器默认
   （Arial 13.3333px / 黑字 / 1px-2px 内边距 / 2px inset #767676 边框 / 无圆角）。
   Astra 与 WooCommerce 的输入框规则会渗到这里（label 被压成 14px-500-slate、input 被压成
   16px 系统字体 + 12/16 内边距 + 1px 圆角边框），按实测值压回，只作用于蜜罐、不碰可见字段。 */
.sj .jm-form__hp label {
	font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: normal;
	color: var(--ink);
}
.sj .jm-form__hp input {
	font-family: Arial;
	font-size: 13.3333px;
	font-weight: 400;
	letter-spacing: normal;
	color: #000;
	padding: 1px 2px;
	border: 2px inset #767676;
	border-radius: 0;
	width: auto;
	max-width: none;
}

body.admin-bar.sj .site-header { top: 32px; }

/* 2026-10-28 键盘焦点：Astra 的 reset 去掉了链接/按钮默认焦点圈（实测 outline: none）。
   浅色区域用深绿描边；深色页脚单独换白描边，避免看不见。 */
.sj a:focus-visible,
.sj button:focus-visible {
	outline: 2px solid var(--green-dark);
	outline-offset: 3px;
}
.sj .site-footer a:focus-visible {
	outline-color: var(--white);
}

/* 2026-10-28 首页需求：产品图 1:1 完整显示；hero 主标题单独降到 60px 上限。
   home.css 是 scope-css.py 的生成物（重跑会覆盖），所以覆盖写在这个手工适配层。 */
.sj .page-home .product-image-bg { aspect-ratio: 1 / 1; }
.sj .page-home .product-card:nth-child(3) .product-image-bg img { object-fit: contain; }
.sj .page-home .hero h1 { font-size: clamp(34px, 4.2vw, 60px); }

/* 2026-10-28 Astra/Woo 的 .button:hover 会把次级文字按钮压成白字 + 蓝边，
   而背景又被 .page-home 规则保持透明，结果 hover 时文字看不见。
   这里把 hover/focus 拉回设计稿：透明底、深绿字、透明边。 */
.sj a.button--text:hover,
.sj a.button--text:focus-visible {
	color: var(--green-dark);
	background-color: transparent;
	border-color: transparent;
}

/* Astra 的基础 .button 还给文字按钮带了一层 1px 阴影，静态稿里没有；
   顺手去掉，避免看起来像一圈淡淡的胶囊边框。 */
.sj a.button--text,
.sj a.button--text:hover,
.sj a.button--text:focus-visible {
	box-shadow: none;
}

/* 2026-10-28 About 核心价值：生成物 about.css 里的绿色圆点伪元素换成线性 SVG 图标
   （图标在 views/about-purpose.php，标记来自 sj_icon()）。 */
.sj .page-about .values .value:before { content: none; display: none; }
.sj .page-about .value .value-icon { display: block; width: 22px; height: 22px; margin: 0 auto 10px; color: var(--green); }

/* 2026-10-28 Solutions 页：生成物 solutions.css 的 .section-head 两栏规则原本只服务
   #solution-library（标题 + 搜索框），却误伤了上方 cards 段，把眉标/标题/导语排成三列。
   这里把非方案库段的 section-head 恢复为纵向堆叠。 */
.sj .page-solutions .section:not(#solution-library) .section-head {
	display: block;
	margin-bottom: 42px;
}

/* 方案库标题栏是“标题 + 搜索框”两栏，沿用 cards 段的 max-width:760px 会让搜索框
   停在中间，右侧留一大块空白；这里恢复整栏宽度。 */
.sj .page-solutions #solution-library .section-head {
	max-width: none;
}

/* 2026-10-28 Solutions 页平板档：三张卡在两列网格里会留一个孤儿，
   方案区“左标题 + 右卡片”在 768 也太挤。这里按断点改成三列 / 上下堆叠。 */
@media (min-width: 761px) and (max-width: 960px) {
	.sj .page-solutions .split { grid-template-columns: 1fr; gap: 30px; }
	.sj .page-solutions .grid3 > .card:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 9px); margin-inline: auto; }
}
@media (max-width: 760px) {
	.sj .page-solutions .solution-cards { grid-template-columns: 1fr; }
}

/* 2026-10-28 方案卡封面图：有缩略图的卡片用照片做底，叠一层深绿渐变保证大标题可读。 */
.sj .page-solutions .solution-card-art.has-image { background: #073D30; }
.sj .page-solutions .solution-card-art .solution-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sj .page-solutions .solution-card-art.has-image:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,46,37,.92) 0%, rgba(6,46,37,.55) 55%, rgba(6,46,37,.28) 100%); }
.sj .page-solutions .solution-card-art.has-image:after { z-index: 1; }
.sj .page-solutions .solution-card-art.has-image > span,
.sj .page-solutions .solution-card-art.has-image > b { position: relative; z-index: 2; }

/* 2026-10-28 Applications 页：六大应用领域卡的编号换成线性 SVG 图标。 */
.sj .page-applications .iconbox .card-icon { width: 24px; height: 24px; }