/*
Theme Name: 優勢方舟 A-Ark
Theme URI: https://www.a-ark.com.tw/
Template: kadence
Author: 優勢方舟數位行銷
Author URI: https://www.a-ark.com.tw/
Description: 優勢方舟官網 Kadence 子主題。品牌系統依 brand-spec.md 鎖定：深藏青 #00003E + 橘 #FF6E34 + 霧藍 #8298FF，中性 75%／橘 20%／霧藍 5%。字體為 Noto Serif TC（標題）、Noto Sans TC（內文）、IBM Plex Mono（數據與眉標）。
Version: 2.5.1
Requires at least: 6.3
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: aark
*/

/* ==========================================================================
   0. 品牌 token → Kadence 全域變數的映射
   --------------------------------------------------------------------------
   Kadence 的色彩由 Customizer 控制，輸出成 --global-palette1~9。
   Customizer 對應設定（見 functions.php 的說明）：
     palette1 = #00003e 深藏青      palette6 = #bbbbc8 霧灰
     palette2 = #ff6e34 橘          palette7 = #f7f6f2 米白
     palette3 = #111225 內文黑      palette8 = #ffffff 白
     palette4 = #4f4f68 灰藍        palette9 = #8298ff 霧藍
     palette5 = #ce3b00 橘（淺底）

   這裡把它們映射成語意化名稱，讓元件 CSS 不必記 palette 編號，
   也讓先前寫好的樣式幾乎能原封不動沿用。
   ========================================================================== */

