/**
 * Theme Name: Blocksy Child
 * Description: Designed by SC-ICG.
 * Author: SC-ICG
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==========================================================================
   湧金啤酒 — 全站樣式
   --------------------------------------------------------------------------
   色彩規範:一律使用 Blocksy 主題色變數,不寫死色碼。
             改「外觀 → 自訂 → 色彩」即可全站換色。
   斷點規範:只使用 Blocksy 內建的兩個斷點,不自行新增。
             平板 @media (max-width: 999.98px)
             手機 @media (max-width: 689.98px)
   ========================================================================== */

:root {
	/* ── 品牌色(對應 Blocksy 色票 1–8)────────────────────────────── */
	--yj-orange: var(--theme-palette-color-1);   /* #FF5100 主視覺橘 */
	--yj-yellow: var(--theme-palette-color-2);   /* #FFD100 輔助黃   */
	--yj-gray:   var(--theme-palette-color-3);   /* #353535 內文深灰 */
	--yj-black:  var(--theme-palette-color-4);   /* #090909 內文黑   */
	--yj-mute:   var(--theme-palette-color-5);   /* #B5BABE 內文灰   */
	--yj-cream:  var(--theme-palette-color-6);   /* #FDF8ED 米色底   */
	--yj-red:    var(--theme-palette-color-7);   /* #DB3407 深紅     */
	--yj-white:  var(--theme-palette-color-8);   /* #FFFFFF 白       */

	/* ── 字體:日後若購入金萱那提,只需改這一行 ─────────────────── */
	--yj-font: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

	/* ── 版面:全站統一 1290px 內容寬 ─────────────────────────────── */
	--yj-container: 1290px;
	--yj-gutter: 24px;
	--yj-footer-wave-h: 90px;   /* 頁尾橘色波浪往上延伸的高度 */

	/* ── 頁首尺寸(sticky 時整組等比縮小)─────────────────────────── */
	--yj-hdr-warn-h: 60px;    /* 警語列高 */
	--yj-hdr-nav-h: 87px;     /* 導覽列高 */
	--yj-hdr-panel-w: 287px;  /* 橘色 Logo 面板寬 */
	--yj-hdr-logo-w: 159px;   /* Logo 寬 */
	/* 流體留白：clamp 不是斷點，1000–1400px 之間才不會擠爆 */
	--yj-hdr-edge: clamp(20px, 3.5vw, 120px);
}

/* 捲動後的 sticky 狀態:數值需與 Blocksy 的
   stickyHeaderRowShrink(警語 73% / 導覽 70%)算出的列高一致,
   面板與 Logo 才會貼齊縮小後的兩列。
   60×0.73≈44、87×0.70≈61、面板 287×(105/147)≈205 */
.ct-header [data-device="desktop"] [data-sticky*="yes"] {
	--yj-hdr-warn-h: 44px;
	--yj-hdr-nav-h: 61px;
	--yj-hdr-panel-w: 205px;
	--yj-hdr-logo-w: 110px;
}

/* Blocksy 的 stickyHeaderRowShrink 只作用在主列，警語列不會縮，
   這裡用它自己的 --height 變數把警語列一併收小，面板高度才對得上。 */
.ct-header [data-device="desktop"] [data-sticky*="yes"] [data-row="top"] {
	--height: var(--yj-hdr-warn-h);
}

.ct-header [data-device="desktop"] [data-sticky*="yes"] .yj-mq__txt {
	font-size: 17px;
}

.ct-header [data-device="desktop"] [data-sticky*="yes"] .yj-mq__icon {
	width: 28px;
	height: 28px;
}

/* ==========================================================================
   1. 頁首 Header
   ========================================================================== */

/* 【重要】絕對不要覆寫 [data-sticky] 或 .ct-sticky-container 的 position。
   Blocksy 靠 [data-sticky*="yes"]{position:fixed} 實作固定頁首，
   一旦被 position:relative 蓋掉，捲動後整個頁首就會消失。

   橘色 Logo 面板改用「負上邊距向上跨列」達成，不動任何定位屬性。
   注意 Blocksy 給警語列 z-index:3、導覽列 z-index:2，
   因此需把導覽列提到警語列之上，面板才不會被蓋住。 */
