/* ==========================================================================
   DIY Driver — 页脚
   蓝本：ISABERS 四列页脚。色板取 style.css 的 token，本文件**不重复定义变量**。

   深色通栏是设计既定方向 —— token 里 --dd-teal-800 的注释就写着
   「深青底（页脚 / 深区块）」。

   ⛔ 深底站的两条铁律（memory: wp_blog_white_card_recipe / fw_light_theme_invisible_text）：
        · 深色底上的文字**必须显式给浅色**，不能指望继承 —— 继承来的深字会隐形
        · 反过来，浅色卡片内的文字必须显式给深字
      所以本文件里 .dd-payc（白卡）内的字全是显式深色，别处全是显式浅色。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 通栏底
   Storefront 的 footer.php 是：
       <footer id="colophon" class="site-footer"><div class="col-full">…</div></footer>
   #colophon 本身整幅宽 → 深底打在这一层。
   .col-full 是父主题的居中容器（宽度受 customizer 控制），页脚要更宽的栅格，
   所以在页脚范围内把它放开，宽度交给 .dd-ftr-grid 自己管。
   -------------------------------------------------------------------------- */
#colophon.site-footer {
	background-color: var(--dd-dark-bg);
	color: var(--dd-on-dark);
	padding: 0;
	margin-top: var(--dd-space-12);
}

/* 只在页脚范围内放开父主题容器宽度，不影响其他页面的 .col-full */
#colophon.site-footer .col-full {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* 父主题在 .site-footer 上还挂了 widget 相关样式；widget 已摘除，这里清掉残留间距 */
#colophon.site-footer .widget {
	margin-bottom: 0;
}

.dd-ftr {
	width: 100%;
}

/* --------------------------------------------------------------------------
   2. 四列栅格
   -------------------------------------------------------------------------- */
.dd-ftr-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 40px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.15fr;
	gap: 40px;
	align-items: start;
}

/* --------------------------------------------------------------------------
   ⛔ 优先级陷阱 —— 09-22 实测踩到并修掉，别把它改回去

   WooCommerce 的 woocommerce.css 里有这么一条：

       .site-footer a:not(.button):not(.components-button) { color: #333 }

   优先级 (0,3,1)。我原本写的 `.dd-ftr-col a` 只有 (0,1,1) —— 被它压掉，
   而且它加载在 footer.css **之后**，就算同分也轮不到我。
   结果：页脚三个链接全变深灰 #333，在深青底 (22,75,92) 上对比度只有
   **1.32:1** —— 基本看不见。

   症状特别有欺骗性：**只有 <a> 隐形**，而 .dd-ftr-tagline / .dd-ftr-col h4
   这些非链接的浅色全都正常。看起来像「CSS 没加载」，其实加载了、只是输了层叠。
   → 所以深色站的验收必须实测对比度，不能靠"看着好像没问题"。

   修法：把这批链接的选择器抬到 (0,4,x)，**严格超过**它的 (0,3,1)。
   这样不依赖加载顺序，任何插件后插 CSS 也压不掉。
   刻意**不用 !important** —— 那会让以后所有覆写都得跟着加 !important，越滚越脏。
   `:not(.button):not(.components-button)` 是照抄它的守卫条件，语义上也对得上。
   -------------------------------------------------------------------------- */

/* --- 品牌列 --- */
.dd-ftr .dd-ftr-logo:not(.button):not(.components-button) {
	display: inline-block;
	font: 700 22px/1 var(--dd-font);
	letter-spacing: .06em;
	color: var(--dd-on-dark);
	text-decoration: none;
	margin-bottom: var(--dd-space-4);
}

.dd-ftr-logo span {
	color: var(--dd-teal-300); /* 浅青，在深青底上有足够对比 */
}

.dd-ftr .dd-ftr-logo:not(.button):not(.components-button):hover,
.dd-ftr .dd-ftr-logo:not(.button):not(.components-button):focus {
	color: var(--dd-on-dark);
	text-decoration: none;
}

.dd-ftr-tagline {
	font-size: 14px;
	line-height: 1.65;
	color: var(--dd-on-dark-muted); /* 显式浅色，不继承 */
	margin: 0 0 var(--dd-space-6);
	max-width: 34em;
}

/* --- 链接列 --- */
.dd-ftr-col h4 {
	font: 600 13px/1 var(--dd-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dd-on-dark);
	margin: 0 0 var(--dd-space-4);
}

.dd-ftr-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd-ftr-col li {
	margin: 0 0 var(--dd-space-3);
}

/* 选择器刻意冗长 —— 抬到 (0,4,1) 以压过 woocommerce.css 的 (0,3,1)，理由见上方长注释 */
.dd-ftr .dd-ftr-col a:not(.button):not(.components-button) {
	font-size: 14px;
	line-height: 1.5;
	color: var(--dd-on-dark-muted); /* 显式浅色 */
	text-decoration: none;
	transition: color .15s ease;
}

