/* === footer === */
/* 可调节变量集中在这里：改这些值即可调整联系我们列宽度、列间距。
   footer-top 和 footer-nav-columns 共用同一个右列宽度，
   使 logo/社交图标行与导航/联系我们行自动对齐，无需 JS。 */
.site-footer {
	--footer-contact-width: 520px;
	--footer-nav-gap: 28px;
	background: #004F2C !important;
	padding: 28px 48px 36px;
	margin-left: 30px !important;
	/* Footer 上方的空白区域：页脚矩形与上方正文的间距，调大该值即加大矩形上方的留白 */
	margin-top: 48px;
	border-radius: 12px;
	box-shadow: 4px 4px 12px rgba(0,0,0,0.1);
}
/* footer 容器已与正文等宽；但其内部子 group 会被 WP 的 constrained 布局
   限宽并居中，导致 logo 在宽屏下内缩"偏右"。强制内部子 group 撑满容器，
   logo 回到左边缘、social 到右边缘，与正文/导航列对齐。 */
.site-footer > .wp-block-group {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------- footer-top: Logo (左) + Social (右) ---------- */
/* 与下方 footer-nav-columns 共用同一个两列 grid 模板（左自适应 + 右固定宽），
   让 logo 与导航区对齐、social 与联系我们列对齐，无需 JS 计算 */
.footer-top,
.wp-block-group.footer-top {
	display: grid !important;
	grid-template-columns: 1fr var(--footer-contact-width) !important;
	/* gap 必须与下方 .footer-nav-columns 一致（都为 0），两行的第一列宽度才会精确相等，
	   从而让 social 图标与下方竖线/CONTACT US 左缘自然对齐，无需额外边距或 JS。 */
	column-gap: 0 !important;
	align-items: center !important;
	margin-bottom: -15px !important;
	padding-top: 25px !important;
}

.footer-logo,
.wp-block-group.footer-logo {
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 271px !important;
}
.footer-logo figure,
.footer-logo .footer-logo-img {
	margin: 0 !important;
	margin-inline: 0 !important;
	text-align: left !important;
	display: block !important;
	width: 271px !important;
	max-width: 271px !important;
}
.footer-logo img,
.footer-logo .footer-logo-img img {
	display: block !important;
	margin: 0 !important;
	width: 271px !important;
	max-width: 271px !important;
	height: auto !important;
	filter: brightness(1);
}

.footer-social {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-self: start;
	padding-left: 80px;
}
.footer-social figure,
.footer-social .footer-social-icon {
	margin: 0;
}
.footer-social img,
.footer-social .footer-social-icon img {
	object-fit: contain;
}

/* ---------- 分隔线 ---------- */
.footer-sep,
.wp-block-separator.footer-sep {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: 0 !important;
	border: 0 !important;
	border-top: 1px solid #7A6742 !important;
	background: transparent !important;
	margin: 28px 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
}
.site-footer > hr.footer-sep:first-of-type {
	margin-top: 43px !important;
}

/* ---------- footer-nav-columns: 导航主体 (左导航 自适应 + 右联系我们 固定宽) ----------
   与 footer-top 共用同一个右列宽度变量，保证上下两行对齐。 */
.footer-nav-columns,
.wp-block-group.footer-nav-columns {
	display: grid !important;
	grid-template-columns: 1fr var(--footer-contact-width) !important;
	gap: 0 !important;
	column-gap: 0 !important;
	align-items: stretch !important;
	position: relative !important;
	width: 100% !important;
}

/* ---------- 左侧 5 列导航 ----------
   用 flex-wrap 代替 grid max-content：列不会被压缩到 0 宽（不会崩成竖排单字），
   空间不够时列会自然换行，而不是被挤压。 */
.footer-nav-wrap,
.wp-block-group.footer-nav-wrap {
	display: flex !important;
	/* 允许换行而非 nowrap：窄屏（如 14 寸笔记本）下空间不足时，
	   列会自然折行，而不是被挤压到与右侧联系我们列重叠。 */
	flex-wrap: wrap !important;
	column-gap: var(--footer-nav-gap) !important;
	row-gap: 24px !important;
	align-items: flex-start !important;
	width: auto !important;
	margin-top: 28px !important;
	margin-bottom: 28px !important;
	margin-left: 10px !important;
	min-width: 0 !important;
}

.footer-nav-col,
.wp-block-group.footer-nav-col {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	flex: 0 1 auto !important;
	min-width: 84px !important;
	padding-right: 0 !important;
}
.footer-nav-col h4 {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #D2B67F;
	margin: 0 0 12px !important;
	padding: 0;
	border: none;
	text-align: left;
}
.footer-nav-col ul {
	margin: 0;
	padding: 0;
	width: 100%;
}
.footer-nav-col ul li {
	margin: 0 0 8px !important;
	padding: 0;
	text-align: left;
}
.footer-nav-col ul li a,
.site-footer .wp-block-list a {
	font-size: 16px;
	font-weight: 100;
	color: #D2B67F !important;
	transition: color 0.2s;
}
.footer-nav-col ul li a:hover,
.site-footer .wp-block-list a:hover {
	color: var(--c-accent) !important;
}
/* 英文页脚两行链接（Quaternary Ammonium & Phosphonium Compounds）：收紧两行行距 */
.footer-nav-col ul li a.split-label {
	line-height: 1.25;
}

/* 通用 footer 文字颜色 */
.site-footer p {
	color: #D2B67F;
	margin: 0;
	line-height: 1.9;
}
.site-footer h4 {
	color: #D2B67F !important;
}

/* ---------- 右侧联系方式 ----------
   固定宽度（变量）而非 max-content：地址文字不再强制 nowrap 撑宽整列，
   过长时正常换行，不会拖垂整个 footer 宽度。 */
.footer-contact,
.wp-block-group.footer-contact {
	align-self: stretch !important;
	margin: 0 !important;
	/* 负边距让竖线（左边框）向上下各延伸 28px，接到上下两根分隔横线；
	   padding 用 56px（= 延伸的 28px + 内容下沉的 28px），
	   使文字内容顶部仍与左侧导航菜单标题（.footer-nav-wrap 的 margin-top:28px）对齐。 */
	margin-top: -28px !important;
	margin-bottom: -28px !important;
	padding-left: 70px !important;
	padding-right: 0 !important;
	padding-top: 56px !important;
	padding-bottom: 56px !important;
	border-left: 1px solid #7A6742;
	min-width: 0 !important;
	width: var(--footer-contact-width) !important;
}
.footer-contact h4 {
	font-size: 20px !important;
	font-weight: 700;
	color: #D2B67F;
	margin-bottom: 12px;
	white-space: nowrap;
}
.footer-contact p {
	font-size: 16px !important;
	font-weight: 100;
	line-height: 1.9 !important;
	color: #D2B67F;
	margin: 0 0 4px !important;
}
.footer-contact p:last-child {
	margin-bottom: 0 !important;
}

/* ---------- footer-bottom: 版权 + 法律信息 ---------- */
.footer-bottom,
.wp-block-group.footer-bottom {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center !important;
	padding-top: 10px;
}
.footer-bottom p {
	color: #D2B67F;
	margin: 0;
	text-align: left;
}
.footer-bottom > p:first-child {
	margin: 0 !important;
	margin-right: auto !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
}
.footer-bottom > p:last-child {
	margin: 0 !important;
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	text-align: right !important;
}

/* ---------- 中窄屏（14 寸笔记本 / 小于 1280px）----------
   侧边栏仍占 220px，可用宽度有限。减小联系我们列宽与列间距，
   给左侧导航留出更多空间，避免左右两列重叠。 */
@media (max-width: 1280px) {
	.site-footer {
		/* 进一步收窄联系我们列宽，给左侧 6 列导航让出整行空间，避免折行 */
		--footer-contact-width: 240px;
		--footer-nav-gap: 20px;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	/* 14 寸等中等屏：缩小导航字号，使 6 列自然宽度能在一行放下而不换行 */
	.site-footer .footer-nav-col h4 {
		font-size: 15px !important;
	}
	.site-footer .footer-nav-col ul li a,
	.site-footer .wp-block-list a {
		font-size: 13px !important;
		white-space: nowrap !important;
	}
}

/* ---------- 大屏（27 寸 / 2K-4K 显示器，≥1920px）----------
   宽屏下左侧导航列之间有大量空白，适当增大列间距让分布更舒展。 */
@media (min-width: 1920px) {
	.site-footer {
		--footer-nav-gap: 48px;
	}
}
@media (min-width: 2560px) {
	.site-footer {
		--footer-nav-gap: 72px;
	}
}

/* ---------- 中等宽屏（约 1281–1919px，如 1550px 显示器）----------
   1) 缩小联系我们列宽，给左侧导航让出更多横向空间；
   2) 关键：让 6 列导航"平分"左侧可用宽度（flex:1 1 0 + min-width:0），
      不再依赖自然宽度凑行，从根本上避免换行；链接 nowrap 保证单列内不折行；
   3) 列铺满后最右列（可持续发展）自然贴近"联系我们"分隔线，右侧空间被利用，
      联系我们列也随之更靠右。 */
@media (min-width: 1281px) and (max-width: 1919px) {
	.site-footer {
		/* 收窄联系我们列 + 适度 gap，给 6 列导航留出整行空间，避免折行 */
		--footer-contact-width: 320px;
		--footer-nav-gap: 24px;
	}
	/* 取消强制等分（flex:1 1 0 + min-width:0）：该做法会把列压到比内容更窄，
	   配合 nowrap 时文字会溢出到相邻列造成"粘连"。改用自然宽度 + 合理最小列宽，
	   列宽由内容决定、列间留足 gap，nowrap 也不会重叠。 */
	.site-footer .footer-nav-col,
	.site-footer .wp-block-group.footer-nav-col {
		flex: 0 1 auto !important;
		min-width: 92px !important;
	}
	/* 链接保持不换行：列用自然宽度，文字不会溢出到相邻列；
	   中等屏字号略缩，使 6 列自然总宽能在一行放下 */
	.site-footer .footer-nav-col ul li a,
	.site-footer .wp-block-list a {
		white-space: nowrap !important;
		font-size: 14px !important;
	}
	/* 在导航与"联系我们"之间留出间隙，让竖向分隔线右移、不再压到最右导航列的文字；
	   同步给 footer-top 加相同间隙，使社交图标行与联系我们列左缘保持对齐。 */
	.site-footer .footer-nav-columns,
	.site-footer .wp-block-group.footer-nav-columns,
	.site-footer .footer-top,
	.site-footer .wp-block-group.footer-top {
		column-gap: 24px !important;
	}
}

@media (max-width: 768px) {
	.site-footer .footer-nav-columns,
	.site-footer .wp-block-group.footer-nav-columns {
		display: block !important;
	}

	.site-footer .footer-nav-wrap,
	.site-footer .wp-block-group.footer-nav-wrap {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 24px !important;
		row-gap: 22px !important;
		width: 100% !important;
		margin-left: 0 !important;
	}

	.site-footer .footer-nav-col,
	.site-footer .wp-block-group.footer-nav-col {
		min-width: 0 !important;
		width: auto !important;
		padding-right: 0 !important;
	}

	.site-footer .footer-nav-col h4,
	.site-footer .footer-nav-col li,
	.site-footer .footer-nav-col a,
	.site-footer .wp-block-list a {
		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
		white-space: normal !important;
		word-break: keep-all !important;
		overflow-wrap: normal !important;
		line-break: auto !important;
	}

	.site-footer .footer-nav-col a,
	.site-footer .wp-block-list a {
		display: inline-block !important;
		min-width: max-content !important;
	}

	.site-footer .footer-contact,
	.site-footer .wp-block-group.footer-contact {
		margin: 0 !important;
		margin-top: 24px !important;
		margin-bottom: 28px !important;
		padding: 0 !important;
		border-left: none !important;
		width: 100% !important;
	}
	.site-footer .footer-contact h4,
	.site-footer .footer-contact p {
		white-space: normal !important;
	}
}
/* ---------- footer-social-wechat 微信图标 hover 弹出二维码 ----------
   在微信图标悬停 / 键盘聚焦时浮出两张并排二维码面板。
   - 桌面端：面板居中悬于图标上方，含向下小三角指向图标。
   - 移动端：面板从图标左/右对齐，避免越界。
   - 兼容 prefers-reduced-motion：去掉过渡动画。
*/
.footer-social-wechat,
.wp-block-image.footer-social-wechat {
	position: relative;
	margin: 0 !important;
	display: inline-block;
	max-width: none !important;
}
.footer-social-wechat .footer-wechat-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
	outline: none;
}
.footer-social-wechat .footer-wechat-link:focus-visible {
	box-shadow: 0 0 0 2px #D2B67F;
	border-radius: 4px;
}
.footer-social-wechat .footer-wechat-qr {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, 6px);
	display: flex;
	/* 两张二维码原图比例不同（竖版 / 横版），底部对齐可让下方文字标签落在同一基线 */
	align-items: flex-end;
	gap: 24px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 20;
	white-space: nowrap;
}
.footer-social-wechat .footer-wechat-qr::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #ffffff;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
}
.footer-social-wechat:hover .footer-wechat-qr,
.footer-social-wechat:focus-within .footer-wechat-qr {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.footer-social-wechat .footer-wechat-qr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
/* 两张二维码不再压成同一尺寸的正方形（会把横版图的码区压得很小），
   改为各自按原图比例放大：竖版按高度、横版按宽度。 */
.footer-social-wechat .footer-wechat-qr-img {
	display: block;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}
/* 竖版名片（745×1080，商务合作）：按高度放大，宽度自适应 */
.footer-social-wechat .footer-wechat-qr-img--portrait {
	height: 200px;
	width: auto;
	max-width: none;
}
/* 横版名片（1080×394，公众号）：按宽度放大，高度自适应。
   横版码区只占图宽约 1/3，故需给足宽度，才能让码区与左侧竖版视觉等大。 */
.footer-social-wechat .footer-wechat-qr-img--landscape {
	width: 300px;
	height: auto;
	max-width: none;
}
.footer-social-wechat .footer-wechat-qr-text {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: #1f3a30;
	letter-spacing: .05em;
	text-align: center;
}

@media (max-width: 768px) {
	.footer-social-wechat .footer-wechat-qr {
		left: auto;
		right: -8px;
		transform: translate(0, 6px);
		gap: 12px;
		padding: 12px;
	}
	.footer-social-wechat:hover .footer-wechat-qr,
	.footer-social-wechat:focus-within .footer-wechat-qr {
		transform: translate(0, 0);
	}
	.footer-social-wechat .footer-wechat-qr::after {
		left: auto;
		right: 28px;
		transform: translateX(0);
	}
	.footer-social-wechat .footer-wechat-qr-img--portrait {
		height: 110px;
		width: auto;
	}
	.footer-social-wechat .footer-wechat-qr-img--landscape {
		width: 150px;
		height: auto;
	}
	.footer-social-wechat .footer-wechat-qr-text {
		font-size: 11px;
		margin-top: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.footer-social-wechat .footer-wechat-qr {
		transition: none;
	}
}