/**
 * DNCUT perf.css —— SEO / 性能 / UX 改造增量样式
 *
 * 加载顺序：theme.css → modules.css → perf.css（由 inc/setup.php enqueue）。
 * 只做「增量」与「WebP 替代」，不覆盖 theme.css 的既有排版规则。
 *
 * @package DNCUT
 */

/* ------------------------------------------------------------------
 * 1. WebP 背景图兜底
 *
 * theme.css 里 .cta-band / .page-head / .home-banner / .phero 仍是
 * PNG/JPG 背景（cta-bg.png 1.68MB、phero-bg.png 1.88MB、banner-nav.jpg 437KB）。
 * 同目录已生成同名 WebP；theme-core 会把 theme.css 里的 4 行换成 WebP，
 * 在这之前这里先覆盖生效（background-image 只换图层，不影响颜色/尺寸）。
 * ------------------------------------------------------------------ */
.cta-band {
	background-image: url('../images/cta-bg.webp');
}

.home-banner,
.page-head {
	/* 4000px 原图对 page-head 过宽，用 1920w 变体（44KB） */
	background-image: url('../images/banner-nav-1920.webp');
}

.phero {
	background-image: url('../images/phero-bg.webp');
}

/* ------------------------------------------------------------------
 * 2. FAQ 手风琴（产品详情页；无 JS，details/summary 原生可访问）
 * ------------------------------------------------------------------ */
.dn-faq {
	display: grid;
	gap: 10px;
	margin-top: 1.5rem;
}

.dn-faq__item {
	background: #fff;
	border: 1px solid rgba(14, 79, 159, 0.14);
	border-radius: 12px;
	overflow: hidden;
}

.dn-faq__item > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.dn-faq__item > summary::-webkit-details-marker {
	display: none;
}

.dn-faq__item > summary::after {
	content: '+';
	font-size: 1.25rem;
	line-height: 1;
	color: var(--c-primary);
}

.dn-faq__item[open] > summary::after {
	content: '−';
}

.dn-faq__item[open] > summary {
	border-bottom: 1px solid rgba(14, 79, 159, 0.1);
}

.dn-faq__a {
	padding: 14px 20px 18px;
	color: var(--c-text-3);
}

.dn-faq__a p {
	margin: 0 0 0.6em;
}

.dn-faq__a p:last-child {
	margin-bottom: 0;
}

/* FAQ 页短代码 [dncut_faq]（非折叠版）同样给卡片化间距 */
.dncut-faq {
	display: grid;
	gap: 10px;
}

.dncut-faq__item {
	background: #fff;
	border: 1px solid rgba(14, 79, 159, 0.14);
	border-radius: 12px;
	padding: 16px 20px;
}

.dncut-faq__q {
	margin: 0 0 8px;
	font-size: 1rem;
}

.dncut-faq__a {
	color: var(--c-text-3);
}

/* ------------------------------------------------------------------
 * 3. 首页信任条：可核验数字（链接到 /about/#cert）
 * ------------------------------------------------------------------ */
a.trust-item {
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.trust-item:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

a.trust-item:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

a.trust-item b {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * 4. Hero 行业词条（首屏补「给谁用」）
 * ------------------------------------------------------------------ */
.hero__inds {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.hero__inds li,
.hero__inds a {
	font-size: 0.8125rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 4px 10px;
	text-decoration: none;
}

.hero__inds a:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------
 * 5. 列表卡片 Get Quote 小按钮 / 材料筛选
 * ------------------------------------------------------------------ */
.btn--xs {
	padding: 6px 12px;
	font-size: 0.8125rem;
	line-height: 1.2;
	border-radius: 8px;
}

.card__foot--split .btn--xs {
	margin-left: auto;
}

.filter-row--materials {
	margin-top: 10px;
}

.filter-row--materials .filter-bar {
	flex-wrap: wrap;
}

.filter-row--materials .filter-label {
	font-size: 0.8125rem;
	color: var(--c-text-3);
	margin-right: 8px;
}

/* ------------------------------------------------------------------
 * 6. 产品参数 / 列表卡片图（WebP 后按比例缩放，避免 CLS）
 * ------------------------------------------------------------------ */
.sol-card__media img,
.industry-tile img,
.client-logo img {
	height: auto;
	max-width: 100%;
}