:root {
	--aark-navy:       var(--global-palette1, #00003e);
	--aark-orange:     var(--global-palette2, #ff6e34);
	--aark-ink:        var(--global-palette3, #111225);
	--aark-slate:      var(--global-palette4, #4f4f68);
	--aark-orange-ink: var(--global-palette5, #ce3b00);
	--aark-mist:       var(--global-palette6, #bbbbc8);
	--aark-paper:      var(--global-palette7, #f7f6f2);
	--aark-white:      var(--global-palette8, #ffffff);
	--aark-blue:       var(--global-palette9, #8298ff);

	/* Customizer 只有 9 格，剩下的直接定義 */
	--aark-blue-ink:   #3d5fff;   /* 霧藍在淺底的無障礙版本 on white 4.91 : on paper 4.54 */
	--aark-line:       rgba(0, 0, 62, .16);
	--aark-field:      #ececed;   /* 表單欄位底色 */
	--aark-green:      #37e47c;
	--aark-danger:     #c0392b;
	--aark-danger-ink: #8e2c20;
	--aark-danger-bg:  #fdf5f4;
	--aark-navy-deep:  #000926;
	--aark-navy-raise: #0a0a52;

	--aark-sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
	--aark-serif: "Noto Serif TC", "Noto Sans TC", serif;
	--aark-mono:  "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

	--aark-max: 1240px;

	/* 字級與間距 token
	   （原本 home.css 用的是 --wp--preset--* ，那是區塊主題 theme.json 產生的變數。
	     Kadence 是傳統主題，那些變數在前台根本不存在，整支 home.css 會失去顏色與字體。
	     改用這裡的 aark token，與 style.css／case.css 同一套。） */
	--aark-md:       1.0625rem;
	--aark-space-60: 4rem;

	accent-color: var(--aark-orange);
	color-scheme: light;
}


/* ==========================================================================
   0. 版面容器

   .aark-wrap 是全站共用的置中容器，所有自訂樣板（案例、分類、404、
   往後的固定頁）都靠它決定左右留白。因此它必須待在這支「一定會載入」
   的 style.css，不能放在某個條件式載入的子樣式裡 ——
   否則沒載到那支 CSS 的頁面就會整片貼齊視窗左緣。
   ========================================================================== */

.aark-wrap {
	width: min(calc(100% - 3rem), var(--aark-max));
	margin-inline: auto;
}

/* 長文閱讀寬度：文章、隱私權政策這類以文字為主的頁面 */
.aark-wrap-narrow {
	width: min(calc(100% - 3rem), 820px);
	margin-inline: auto;
}

@media (max-width: 600px) {
	.aark-wrap,
	.aark-wrap-narrow { width: min(calc(100% - 2rem), var(--aark-max)); }
}


/* ==========================================================================
   1. Classic 內容相容層
   ★★ 這一段是整個主題最關鍵的部分，不要刪 ★★

   84 個案例與 6 篇文章是 classic editor 時期的純 HTML，
   內含 alignnone / size-full / aligncenter 等 WordPress 內建 class，
   以及寫死的 inline style（font-size: 14pt）。
   少了這段，那 90 個頁面的圖片對齊、圖說與字級會全部跑掉。

   ⚠ 日後若再換主題，這段 CSS 必須一起帶走。

   ⚠ 全段以 .single 收斂（single-case / single-post 的 body class 都含 .single）。
   原本只寫 .entry-content，於是它也套到 13 個新固定頁上 ——
   其中 `.entry-content a{color:navy}` 的優先級是 (0,3,1)，
   壓過我們元件的 (0,1,1)，深藏青底上的電話與按鈕文字全部變成藏青字，
   等於隱形。收斂到 .single 之後，新頁面不再受這層舊內容相容規則干擾。
   ========================================================================== */

.single .entry-content img { max-width: 100%; height: auto; }

.single .entry-content .alignnone { margin: 1.5rem 0; }

.single .entry-content .aligncenter,
.single .entry-content img.aligncenter { display: block; margin-inline: auto; }

.single .entry-content .alignleft { float: left; margin: .4rem 1.6rem 1.2rem 0; }
.single .entry-content .alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }

.single .entry-content .size-full,
.single .entry-content .size-large { width: auto; max-width: 100%; }

.single .entry-content .wp-caption { max-width: 100%; margin: 1.8rem 0; }
.single .entry-content .wp-caption img { margin-bottom: .6rem; }

.single .entry-content .wp-caption-text,
.single .entry-content figcaption {
	font-family: var(--aark-mono);
	font-size: .78rem;
	color: var(--aark-slate);
	line-height: 1.7;
	margin: 0;
}

/* 舊內容常把字級寫死成 14pt，改吃主題字級 */
.single .entry-content span[style*="font-size"] {
	font-size: inherit !important;
	line-height: inherit !important;
}

.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
	font-family: var(--aark-serif);
	color: var(--aark-navy);
	letter-spacing: -.02em;
	line-height: 1.25;
	margin: 2.4rem 0 .8rem;
}

.single .entry-content h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900; }
.single .entry-content h2 { font-size: clamp(1.45rem, 2.8vw, 1.95rem); font-weight: 900; }
.single .entry-content h3 { font-size: 1.25rem; font-weight: 700; }

/*
 * ⚠ 排除清單一定要含 .aark-btn。
 *   文章結尾的 CTA 是掛在 .entry-content 裡面的，這條規則的
 *   特異性 (0,3,0) 高過 .aark-page-cta .aark-btn-solid (0,2,0)，
 *   會把按鈕文字染成藏青 —— 配上藏青底就整個字消失。
 */
.single .entry-content a:not(.wp-element-button):not(.button):not(.aark-btn) {
	color: var(--aark-navy);
	font-weight: 700;
	border-bottom: 2px solid var(--aark-orange);
	text-decoration: none;
}

.single .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4rem;
	font-size: .95rem;
}

.single .entry-content th,
.single .entry-content td {
	border: 1px solid var(--aark-line);
	padding: .7rem .9rem;
	text-align: left;
	vertical-align: top;
}

.single .entry-content th {
	background: var(--aark-white);
	font-weight: 700;
	color: var(--aark-navy);
}

.single .entry-content iframe,
.single .entry-content embed,
.single .entry-content object { max-width: 100%; }


/* ==========================================================================
   2. 瀏覽器表面
   沒主題化的話會露出系統預設色
   ========================================================================== */

::selection { background: var(--aark-orange); color: var(--aark-navy); }

:where(input, textarea, select) { caret-color: var(--aark-navy); }

* { scrollbar-width: thin; scrollbar-color: var(--aark-mist) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--aark-mist); border: 3px solid var(--aark-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--aark-slate); }

:focus-visible {
	outline: 3px solid var(--aark-blue-ink);
	outline-offset: 3px;
	border-radius: 1px;
}

/* 深色區塊上改用亮色焦點環 */
.aark-on-dark :focus-visible,
[class*="palette1-bg"] :focus-visible { outline-color: var(--aark-white); }


/* ==========================================================================
   3. 排版基礎
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.entry-title,
.kadence-advanced-heading-inner {
	font-family: var(--aark-serif);
	letter-spacing: -.03em;
}

.aark-eyebrow {
	font-family: var(--aark-mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aark-blue-ink);
	margin: 0 0 1rem;
}

.aark-on-dark .aark-eyebrow { color: var(--aark-blue); }

.aark-text-link {
	display: inline-flex;
	align-items: center;
	font-weight: 900;
	border-bottom: 2px solid var(--aark-orange);
	width: max-content;
	padding-bottom: 4px;
	color: var(--aark-navy);
	text-decoration: none;
}

.aark-on-dark .aark-text-link { color: var(--aark-white); }

.aark-pending {
	font-family: var(--aark-mono);
	font-size: .68rem;
	background: var(--aark-mist);
	color: var(--aark-navy);
	padding: 3px 9px;
	display: inline-block;
}


/* ==========================================================================
   4. 按鈕
   品牌按鈕是硬偏移實心陰影，不是模糊光暈 —— 刻意的設計語彙
   ========================================================================== */

.wp-block-button__link,
.kb-button,
.button {
	border-radius: 0 !important;
	font-weight: 900;
}

.aark-btn-primary .wp-block-button__link,
.aark-btn-primary.kb-button {
	background: var(--aark-orange);
	color: var(--aark-white);
	border: 1px solid var(--aark-orange-ink);
	box-shadow: 7px 7px 0 var(--aark-blue);
	transition: transform .2s;
}

.aark-btn-primary .wp-block-button__link:hover,
.aark-btn-primary.kb-button:hover { transform: translate(-2px, -2px); }

.aark-btn-outline .wp-block-button__link,
.aark-btn-outline.kb-button {
	background: transparent;
	color: var(--aark-navy);
	border: 1px solid var(--aark-navy);
	transition: transform .2s;
}

.aark-btn-outline .wp-block-button__link:hover,
.aark-btn-outline.kb-button:hover { transform: translateY(-2px); }


/* --- PHP 樣板用的按鈕 ---
 *
 * 上面那組是給 Gutenberg／Kadence 區塊用的（外層 class 包住
 * .wp-block-button__link）；這一組是給 404.php、single-case.php 這類
 * PHP 樣板裡的純 <a> 用的。兩組並存不衝突，因為上面那組一定要有
 * 後代選擇器才生效。
 *
 * ⚠ 這些是全站共用的基礎元件，必須留在這支一定會載入的 style.css。
 *   放進條件式載入的 404.css / case.css 會導致沒載到的頁面按鈕變成
 *   純文字連結 —— 這個坑已經踩過一次。
 */

.aark-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.5rem;
	font-weight: 900;
	text-decoration: none;
	border: 1px solid var(--aark-navy);
	border-radius: 0;
	transition: transform .2s;
}

.aark-btn:hover { transform: translateY(-2px); }

.aark-btn-solid {
	background: var(--aark-orange);
	color: var(--aark-white);
	border-color: var(--aark-orange-ink);
	box-shadow: 7px 7px 0 var(--aark-blue);
	font-weight: 900;
}

.aark-btn-solid:hover { transform: translate(-2px, -2px); }

.aark-btn-outline {
	background: transparent;
	color: var(--aark-navy);
}


/* ==========================================================================
   4b. 區段通用元件

   ⚠ 這些原本住在 home.css，但 home.css 只在首頁載入 —— 其餘 13 個固定頁
   一樣要用 .aark-section / .aark-section-head，放在那裡等於其他頁全部沒樣式。
   與 .aark-wrap、.aark-btn 同樣的坑，一併移到這支一定會載入的檔案。
   ========================================================================== */

/*
 * 區段上下留白（2026-09-08 全站放大）
 *
 * 原本是 --aark-space-60（4rem＝64px），段與段之間只有 128px，
 * 以這個版面的尺度（內容欄 1240px、襯線大標、滿版視覺）來說太擠。
 * 桌機約 144px、寬螢幕 160px，段間距因此約 288px。
 * 用 clamp 讓手機收回到 64px —— 小螢幕不需要這麼多留白，會顯得空洞。
 */
.aark-section {
	padding-block: clamp(4rem, 10vw, 10rem);
	border-top: 1px solid var(--aark-line);
}

/*
 * 眉標在左、標題與導言在右的雙欄區段標頭
 *
 * 兩列結構：
 *   第 1 列　眉標（只佔左欄）
 *   第 2 列　斜線（左欄，絕對定位）＋ 標題與導言（右欄）
 *
 * 這樣右欄文字的頂端會自動對齊斜線頂端 —— 不管眉標是一行還是兩行。
 * 用固定的 padding 偏移就做不到：/webdesign/ 的
 * 「04 / BUILT IN, NOT BOLTED ON」會折成兩行，那頁就會歪掉。
 */
.aark-section-head {
	display: grid;
	grid-template-columns: 180px 1fr;
	column-gap: 2rem;
	row-gap: 0;
	margin-bottom: clamp(2.5rem, 4.5vw, 5rem);
	align-items: start;
}

.aark-section-head > .aark-eyebrow { grid-column: 1; grid-row: 1; }
.aark-section-head > div { grid-column: 2; grid-row: 2; }

/* 右欄最小高度：內容太短時斜線才不會突出到區段外 */
.aark-section-head > div { min-height: 9rem; }

/*
 * Gutenberg 群組版的區段標頭（2026-09-03 起，固定頁逐頁改建成區塊）
 *
 * 本站的 core/group 會多包一層 .wp-block-group__inner-container（constrained layout），
 * 上面那組「> .aark-eyebrow」「> div」的直接子層選擇器對不到。處理方式：
 *   1. inner-container 用 display:contents 讓它不產生盒子，子元素直接成為 grid item；
 *   2. 兩條定位規則用後代選擇器再寫一次；
 *   3. WP constrained layout 會對子元素加 margin-inline:auto !important，
 *      在 grid 裡會把眉標推到 180px 欄的中間、斜線跟著偏 —— 一律歸零。
 * 手寫 HTML 版本（<section>）不受影響：它沒有 inner-container，這些規則不會命中。
 */
.aark-section-head > .wp-block-group__inner-container { display: contents; }
.aark-section-head .wp-block-group__inner-container > .aark-eyebrow {
	grid-column: 1;
	grid-row: 1;
	margin-inline: 0 !important;
	max-width: none;
}
.aark-section-head .wp-block-group__inner-container > .wp-block-group {
	grid-column: 2;
	grid-row: 2;
	min-height: 9rem;
	margin-inline: 0 !important;
	max-width: none;
}
.aark-section-head .wp-block-group .wp-block-group__inner-container > * { margin-inline: 0 !important; }

/* 區段與 .aark-wrap 群組：子元素不要被 constrained layout 限寬／置中 */
.aark-section > .wp-block-group__inner-container > * { max-width: none; }
/* ⚠ 只歸零 margin，不要寫 max-width:none —— 會把設計的 .aark-note-lead 72ch、.aark-faq-list 900px 一起洗掉 */
.aark-section .aark-wrap > .wp-block-group__inner-container > * { margin-inline: 0 !important; }
/* 頁尾 CTA 是置中版面：WP 給的 margin:auto 正好就是設計要的，什麼都不用補；
   也不要寫 max-width:none，否則 h2 的 18ch、p 的 52ch 會被洗掉。 */

/*
 * Kadence 區塊相容層
 *
 * 改建原則：Kadence Column 直接掛上設計原有的元件 class（aark-term / aark-numcard …），
 * 外框、字級、間距全部沿用 pages.css 既有規則；這裡只處理 Kadence 自己的內層結構
 * 與 core/button 版本的按鈕外觀。
 */
.wp-block-kadence-column.aark-term > .kt-inside-inner-col,
.wp-block-kadence-column.aark-numcard > .kt-inside-inner-col { display: block; }
.aark-numcard h3 a,
.aark-term h3 a { color: inherit; text-decoration: none; }

/*
 * Kadence 主題的 content.min.css 對 .single-content 裡每個 .wp-block-group、p、
 * .wp-block-buttons 都設了 margin-bottom: var(--global-md-spacing)（2rem），(0,2,0)
 * 蓋過設計裡 (0,1,0) 的元件規則 —— 改建成群組後區段之間會多出 32px、標頭到卡片
 * 反而少 20px。設計自己管間距的容器一律歸零，再各自重申需要的值。
 * （用 CDP 讀計算樣式查出來的；grep 找不到是因為那條規則的選擇器有 20 幾個，
 *   .wp-block-group 只是其中之一。）
 */
.single-content .wp-block-group.aark-section,
.single-content .wp-block-group.aark-wrap,
.single-content .wp-block-group.aark-page-cta,
.single-content .aark-section-head .wp-block-group { margin-top: 0; margin-bottom: 0; }
.single-content .wp-block-group.aark-section-head { margin-top: 0; margin-bottom: clamp(2.5rem, 4.5vw, 5rem); }
.single-content .aark-page-cta .wp-block-buttons,
.single-content .aark-page-cta .wp-block-button { margin: 0; }
.single-content p.aark-section-lede { margin: 1.1rem 0 0; }
.single-content p.aark-note-lead { margin: 2rem 0 0; }

/* core/button 版本的按鈕：外層 .wp-block-button 掛 aark-btn-*，樣式打在裡面的連結上 */
.wp-block-button.aark-btn-solid .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.5rem;
	font-weight: 900;
	text-decoration: none;
	border-radius: 0;
	background: var(--aark-orange);
	color: var(--aark-white);
	border: 1px solid var(--aark-orange-ink);
	box-shadow: 7px 7px 0 var(--aark-blue);
	transition: transform .2s;
}
.wp-block-button.aark-btn-solid .wp-block-button__link:hover { transform: translateY(-2px); }
/*
 * ⚠ 區塊版按鈕：外層 .wp-block-button 上的 .aark-btn 一定要中和掉。
 * .aark-btn 是給 PHP 樣板裡的純 <a> 用的（inline-flex、52px、左右 1.5rem、藏青外框）。
 * 掛在 .wp-block-button 這個「容器」上會變成框中框：外層先畫一個藏青框，
 * 裡面的 .wp-block-button__link 再畫自己的框，中間空出 1.5rem 的padding。
 * 容器歸零，量體交給裡面的連結；顏色仍由 .aark-btn-solid / -outline 那兩組決定。
 */
.wp-block-button.aark-btn {
	display: block;
	min-height: 0;
	padding: 0;
	border: 0;
}
.wp-block-button.aark-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.5rem;
	font-weight: 900;
	text-decoration: none;
	border-radius: 0;
}
.aark-page-cta .wp-block-button.aark-btn-solid .wp-block-button__link {
	background: var(--aark-navy);
	border-color: var(--aark-navy);
	box-shadow: 7px 7px 0 rgba(0, 0, 62, .28);
}
.aark-page-cta .wp-block-button.aark-btn-solid .wp-block-button__link:hover,
.aark-page-cta .wp-block-button.aark-btn-solid .wp-block-button__link:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

.aark-section-head h2 { margin: 0; max-width: 20ch; }

.aark-section-lede {
	margin: 1.1rem 0 0;
	max-width: 62ch;
	color: var(--aark-slate);
	font-size: var(--aark-md);
}

/* .aark-text-link 與 .aark-pending 已定義在第 3 節排版基礎，不重複。 */



/* ==========================================================================
   5. 內頁緊湊頁首（首頁才用大 Hero）
   ========================================================================== */

/*
 * 緊湊頁首
 *
 * ⚠ 統一高度。實測 13 頁的頁首從 110px 到 385px 都有 ——
 *   差別來自有沒有 CTA 按鈕、導言一行還是三行、H1 一行還是兩行。
 *   逐頁切換時高度忽高忽低，會讓人覺得每一頁是不同的網站。
 *   固定 min-height 並垂直置中，內容長短就不影響版面節奏。
 *
 *   首頁不受影響 —— 它用的是 .aark-hero 大版面，不是這個緊湊頁首。
 */
.aark-phead {
	background: var(--aark-white);
	border-bottom: 1px solid var(--aark-line);
	padding: 3rem 0 2.5rem;
	min-height: 23rem;
	/*
	 * 用 column 而非預設的 row：row 時內容容器是 flex item，
	 * 而 flex item 的 min-width 預設為 auto，遇到極長的不可斷內容
	 * 會拒絕縮小而撐破容器。column 方向的自動最小尺寸落在高度上，
	 * 水平尺寸行為回到一般區塊，不會有這個風險。
	 */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 保險：即使日後改回 row，也不讓內容容器撐破視窗 */
.aark-phead > .wp-block-group__inner-container,
.aark-phead > .aark-wrap { min-width: 0; }

/*
 * 手機沿用同一個 23rem 底線（不再降到 17rem）。
 * 手機上內容折行更多，內容較長的頁面本來就會超過 23rem；
 * 若底線只有 17rem，短頁面停在 272px、長頁面到 403px，
 * 差距 131px 比桌機還明顯。統一底線後只剩內容自然撐高的部分。
 */
@media (max-width: 782px) {
	.aark-phead { padding: 2.25rem 0 2rem; }
}

/*
 * 緊湊頁首的內容置中
 *
 * .aark-phead 是滿版色帶（白底 + 下框線要橫跨整個視窗），
 * 但裡面的文字必須對齊內容欄。其他區段是靠自己包一層 .aark-wrap
 * 達成這件事，頁首因為是 Gutenberg 群組區塊，包的是
 * .wp-block-group__inner-container，所以要在這裡補上同樣的寬度限制。
 *
 * ⚠ 為什麼非補不可：固定頁改成 fullwidth + unboxed 之後，
 *   Kadence 容器的 max-width 與左右內距都被拿掉了（那是為了讓區段能滿版）。
 *   在那之前頁首是靠容器的內距才沒有貼邊 —— 一拿掉就整片貼齊視窗左緣。
 */
.aark-phead > .wp-block-group__inner-container,
.aark-phead > .aark-wrap {
	width: min(calc(100% - 3rem), var(--aark-max));
	margin-inline: auto;
}

/*
 * 保險絲：fullwidth 頁面裡，凡是不是我們自畫背景的 <section>，
 * 一律比照內容欄置中。Mark 之後在編輯器裡直接加一段文字或圖片時，
 * 才不會又貼到視窗邊緣。
 */
.content-width-fullwidth .entry-content > *:not(section):not(.aark-phead):not(.alignfull) {
	width: min(calc(100% - 3rem), var(--aark-max));
	margin-inline: auto;
}

.aark-phead .aark-crumbs {
	font-family: var(--aark-mono);
	font-size: .75rem;
	color: var(--aark-slate);
	margin-bottom: 1.25rem;
}

.aark-phead h1 {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.16;
	color: var(--aark-navy);
	margin: 0 0 1rem;
	/*
	 * 30ch 而非 20ch。20ch 約 600px，容不下 /ai-marketing/ 那行 18 字的
	 * 標題，折行後第二行只剩一個「化」—— 既難看又讓該頁頁首高出 50px。
	 * 其餘頁面標題都在 12 字以內，放寬不影響它們的排版。
	 */
	max-width: 30ch;
	/* 萬一還是折行，讓兩行長度接近，不要留孤字 */
	text-wrap: balance;
	font-weight: 900;
}

.aark-phead h1 em { font-style: normal; color: var(--aark-orange-ink); }

.aark-phead .aark-lede {
	font-size: 1.0625rem;
	color: var(--aark-slate);
	/*
	 * 78ch 而非 62ch。頁首高度的差異來自導言折成幾行，而 min-height
	 * 已經把所有較矮的頁面墊到同一高度 —— 所以要處理的是「最長的那頁」，
	 * 放寬讓它少折一行，而不是收窄讓它多折一行。
	 */
	max-width: 78ch;
	margin: 0 0 1.6rem;
}

.aark-phead-meta {
	display: flex;
	gap: 1.6rem;
	flex-wrap: wrap;
	font-family: var(--aark-mono);
	font-size: .75rem;
	color: var(--aark-slate);
	padding-top: 1.25rem;
	border-top: 1px solid var(--aark-line);
}

.aark-phead-meta b { color: var(--aark-navy); font-size: .875rem; }


/* ==========================================================================
   6. 編輯註記
   取代先前散在多處的「橘色左邊框」；改用短版上緣細線 + 懸掛 mono 標記
   ========================================================================== */

.aark-note {
	margin: 1.4rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--aark-line);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 .9rem;
	font-size: .82rem;
	line-height: 1.75;
	color: var(--aark-slate);
	max-width: 70ch;
}

.aark-note::before {
	content: attr(data-note);
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	color: var(--aark-navy);
	background: var(--aark-mist);
	padding: 3px 8px;
	align-self: start;
	margin-top: 3px;
	white-space: nowrap;
}

.aark-note:not([data-note])::before { content: "註"; }
.aark-note strong { color: var(--aark-navy); font-weight: 700; }


/* ==========================================================================
   7. FAQ（原生 details，可輸出 FAQPage 結構化資料）
   ========================================================================== */

.aark-faq { border-top: 1px solid var(--aark-navy); }

.aark-faq details { border-bottom: 1px solid var(--aark-navy); }

.aark-faq summary {
	cursor: pointer;
	padding: 1.4rem .1rem;
	font-family: var(--aark-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--aark-navy);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
}

.aark-faq summary::-webkit-details-marker { display: none; }

.aark-faq summary::after {
	content: "+";
	font-family: var(--aark-mono);
	font-size: 1.4rem;
	color: var(--aark-orange-ink);
	flex: 0 0 auto;
}

.aark-faq details[open] summary::after { content: "\2212"; }

.aark-faq .aark-faq-a {
	margin: 0 0 1.5rem;
	color: var(--aark-slate);
	font-size: .95rem;
	max-width: 70ch;
	padding: 0 .1rem;
}


/* ==========================================================================
   8. 頁首／頁尾細修

   版面本身由 Kadence Header/Footer Builder 決定（Mark 可在「外觀 → 自訂」
   拖拉調整），這裡只補 Builder 沒有開放的細節：方角、字距、下拉層次、
   頁尾欄距。改版面請去 Customizer，不要在這裡硬幹。
   ========================================================================== */

/* --- 頁首 --- */

/* 主選單：中文字距要開一點，否則四個字會黏成一團 */
#main-header .primary-menu-container > ul > li > a {
	letter-spacing: .04em;
}