/* Blocksy 用 #header [data-row*=middle]{z-index:2}（ID 選擇器，權重 1-1-0）
   壓在警語列(z-index:3)之下，因此這裡也必須帶 #header 才蓋得過。 */
#header [data-device="desktop"] [data-row="middle"] {
	z-index: 4;
}

/* 負上邊距必須透過 Blocksy 自己的 --margin 變數設定。
   直接寫 margin-top 會被 #header [data-items] > *{margin:var(--margin)}
   這條「ID 選擇器」(權重 1-1-0) 蓋掉，面板就跨不上警語列。
   選擇器也需比 [data-column="start"] [data-items="primary"] > :first-child
   (權重 0-4-0) 更具體，否則 --margin 會被它覆寫。 */
.ct-header [data-device="desktop"] [data-column="start"] [data-items="primary"] > .site-branding {
	--margin: calc(-1 * var(--yj-hdr-warn-h)) 0 0 0;
	position: relative;
	z-index: 1;
	align-self: start;
	justify-self: start;
	width: var(--yj-hdr-panel-w);
	height: calc(var(--yj-hdr-warn-h) + var(--yj-hdr-nav-h));
	padding: 0;
	background-color: var(--yj-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: width .3s ease, height .3s ease;
}

.ct-header [data-device="desktop"] [data-row="middle"] .site-logo-container {
	display: block;
	line-height: 0;
}

/* 限縮在導覽列內。Blocksy 的側邊抽屜面板本身也帶 .ct-header class，
   若不限縮，這裡的固定寬度會蓋掉後台設定的抽屜 Logo 高度。 */
.ct-header [data-device="desktop"] [data-row="middle"] .site-logo-container img {
	width: var(--yj-hdr-logo-w);
	height: auto;
	max-width: none;
	max-height: none;
	transition: width .3s ease;
}

/* Blocksy 的 .ct-container-fluid 左右各內縮 30px，
   但橘色面板必須切齊畫面最左緣，因此兩列都改為真正滿版。 */
.ct-header [data-device="desktop"] [data-row="top"] > .ct-container-fluid,
.ct-header [data-device="desktop"] [data-row="middle"] > .ct-container-fluid {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* 警語列讓開左側面板；導覽列不必，因為面板本身就在該列的流內 */
.ct-header [data-device="desktop"] [data-row="top"] > .ct-container-fluid {
	padding-left: var(--yj-hdr-panel-w);
	padding-right: 0;          /* 跑馬燈滿版跑到右緣 */
}

.ct-header [data-device="desktop"] [data-row="middle"] > .ct-container-fluid {
	padding-left: 0;
	padding-right: var(--yj-hdr-edge);
}

/* 導覽列不要陰影(設計稿為硬邊) */
.ct-header [data-row="middle"] {
	box-shadow: none !important;
}

/* ── 警語跑馬燈 ──────────────────────────────────────────────────── */
.yj-mq {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* 註：下方遮罩中的 #000 只作為 mask 的不透明度來源，
	   不是視覺顏色，不受「色彩須取用主題色票」的規範限制。 */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.yj-mq__track {
	display: flex;
	width: max-content;
	animation: yj-mq-scroll 45s linear infinite;
}

.yj-mq__group {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-right: 24px;
	flex: 0 0 auto;
}

.yj-mq__txt {
	font-family: var(--yj-font);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--yj-mute);
	white-space: nowrap;
}

.yj-mq__icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	display: block;
}

@keyframes yj-mq-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 尊重使用者的減少動態偏好 — 警語仍完整可見,只是不捲動 */
@media (prefers-reduced-motion: reduce) {
	.yj-mq__track { animation: none; }
}

/* ── 主選單 ──────────────────────────────────────────────────────── */
.ct-header [data-device="desktop"] #header-menu-1 > ul {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.ct-header [data-device="desktop"] #header-menu-1 > ul > li > .ct-menu-link {
	font-family: var(--yj-font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--yj-orange);
	white-space: nowrap;
	/* 刻意不覆寫 padding。Blocksy 以
	   --menu-item-padding: 0 calc(var(--menu-items-spacing) / 2)
	   控制間距，寫死 padding:0 會讓後台「選單 → 內部間距」失效。 */
}

