/* v3 設計稿的 header／footer 外觀（全站套用）
 *
 * 為什麼要有這一份：Blocksy customizer 能改色盤與字型，但改不了
 * 「頁首是米色、底下一條 #d8d2c4 細線、導覽 13.5px/500/0.04em、
 *  捐款鈕是紅底白字全大寫」這種逐項的視覺規格。這裡補齊 customizer
 * 表達不了的部分，讓 Blocksy 的 header／footer 對上設計稿。
 *
 * ⚠️ 本檔**全站載入**（不只 v3 頁面）——因為 Blocksy 的 header／footer 是
 *    全站共用的，Charles 2026-08-27 決定全域套用設計稿外觀。
 *    要退回只影響 v3，把 enqueue 條件改成與 clw-v3.css 相同即可。
 *
 * 色值一律取自設計稿 :root，與 clw-v3.css 同源。
 */

.clw-v3-chrome {
	--v3-paper:   #faf7f1;
	--v3-paper2:  #ffffff;
	--v3-paper3:  #f1ece1;
	--v3-ink:     #1a1a1a;
	--v3-ink-soft:#4a4a4a;
	--v3-ink-mut: #7a7a7a;
	--v3-rule:    #d8d2c4;
	--v3-blue:    #1f4380;
	--v3-red:     #c8102e;
	--v3-serif:   'Cormorant Garamond', Georgia, serif;
	--v3-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--v3-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ---- 站台底色 ------------------------------------------------------- */
body.clw-v3-chrome { background: var(--v3-paper); }

/* ---- 頁首 ----------------------------------------------------------- */
.clw-v3-chrome .ct-header [data-row="middle"] {
	background: var(--v3-paper);
	border-bottom: 1px solid var(--v3-rule);
	box-shadow: none;
}
/* 上排（utility bar）：設計稿是較深的米色 ＋ 頂端一條紅線 */
.clw-v3-chrome .ct-header [data-row="top"] {
	background: var(--v3-paper3);
	border-top: 3px solid var(--v3-red);
	border-bottom: 1px solid var(--v3-rule);
	font-family: var(--v3-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--v3-ink-soft);
}

/* 導覽：13.5px / 500 / 0.04em，顏色 --ink（設計稿 .nav-links > div > a） */
.clw-v3-chrome .ct-header .ct-menu-link {
	font-family: var(--v3-sans);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--v3-ink);
	text-transform: none;
}
.clw-v3-chrome .ct-header .ct-menu-link:hover,
.clw-v3-chrome .ct-header .current-menu-item > .ct-menu-link { color: var(--v3-blue); }

/* 下拉：白底、細邊、13px */
.clw-v3-chrome .ct-header .sub-menu {
	background: var(--v3-paper2);
	border: 1px solid var(--v3-rule);
	border-radius: 2px;
	box-shadow: 0 18px 40px -18px rgba(26,26,26,.28);
}
.clw-v3-chrome .ct-header .sub-menu .ct-menu-link {
	font-size: 13px;
	color: var(--v3-ink-soft);
	letter-spacing: .02em;
}
.clw-v3-chrome .ct-header .sub-menu .ct-menu-link:hover {
	background: var(--v3-paper3);
	color: var(--v3-ink);
}

/* logo 高度照設計稿的 56px */
.clw-v3-chrome .ct-header .site-logo-container img { max-height: 56px; width: auto; }

/* ---- 捐款鈕 ---------------------------------------------------------
   設計稿的 .donate-btn：紅底白字、12.5px、700、寬字距、全大寫、直角。
   Blocksy 的 header button 與內文 .wp-block-button 都套同一組，
   避免同一顆按鈕在頁首與內文長得不一樣。 */