/* 目前所在頁的頂層項目：底部橘線，比純變色更容易掃到 */
#main-header .primary-menu-container > ul > li.current-menu-item > a,
#main-header .primary-menu-container > ul > li.current-menu-ancestor > a {
	box-shadow: inset 0 -2px 0 var(--aark-orange);
}

/* 下拉選單：方角 + 貼齊品牌的硬邊陰影，不要 Kadence 預設的圓角柔影 */
#main-header .header-navigation ul ul.sub-menu {
	border: 1px solid rgba(0, 0, 62, .12);
	border-radius: 0;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 62, .38);
	padding: .35rem 0;
}

#main-header .header-navigation ul ul.sub-menu li a {
	letter-spacing: .02em;
	transition: background-color .16s ease, color .16s ease;
}

/* 案例分類子項的件數：用等寬字，數字才會對齊 */
#main-header .header-navigation ul ul.sub-menu li a {
	font-variant-numeric: tabular-nums;
}

/* 頁首 CTA：全站唯一成交目標，字距與內距都要撐開 */
#main-header .header-button {
	letter-spacing: .05em;
	padding: .78em 1.35em;
}

/* 置頂後加一道陰影，讓頁首與內容分層 */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	box-shadow: 0 10px 30px -22px rgba(0, 0, 62, .55);
}

