/*
Theme Name: 豐遠資訊官網
Theme URI: https://richers.1wp.site
Description: 豐遠資訊官網子主題，母主題為 Twenty Twenty-Five。所有客製化樣式、版型覆寫與功能都放在這個資料夾內，不要修改母主題或 WordPress 核心。
Author: 豐遠資訊
Template: twentytwentyfive
Version: 1.2.0
Requires PHP: 8.0
Text Domain: richers-child
*/

/* ------------------------------------------------------------------
   示意數據提示
   上線前必須替換所有 ※ 標記處。此樣式刻意醒目，避免示意內容誤上線。
   全部替換完成後，連同這段 CSS 一起刪除。
   ------------------------------------------------------------------ */
.fy-placeholder-notice {
	background: #FFF3CD;
	border: 2px solid #B8860B;
	border-left-width: 6px;
	color: #5C4400;
	padding: 0.9em 1.2em;
	border-radius: 4px;
	font-size: 0.95em;
	line-height: 1.7;
}

/* ------------------------------------------------------------------
   案例牆 [richers_case_wall]
   色彩一律走母主題的 preset 變數並附後備值，避免日後改 theme.json 時脫鉤。
   ------------------------------------------------------------------ */
.fy-casewall {
	--fy-ink: var(--wp--preset--color--contrast, #1a1a1a);
	--fy-line: color-mix(in srgb, var(--wp--preset--color--contrast, #1a1a1a) 14%, transparent);
	--fy-soft: color-mix(in srgb, var(--wp--preset--color--contrast, #1a1a1a) 6%, transparent);
	--fy-tile: var(--wp--preset--color--base, #ffffff);
	margin-block: 2rem;
}

/* 篩選列 */
.fy-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.fy-filter__btn {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.45em 0.95em;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--fy-ink);
	background: transparent;
	border: 1px solid var(--fy-line);
	border-radius: 999px;
	cursor: pointer;
}

.fy-filter__btn:hover {
	background: var(--fy-soft);
}

.fy-filter__btn.is-active {
	background: var(--fy-ink);
	border-color: var(--fy-ink);
	color: var(--fy-tile);
}

.fy-filter__n {
	font-size: 0.78em;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

/* 卡片格線 */
.fy-case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fy-case-grid > li[hidden] {
	display: none;
}

.fy-case {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--fy-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--fy-tile);
}

/*
   標誌用 contain 置中，不可用 cover。
   來源檔是 500x500 的客戶標誌而非網站截圖，裁切會直接破壞客戶識別。
*/
.fy-case__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: 1.25rem;
	background: #fff;
	border-bottom: 1px solid var(--fy-line);
}

.fy-case__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.fy-case__logo--none {
	font-size: 1.6rem;
	font-weight: 700;
	color: #b9b9b9;
	letter-spacing: 0.05em;
}

.fy-case__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1rem 1.1rem 1.15rem;
	flex: 1;
}

.fy-case__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	text-wrap: balance;
}

.fy-case__title a {
	color: var(--fy-ink);
	text-decoration: none;
}

.fy-case__title a:hover {
	text-decoration: underline;
}

.fy-case__desc {
	margin: 0;
	font-size: 0.83rem;
	line-height: 1.6;
	opacity: 0.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 多語系版本徽章：同一專案的其他語系，不另外佔一張卡 */
.fy-case__langs {
	display: flex;
	gap: 0.3rem;
}

.fy-case__lang {
	font-size: 0.72rem;
	line-height: 1;
	padding: 0.32em 0.55em;
	border: 1px solid var(--fy-line);
	border-radius: 4px;
	text-decoration: none;
	color: var(--fy-ink);
	opacity: 0.8;
}

.fy-case__lang.is-current {
	background: var(--fy-soft);
	opacity: 1;
}

.fy-case__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: auto;
}

.fy-case__chip {
	font-size: 0.7rem;
	line-height: 1.3;
	padding: 0.28em 0.6em;
	border-radius: 4px;
	background: var(--fy-soft);
	opacity: 0.9;
}

.fy-case__site {
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--fy-ink);
	opacity: 0.7;
}

.fy-case__site:hover {
	opacity: 1;
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
	.fy-filter__btn,
	.fy-case__site {
		transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	}
}
/* ------------------------------------------------------------------
   寬表格的行動版防護
   維運頁的服務比較表有四欄中文，在 375px 寬的螢幕上會把版面撐開、
   造成整頁橫向捲動。讓表格在自己的容器內捲，頁面本身永遠不橫捲。
   ------------------------------------------------------------------ */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	min-width: 32rem;
}

.wp-block-table th,
.wp-block-table td {
	vertical-align: top;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* 表單在窄螢幕不要溢出 */
.fluentform,
.fluentform .ff-el-group {
	max-width: 100%;
}

.fluentform input,
.fluentform textarea,
.fluentform select {
	max-width: 100%;
	box-sizing: border-box;
}

/* ==================================================================
   首頁與服務頁的版面系統
   色彩取自舊站 LOGO 的實際像素：金 #EFC620、深藍 #1B1F79。
   不另外發明顏色。
   ================================================================== */
.fy {
	--navy: #1B1F79;
	--navy-deep: #14173F;
	--navy-tint: #EEEFF8;
	--gold: #EFC620;
	--gold-tint: #FDF6DC;
	--ink: #14161F;
	--ink-soft: #545B70;
	--paper: #FFFFFF;
	--paper-alt: #F4F5F8;
	--line: #DCDFE9;
	--sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
}

/* 區塊外框：滿版底色，內容置中 --------------------------------- */
.fy-band {
	--band-bg: var(--paper);
	background: var(--band-bg);
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	padding-inline: clamp(1.25rem, 5vw, 3.5rem);
	font-family: var(--sans);
	color: var(--ink);
}

.fy-band--alt { --band-bg: var(--paper-alt); }
.fy-band--navy { --band-bg: var(--navy); color: #fff; }
.fy-band--gold { --band-bg: var(--gold); color: var(--navy-deep); }
.fy-band--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.fy-inner {
	max-width: 1180px;
	margin-inline: auto;
}

/* 標題系統 ------------------------------------------------------ */
.fy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ink-soft);
	margin-bottom: 1rem;
}