.ct-header [data-device="desktop"] #header-menu-1 > ul > li > .ct-menu-link:hover,
.ct-header [data-device="desktop"] #header-menu-1 > ul > li.current-menu-item > .ct-menu-link {
	color: var(--yj-red);
}

/* 選單項目之間的橘色斜線分隔 */
.ct-header [data-device="desktop"] #header-menu-1 > ul > li + li::before {
	content: '/';
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--yj-orange);
	pointer-events: none;
}

/* 隱藏 Blocksy 預設的選單底線動畫 */
.ct-header [data-device="desktop"] #header-menu-1 .ct-menu-link::before,
.ct-header [data-device="desktop"] #header-menu-1 .ct-menu-link::after {
	display: none;
}

/* ── 頁首社群圖示 ────────────────────────────────────────────────── */
.ct-header [data-device="desktop"] .ct-header-socials {
	margin-left: clamp(12px, 2.5vw, 150px);
	flex: 0 0 auto;
}

/* 導覽列右側整組不得換行，否則社群圖示會掉出頁首 */
.ct-header [data-device="desktop"] [data-row="middle"] [data-column="end"],
.ct-header [data-device="desktop"] [data-row="middle"] [data-column="end"] > [data-items] {
	flex-wrap: nowrap;
	min-width: 0;
}

.ct-header .ct-header-socials .ct-social-box {
	--theme-icon-color: var(--yj-orange);
	--theme-icon-hover-color: var(--yj-red);
}

/* ── 頁首 RWD:平板(≤999.98px)起改用 Blocksy 行動版頁首 ───────── */
@media (max-width: 999.98px) {
	:root {
		--yj-hdr-warn-h: 44px;
		--yj-hdr-nav-h: 64px;
		--yj-hdr-panel-w: 200px;
		--yj-hdr-logo-w: 112px;   /* 未設定的話會沿用桌機 159px，Logo 會撐出橘色面板 */
		--yj-hdr-edge: clamp(16px, 3vw, 40px);
	}

	#header [data-device="mobile"] [data-row="middle"] {
		z-index: 4;
	}

	.ct-header [data-device="mobile"] [data-column="start"] [data-items="primary"] > .site-branding {
		--margin: calc(-1 * var(--yj-hdr-warn-h)) 0 0 0;
		position: relative;
		z-index: 1;
		align-self: start;
		justify-self: start;
		width: var(--yj-hdr-panel-w);
		height: calc(var(--yj-hdr-warn-h) + var(--yj-hdr-nav-h));
		padding: 0;
		background-color: var(--yj-orange);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: width .3s ease, height .3s ease;
	}

	.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container img {
		width: var(--yj-hdr-logo-w, 110px);
		height: auto;
		max-width: none;
		max-height: none;
		transition: width .3s ease;
	}

	.ct-header [data-device="mobile"] [data-row="top"] > .ct-container-fluid,
	.ct-header [data-device="mobile"] [data-row="middle"] > .ct-container-fluid {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.ct-header [data-device="mobile"] [data-row="top"] > .ct-container-fluid {
		padding-left: var(--yj-hdr-panel-w);
		padding-right: 0;
	}

	.ct-header [data-device="mobile"] [data-row="middle"] > .ct-container-fluid {
		padding-left: 0;
		padding-right: var(--yj-hdr-edge);
	}

	.yj-mq__txt { font-size: 15px; letter-spacing: 0.1em; }
	.yj-mq__icon { width: 28px; height: 28px; }
	.yj-mq__group { gap: 16px; padding-right: 16px; }

	/* 漢堡按鈕 */
	.ct-header [data-device="mobile"] .ct-toggle-close,
	.ct-header [data-device="mobile"] [data-id="trigger"] {
		color: var(--yj-orange);
	}
}