/*
 * 貼頂頁首的頂端座標：由 CSS 決定，不吃 Kadence JS 量到的 inline top
 *
 * Kadence 的 initStickyHeader（navigation.min.js）把固定列的 top 設成
 * 「量測當下 #wrapper 的文件位置」。這個值只要在載入那一瞬間被墊高
 * （登入時的管理列、晚到的資源都會），頁首就會被釘在偏低的位置 ——
 * 畫面上是選單上方空一塊、露出貼頂佔位區與 hero 頂端，
 * 得捲動一次觸發重算才歸位。
 *
 * 這裡把 top 直接寫成「視窗頂端（登入時為管理列下緣）」。JS 寫的是
 * inline style 但沒有 !important，所以會被這幾條蓋過，載入當下就正確。
 * 數值與 Kadence 自己的 getTopOffset 一致（桌機 32、782px 以下 46）。
 */
#masthead .kadence-sticky-header.item-is-fixed,
#mobile-header .kadence-sticky-header.item-is-fixed {
	top: 0 !important;
}

body.admin-bar #masthead .kadence-sticky-header.item-is-fixed,
body.admin-bar #mobile-header .kadence-sticky-header.item-is-fixed {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar #masthead .kadence-sticky-header.item-is-fixed,
	body.admin-bar #mobile-header .kadence-sticky-header.item-is-fixed {
		top: 46px !important;
	}
}

