/* ===========================================================================
   页脚 v2 —— 四栏结构 + 微信二维码 + 底部信息条
   由 mu-plugins/ap-footer-v2.php 加载。类名统一前缀 .apf
   颜色一律走 tokens.css 里的 --steel-* / --on-steel-*（深底专用色），
   与 front.css 的页脚变量保持一致。
   =========================================================================== */

footer.wp-block-template-part.apf {
	background: var(--steel-900);
	color: var(--on-steel-2);
	margin-top: var(--section-y);
	padding-block: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 首页：询价区也是深底，两个深色块之间不该夹一条白带 */
body.home footer.wp-block-template-part.apf {
	margin-top: 0;
}

.apf__inner {
	max-width: 1200px; /* 与首页 dk2-container 同宽，页脚左右边缘和正文对得上 */
	margin-inline: auto;
	padding: 52px var(--gutter) 0;
}

/* --- 四栏 ---------------------------------------------------------------- */
.apf__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.25fr);
	gap: 40px 36px;
	align-items: start;
}

/* --- 品牌栏 -------------------------------------------------------------- */
.apf__logo {
	display: inline-block;
	font-family: var(--font-cond);
	font-size: 22px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: #fff;
	text-decoration: none;
}
.apf__logo span {
	color: var(--on-steel-3);
	font-weight: var(--fw-semibold);
}
.apf__logo:hover,
.apf__logo:focus-visible {
	color: #fff;
	text-decoration: none;
	opacity: 0.85;
}

.apf__tag {
	margin: 14px 0 0;
	max-width: 34ch;
	font-size: var(--fs-sm);
	line-height: 1.75;
	color: var(--on-steel-2);
}

.apf__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.apf__facts li {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.apf__facts b {
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: var(--fw-semibold);
	color: #fff;
	line-height: 1;
}
.apf__facts span {
	font-size: var(--fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--on-steel-3);
}

.apf__reg {
	margin: 22px 0 0;
	font-size: var(--fs-2xs);
	line-height: 1.7;
	color: var(--on-steel-3);
}

/* --- 导航栏 -------------------------------------------------------------- */
.apf__h {
	position: relative;
	margin: 0 0 16px;
	padding-top: 12px;
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-steel-3);
}
/* 小段红线：和首页各区块的 eyebrow 同一套语言 */
.apf__h::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 18px;
	height: 2px;
	background: #b82332;
}
/* 中文标题用大写字母间距会散架，单独收敛 */
html[lang^="zh"] .apf__h {
	font-size: 13px;
	letter-spacing: 0.04em;
}

.apf__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}
.apf__links a {
	display: inline-block;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--on-steel-2);
	text-decoration: none;
	transition: color 0.15s var(--ease);
}
.apf__links a:hover,
.apf__links a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 联系栏 -------------------------------------------------------------- */
.apf__contact {
	display: grid;
	gap: 12px;
	justify-items: start;
}
.apf__crow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--on-steel-2);
	text-decoration: none;
}
.apf__crow svg {
	flex: none;
	color: var(--on-steel-3);
}
.apf__crow:hover,
.apf__crow:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.apf__crow .mono {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.01em;
}

/* 微信二维码卡片：白底托住二维码，竖排 —— 横排在中文/西语下都会把说明挤成两行 */
.apf__qr {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	padding: 10px 10px 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-2);
	background: #fff;
	color: var(--ink);
	font: inherit;
	text-align: center;
	cursor: zoom-in;
	transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.apf__qr:hover,
.apf__qr:focus-visible {
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.apf__qr img {
	display: block;
	width: 96px;
	height: 96px;
	/* ★ 不要加 image-rendering: -webkit-optimize-contrast：
	   实测（无头 Chromium）这个属性会让图片整块渲染成空白。
	   二维码用浏览器默认的平滑缩放反而更好扫。 */
}
.apf__qr-t {
	font-size: var(--fs-2xs);
	line-height: 1.45;
	color: var(--ink-3);
}
.apf__qr-t b {
	display: block;
	margin-bottom: 1px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--ink);
	letter-spacing: 0.02em;
}

