/**
 * 黑田媽 · Footer 樣式
 * by 卡卡東工作室 · Phase 3.12
 *
 * 對齊設計稿（黑田媽首頁.html § footer）。
 * Footer 結構由 Blocksy Footer Builder 控制，這邊只負責 widget HTML 內部樣式。
 *
 * Widget 內容由客戶在「外觀 → 自訂 → 小工具」(或 customizer 內 footer widget 區) 編輯，
 * 所以 class 命名要穩定 (kkd-footer-*)，內容變字 / 連結 CSS 不會壞。
 */

/* ==================================================================
 * 共用：footer 區段的整體背景與分隔
 * ================================================================== */
.ct-footer {
	background-color: var(--kkd-paper) !important;  /* 蓋 Blocksy 預設 footer bg */
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* 隱藏 Blocksy Companion 的「最受歡迎商品」trending block
   免費版 trending extension 無 kill switch 也無 filter，用 CSS 是最務實 */
.ct-trending-block {
	display: none !important;
}

[data-row="middle"] {
	border-top: 1px solid var(--kkd-rule) !important;  /* 蓋 Blocksy 預設 border 色 */
	padding-top: 0 !important;  /* footer 上 padding 0 */
	padding-bottom: 0 !important;
}

[data-row="bottom"] {
	border-top: 1px solid var(--kkd-rule) !important;  /* 蓋 Blocksy 預設 border 色 */
	padding-top: 0 !important;
	padding-bottom: 24px !important;
}
/* bottom row 用 ct-container 同款寬度（不 fluid），且 top padding = 24
   middle bottom 0 + container top 24 = 距離 middle 末尾 24px
   寬度 = min(--theme-container-width, --theme-normal-container-max-width)
   跟 .ct-container 同款計算（90vw + 1290px cap），用 !important 蓋 Blocksy fluid 的 width 規則 */
[data-row="bottom"] > .ct-container-fluid,
[data-row="bottom"] > .ct-container {
	width: var(--theme-container-width) !important;
	max-width: var(--theme-normal-container-max-width) !important;
	margin-inline: auto !important;
	padding-top: 24px !important;
	padding-bottom: 0 !important;
	padding-inline: 0 !important;
}

/* 強制 footer widget 全寬 + 左對齊
   原因：Blocksy 預設 .ct-widget = inline-block + column wrapper text-align:center
   → widget shrink 到 content 寬，且看起來置中
   我們要左對齊，widget 全寬，子元素自己控對齊（如 .kkd-footer-bottom 用 flex space-between） */
[data-row="middle"] [data-column],
[data-row="bottom"] [data-column] {
	text-align: left;
}
[data-row="middle"] .ct-widget,
[data-row="bottom"] .ct-widget {
	display: block;
	width: 100%;
	text-align: left;
}

/* ==================================================================
 * Col 1: 品牌簡介
 * ================================================================== */
.kkd-footer-brand__title {
	font-family: var(--kkd-font-serif);
	font-size: 22px;
	color: var(--kkd-ink);
	margin-bottom: 4px;
}

.kkd-footer-brand__eyebrow {
	font-family: var(--kkd-font-sans);
	font-size: 11px;
	color: var(--kkd-inkgray);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.kkd-footer-brand__desc {
	font-family: var(--kkd-font-sans);
	font-size: 13px;
	color: var(--kkd-inkgray);
	line-height: 1.9;
	margin: 0;
}

/* ==================================================================
 * Col 2 / 3 共用：title + list / social / newsletter
 * ================================================================== */
.kkd-footer-col__title {
	font-family: var(--kkd-font-sans);
	font-size: 11px;
	color: var(--kkd-sumi);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

/* Col 2: 客服 list */
.kkd-footer-col__list {
	font-family: var(--kkd-font-sans);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
}
.kkd-footer-col__list li {
	margin-bottom: 12px;
}
.kkd-footer-col__list a {
	color: var(--kkd-sumi);   /* 對齊設計稿 .lnk = #5A4A3A */
	text-decoration: none;
	transition: color .25s ease;
}
.kkd-footer-col__list a:hover {
	color: var(--kkd-matcha);  /* 對齊 .lnk:hover */
}

/* Col 3: social */
.kkd-footer-col__social {
	font-family: var(--kkd-font-sans);
	display: flex;
	gap: 16px;
	margin-bottom: 28px;
	font-size: 13px;
}
.kkd-footer-col__social a {
	color: var(--kkd-sumi);
	text-decoration: none;
	transition: color .25s ease;
}
.kkd-footer-col__social a:hover {
	color: var(--kkd-matcha);
}

.kkd-footer-col__newsletter-intro {
	font-family: var(--kkd-font-sans);
	font-size: 12px;
	color: var(--kkd-inkgray);
	margin: 0 0 12px;
}

.kkd-footer-col__newsletter {
	display: flex;
}
.kkd-footer-col__newsletter input[type="email"] {
	flex: 1;
	background: transparent;
	border: 1px solid var(--kkd-rule);
	padding: 10px 12px;
	font-size: 13px;
	color: var(--kkd-ink);
	border-right: none;
	border-radius: 0;
	min-width: 0;
}
.kkd-footer-col__newsletter input[type="email"]:focus {
	outline: none;
	border-color: var(--kkd-sumi);
}
.kkd-footer-col__newsletter input[type="email"]::placeholder {
	color: var(--kkd-inkgray);
}
.kkd-footer-col__newsletter button {
	background: var(--kkd-ink);
	color: var(--kkd-paper);
	border: 1px solid var(--kkd-ink);
	padding: 0 20px;
	font-size: 13px;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background .25s ease;
	border-radius: 0;
}
.kkd-footer-col__newsletter button:hover {
	background: var(--kkd-sumi);
	border-color: var(--kkd-sumi);
}

/* ==================================================================
 * 底部 copyright row
 * 結構：bottom-row 2 columns → widget-area-5 (left) + widget-area-6 (right)
 * 每個 widget area 各自一個 div，CSS 控對齊（跨 widget 用 flex 不可行）
 *
 * selector 加 .ct-footer ancestor 提高 specificity，蓋過：
 *   - Blocksy widget_block 自帶 typography
 *   - block editor default font-size
 * ================================================================== */
.ct-footer .kkd-footer-bottom__left,
.ct-footer .kkd-footer-bottom__right {
	font-family: var(--kkd-font-sans);
	font-size: 11px;
	color: var(--kkd-inkgray);
	letter-spacing: 0.1em;
	line-height: 1.6;
}
.ct-footer .kkd-footer-bottom__left  { text-align: left;  }
.ct-footer .kkd-footer-bottom__right { text-align: right; }
.ct-footer .kkd-footer-bottom__left a,
.ct-footer .kkd-footer-bottom__right a {
	color: inherit;
}

/* 蓋掉 Blocksy 預設 widget area 外框 / 標題（我們自己控） */
[data-row="middle"] .ct-widget,
[data-row="bottom"] .ct-widget {
	margin-bottom: 0;
}
[data-row="middle"] .widget-title,
[data-row="bottom"] .widget-title {
	display: none; /* 我們自己 widget HTML 內有 title，不要重複 */
}

/* ==================================================================
 * Responsive
 * ================================================================== */
@media (max-width: 1024px) {
	[data-row="middle"] {
		padding-top: 48px !important;
		padding-bottom: 32px !important;
	}
}

@media (max-width: 640px) {
	[data-row="middle"] {
		padding-top: 40px !important;
		padding-bottom: 24px !important;
	}

	.kkd-footer-brand__title { font-size: 20px; }
	.kkd-footer-brand__desc { font-size: 12px; line-height: 1.8; }
	.kkd-footer-col__title { font-size: 10px; margin-bottom: 16px; }
	.kkd-footer-col__list { font-size: 12px; }
	.kkd-footer-col__list li { margin-bottom: 10px; }
	.kkd-footer-col__newsletter input[type="email"],
	.kkd-footer-col__newsletter button { font-size: 12px; padding: 8px 14px; }

	.kkd-footer-bottom__left,
	.kkd-footer-bottom__right { text-align: center; }
}