@media (max-width: 689.98px) {
	:root {
		--yj-hdr-warn-h: 36px;
		--yj-hdr-nav-h: 56px;
		--yj-hdr-panel-w: 120px;
		--yj-hdr-logo-w: 76px;
		--yj-hdr-edge: 16px;
	}

	.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container img { width: var(--yj-hdr-logo-w); }

	.yj-mq__txt { font-size: 13px; letter-spacing: 0.05em; }
	.yj-mq__icon { width: 20px; height: 20px; }
	.yj-mq__group { gap: 10px; padding-right: 10px; }
}

/* ── 行動版側邊選單 ──────────────────────────────────────────────── */
.ct-header #offcanvas .ct-menu-link {
	font-family: var(--yj-font);
	font-weight: 700;
	color: var(--yj-orange);
	letter-spacing: 0.1em;
}

.ct-header #offcanvas .ct-social-box {
	--theme-icon-color: var(--yj-orange);
	--theme-icon-hover-color: var(--yj-red);
	justify-content: center;
	margin-top: 32px;
}

/* ==========================================================================
   2. 頁尾 Footer
   ========================================================================== */

/* 頁尾底色由 Blocksy 的「頁尾 → 列 → 背景」設定輸出
   (footerRowBackground = 主題色 1),此處只負責定位與造型。 */
.ct-footer [data-row="middle"] {
	position: relative;
}

/* 頁尾上緣波浪切邊 — 顏色跟著主題色走 */
.ct-footer [data-row="middle"]::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--yj-footer-wave-h);
	background-color: var(--yj-orange);
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C300,-10 620,28 900,52 C1140,72 1320,84 1440,88 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% 100%;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C300,-10 620,28 900,52 C1140,72 1320,84 1440,88 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% 100%;
	pointer-events: none;
}

/* 頁尾與全站同寬 1290px */
.ct-footer [data-row="middle"] > .ct-container,
.ct-footer [data-row="bottom"] > .ct-container {
	max-width: var(--yj-container);
}

.ct-footer [data-row="middle"] > .ct-container {
	display: grid;
	/* Logo / 品牌+社群 / 站內導覽 / 聯絡資訊。
	   用固定比例 + 一致 gap（不用 space-between），四欄間距才會一致；
	   站內導覽欄比先前寬約 5%（不再貼右）。 */
	grid-template-columns: auto minmax(280px, 1.5fr) minmax(200px, 0.95fr) minmax(200px, 1fr);
	justify-content: start;
	gap: 56px;
	align-items: start;   /* 預設向上對齊 → 站內導覽與聯絡資訊向上對齊 */
}

/* 左兩欄（Logo、品牌+社群）垂直置中；右兩欄（站內導覽、聯絡資訊）向上對齊 */
.ct-footer [data-row="middle"] [data-column="widget-area-1"],
.ct-footer [data-row="middle"] [data-column="widget-area-2"] {
	align-self: center;
}

/* 品牌區（純麥釀造）內容水平置中 */
.ct-footer [data-row="middle"] [data-column="widget-area-2"] {
	text-align: center;
}
/* 社群 icon 也要置中：真正的 flex 容器是 .ct-social-box，不是外層 .ct-footer-socials */
.ct-footer [data-row="middle"] [data-column="widget-area-2"] .ct-footer-socials {
	display: flex;
	justify-content: center;
}
.ct-footer [data-row="middle"] [data-column="widget-area-2"] .ct-social-box {
	justify-content: center;
	width: 100%;
}

/* 欄 1:品牌 Logo */
.yj-f-logo img {
	width: 200px;
	height: auto;
	max-width: 100%;
}