/* --- 底部信息条 ---------------------------------------------------------- */
.apf__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 44px;
	padding-block: 18px 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--fs-2xs);
	color: var(--on-steel-3);
}
.apf__meta p {
	margin: 0;
}
.apf__meta a {
	color: var(--on-steel-3);
	text-decoration: none;
}
.apf__meta a:hover,
.apf__meta a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.apf__meta-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}
.apf__sep {
	color: rgba(255, 255, 255, 0.18);
}
.apf__meta-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.apf__lang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}
.apf__lang-label {
	font-size: var(--fs-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-steel-3);
}
.apf__lang a {
	color: var(--on-steel-2);
	font-size: var(--fs-2xs);
}
.apf__lang a[aria-current="true"] {
	color: #fff;
	font-weight: var(--fw-semibold);
}

/* 首页询价区里的「微信」按钮：是 <button>，要补上按钮元素默认没有的两条 */
.dk2-btn--qr {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* --- 二维码弹层 ---------------------------------------------------------- */.apf-qr-dialog {
	width: min(92vw, 380px);
	max-height: 90vh;
	overflow: auto;
	padding: 0;
	border: 0;
	border-radius: var(--r-3);
	background: #fff;
	color: var(--ink);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.apf-qr-dialog::backdrop {
	background: rgba(6, 12, 16, 0.66);
}
.apf-qr-dialog__in {
	padding: 22px 22px 18px;
	text-align: center;
}
/* ★ front.css 里有 footer h2 { color:#fff }，弹层在页脚里，
   标题会变成白字白底。这里用两个类把它压回来。 */
.apf-qr-dialog .apf-qr-dialog__t {
	margin: 0 0 4px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--ink);
}
.apf-qr-dialog__sub {
	margin: 0 0 14px;
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.apf-qr-dialog img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 58vh;
	object-fit: contain;
	border: 1px solid var(--line);
	border-radius: var(--r-2);
}
.apf-qr-dialog__phone {
	margin: 14px 0 0;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--ink);
}
.apf-qr-dialog__close {
	margin-top: 16px;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-2);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-ui);
	cursor: pointer;
}
.apf-qr-dialog__close:hover {
	background: var(--surface-2);
}

/* --- 响应式 -------------------------------------------------------------- */
@media (max-width: 1024px) {
	.apf__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 34px 28px;
	}
	.apf__brand {
		grid-column: 1 / -1;
	}
	.apf__reg {
		margin-top: 14px;
	}
}

@media (max-width: 640px) {
	.apf__inner {
		padding-top: 40px;
	}
	/* 手机端：产品 / 公司两栏并排，品牌与联系各占整行 ——
	   四栏全竖排在 390px 下会把页脚拉到 1100px 高，太长了。 */
	.apf__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 26px 20px;
	}
	.apf__brand,
	.apf__contactcol {
		grid-column: 1 / -1;
	}
	.apf__facts {
		gap: 8px 20px;
	}
	.apf__meta {
		margin-top: 30px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.apf__qr img {
		width: 104px;
		height: 104px;
	}
}

/* RTL：只补「图标与文字之间」这类 flex 方向问题，布局本身用逻辑属性已自动镜像 */
[dir="rtl"] .apf__crow svg,
[dir="rtl"] .apf__qr img {
	transform: scaleX(1);
}

@media print {
	.apf__qr,
	.apf-qr-dialog,
	.apf__lang {
		display: none !important;
	}
	footer.wp-block-template-part.apf {
		background: transparent !important;
		color: #000 !important;
		border-top: 1px solid #999;
	}
	.apf__logo,
	.apf__tag,
	.apf__facts b,
	.apf__facts span,
	.apf__links a,
	.apf__crow,
	.apf__meta,
	.apf__meta a,
	.apf__reg,
	.apf__h {
		color: #000 !important;
	}
}