/* --- 頁尾 --- */

/* 欄標題：小字、大字距、霧藍，當作分區眉標而非標題 */
#colophon .widget-area .widget-title {
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}

/*
 * 頁尾連結：底線只在 hover 出現。
 * 深藏青底上的亮色文字若一直帶底線，整片會顯得吵。
 */
/*
 * 頁尾連結顏色
 *
 * Kadence 的 footer_middle_widget_content_color 只管容器的文字色，
 * <a> 仍然繼承全域連結色（深藏青）—— 深藏青字配深藏青底，等於隱形。
 * 必須明確指定，不能靠繼承。
 */
#colophon .widget-area a,
#colophon .footer-html a,
#colophon .footer-navigation a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	transition: color .16s ease;
}

#colophon .widget-area a:hover,
#colophon .footer-html a:hover,
#colophon .footer-navigation a:hover { color: var(--aark-white); }

#colophon .widget-area a:hover,
#colophon .widget-area a:focus-visible {
	text-decoration: underline;
	text-underline-offset: .22em;
}

/* 深底上的鍵盤焦點框：橘色在藏青上對比足夠 */
#colophon a:focus-visible,
#colophon .footer-navigation a:focus-visible {
	outline: 2px solid var(--aark-orange);
	outline-offset: 3px;
}