.clw-v3-chrome .ct-header .ct-button,
.clw-v3-chrome .ct-header .ct-button-ghost {
	background: var(--v3-red);
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 12px 26px;
	font-family: var(--v3-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.clw-v3-chrome .ct-header .ct-button:hover { background: #a50d26; color: #fff; }

/* ---- 頁尾 -----------------------------------------------------------
   既有的 clw-ftop 頁尾本來就讀 --theme-palette-color-N，換色盤會自動跟著，
   這裡只補 customizer 表達不了的字體與線條。 */
.clw-v3-chrome .ct-footer {
	background: var(--v3-paper3);
	border-top: 1px solid var(--v3-rule);
	color: var(--v3-ink-soft);
}
.clw-v3-chrome .ct-footer h1,
.clw-v3-chrome .ct-footer h2,
.clw-v3-chrome .ct-footer h3 { font-family: var(--v3-serif); color: var(--v3-ink); }
/* 欄標題：11px、字距 0.22em、全大寫、等寬字（設計稿 .footer-col h4） */
.clw-v3-chrome .ct-footer h4,
.clw-v3-chrome .ct-footer .widget-title {
	font-family: var(--v3-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--v3-ink);
}
/* ⚠️ 這條只能套用在**純文字連結**上。
   原本寫成 `.ct-footer a`（0,0,2,1），把頁尾捐款鈕
   `.clw-ftop-btn`（0,0,1,0）與 `:link`（0,0,2,0）的白字壓成深灰，
   結果紅底深字幾乎看不見——是我自己造成的迴歸，不是主題的問題。
   排除掉帶背景的按鈕類元素。 */
.clw-v3-chrome .ct-footer a:not([class*="btn"]):not([class*="button"]) {
	color: var(--v3-ink-soft);
}
.clw-v3-chrome .ct-footer a:not([class*="btn"]):not([class*="button"]):hover {
	color: var(--v3-blue);
}
/* 頁尾捐款鈕：白字、改用設計稿的紅（頁尾 CSS 仍寫著舊的 #CC0000） */
.clw-v3-chrome .ct-footer .clw-ftop-btn,
.clw-v3-chrome .ct-footer .clw-ftop-btn:link,
.clw-v3-chrome .ct-footer .clw-ftop-btn:visited {
	background: var(--v3-red);
	color: #fff;
}
.clw-v3-chrome .ct-footer .clw-ftop-btn:hover { background: #a50d26; color: #fff; }
.clw-v3-chrome .ct-footer [data-row="bottom"] {
	border-top: 1px solid var(--v3-rule);
	font-size: 12px;
	color: var(--v3-ink-mut);
}

/* ---- 全站標題字 -----------------------------------------------------
   customizer 的 h1-h6 已設 Cormorant Garamond，這裡只處理它蓋不到的地方
   （佈景在部分版位用 .entry-title / .page-title 而非純 h 標籤）。 */
.clw-v3-chrome .entry-title,
.clw-v3-chrome .page-title,
.clw-v3-chrome .ct-block-title { font-family: var(--v3-serif); font-weight: 600; }

/* ---- 標題大小寫 -----------------------------------------------------
   ⚠️ Blocksy 對 h1 設了 `text-transform: capitalize`。設計稿的標題是
   sentence case（"Shining Light on Labor Practices Kept in the Dark"），
   被 capitalize 之後連 on／in／the 這些虛詞都變大寫，英文排版上是錯的。
   customizer 的 h1Typography 已設 none，但佈景還有其他更高特異性的規則，
   這裡全站明寫一次蓋掉。 */
/* ⚠️ 一定要寫成雙 class。真正的來源是 Elementor 的全域 kit：
   `.elementor-kit-21 h1 { text-transform: capitalize }`（post-21.css），
   特異性 (0,0,1,1) 與單 class 的 `.clw-v3-chrome h1` 相同，
   而 Elementor 的檔案載入在後 → 同分由 source order 決勝，我們輸。
   `.clw-v3-chrome.clw-v3-chrome h1` 是 (0,0,2,1)，才蓋得過。
   （v2 時期就記過同一個雷，clw-inner.css 全檔用雙 class 也是這個原因。） */
.clw-v3-chrome.clw-v3-chrome h1, .clw-v3-chrome.clw-v3-chrome h2,
.clw-v3-chrome.clw-v3-chrome h3, .clw-v3-chrome.clw-v3-chrome h4,
.clw-v3-chrome.clw-v3-chrome h5, .clw-v3-chrome.clw-v3-chrome h6,
.clw-v3-chrome.clw-v3-chrome .entry-title,
.clw-v3-chrome.clw-v3-chrome .page-title {
	text-transform: none;
}

/* ---- 頁首排版 -------------------------------------------------------
   設計稿的頁首是 logo 56px ＋ 導覽 30px 間距 ＋ 右側動作區，容器 1320/44px。
   選單有 9 個頂層項目，不給最小間距與 flex 收縮規則的話，
   窄一點的桌機寬度就會把 logo 和第一個選單項擠在一起。 */
/* ⚠️ Blocksy 的頁首列是 CSS Grid（start / middle / end 三欄）。
   選單放在 middle，內容一寬就會把 start 欄壓成 0px，logo 於是溢出去疊在
   第一個選單項上（實測 8 個頂層項在 1440px 就重疊 84px）。
   明寫 `auto 1fr auto` 讓 logo 欄永遠拿到它的自然寬度，middle 才是可壓縮的那個。 */
.clw-v3-chrome .ct-header [data-row="middle"] > .ct-container {
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 32px;
	padding-left: 44px;
	padding-right: 44px;
	align-items: center;
}
.clw-v3-chrome .ct-header [data-row="middle"] [data-column="middle"] {
	min-width: 0;
	justify-content: flex-end;
}
.clw-v3-chrome .ct-header .site-branding { flex: 0 0 auto; }
.clw-v3-chrome .ct-header .header-menu-1 { min-width: 0; }
.clw-v3-chrome .ct-header .header-menu-1 > .menu {
	column-gap: 26px;
	flex-wrap: nowrap;   /* 換行會讓第二排壓到 logo 上，寧可縮字距 */
}
.clw-v3-chrome .ct-header .header-menu-1 .ct-menu-link { white-space: nowrap; }

@media (max-width: 1400px) {
	.clw-v3-chrome .ct-header .header-menu-1 > .menu { column-gap: 18px; }
	.clw-v3-chrome .ct-header .ct-menu-link { font-size: 13px; }
}

/* logo 不得溢出它那一欄。
   Blocksy 會把左右兩欄算成等寬（實測 80px），而設計稿的 logo 是 56px 高、
   約 126px 寬——超出就會壓到第一個選單項上。
   讓 brand 可收縮、圖片以欄寬為上限，窄一點的桌機自動降到 46px。 */
.clw-v3-chrome .ct-header .site-branding { min-width: 0; }
.clw-v3-chrome .ct-header .site-logo-container img { max-width: 100%; }
@media (max-width: 1500px) {
	.clw-v3-chrome .ct-header .site-logo-container img { max-height: 46px; }
}

/* ---- 客戶預覽頁的對照表 ---------------------------------------------
   ⚠️ 原本借用設計稿的 .dn-tier-table，但那是為**深色表頭**設計的
   （th 是 rgba(255,255,255,.38)），放在米色底上對比度只有 1.03，
   等於整排表頭看不見。預覽頁是我們自己的頁面、不在設計稿裡，
   給它一組符合設計語彙的淺底表格樣式。 */
.clw3-p-preview .clw3-cmp {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--v3-sans);
	font-size: 14.5px;
}
.clw3-p-preview .clw3-cmp th {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 2px solid var(--v3-rule);
	font-family: var(--v3-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--v3-ink);
	white-space: nowrap;
}
.clw3-p-preview .clw3-cmp td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--v3-rule);
	color: var(--v3-ink-soft);
	vertical-align: top;
}
.clw3-p-preview .clw3-cmp tr:last-child td { border-bottom: 0; }
.clw3-p-preview .clw3-cmp a { color: var(--v3-blue); font-weight: 500; }
.clw3-p-preview .clw3-cmp a:hover { color: var(--v3-red); }
.clw3-p-preview .clw3-cmpwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clw3-p-preview .clw3-cmp { min-width: 620px; }