/* 欄 2:品牌名稱與標語 */
.yj-f-brand__name,
.yj-f-brand__slogan {
	font-family: var(--yj-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 36px;   /* 20px × 1.5 = 30px，依需求再加 6px */
	color: var(--yj-white);
	margin: 0;
	white-space: nowrap;   /* 純麥釀造那行不斷行 */
}

/* 品牌名與標語之間僅用 1.5 行高，不再另加段落間距 */
.yj-f-brand__name {
	margin-bottom: 0;
}

/* 品牌文字區與社群圖示之間固定 20px。
   Blocksy 以 .ct-footer [data-column] > [data-id]{margin:var(--margin)} 控制間距，
   權重高於一般選擇器，因此改為設定它自己的 --margin 變數。 */
.ct-footer .ct-footer-socials {
	--margin: 20px 0 0 0;
}

.ct-footer .ct-social-box {
	--theme-icon-color: var(--yj-yellow);
	--theme-icon-hover-color: var(--yj-white);
}

/* Blocksy 的 [data-column] 會讓小工具收縮成內容寬，
   導致「站內導覽」的分隔線比「聯絡資訊」短。強制撐滿欄寬。 */
.ct-footer [data-row="middle"] [data-column] > * {
	width: 100%;
}

/* 欄標題:前綴小圓點 + 黃色分隔線 */
.yj-f-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--yj-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--yj-white);
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--yj-yellow);
	white-space: nowrap;
}

.yj-f-title::before {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--yj-yellow);
	box-shadow: 0 0 0 2px var(--yj-orange), 0 0 0 3px var(--yj-yellow);
	margin-right: 3px;
}

/* 欄 3:站內導覽 — 兩個子欄,依設計稿為「直向填滿」
   (左欄 首頁/品牌故事/產品介紹,右欄 據點通路/最新消息/聯絡我們) */
.ct-footer #footer-menu > ul {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	column-gap: 36px;
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-footer #footer-menu .ct-menu-link {
	font-family: var(--yj-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 2.6;
	color: var(--yj-yellow);
	padding: 0;
}

.ct-footer #footer-menu .ct-menu-link:hover {
	color: var(--yj-white);
}