/* 第一欄的 logo 與聯絡資訊 */
#colophon .footer-widget1 img {
	max-width: 210px;
	height: auto;
}

/* 電話與 Email 用等寬字，號碼比較好讀也好複製 */
#colophon a[href^="tel:"],
#colophon a[href^="mailto:"] {
	font-family: var(--aark-mono);
	font-size: .92em;
	letter-spacing: .01em;
}

/* 底列：版權與隱私權在手機上疊成兩行時要留距離 */
@media (max-width: 767px) {
	#colophon .site-bottom-footer-inner-wrap {
		row-gap: .5rem;
		text-align: center;
	}
}


/* ==========================================================================
   9. 無障礙
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.aark-btn-primary .wp-block-button__link:hover,
	.aark-btn-outline .wp-block-button__link:hover { transform: none; }
	#main-header .header-navigation ul ul.sub-menu li a { transition: none; }
	#colophon .widget-area a { transition: none; }
}


/* ==========================================================================
   緊湊頁首的背景圖變體 .aark-phead.has-bg

   為什麼要加覆蓋層而不是直接鋪圖：
     內頁頁首的文字是深藏青，直接壓在照片上一定會有某些區域看不清 ——
     照片亮度不可控，而我們無法逐張調。這個專案已經因為
     「深色文字在深色背景上」修過三次，不要再開第四次。
     做法是：圖 → 深藏青漸層覆蓋 → 文字改亮色。
     對比度由覆蓋層保證，跟換哪張圖無關。

   ⚠ 堆疊順序的坑：
     Gutenberg 的 group 區塊在 layout:constrained 下會多包一層
     .wp-block-group__inner-container，寫在內容裡的背景圖會被塞進那一層，
     跟文字變成兄弟節點。絕對定位的圖（z-index:0）會蓋住同層的一般文字，
     因為定位元素本來就畫在非定位元素之上。
     所以三層都要明確指定 z-index，不能只給圖。

   高度刻意不變：這是「緊湊頁首」，不是 Hero。
   首頁才用大 Hero，內頁保持快速進入內容的節奏。
   ========================================================================== */

.aark-phead.has-bg {
	position: relative;
	background: var(--aark-navy);
	border-bottom: 0;
	overflow: hidden;
}

/* 第 0 層：背景圖 */
.aark-phead.has-bg .aark-phead-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	margin: 0;
	max-width: none;
}

/*
 * 第 0 層的預設底紋：還沒有背景圖時，深藏青斜紋就是正式背景。
 *
 * 來龍去脈：上線時 13 個內頁的背景圖都還沒到位，版位留著 .aark-imgslot 佔位框；
 * 而 package-theme.py 刻意不部署 imgslot.css（它是開發期工具），結果正式站的頁首
 * 變成純色，本機看到的斜紋（其實是佔位框的樣式）Mark 反而喜歡。
 * 2026-09-03 決定把斜紋轉正：沒有圖時就長這樣；換上真圖（<img class="aark-phead-bg">）
 * 時，這條規則因為只對 div 生效，會自然退場，不用再改 CSS。
 *
 * ⚠ 色值刻意沿用佔位框的（米白底 + 10% 橘），因為 Mark 點頭的是「隔著 .aark-phead-veil
 *   看到的結果」。斜紋本身偏亮，對比由 veil 保證，不要在這裡調暗。
 */
.aark-phead.has-bg div.aark-phead-bg {
	background: repeating-linear-gradient(
		45deg,
		var(--aark-paper) 0 10px,
		rgba(255, 110, 52, .10) 10px 20px
	);
}

/* 佔位框的說明文字（待接圖／PAGE HEADER／…）是給我們看的，不給訪客看 */
.aark-phead.has-bg .aark-phead-bg > .slot-src,
.aark-phead.has-bg .aark-phead-bg > .slot-k,
.aark-phead.has-bg .aark-phead-bg > .slot-t,
.aark-phead.has-bg .aark-phead-bg > .slot-d { display: none; }

/*
 * 其餘圖片版位的正式底紋（2026-09-03，與上面的頁首同一個決定）
 *
 * 33 個版位裡，11 個是頁首背景（上面那條處理），其餘 22 個散在卡片縮圖、
 * 橫幅、案例格、負責人照片……。上線後 imgslot.css 沒部署，這些版位在正式站
 * 是沒有高度、只剩幾行說明文字的裸 div。
 *
 * 做法與頁首一致：有斜紋的面板當正式外觀，說明文字一律不給訪客看；
 * 圖到了換成 <img>（或加背景圖）即可，這裡不用再動。
 *
 * ⚠ 這組是 (0,1,0) 的通用規則，刻意放低，讓 pages.css 裡各容器的特化
 *   （.aark-band 的 21:6、.aark-scope-shot / .aark-mood 的絕對定位）照常蓋過。
 */
.aark-imgslot {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio, 16 / 10);
	overflow: hidden;
	background-color: var(--aark-paper);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 10px,
		rgba(255, 110, 52, .18) 10px 20px
	);
}

/* 版位裡的說明文字（待接圖／CASE THUMB／…）是給我們看的，不給訪客看 */
.aark-imgslot > .slot-src,
.aark-imgslot > .slot-k,
.aark-imgslot > .slot-t,
.aark-imgslot > .slot-d { display: none; }

/* 第 1 層：深藏青漸層，左濃右淡，文字在左側時對比度最高 */
.aark-phead.has-bg .aark-phead-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg,
		rgba(0, 0, 62, .96) 0%,
		rgba(0, 0, 62, .90) 42%,
		rgba(0, 0, 62, .60) 100%);
}

/* 第 2 層：內容 */
.aark-phead.has-bg .wp-block-group__inner-container > *:not(.aark-phead-bg):not(.aark-phead-veil),
.aark-phead.has-bg > .aark-wrap {
	position: relative;
	z-index: 2;
}