.fy-eyebrow::before {
	content: "";
	width: 28px;
	height: 3px;
	background: var(--gold);
}

.fy-band--navy .fy-eyebrow { color: #B9BEE8; }

.fy-h2 {
	font-size: clamp(1.65rem, 1.1rem + 2.1vw, 2.5rem);
	line-height: 1.24;
	font-weight: 800;
	letter-spacing: -0.015em;
	margin: 0 0 0.9rem;
	text-wrap: balance;
}

.fy-lede {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
	line-height: 1.9;
	color: var(--ink-soft);
	max-width: 40em;
	margin: 0;
}

.fy-band--navy .fy-lede { color: #C6CAEC; }

/* 金色底線的強調短語（沿用舊站手法） */
.fy-mark {
	background-image: linear-gradient(var(--gold), var(--gold));
	background-repeat: no-repeat;
	background-size: 100% 0.34em;
	background-position: 0 88%;
	padding-inline: 0.06em;
}

/* 按鈕 ---------------------------------------------------------- */
.fy-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 1rem 2rem;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.fy-btn--primary { background: var(--navy); color: #fff; }
.fy-btn--primary:hover { background: var(--navy-deep); color: #fff; transform: translateY(-2px); }
.fy-btn--gold { background: var(--gold); color: var(--navy-deep); }
.fy-btn--gold:hover { background: #E0B613; color: var(--navy-deep); transform: translateY(-2px); }
.fy-btn--ghost { border-color: currentColor; color: inherit; }
.fy-btn--ghost:hover { background: currentColor; }
.fy-btn--ghost:hover span { color: var(--paper); }

.fy-btnrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-top: 2rem;
}

.fy-textlink {
	font-size: 0.95rem;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	opacity: 0.8;
}

.fy-textlink:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.fy-btn { transition: none; }
	.fy-btn:hover { transform: none; }
}

/* 主視覺 -------------------------------------------------------- */
.fy-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.fy-hero__h1 {
	font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.7rem);
	line-height: 1.18;
	font-weight: 900;
	letter-spacing: -0.025em;
	margin: 0 0 1.4rem;
	text-wrap: balance;
}

.fy-hero__art {
	position: relative;
	display: grid;
	place-items: center;
}

.fy-hero__art::before {
	content: "";
	position: absolute;
	inset: 6% 4%;
	background: var(--gold);
	opacity: 0.16;
	border-radius: 50%;
	z-index: 0;
}

.fy-hero__art img {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	height: auto;
	display: block;
}

/* 標誌牆 -------------------------------------------------------- */
.fy-wall {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.fy-wall__row { overflow: hidden; }

.fy-wall__track {
	display: flex;
	gap: 0.9rem;
	width: max-content;
	animation: fy-marquee 68s linear infinite;
}

.fy-wall__row--1 .fy-wall__track {
	animation-duration: 84s;
	animation-direction: reverse;
}

.fy-wall:hover .fy-wall__track { animation-play-state: paused; }

@keyframes fy-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.fy-logo {
	flex: none;
	width: 132px;
	height: 92px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--line);
	padding: 0.85rem;
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.fy-logo:hover { border-color: var(--navy); transform: translateY(-2px); }

.fy-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.fy-wall { mask-image: none; -webkit-mask-image: none; }
	.fy-wall__row { overflow: visible; }
	.fy-wall__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
	.fy-wall__row--1 { display: none; }
	.fy-logo { transition: none; }
	.fy-logo:hover { transform: none; }
}

/* 左右圖文 ------------------------------------------------------ */
.fy-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.fy-split--flip .fy-split__art { order: -1; }

.fy-split__art img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
}

.fy-band--navy .fy-split__art img { border-color: rgba(255,255,255,0.16); }

/* 痛點清單 ------------------------------------------------------ */
.fy-pains {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-top: 1.75rem;
}

.fy-pain {
	background: var(--paper);
	padding: 1.15rem 1.35rem;
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	font-size: 0.98rem;
	line-height: 1.75;
}

.fy-pain__mark {
	flex: none;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	background: var(--navy-tint);
	color: var(--navy);
	font-size: 0.72rem;
	font-weight: 800;
	margin-top: 0.25rem;
}

/* 卡片格線 ------------------------------------------------------ */
.fy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.fy-card {
	background: var(--paper);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fy-card__img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--paper-alt);
}

.fy-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.fy-card:hover .fy-card__img img { transform: scale(1.04); }

.fy-card__body {
	padding: 1.4rem 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.fy-card__n {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--gold);
}

.fy-card h3 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.4;
}

.fy-card p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.8;
	color: var(--ink-soft);
}

.fy-card__price {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
	.fy-card__img img { transition: none; }
	.fy-card:hover .fy-card__img img { transform: none; }
}

/* 數據帶 -------------------------------------------------------- */
.fy-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 2rem 1.5rem;
}

.fy-stat { display: flex; flex-direction: column; gap: 0.35rem; }

.fy-stat__n {
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
	font-weight: 900;
	line-height: 1;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.fy-stat__k { font-size: 0.95rem; font-weight: 600; }
.fy-stat__d { font-size: 0.82rem; opacity: 0.72; line-height: 1.6; }

/* 流程 ---------------------------------------------------------- */
.fy-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.75rem;
	margin-top: 2.5rem;
	counter-reset: fystep;
}

.fy-step {
	counter-increment: fystep;
	position: relative;
	padding-top: 2.6rem;
	border-top: 3px solid var(--navy);
}

.fy-step::before {
	content: counter(fystep, decimal-leading-zero);
	position: absolute;
	top: 0.7rem;
	left: 0;
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.fy-step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 800; }
.fy-step p { margin: 0; font-size: 0.9rem; line-height: 1.8; color: var(--ink-soft); }

/* 比較表 -------------------------------------------------------- */
.fy-compare { overflow-x: auto; margin-top: 2.25rem; }

.fy-compare table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--paper);
}