/* 欄 4:聯絡資訊 */
.yj-f-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yj-f-list li {
	font-family: var(--yj-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 2.6;
	color: var(--yj-yellow);
	display: flex;
	gap: 4px;
}

.yj-f-list a {
	color: var(--yj-yellow);
	text-decoration: none;
}

.yj-f-list a:hover {
	color: var(--yj-white);
}

.yj-f-list .yj-f-mail,
.yj-f-list .__cf_email__ {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yj-f-label {
	flex: 0 0 auto;
}

/* 版權列 */
.ct-footer [data-row="bottom"] {
	background-color: var(--yj-gray);
}

.ct-footer .ct-footer-copyright,
.ct-footer .ct-footer-copyright p {
	font-family: var(--yj-font);
	font-size: 16px;
	line-height: 1.75;
	color: var(--yj-white);
	margin: 0;
	padding-block: 8px;
}

/* 版權列的上下留白完全交給上面的 padding-block: 8px 控制 */
.ct-footer [data-row="bottom"] > .ct-container {
	padding-block: 0;
}

.ct-footer .ct-footer-copyright a {
	color: var(--yj-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ct-footer .ct-footer-copyright a:hover {
	color: var(--yj-yellow);
}

/* ── 頁尾 RWD ────────────────────────────────────────────────────── */
@media (max-width: 999.98px) {
	.ct-footer [data-row="middle"] > .ct-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	:root { --yj-footer-wave-h: 60px; }

	.yj-f-logo img { width: 190px; }

	.yj-f-brand__name,
	.yj-f-brand__slogan { font-size: 20px; }

	.yj-f-title { font-size: 17px; }
	.ct-footer #footer-menu .ct-menu-link,
	.yj-f-list li { font-size: 16px; }
}

@media (max-width: 689.98px) {
	.ct-footer [data-row="middle"] > .ct-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* 站內導覽:手機版改三欄兩列（品牌故事/產品介紹/據點通路 上排，
	   服務項目/最新消息/聯絡我們 下排）→ 橫向填滿 */
	.ct-footer #footer-menu > ul {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto auto;
		column-gap: 12px;
		row-gap: 4px;
	}
	.ct-footer #footer-menu .ct-menu-link { text-align: left; }

	:root { --yj-footer-wave-h: 40px; }

	.yj-f-logo img { width: 160px; }

	.yj-f-brand__name,
	.yj-f-brand__slogan { font-size: 17px; }

	.yj-f-title { font-size: 16px; }
	.ct-footer #footer-menu .ct-menu-link,
	.yj-f-list li { font-size: 15px; }

	/* 版權文字手機版 13px，避免斷成多餘的行 */
	.ct-footer .ct-footer-copyright,
	.ct-footer .ct-footer-copyright p { font-size: 13px; }
	/* 手機版：移除｜符號、兩段各自成行 */
	.yj-copyright__sep { display: none; }
	.yj-copyright__a,
	.yj-copyright__b { display: block; }

	.yj-f-list li { flex-wrap: wrap; }
}

/* ==========================================================================
   3. 全站共用元件
   ========================================================================== */

body {
	font-family: var(--yj-font);
}

/* 首頁滿版:抵銷 Blocksy 內容容器的左右留白。
   WordPress 的版面樣式對 .is-layout-constrained 的子元素下了
   「margin-left/right: auto !important」,因此這裡必須同樣用
   !important 才能覆寫,否則區塊會被鎖在 1400px 容器內。 */
.entry-content > .yj-home,
.entry-content > .yj-page,
.yj-home,
.yj-page {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw;
}

/* 文章與自訂項目的內容區垂直間距：在 Blocksy 既有值上再各加 40px。
   直接覆寫它自己的 --theme-content-vertical-spacing，設定面板仍可再調。
   桌機 60→100、平板 60→100、手機 50→90 */
.yj-content-spacing-marker{}
[data-prefix="blog"],
[data-prefix="categories"],
[data-prefix="author"],
[data-prefix="search"],
[data-prefix="single_blog_post"],
[data-prefix="sc_cpt_archive"],
[data-prefix="sc_cpt_single"] {
	--theme-content-vertical-spacing: 80px;
}

/* 內容最後一塊會直接貼住頁尾，且被頁尾往上延伸的橘色波浪蓋掉。
   正確做法：把間距加進「該區塊自己的背景內」（例如相關文章的米色背景往下延伸），
   而不是在頁面底部另外墊一塊空白。波浪高度也要一併讓開。 */

/* 相關文章：底部留白加在它自己的米色背景裡（往下延伸，非另加白塊） */
[data-prefix="single_blog_post"] .ct-related-posts-container {
	padding-bottom: calc(40px + var(--yj-footer-wave-h));
}

/* 封存／分類頁最後一列同理：容器底補上波浪高度，避免卡片被波浪蓋住。
   客戶回饋文章列表與頁尾太近 → 加大到 96px + 波浪高度。 */
[data-prefix="blog"] main.site-main > .ct-container,
[data-prefix="categories"] main.site-main > .ct-container,
[data-prefix="author"] main.site-main > .ct-container,
[data-prefix="search"] main.site-main > .ct-container,
[data-prefix="sc_cpt_archive"] main.site-main > .ct-container {
	padding-bottom: calc(96px + var(--yj-footer-wave-h));
}

@media (max-width: 689.98px) {
	[data-prefix="blog"],
	[data-prefix="categories"],
	[data-prefix="author"],
	[data-prefix="search"],
	[data-prefix="single_blog_post"],
	[data-prefix="sc_cpt_archive"],
	[data-prefix="sc_cpt_single"] {
		--theme-content-vertical-spacing: 60px;
	}
}

/* 內頁共用主視覺：所有內頁的 Hero 尺寸、內距、字級、文字位置完全一致，
   只有底色與文字色由各頁以 --phero-bg / --phero-title 覆寫。
   這樣就不會出現「每頁像不同設計」的問題。 */
.yj-phero {
	display: grid;
	grid-template-columns: 51% 49%;
	height: 559px;   /* 固定高度：兩頁 Hero 完全等高，不被圖片固有比例撐大 */
}

.yj-phero__text {
	background-color: var(--phero-bg, var(--yj-yellow));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 60px 64px max(60px, calc((100vw - var(--yj-container)) / 2));
}

.yj-phero__eyebrow {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.6;
	color: var(--phero-accent, var(--yj-orange));
	margin: 0 0 20px;
}

.yj-phero__title {
	font-size: 46px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--phero-title, var(--yj-red));
	margin: 0 0 10px;
}

.yj-phero__en {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--phero-title, var(--yj-red));
	margin: 0 0 22px;
}

.yj-phero__note {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.75;
	color: var(--phero-accent, var(--yj-orange));
	margin: 0;
}

/* 用 .yj-phero 前綴把權重提到 0-3-0，蓋過各頁內聯的
   .yj-xxx-page img{height:auto}（0-1-1），否則寬圖會超出 Hero 底部、
   造成「左色塊高、右圖沒對齊」。 */
.yj-phero .yj-phero__media { position: relative; overflow: hidden; }
.yj-phero .yj-phero__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}