/* 深底上的文字：明確指定，不靠繼承（踩過三次的教訓） */
.aark-phead.has-bg h1 { color: var(--aark-white); }
.aark-phead.has-bg .aark-eyebrow { color: var(--aark-blue); }
.aark-phead.has-bg .aark-lede { color: rgba(255, 255, 255, .78); }
.aark-phead.has-bg .aark-crumbs { color: rgba(255, 255, 255, .6); }
.aark-phead.has-bg .aark-crumbs a { color: rgba(255, 255, 255, .8); }

/*
 * Gutenberg 版的線框鈕（外層 .wp-block-button.aark-btn-outline，看得到的是內層的 <a>）
 *
 * 上面那條只改到外層 div，內層 <a> 仍吃第 4 節的 color: var(--aark-navy)，
 * 在深色頁首上整顆會消失。同樣的坑在 .aark-home-cta、.aark-hero-row、.aark-ai
 * 各修過一次，這是第四次 —— 深色底只要出現線框鈕就要補這一組。
 */
.aark-phead.has-bg .wp-block-button.aark-btn-outline .wp-block-button__link {
	color: var(--aark-white);
	border-color: rgba(255, 255, 255, .55);
}

.aark-phead.has-bg .wp-block-button.aark-btn-outline .wp-block-button__link:hover,
.aark-phead.has-bg .wp-block-button.aark-btn-outline .wp-block-button__link:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

.aark-phead.has-bg .aark-btn-outline {
	border-color: rgba(255, 255, 255, .5);
	color: var(--aark-white);
}

.aark-phead.has-bg .aark-btn-primary .wp-block-button__link {
	box-shadow: 7px 7px 0 rgba(130, 152, 255, .5);
}


/* ==========================================================================
   橘色按鈕的互動狀態

   ⚠ 一定要明確寫 hover 的 color。
   Kadence 的 all.min.css 有全域的
       a:hover, a:focus, a:active { color: var(--global-palette-highlight-alt) }
   我們的按鈕若只定義預設狀態，滑過去時字色會被它接管 ——
   橘底配上接近橘色的字，文字直接消失。
   平常截圖完全看不出來，只有實際把滑鼠移上去才會發現。

   hover 一律翻成深藏青底 + 白字（19.6:1），
   與頁首 CTA 的行為一致，回饋也夠明確。
   ========================================================================== */

.aark-btn-solid:hover,
.aark-btn-solid:focus-visible,
.aark-btn-primary .wp-block-button__link:hover,
.aark-btn-primary .wp-block-button__link:focus-visible,
.aark-btn-primary.kb-button:hover,
.aark-btn-primary.kb-button:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

/* 外框鈕：hover 翻成實心藏青 */
.aark-btn-outline:hover,
.aark-btn-outline:focus-visible,
.aark-btn-outline .wp-block-button__link:hover,
.aark-btn-outline .wp-block-button__link:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

/* 橘色 CTA 帶裡的按鈕本來就是藏青底，hover 改成白底藏青字才有變化 */
.aark-page-cta .aark-btn-solid:hover,
.aark-page-cta .aark-btn-solid:focus-visible,
.aark-home-cta .aark-btn-solid:hover,
.aark-home-cta .aark-btn-solid:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

.aark-home-cta .aark-btn-outline:hover,
.aark-home-cta .aark-btn-outline:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

/* 深底上的按鈕（頁首背景圖、深色區段）：hover 翻白底藏青字 */
.aark-phead.has-bg .aark-btn-primary .wp-block-button__link:hover,
.aark-phead.has-bg .aark-btn-primary .wp-block-button__link:focus-visible,
.aark-on-dark .aark-btn-solid:hover,
.aark-on-dark .aark-btn-solid:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

.aark-phead.has-bg .aark-btn-outline:hover,
.aark-phead.has-bg .aark-btn-outline:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}


/* ==========================================================================
   1. 區段之間不留白帶

   量測結果：緊湊頁首結束後有 32px 的白色空隙，再接一條 1px 框線才是下一段。
   來源是 .entry-content-wrap 的 2rem 內距殘留，以及區塊間距。

   我們每一個區段都自己畫背景與上下內距，容器不需要再補任何間隔 ——
   多出來的白帶會把「深色頁首直接接到內容」的節奏切斷。
   ========================================================================== */

.content-width-fullwidth .entry-content-wrap,
.content-width-fullwidth .entry-content { padding: 0; margin: 0; }

.entry-content > .aark-phead,
.entry-content > .wp-block-group.aark-phead { margin: 0; }

.entry-content > section { margin-block: 0; }

/* 頁首後面那條框線是多餘的：深色頁首與米白區段之間，色塊交界本身就是分隔 */
.aark-phead + section.aark-section,
.aark-phead + .aark-section { border-top: 0; }


/* ==========================================================================
   2. 品牌斜線區塊

   區段標頭的左欄原本只放一個眉標，其餘是空白。
   在那裡放一塊斜線，讓每一段的開頭都有同一個記號 ——
   這是全站重複出現的品牌裝置，不是單頁裝飾。

   作法用 ::before 而不是改標記：
     所有既有與未來的 .aark-section-head 自動套用，
     13 個固定頁不必逐一改內容。

   線條用深藏青、低不透明度：
     眉標（霧藍 #3d5fff）壓在上面仍然清楚。
     斜線太深會變成噪音，搶走標題的注意力。
   ========================================================================== */

.aark-section-head { position: relative; }

/*
 * 品牌斜線區塊
 *
 * 粗線、滿不透明、從視窗左緣切進來、不淡出 —— 當作全站重複出現的記號。
 *
 * 滿版切齊的作法：
 *   .aark-section-head 位在 .aark-wrap（最寬 1240px、置中）裡面，
 *   用 left: calc(-50vw + 50%) 把虛擬元素的左緣推到視窗最左邊
 *   （50% 是標頭自身寬度的一半，也就是 wrap 的一半）。
 *   寬度再加回左欄的 180px，斜線就會在標題欄開始之前結束。
 *
 * ⚠ .aark-section 要加 overflow-x: clip：
 *   50vw 在部分瀏覽器包含捲軸寬度，不夾住會多出幾像素的水平捲動。
 *   用 clip 而不是 hidden —— hidden 會產生新的捲動容器，
 *   讓頁內錨點（#plans 這類）的捲動行為變得奇怪。
 */