.fy-compare th,
.fy-compare td {
	padding: 1rem 1.15rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.fy-compare thead th {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	font-weight: 800;
	border-bottom: 3px solid var(--navy);
	white-space: nowrap;
}

.fy-compare thead th:nth-child(2) { background: var(--navy); color: #fff; }
.fy-compare tbody td:nth-child(2) { background: var(--navy-tint); font-weight: 700; }
.fy-compare tbody td:last-child { color: var(--ink-soft); }

/* 響應式 -------------------------------------------------------- */
@media (max-width: 860px) {
	.fy-hero,
	.fy-split { grid-template-columns: minmax(0, 1fr); }
	.fy-split--flip .fy-split__art { order: 0; }
	.fy-hero__art { order: -1; }
	.fy-hero__art img { max-width: 300px; }
	.fy-logo { width: 108px; height: 78px; }
}

/* 首頁案例預覽（完整 48 張在 /showcases/） ---------------------- */
.fy-case2-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
}

.fy-case2 { display: flex; }

.fy-case2 > a {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	width: 100%;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	padding: 1rem;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.fy-case2 > a:hover { border-color: var(--navy); transform: translateY(-3px); }

.fy-case2__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: 0.5rem;
}

.fy-case2__thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.fy-case2__name { font-size: 0.92rem; font-weight: 700; line-height: 1.5; }
.fy-case2__desc { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
	.fy-case2 > a { transition: none; }
	.fy-case2 > a:hover { transform: none; }
}

/* 全寬樣板：確保區塊不被根層級的左右留白夾住 -------------------- */
.page-template-page-full-width .wp-site-blocks,
body:has(.fy-band) .wp-site-blocks {
	--wp--style--root--padding-right: 0px;
	--wp--style--root--padding-left: 0px;
}

.fy-band { width: 100%; }

/* ------------------------------------------------------------------
   與母主題的頁首／頁尾對齊
   頁首導覽用 alignwide（1340px）＋ 根層級左右留白 spacing--50。
   內容框若不跟著同一組數值，區塊邊緣會跟導覽差出一截。
   ------------------------------------------------------------------ */
.fy-band {
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
}

.fy-inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
}

/* ------------------------------------------------------------------
   橫向捲軸修正
   母主題 Twenty Twenty-Five 沒有設全域 box-sizing，預設是 content-box。
   .fy-band 同時有 width:100% 與左右 padding，實際寬度會變成
   100% + 兩側 padding，整頁因此多出約 100px 而產生橫向捲軸。
   在寬螢幕最明顯，因為 padding 已被 clamp 頂到上限 50px。
   兩個修法一起用：把 box-sizing 限定在自己的元件內（不動母主題的版面計算），
   並拿掉多餘的 width:100%——section 本來就是區塊元素，會自己填滿容器。
   ------------------------------------------------------------------ */
.fy,
.fy *,
.fy *::before,
.fy *::after {
	box-sizing: border-box;
}

.fy-band {
	width: auto;
	max-width: 100%;
}

/* 最後一道保險：任何元件內的意外溢出都不該讓整頁橫捲 */
.fy-band > .fy-inner {
	max-width: min(var(--wp--style--global--wide-size, 1340px), 100%);
}

/* 長文閱讀欄（法律文件、政策說明） ------------------------------ */
.fy-prose {
	max-width: 46rem;
	font-size: 1rem;
	line-height: 2;
	color: var(--ink-soft);
}

.fy-prose h2 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--ink);
	margin: 2.5rem 0 0.75rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--gold);
	line-height: 1.5;
}

.fy-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fy-prose p { margin: 0 0 1rem; }
.fy-prose p:last-child { margin-bottom: 0; }

/* ==================================================================
   精修：字級下限、點擊目標、焦點樣式
   依 2026-08-20 全站實測結果調整。繁體中文的辨識度在 13px 以下明顯
   下降（筆畫多、字腔小），所以字級下限訂在 13px，敘述性文字 14px。
   ================================================================== */

/* --- 字級下限 --- */
.fy-eyebrow,
.fy-card__n,
.fy-filter__n,
.fy-case__chip,
.fy-case__lang,
.fy-case2__desc {
	font-size: 0.8125rem;   /* 13px */
}

.fy-case__desc,
.fy-case__site,
.fy-stat__d,
.fy-case2__name {
	font-size: 0.875rem;    /* 14px */
}

.fy-card p,
.fy-step p {
	font-size: 0.95rem;
}

.fy-filter__btn {
	font-size: 0.9rem;
}

/* --- 點擊目標：行動裝置的最小可靠尺寸 --- */
.fy-filter__btn {
	min-height: 42px;
	padding: 0.5em 1.1em;
}