@media (max-width: 999.98px) {
	.yj-phero { grid-template-columns: minmax(0, 1fr); height: auto; }
	.yj-phero__text { padding: 56px 40px; }
	.yj-phero__eyebrow { font-size: 17px; margin-bottom: 18px; }
	.yj-phero__title { font-size: 36px; }
	.yj-phero__en { font-size: 30px; letter-spacing: 0.06em; margin-bottom: 20px; }
	.yj-phero__note { font-size: 14px; }
	.yj-phero .yj-phero__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 689.98px) {
	.yj-phero__text { padding: 40px 20px; }
	.yj-phero__eyebrow { font-size: 15px; margin-bottom: 12px; }
	.yj-phero__title { font-size: 28px; }
	.yj-phero__en { font-size: 22px; letter-spacing: 0.04em; margin-bottom: 16px; }
	.yj-phero__note { font-size: 13px; }
	.yj-phero .yj-phero__media { aspect-ratio: 4 / 3; }
}

/* 內頁共用的區塊標題組：橘色中文標題 + 黃色底線 + 橘色英文小標。
   關於湧金 / 釀造旅程 / 兩位核心人物 / 關於酒廠 等區塊皆使用，
   後續其他內頁也可直接沿用。 */
.yj-head {
	text-align: center;
	margin-bottom: 88px;
}

.yj-head__title {
	display: inline-block;
	position: relative;
	margin: 0;
	padding-bottom: 10px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var(--yj-orange);
}

.yj-head__title::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background-color: var(--yj-yellow);
}

/* 用 .yj-head 前綴提高權重，蓋過各頁內聯的
   .yj-xxx-page :where(p...){margin:0}（載入順序在後、會吃掉這裡的 margin） */
.yj-head .yj-head__en {
	margin: 28px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yj-orange);
}

@media (max-width: 999.98px) {
	.yj-head { margin-bottom: 56px; }
	.yj-head__title { font-size: 32px; padding-bottom: 10px; }
	.yj-head .yj-head__en { font-size: 17px; margin-top: 22px; }
}

@media (max-width: 689.98px) {
	.yj-head { margin-bottom: 40px; }
	.yj-head__title { font-size: 26px; padding-bottom: 8px; }
	.yj-head__title::after { height: 3px; }
	.yj-head .yj-head__en { font-size: 14px; margin-top: 18px; letter-spacing: 0.1em; }
}