.dd-ftr .dd-ftr-col a:not(.button):not(.components-button):hover,
.dd-ftr .dd-ftr-col a:not(.button):not(.components-button):focus {
	color: var(--dd-on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. 付款彩卡
   白底圆角小卡 + 品牌字标。Mastercard 用两个圆做几何交叠，不放位图。
   ⛔ 卡内文字全部显式深色 —— 白卡上继承深底站的浅字会变成白底白字。
   -------------------------------------------------------------------------- */
.dd-ftr-paylabel {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dd-on-dark-muted);
	margin: 0 0 var(--dd-space-3);
}

.dd-ftr-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.dd-payc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-width: 52px;
	padding: 0 10px;
	border-radius: 5px;
	background: #fff;
	font: 700 12px/1 var(--dd-font);
	letter-spacing: .02em;
	/* ↓ 显式深色。白卡上必须给深字 */
	color: #1a1f71;
}

.dd-payc svg {
	height: 18px;
	width: auto;
	display: block;
}

/* 品牌色（各自压深到能配白底 / 或本身就是彩底白字） */
.dd-payc-visa     { color: #1a1f71; font-style: italic; letter-spacing: .04em; }
.dd-payc-amex     { color: #2e77bc; }
.dd-payc-disc     { color: #f6800b; }
.dd-payc-pp       { color: #003087; }
.dd-payc-pp .pp2  { color: #0070ba; }
.dd-payc-bank     { color: var(--dd-n-700); font-weight: 600; font-size: 11px; }

.dd-payc-mc {
	min-width: 52px;
	padding: 0 8px;
}

/* --------------------------------------------------------------------------
   4. 底部条
   -------------------------------------------------------------------------- */
.dd-ftr-bottom {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 24px 40px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.dd-ftr-disc {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--dd-on-dark-muted);
	margin: 0 0 var(--dd-space-4);
	max-width: 76em;
}

.dd-ftr-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	align-items: baseline;
	justify-content: space-between;
	font-size: 13px;
	color: var(--dd-on-dark-muted);
}

.dd-ftr-copy {
	color: var(--dd-on-dark-muted);
}

/* 选择器刻意冗长 —— 同 .dd-ftr-col a，抬到 (0,4,1) */
.dd-ftr .dd-ftr-mail:not(.button):not(.components-button) {
	color: var(--dd-on-dark);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	padding-bottom: 1px;
}

.dd-ftr .dd-ftr-mail:not(.button):not(.components-button):hover,
.dd-ftr .dd-ftr-mail:not(.button):not(.components-button):focus {
	color: var(--dd-on-dark);
	border-bottom-color: var(--dd-on-dark);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   4c. 车灯适配横条（dd-ftr-fit）
   --------------------------------------------------------------------------
   放在网格**之外**、底部条之上：11 个品牌排成一行自动换行。
   ⛔ 不做第 5 列 —— .dd-ftr-grid 是 `2fr 1fr 1fr 1.15fr`，加一列会把
      Shop 列挤到「Power & Jump Starters」折行。
   ⛔ 链接选择器同样抬到 (0,4,x)，理由见第 2 节那段优先级陷阱说明。
   -------------------------------------------------------------------------- */
.dd-ftr-fit {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 8px;
}
.dd-ftr-fit h4 {
	color: var(--dd-on-dark);
	font-size: .875em;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0 0 .9em;
}
.dd-ftr-fit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}
.dd-ftr .dd-ftr-fit-list a:not(.button):not(.components-button) {
	color: var(--dd-on-dark-muted);
	font-size: .875em;
}
.dd-ftr .dd-ftr-fit-list a:not(.button):not(.components-button):hover,
.dd-ftr .dd-ftr-fit-list a:not(.button):not(.components-button):focus {
	color: var(--dd-on-dark);
}

/* --------------------------------------------------------------------------
   5. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.dd-ftr-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding: 48px 20px 32px;
	}
	.dd-ftr-brand {
		grid-column: 1 / -1; /* 品牌列横跨整行 */
	}
	.dd-ftr-bottom {
		padding: 24px 20px 36px;
	}
	.dd-ftr-fit {
		padding: 0 20px 4px;
	}
	.dd-ftr-fit-list {
		gap: 8px 18px;
	}
}

@media (max-width: 560px) {
	.dd-ftr-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.dd-ftr-meta {
		flex-direction: column;
		gap: 10px;
	}
}

/* --------------------------------------------------------------------------
   6. 移动端底栏共存
   Storefront 的 .storefront-handheld-footer-bar 是 fixed 贴底，挂在
   storefront_footer @999 —— 我们**没有**摘它，移动端购物车/搜索照常。
   这里只确保页脚底部内容不被它压住。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.dd-ftr-bottom {
		/* 父主题给 body 加了等高的 padding，这里再给一份内部余量保稳 */
		padding-bottom: 84px;
	}
}