.fy-case__site {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

.fy-case__lang {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
}

.fy-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/* --- 焦點樣式：鍵盤操作看得見自己在哪 --- */
.fy a:focus-visible,
.fy button:focus-visible,
.fy-logo:focus-visible,
.fy-case2 > a:focus-visible,
.fy-filter__btn:focus-visible,
.fy-case__thumb:focus-visible,
.fy-case__title a:focus-visible {
	outline: 3px solid var(--gold, #EFC620);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- 排版細節 --- */
.fy p,
.fy-lede,
.fy-pain span,
.fy-card p,
.fy-step p {
	text-wrap: pretty;
}

/* 中文大標的字距不要收得太緊，筆畫會黏在一起 */
.fy-hero__h1 { letter-spacing: -0.015em; }
.fy-h2 { letter-spacing: -0.008em; }

/* 卡片浮起時給一點陰影，純位移看起來像沒對齊 */
.fy-card {
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fy-card:hover {
	border-color: color-mix(in srgb, var(--navy) 35%, transparent);
	box-shadow: 0 10px 28px -18px rgba(20, 23, 63, 0.55);
	transform: translateY(-3px);
}

.fy-case2 > a:hover {
	box-shadow: 0 10px 26px -18px rgba(20, 23, 63, 0.5);
}

.fy-logo:hover {
	box-shadow: 0 8px 20px -14px rgba(20, 23, 63, 0.5);
}

/* 分類標籤太多時視覺會很吵，降一點對比 */
.fy-case__chip {
	background: color-mix(in srgb, var(--navy) 7%, transparent);
	color: color-mix(in srgb, var(--ink) 78%, transparent);
	padding: 0.3em 0.65em;
	line-height: 1.5;
}

/* 區塊之間的節奏：相鄰同底色的區塊不要出現兩倍留白 */
.fy-band + .fy-band {
	padding-block-start: clamp(3rem, 6vw, 5.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.fy-card { transition: none; }
	.fy-card:hover { transform: none; box-shadow: none; }
}

/* --- 行動版微調 --- */
@media (max-width: 600px) {
	.fy-hero__h1 { font-size: clamp(1.85rem, 1.2rem + 3vw, 2.4rem); }
	.fy-h2 { font-size: clamp(1.45rem, 1.1rem + 2vw, 1.9rem); }
	.fy-btn { width: 100%; justify-content: center; }
	.fy-btnrow { gap: 0.75rem; }
	.fy-stats { gap: 1.5rem 1rem; }
	.fy-pain { padding: 1rem 1.1rem; }
}

/* --- 條列標記：11.5px 在中文與數字混排時偏小 --- */
.fy-pain__mark {
	font-size: 0.8125rem;
	width: 26px;
	height: 26px;
	margin-top: 0.15rem;
}

/* --- 整張卡片變成點擊區（stretched link） ---------------------
   卡片標題連結原本只有 24px 高，遠低於行動裝置的可靠點擊尺寸。
   與其把標題硬撐大破壞版面，不如讓標題連結的 ::after 覆蓋整張卡，
   點哪裡都進得去，同時保留語意上只有一個連結。
   卡內的次要連結（前往網站、語系徽章）拉到上層，不被蓋住。 */
.fy-case,
.fy-card {
	position: relative;
}

.fy-case__title a::after,
.fy-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fy-case__site,
.fy-case__langs,
.fy-case__lang {
	position: relative;
	z-index: 2;
}

/* 整卡可點之後，游標與焦點也要跟著整卡走 */
.fy-case:hover,
.fy-card:hover {
	cursor: pointer;
}

.fy-case:focus-within,
.fy-card:focus-within {
	outline: 3px solid var(--gold, #EFC620);
	outline-offset: 3px;
}

.fy-case__title a:focus-visible,
.fy-card h3 a:focus-visible {
	outline: none;
}

/* 語系徽章補到 40px */
.fy-case__lang {
	min-width: 40px;
	min-height: 40px;
}

/* 行內連結補足點擊區：用 padding-block 撐開，不改變文字位置也不破壞換行 */
.fy-pain a,
.fy-prose a {
	padding-block: 0.45rem;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   置中縮圖的可靠寫法
   原本用 max-width/max-height:100% + width/height:auto，在 grid 項目裡
   百分比 max-height 會與內容尺寸形成循環相依而被瀏覽器忽略——實測標誌框
   內容區只有 105x65，圖卻算成 103x103，下方溢出 25px，看起來就是「上留白多、
   下面被切掉」。改用 width/height:100% + object-fit:contain 才穩定。
   ------------------------------------------------------------------ */
.fy-logo img,
.fy-case__logo,
.fy-case2__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

.fy-case__thumb,
.fy-case2__thumb {
	overflow: hidden;
}

/* ==================================================================
   背景層次
   純色大面積在寬螢幕上會顯得單調。用極輕的幾何紋路與徑向光暈製造層次，
   強度刻意壓到幾乎看不出「有圖案」，只覺得沒那麼平——濃度一高就變裝飾噪音。
   ================================================================== */
.fy-band { position: relative; isolation: isolate; }

.fy-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* 淺灰區塊：細點陣，模擬紙面 */
.fy-band--alt::before {
	background-image: radial-gradient( circle at 1px 1px, rgba(27, 31, 121, 0.10) 1px, transparent 0 );
	background-size: 22px 22px;
	opacity: 0.9;
}

/* 白色區塊：右上角一片極淡的金色光暈，呼應 LOGO 的弦月 */
.fy-band:not(.fy-band--alt):not(.fy-band--navy):not(.fy-band--gold)::before {
	background:
		radial-gradient( 900px 520px at 88% -10%, rgba(239, 198, 32, 0.10), transparent 62% ),
		radial-gradient( 700px 460px at -8% 108%, rgba(27, 31, 121, 0.055), transparent 60% );
}

/* 深藍區塊：同色系光暈 + 斜向細線，避免大面積死板 */
.fy-band--navy::before {
	background:
		radial-gradient( 780px 520px at 82% 8%, rgba(255, 255, 255, 0.10), transparent 60% ),
		repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 11px );
}

/* 金色區塊：同色深一階的斜線，讓大塊金色有肌理 */
.fy-band--gold::before {
	background: repeating-linear-gradient( 135deg, rgba(20, 23, 63, 0.05) 0 2px, transparent 2px 12px );
}

/* ==================================================================
   右下角客服按鈕
   ================================================================== */
.fy-fab {
	position: fixed;
	right: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 24px);
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-end;
	font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.fy-fab__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 52px;
	padding: 0 1.15rem;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 26px -10px rgba(20, 23, 63, 0.5);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.fy-fab__btn--line { background: #06C755; color: #fff; }
.fy-fab__btn--tel  { background: #1B1F79; color: #fff; }

.fy-fab__btn:hover,
.fy-fab__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -10px rgba(20, 23, 63, 0.6);
	color: #fff;
}

.fy-fab__btn:focus-visible {
	outline: 3px solid #EFC620;
	outline-offset: 3px;
}

/* 窄螢幕縮成圓形，只留圖示，不遮內容 */
@media (max-width: 720px) {
	.fy-fab__btn {
		width: 52px;
		padding: 0;
		justify-content: center;
	}
	.fy-fab__label {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fy-fab__btn { transition: none; }
	.fy-fab__btn:hover { transform: none; }
}

/* 頁尾留出空間，按鈕不會壓到最後一行字 */
body { padding-bottom: 0; }
.fy-band:last-of-type { padding-bottom: clamp(4rem, 8vw, 7rem); }

/* 內容頁：案例標誌的白底承板、文章內文的排版 -------------------- */
.fy-single__plate {
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--line);
	padding: clamp(1.5rem, 4vw, 3rem);
	width: 100%;
	max-width: 420px;
	aspect-ratio: 4 / 3;
}

.fy-single__plate img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fy-case__chips a.fy-case__chip {
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.fy-case__chips a.fy-case__chip:hover {
	background: color-mix(in srgb, var(--navy) 16%, transparent);
}

/* 文章內文：搬進來的是傳統 HTML，要自己給排版 */
.fy-article h2 {
	font-size: 1.35rem;
	margin-top: 2.75rem;
}

.fy-article h3 {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--ink);
	margin: 2rem 0 0.6rem;
	line-height: 1.5;
}

.fy-article img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.75rem auto;
	border: 1px solid var(--line);
}

.fy-article ul,
.fy-article ol {
	padding-left: 1.4rem;
	margin: 0 0 1.25rem;
}

.fy-article li {
	margin-bottom: 0.5rem;
}

.fy-article blockquote {
	margin: 1.75rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--gold);
	color: var(--ink);
}

.fy-article table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	margin: 1.5rem 0;
	display: block;
	overflow-x: auto;
}

.fy-article th,
.fy-article td {
	border: 1px solid var(--line);
	padding: 0.6rem 0.8rem;
	text-align: left;
}

/* 換成真實攝影後各圖比例不一，統一用 aspect-ratio 穩住版面，
   避免載入時的版面位移（CLS），也不必在 HTML 寫死 width/height */
.fy-split__art img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.fy-hero__art img:not(.fy-case__logo) {
	aspect-ratio: auto;
}

.fy-band--tight .fy-inner > img,
.fy-article > img:first-child {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* ------------------------------------------------------------------
   頁首高度
   LOGO 原比例 512x294，設 168px 寬會變成 96px 高，加上上下留白，
   整條頁首逼近 136px，在筆電上吃掉太多第一屏。改成鎖高度 44px。
   ------------------------------------------------------------------ */
.wp-block-site-logo img,
.wp-block-site-logo a {
	height: 44px;
	width: auto;
	max-width: none;
	display: block;
}

@media (max-width: 720px) {
	.wp-block-site-logo img,
	.wp-block-site-logo a { height: 36px; }
}

/* ------------------------------------------------------------------
   標誌牆圖片置中
   來源標誌多為 500x500 方形，但外框是 132x92 的橫式。
   用 flex 置中 + object-fit 讓圖在框內完整置中，
   並移除 WordPress 自動加上的 vertical-align 基線位移（那會讓圖偏下）。
   ------------------------------------------------------------------ */
.fy-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.fy-logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center center;
	vertical-align: middle;
}

/* ==================================================================
   區塊之間的縫隙
   母主題的全域樣式對 flow 版面的每個子元素加了 margin-block-start: 1.2rem，
   我的滿版 section 是 main 的直接子元素，於是每兩塊之間就多一條淺色細縫。
   用 main .fy-band 提高一級特異度蓋掉，不用 !important。
   ================================================================== */
main .fy-band,
main .wp-block-group.fy-band,
.wp-site-blocks main > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 同一條 1.2rem 也落在頁尾的樣板組件上。頁尾底色是淺灰、body 是白的，
   那道縫剛好露出白色底，看起來就是頁尾上方多一條留白。
   頁首沒事是因為它上面沒有相鄰的兄弟元素。 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ==================================================================
   案例的網站截圖：瀏覽器視窗外框
   ================================================================== */
.fy-frame {
	margin-top: 1.75rem;
	margin-inline: auto;
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: 0 24px 60px -34px rgba(20, 23, 63, 0.55);
	overflow: hidden;
}

.fy-frame__bar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 1rem;
	background: var(--paper-alt);
	border-bottom: 1px solid var(--line);
}

.fy-frame__dots {
	display: inline-flex;
	gap: 0.35rem;
	flex: none;
}

.fy-frame__dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D3D6E0;
}

.fy-frame__url {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.28rem 0.9rem;
	font-size: 0.8125rem;
	color: var(--ink-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fy-frame__open {
	flex: none;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	padding: 0.4rem 0.2rem;
}

.fy-frame__open:hover { text-decoration: underline; }

.fy-frame__shot {
	max-height: 78vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
}

.fy-frame__shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==================================================================
   文章目錄
   ================================================================== */
.fy-toc {
	background: var(--paper-alt);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	padding: 1.15rem 1.4rem;
	margin: 0 0 2.25rem;
	font-size: 0.95rem;
}

.fy-toc__title {
	display: block;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 0.6rem;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.fy-toc ol {
	margin: 0;
	padding-left: 1.2rem;
	line-height: 1.9;
}

.fy-toc a {
	color: var(--ink-soft);
	text-decoration: none;
	padding-block: 0.2rem;
}

.fy-toc a:hover { color: var(--navy); text-decoration: underline; }

.fy-article h2 { scroll-margin-top: 90px; }

/* ==================================================================
   作者資訊
   ================================================================== */
.fy-authorbox {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 2px solid var(--line);
}

.fy-authorbox img {
	flex: none;
	width: 108px;
	height: auto;
	border: 1px solid var(--line);
	padding: 0.5rem;
	background: #fff;
	margin: 0;
}

.fy-authorbox strong { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 0.35rem; }
.fy-authorbox p { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.8; }

/* ==================================================================
   部落格清單
   ================================================================== */
.fy-postgrid {
	gap: 1.5rem !important;
	margin-top: 2.5rem;
}

.fy-post {
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fy-post:hover {
	border-color: color-mix(in srgb, var(--navy) 35%, transparent);
	box-shadow: 0 10px 28px -18px rgba(20, 23, 63, 0.55);
	transform: translateY(-3px);
}

.fy-post__img { margin: 0 !important; }
.fy-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fy-post__body {
	padding: 1.15rem 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.fy-post__date {
	font-size: 0.8125rem !important;
	color: var(--ink-faint, #7E8698);
	font-variant-numeric: tabular-nums;
	margin: 0 !important;
}

.fy-post__title { margin: 0 !important; line-height: 1.5; }
.fy-post__title a { color: var(--ink); text-decoration: none; font-weight: 700; }
.fy-post__title a:hover { color: var(--navy); text-decoration: underline; }

.fy-post__excerpt {
	margin: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.8;
	color: var(--ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fy-pagination {
	margin-top: 3rem !important;
	gap: 0.5rem;
	font-size: 0.95rem;
}

.fy-pagination a,
.fy-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	text-decoration: none;
}

.fy-pagination a:hover { border-color: var(--navy); }
.fy-pagination .current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }

.fy-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, var(--paper-alt), #fff );
}

@media (prefers-reduced-motion: reduce) {
	.fy-post { transition: none; }
	.fy-post:hover { transform: none; box-shadow: none; }
}

/* ==================================================================
   頁首：加上聯絡資訊列與行動呼籲，不要只有 LOGO 加選單
   ================================================================== */
.fy-topbar {
	background: var(--navy, #1B1F79);
	color: #fff;
	font-size: 0.8125rem;
}

.fy-topbar__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding: 0.5rem var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.fy-topbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fy-topbar a { color: #fff; text-decoration: none; }
.fy-topbar a:hover { color: var(--gold, #EFC620); }
.fy-topbar__tag { color: #C6CAEC; }

@media (max-width: 720px) {
	.fy-topbar__inner { justify-content: center; padding-block: 0.4rem; }
	.fy-topbar__hours { display: none; }
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
}

/* ==================================================================
   影片背景區塊
   影片鋪滿、上面壓一層深藍遮罩，文字才讀得到。
   遮罩用同色系的深藍而不是純黑——純黑會讓整塊變灰濁，
   跟品牌的藍金配色打架（跟先前 OG 圖踩過的是同一個坑）。
   ================================================================== */
.fy-videoband {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	padding-block: clamp(4rem, 8vw, 7rem);
}

.fy-videoband--tall { padding-block: clamp(6rem, 12vw, 10rem); }

.fy-videoband__v {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	/* 影片本身壓暗一點，遮罩就不必調到太不透明，畫面還看得見動態 */
	filter: saturate(0.75) contrast(1.05);
}

.fy-videoband__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient( 180deg,
			color-mix(in srgb, var(--navy, #1B1F79) 82%, transparent) 0%,
			color-mix(in srgb, var(--navy, #1B1F79) 68%, transparent) 45%,
			color-mix(in srgb, var(--navy, #1B1F79) 86%, transparent) 100% );
}

.fy-videoband__body { position: relative; text-align: center; }
.fy-videoband--left .fy-videoband__body { text-align: left; max-width: 46rem; }

.fy-videoband .fy-h2 { color: #fff; }
.fy-videoband .fy-lede { color: #DDE0F5; max-width: 44rem; margin-inline: auto; }
.fy-videoband--left .fy-lede { margin-inline: 0; }
.fy-videoband .fy-btnrow { justify-content: center; }
.fy-videoband--left .fy-btnrow { justify-content: flex-start; }

.fy-eyebrow--light { color: var(--gold, #EFC620); }

/* ==================================================================
   答案框（AEO）
   視覺上要明顯，因為它同時是給人看的重點提示，
   也是給 AI 抓的那一段。兩個用途剛好一致。
   ================================================================== */
.fy-answer {
	background: color-mix(in srgb, var(--gold, #EFC620) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--gold, #EFC620) 45%, transparent);
	border-left: 4px solid var(--gold, #EFC620);
	padding: 1.15rem 1.4rem;
	margin: 1.5rem 0 2rem;
}

.fy-answer__q {
	display: block;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	margin-bottom: 0.45rem;
}

.fy-answer__body {
	margin: 0 !important;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--ink);
	font-weight: 500;
}

/* ==================================================================
   承諾清單
   ================================================================== */
.fy-promise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	gap: 1.25rem 2rem;
	margin-top: 2.5rem;
}

.fy-promise__i {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 0;
	border-top: 1px solid var(--line);
}

.fy-promise__n {
	flex: none;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--gold, #EFC620);
	font-variant-numeric: tabular-nums;
	padding-top: 0.2rem;
	letter-spacing: 0.05em;
}

.fy-promise__i strong {
	display: block;
	font-size: 1.0625rem;
	color: var(--ink);
	margin-bottom: 0.4rem;
}

.fy-promise__i p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.85;
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.fy-videoband__v { display: none; }
}

/* ==================================================================
   自動化字群的文末服務區塊（inc-automation-cta.php）
   ================================================================== */
.fy-autocta {
	margin-top: 3rem;
	padding: 1.75rem 1.75rem 1.5rem;
	background: var(--navy-tint);
	border-left: 4px solid var(--navy);
}
.fy-autocta__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--navy);
	text-transform: uppercase;
}
.fy-autocta__title {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}
.fy-autocta__lede {
	margin: 0 0 1.15rem;
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--ink-soft);
}
.fy-autocta__act { margin: 0; }
.fy-autocta__more {
	margin: 1.1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--ink-soft);
}
@media (max-width: 600px) {
	.fy-autocta { padding: 1.35rem 1.25rem 1.2rem; }
	.fy-autocta__title { font-size: 1.1rem; }
}

/* ==================================================================
   浮動頁首（2026-08-21）

   先前這裡的 sticky 規則選擇器是 `.wp-site-blocks > header.wp-block-group`，
   但實際 DOM 是 .wp-site-blocks > header.wp-block-template-part > header.wp-block-group
   ——樣板組件多包了一層，選擇器沒命中，所以 sticky 從來沒生效過。
   要黏的是外層那個 template-part，它才是 .wp-site-blocks 的直接子元素。

   聯絡橫幅（.fy-topbar）刻意不跟著黏：它是次要資訊，捲走可以把垂直空間
   還給內容，手機上差別特別明顯。
   ================================================================== */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--fy-head-top, 0px);
	z-index: 800;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(1.5) blur(10px);
	backdrop-filter: saturate(1.5) blur(10px);
	box-shadow: 0 1px 0 var(--line, #DCDFE9), 0 6px 18px -12px rgba(20, 23, 63, 0.35);
}

/* 不支援 backdrop-filter 時退回不透明底，避免文字疊在內容上讀不到 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks > header.wp-block-template-part {
		background: var(--paper, #fff);
	}
}

/* 登入者的管理列是 fixed，頁首要讓開，否則會被蓋住 */
.admin-bar { --fy-head-top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar { --fy-head-top: 46px; }
}

/* 錨點捲動時留出頁首的高度，否則標題會被浮動頁首蓋住 */
html {
	scroll-padding-top: calc(var(--fy-head-h, 72px) + var(--fy-head-top, 0px) + 1rem);
}

/* 內層 header 的留白：先前同樣因為選擇器沒命中而失效 */
.wp-site-blocks > header.wp-block-template-part > header.wp-block-group {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 0;            /* 邊線改由外層的 box-shadow 畫，避免捲動時雙線 */
}

@media (max-width: 720px) {
	.wp-site-blocks > header.wp-block-template-part > header.wp-block-group {
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}
	html { --fy-head-h: 60px; }
}

/* ------------------------------------------------------------------
   手機版選單展開時，頁首必須放掉 backdrop-filter

   backdrop-filter（跟 filter / transform / perspective / contain 一樣）會讓
   該元素成為 position:fixed 子孫的 containing block。WordPress 的選單遮罩
   .wp-block-navigation__responsive-container 正是 fixed + inset:0，而它是
   頁首的子孫——於是「滿版」變成「滿版於頁首那條 76px 的區塊」，
   選單有打開但只露出一條，看起來就是點了沒反應。

   z-index 也要一起拉高：頁首本身是 z-index 800 的堆疊環境，遮罩再高也只能
   在這個環境內排序，而浮動聯絡鈕 .fy-fab 是 900，會蓋在展開的選單上。

   掛在 html.has-modal-open —— 那是 WordPress 開啟遮罩時自己加在 <html> 上的。
   ------------------------------------------------------------------ */
html.has-modal-open .wp-site-blocks > header.wp-block-template-part {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--paper, #fff);
	z-index: 100000;
	box-shadow: none;
}

/* 遮罩本身：WordPress 給的是 background-color: inherit，若祖先是透明的，
   選單文字會直接疊在頁面內容上讀不到。這裡明確給底色。 */
html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--paper, #fff);
	color: var(--ink, #14161F);
	padding-top: var(--fy-head-top, 0px);
}

/* 手機版選單展開時，遮罩是 fixed 且 z-index 極高；
   頁首壓在它下面即可，這裡只確保頁首不會反過來蓋住遮罩 */
.wp-block-navigation__responsive-container.is-menu-open { z-index: 100000; }

@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: box-shadow 0.2s ease;
	}
}


/* ==================================================================
   頁尾（2026-08-21 重整）

   原本用 wp:columns 排四欄。WordPress 的 columns 只有一個斷點（782px），
   在 782–1100px 之間四欄會被擠成每欄兩成寬，最後那欄放的是說明文字加按鈕，
   擠起來最難看。改用 grid 自己控三段：4 欄 → 2 欄 → 1 欄。

   同時把聯絡方式搬進頁尾。先前只有頂端的 .fy-topbar 有電話與 LINE，
   而頂端橫幅會隨頁面捲走，找聯絡方式的人習慣往頁尾看。
   ================================================================== */
/* 左右留白要自己給，不能靠根層級變數。
   有 .fy-band 的頁面會被 `body:has(.fy-band) .wp-site-blocks` 把根層級左右留白
   歸零（那是為了讓滿版 section 真的貼齊螢幕邊緣），而頁尾是靠 has-global-padding
   讀同一個變數的，於是跟著變成 0。桌機上因為 alignwide 只有 1340px、兩側本來就有空間，
   看不出來；手機上 alignwide 撐滿寬度，文字就直接貼到螢幕邊。
   數值跟 .fy-band 用同一個，頁尾才會跟上面的內容區塊切齊。 */
.fy-foot {
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
	border-top: 1px solid var(--line, #DCDFE9);
	background: var(--paper-alt, #F4F5F8);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fy-foot__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: clamp(1.75rem, 3vw, 3rem);
	align-items: start;
}

/* 平板：兩欄。品牌欄佔滿整列，聯絡資訊才不會被壓成細長條 */
@media (max-width: 1100px) {
	.fy-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fy-foot__col--brand,
	.fy-foot__col--cta { grid-column: 1 / -1; }
}

/* 手機 --------------------------------------------------------------
   兩個連結欄維持並排。改成單欄的話 10 條連結加聯絡資訊會把頁尾拉到
   要捲三四個畫面，而頁尾的作用是「快速找到東西」，不是讓人一直捲。
   品牌與 CTA 仍橫跨整列，因為它們的內容是整句的。
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
	.fy-foot {
		padding-top: 2.25rem;
		padding-bottom: 1.25rem;
	}

	.fy-foot__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1.25rem;
	}

	.fy-foot__col--brand,
	.fy-foot__col--cta { grid-column: 1 / -1; }

	/* 分成三個看得出來的區塊。沒有分隔線的話整個頁尾讀起來是一長條，
	   使用者得逐行掃才知道哪裡是哪裡。 */
	.fy-foot__col--brand {
		padding-bottom: 1.5rem;
		border-bottom: 1px solid var(--line, #DCDFE9);
	}

	.fy-foot__col--cta {
		padding-top: 1.5rem;
		border-top: 1px solid var(--line, #DCDFE9);
	}

	.fy-foot__h { margin-bottom: 0.5rem; }

	/* 連結欄位窄，字級收一點才不會每條都折行；
	   同時用 padding 把可點區域撐到約 36px，手指才按得到。 */
	.fy-foot__list {
		font-size: 0.85rem;
		line-height: 1.6;
	}

	.fy-foot__list a {
		display: block;
		padding-block: 0.45rem;
	}

	.fy-footcontact {
		margin-top: 0.85rem;
		gap: 0.35rem 0.85rem;
	}

	.fy-footcontact a { padding-block: 0.15rem; }

	.fy-foot__col--brand .wp-block-site-tagline { margin-top: 0.35rem; }

	.fy-foot__note { margin-bottom: 1rem; }

	.fy-foot__base {
		margin-top: 1.75rem;
		padding-top: 1rem;
		gap: 0.35rem 1rem;
		font-size: 0.8rem;
	}
}

/* 區塊主題會替 group 的子元素加預設 margin，grid 欄位裡要清掉才好控間距 */
.fy-foot__col > * { margin-block: 0; }
.fy-foot__col > * + * { margin-top: 0.75rem; }

.fy-foot__h {
	margin: 0 0 0.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ink, #14161F);
}

.fy-foot__list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
}

.fy-foot__list a {
	color: var(--ink-soft, #545B70);
	text-decoration: none;
}

.fy-foot__list a:hover,
.fy-foot__list a:focus-visible {
	color: var(--navy, #1B1F79);
	text-decoration: underline;
}

.fy-foot__col--brand .wp-block-site-title a {
	text-decoration: none;
	color: var(--ink, #14161F);
}

.fy-foot__col--brand .wp-block-site-tagline {
	color: var(--ink-soft, #545B70);
	max-width: 34em;
}

/* 聯絡方式：標籤與內容對齊成兩欄，比純文字好掃 */
.fy-footcontact {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.9;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.15rem 0.9rem;
}

.fy-footcontact li {
	display: contents;
}

.fy-footcontact__tag {
	color: var(--ink-soft, #545B70);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.fy-footcontact a {
	color: var(--ink, #14161F);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.fy-footcontact a:hover,
.fy-footcontact a:focus-visible {
	color: var(--navy, #1B1F79);
	text-decoration: underline;
}

/* 很窄的螢幕上兩欄會把 email 折得很醜，退回單欄堆疊 */
@media (max-width: 330px) {
	.fy-footcontact { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fy-footcontact li { display: block; }
	.fy-footcontact__tag { display: block; }
}

.fy-foot__note {
	color: var(--ink-soft, #545B70);
	line-height: 1.8;
}

@media (max-width: 600px) {
	.fy-foot__btns,
	.fy-foot__btns .wp-block-button { width: 100%; }
	.fy-foot__btns .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* 底部列 -------------------------------------------------------- */
.fy-foot__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--line, #DCDFE9);
	font-size: 0.85rem;
	color: var(--ink-soft, #545B70);
}

.fy-foot__copy { margin: 0; }

.fy-foot__legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
}

.fy-foot__legal a {
	color: var(--ink-soft, #545B70);
	text-decoration: none;
}

.fy-foot__legal a:hover,
.fy-foot__legal a:focus-visible {
	color: var(--navy, #1B1F79);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.fy-foot__base { justify-content: flex-start; }
}

/* 捲到頁尾時收起浮動聯絡鈕（見 functions.php 的 richers_floating_contact） */
.fy-fab {
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fy-fab.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.fy-fab { transition: none; }
}

/* 數字帶的加號。
   .fy-stat 是 flex column，加號若直接當它的子元素會自己占一行，
   所以包一層 .fy-stat__nwrap 讓數字與加號同一行。
   加號不能塞進 .fy-stat__n —— count-up 收尾時會覆寫該元素的 textContent。 */
.fy-stat__nwrap {
	display: flex;
	align-items: flex-start;
	gap: 0.04em;
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
	line-height: 1;
}

.fy-stat__plus {
	font-size: 0.5em;
	font-weight: 900;
	line-height: 1.15;
	color: var(--gold);
}

/* 浮動鈕的健檢入口。用品牌金色跟 LINE 綠、電話藍區隔開，
   一眼看得出哪個是主要動作。 */
.fy-fab__btn--audit {
	background: var(--gold, #EFC620);
	color: var(--navy-deep, #14173F);
}

/* ==================================================================
   文章內頁：目錄側欄（2026-08-21）
   搬進來的文章平均四千多字，目錄只放在最上面的話，讀者捲到一半
   想跳段就得整頁捲回去。桌機做成黏住的側欄，手機沒空間，維持原樣。
   ================================================================== */
@media (min-width: 1024px) {
	.fy-single__wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 258px;
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.fy-single__wrap > .fy-article { grid-column: 1; grid-row: 1; }

	.fy-toc-rail {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--fy-head-h, 72px) + var(--fy-head-top, 0px) + 1.25rem);
		max-height: calc(100vh - var(--fy-head-h, 72px) - var(--fy-head-top, 0px) - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.fy-toc-rail .fy-toc {
		margin: 0;
		font-size: 0.875rem;
		padding: 1rem 1.1rem;
	}
	.fy-toc-rail .fy-toc ol { padding-left: 1.05rem; line-height: 1.65; }
	.fy-toc-rail .fy-toc li + li { margin-top: 0.5rem; }
}

/* 目錄在窄螢幕維持原本在內文前的方塊 */
@media (max-width: 1023px) {
	.fy-toc-rail { display: block; margin-bottom: 2rem; }
}

/* 錨點跳轉要讓開浮動頁首，沿用頁首那組變數而不是寫死 90px */
.fy-article h2 {
	scroll-margin-top: calc(var(--fy-head-h, 72px) + var(--fy-head-top, 0px) + 1.5rem);
}

/* 部落格分類篩選器 */
.fy-blogfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.fy-blogfilter .fy-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--line, #DCDFE9);
	border-radius: 999px;
	background: var(--paper, #fff);
	color: var(--ink-soft, #545B70);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.6;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.fy-blogfilter .fy-filter__chip:hover,
.fy-blogfilter .fy-filter__chip:focus-visible {
	border-color: var(--navy, #1B1F79);
	color: var(--navy, #1B1F79);
}

.fy-blogfilter .fy-filter__chip.is-on {
	background: var(--navy, #1B1F79);
	border-color: var(--navy, #1B1F79);
	color: #fff;
}

.fy-filter__n {
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.fy-blogfilter { gap: 0.4rem; margin-bottom: 1.5rem; }
	.fy-blogfilter .fy-filter__chip { padding: 0.4rem 0.75rem; font-size: 0.8125rem; }
}

/* fy-img-ratio-guard
   補上 width/height 屬性後的保險：沒有被明確指定高度的圖一律維持等比。
   用 :where() 讓特異度為 0 —— .fy-card__img img 那種 height:100% + object-fit
   的規則一定贏過它，不會把裁切版面弄壞。 */
:where(.fy-band, .fy-prose, .fy-hero, .fy-inner) img { height: auto; }