/* 品牌膠囊按鈕(橘底黃字)*/
.yj-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 30px;
	border-radius: 999px;
	background-color: var(--yj-orange);
	color: var(--yj-yellow);
	font-family: var(--yj-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.yj-btn:hover,
.yj-btn:focus-visible {
	background-color: var(--yj-red);
	color: var(--yj-yellow);
	transform: translateY(-2px);
}

/* 白底膠囊按鈕(主視覺用)*/
.yj-btn--light {
	background-color: var(--yj-white);
	color: var(--yj-orange);
}

.yj-btn--light:hover,
.yj-btn--light:focus-visible {
	background-color: var(--yj-yellow);
	color: var(--yj-orange);
}

.yj-btn__arrow {
	display: inline-block;
	width: 25px;
	height: 8px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 8'%3E%3Cpath d='M0 3.6h21.4L18.1.4l.7-.4L25 4l-6.2 4-.7-.4 3.3-3.2H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% / contain;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 8'%3E%3Cpath d='M0 3.6h21.4L18.1.4l.7-.4L25 4l-6.2 4-.7-.4 3.3-3.2H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% / contain;
	transition: transform .25s ease;
}

.yj-btn:hover .yj-btn__arrow { transform: translateX(4px); }

@media (max-width: 999.98px) {
	.yj-btn { font-size: 17px; padding: 10px 26px; }
}

@media (max-width: 689.98px) {
	.yj-btn { font-size: 15px; padding: 9px 22px; min-height: 42px; }
	.yj-btn__arrow { width: 20px; }
}

/* 焦點可見性(鍵盤操作)*/
.yj-btn:focus-visible,
.ct-menu-link:focus-visible,
.yj-f-list a:focus-visible {
	outline: 3px solid var(--yj-yellow);
	outline-offset: 3px;
}

/* ==========================================================================
   捲動進場動畫系統
   --------------------------------------------------------------------------
   用法:給元素加 data-yj-anim="fade|up|left|right|zoom"，
   進入視窗時由 JS 加上 .yj-in 觸發。可加 data-yj-delay="1|2|3" 做序列延遲。
   完全尊重 prefers-reduced-motion:reduce（該情況下所有元素直接顯示、不位移）。
   ========================================================================== */
[data-yj-anim]{
	opacity:0;
	transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
	will-change:opacity, transform;
}
[data-yj-anim="up"]{transform:translateY(40px)}
[data-yj-anim="left"]{transform:translateX(-48px)}
[data-yj-anim="right"]{transform:translateX(48px)}
[data-yj-anim="zoom"]{transform:scale(.94)}
[data-yj-anim="fade"]{transform:none}

/* 進場後 */
[data-yj-anim].yj-in{opacity:1;transform:none}

/* 序列延遲 */
[data-yj-delay="1"]{transition-delay:.08s}
[data-yj-delay="2"]{transition-delay:.16s}
[data-yj-delay="3"]{transition-delay:.24s}
[data-yj-delay="4"]{transition-delay:.32s}
[data-yj-delay="5"]{transition-delay:.4s}
[data-yj-delay="6"]{transition-delay:.48s}
[data-yj-delay="7"]{transition-delay:.56s}

/* 減少動態偏好:仍保留純淡入(opacity),但不做任何位移/縮放/延遲,避免動暈 */
@media (prefers-reduced-motion:reduce){
	[data-yj-anim]{transform:none !important;transition:opacity .6s ease !important;transition-delay:0s !important}
	[data-yj-anim].yj-in{opacity:1}
}

/* ==========================================================================
   頁尾波浪流動效果（2026-07）
   JS 啟用時，functions.php 會在頁尾插入 canvas.yj-footer-wave 並加上 .yj-wave-live，
   此時隱藏原本的靜態 ::before 波浪、改由 canvas 畫流動波。
   ========================================================================== */
.ct-footer.yj-wave-live [data-row="middle"]::before { display: none; }
.ct-footer .yj-footer-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	width: 100%;
	height: var(--yj-footer-wave-h);
	display: block;
	pointer-events: none;
}