.aark-section { overflow-x: clip; }

.aark-section-head .aark-eyebrow {
	position: relative;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* 線條顏色抽成變數：換色只改一個值，不必動四處的漸層定義 */
.aark-section-head { --aark-stripe: var(--aark-navy); }

.aark-section-head .aark-eyebrow::after {
	content: "";
	position: absolute;
	/*
	 * 從眉標的下緣開始往下長（top: 100%）。
	 * 眉標折成幾行都沒關係 —— 100% 指的是眉標自身的高度，
	 * 而第 2 列正好從那裡開始，所以斜線頂端與右欄文字頂端天然對齊。
	 */
	top: calc(100% + .35rem);
	bottom: auto;
	left: calc(-50vw + 50%);
	width: calc(50vw - 50% + 180px);
	height: 8.5rem;
	background-image: repeating-linear-gradient(
		45deg,
		var(--aark-stripe) 0 15px,
		transparent 15px 30px
	);
	pointer-events: none;
}

/* 深色區段：線條改霧藍，深藏青線在深藏青底上等於沒有 */
.aark-on-dark .aark-section-head,
.aark-geo .aark-section-head,
.aark-ai .aark-section-head { --aark-stripe: var(--aark-blue); }

/* 白底區段的線條稍微收一點，白底上的滿黑會比米白底更跳 */
.aark-on-white .aark-section-head { --aark-stripe: rgba(0, 0, 62, .88); }


/* 斜線顏色定案：深藏青（淺底）／霧藍（深底）。
   橘色與霧灰的對照設定已移除 —— 橘會稀釋行動色的信號，灰則太退。 */

@media (max-width: 1023px) {
	.aark-section-head .aark-eyebrow::after { height: 5.5rem; }
	.aark-section-head > div,
	.aark-section-head .wp-block-group__inner-container > .wp-block-group { min-height: 6rem; }
}

@media (max-width: 782px) {
	/* 單欄版面：眉標、斜線、標題依序堆疊，不再分欄對齊 */
	.aark-section-head { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 2.25rem; }
	.single-content .wp-block-group.aark-section-head { margin-bottom: 2.25rem; }
	.aark-section-head > .aark-eyebrow,
	.aark-section-head .wp-block-group__inner-container > .aark-eyebrow { grid-column: 1; grid-row: 1; }
	/* ⚠ 區塊版的選擇器要一併寫。只改 > div 的話，區塊版的標題群組會留在
	   grid-column: 2，在單欄格線下製造出一個隱式第二欄，結果是眉標被壓成
	   一行一字的直排，斜線也疊到標題上面。 */
	.aark-section-head > div,
	.aark-section-head .wp-block-group__inner-container > .wp-block-group { grid-column: 1; grid-row: 2; min-height: 0; padding-top: 2.75rem; }
	.aark-section-head .aark-eyebrow::after {
		top: calc(100% + .35rem);
		height: 2rem;
		width: calc(50vw - 50% + 120px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* 純靜態，不加動畫 —— 這個品牌的語言是硬邊與排版 */
}

/* -------------------------------------------------------------------------
   文章卡片縮圖（相關文章／彙整頁／搜尋結果）

   來源見 inc/post-thumbs.php：沒有精選圖時改用內文第一張圖。
   Kadence 自己的 .post-thumbnail img 已經有 object-fit: cover，
   注入的 <img> 直接吃得到，這裡只補「整篇沒有圖」時的底紋。
   ---------------------------------------------------------------------- */

.aark-thumb-blank {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--aark-navy);
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .11) 0 15px, transparent 15px 30px);
}

/*
 * 用內文取來的圖多半不是為了當縮圖拍的（截圖、圖表、示意圖都有），
 * 上緣通常比中間有資訊，所以對齊上方而不是置中裁切。
 */
.post-thumbnail img.aark-thumb-derived { object-position: center top; }

/* -------------------------------------------------------------------------
   頁尾 CTA 帶

   ⚠ 從 pages.css 搬過來的。原本只在固定頁載入，但文章頁也開始用同一組
     CTA（內容來自同步區塊 aark-single-cta），結果 CTA 出現了卻沒有橘底 ——
     跟 .aark-wrap、.aark-btn 當初一樣的坑：元件一旦跨樣板共用，
     就必須放在一定會載入的這支檔案。
   ---------------------------------------------------------------------- */

.aark-page-cta {
	background: var(--aark-orange);
	color: var(--aark-white);
	padding: 5rem 0;
	text-align: center;
	border-top: 0;
}

.aark-page-cta h2 {
	font-family: var(--aark-serif);
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -.04em;
	color: var(--aark-white);
	margin: 0 auto 1rem;
	max-width: 18ch;
}

.aark-page-cta p {
	margin: 0 auto 2rem;
	max-width: 52ch;
	color: #ffffff;
	font-weight: 600;
	font-size: var(--aark-md);
}

/* 按鈕維持藏青底：亮橘上藏青有 7.04:1，是整頁最重要的點擊目標，
   不為了統一白字而犧牲。白底橘字反而只有 2.79:1。 */
.aark-page-cta .aark-btn-solid {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
	box-shadow: 7px 7px 0 rgba(0, 0, 62, .28);
}

/* -------------------------------------------------------------------------
   預設表單欄位

   ⚠ Kadence 的 input／textarea 底色是 var(--global-palette9)，
     它預期那一格是白色。但我們的 palette9 是品牌的長春花藍 #8298ff ——
     於是留言表單、搜尋框整片變成藍紫色。

     不改 palette9（那是真的品牌色，別處有在用），改在這裡覆寫。
     這跟先前 .content-bg 吃到 palette9 是同一個根因。

   /contactus/ 的表單有自己的 .aark-field 樣式（白底、藏青框），
   不受這裡影響。
   ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	background: var(--aark-field);
	border: 1px solid var(--aark-line);
	border-radius: 0;
	color: var(--aark-ink);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	background: var(--aark-white);
	border-color: var(--aark-navy);
	outline: 2px solid var(--aark-orange);
	outline-offset: 1px;
}

/* 佔位文字要比輸入文字淡，但不能淡到讀不出來 */
::placeholder { color: var(--aark-slate); opacity: .75; }