/* FAQ問答區塊 前台樣式。四款主題共用同一組 CSS 變數（全站設定注入）：
   ⚠️ 1.8.0 起，主題的 class 是**編號**不是名字：.sfaq-theme-01 ～ .sfaq-theme-04。
      編號是「位子」，不是身分——以後要換設計，就是換某個編號裡面的規則，
      已經選了那個編號的文章自動跟著換，不必回頭動任何一篇。
      舊名字（classic／accordion／minimal…）由 settings.php 的 sfaq_theme_aliases() 對照到編號，
      所以 1.7 以前存的值照樣讀得到。⛔ 編號只能新增不能刪（刪了＝那些文章靜默掉回預設）。
      目前各編號裝的是：01 經典卡片｜02 經典卡片・線描圖示｜03 清爽分隔・引號面板｜04 對話氣泡。
   --sfaq-primary 品牌主色｜--sfaq-accent 強調色｜--sfaq-bg 答案底色｜--sfaq-text 文字色 */

.sfaq { margin: 2em 0; color: var(--sfaq-text, #3c434a); }
.sfaq * { box-sizing: border-box; }

/* 標題（沿用彩版語言：左色條） */
.sfaq-title { color: var(--sfaq-primary); border-left: 4px solid var(--sfaq-accent);
	padding-left: 12px; margin: 0 0 4px; font-size: 1.45em; }
.sfaq-subtitle { color: #8a8f98; font-size: .8em; letter-spacing: 1.5px; margin: 0 0 18px 16px; }

/* 搜尋框與工具列 */
.sfaq-search { margin: 0 0 14px; }
.sfaq-search input { width: 100%; max-width: 360px; padding: 9px 14px; font-size: .95em;
	border: 1px solid #d5d8dc; border-radius: 24px; outline: none; }
.sfaq .sfaq-search input:focus { border-color: var(--sfaq-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sfaq-accent) 25%, transparent); }
.sfaq-tools { text-align: right; margin: 0 0 10px; }
.sfaq-expand-all { border: 1px solid #d5d8dc; background: #fff; color: var(--sfaq-primary);
	font-size: .82em; padding: 5px 14px; border-radius: 20px; cursor: pointer; }
.sfaq .sfaq-expand-all:hover, .sfaq .sfaq-expand-all:focus { background: #fff;
	color: var(--sfaq-primary); border-color: var(--sfaq-accent); box-shadow: none; }

/* 共通結構 */
.sfaq-q { margin: 0; font-size: 1em; }
/* ⚠️ box-sizing 必須在 all:unset 之後重新指定：all:unset 會把它打回 content-box，
   於是 width:100% 再加左右 padding 就撐爆容器、整頁橫向捲動（2026-09-01 實測到）。
   開頭的 `.sfaq *` 那條擋不住——同分特異性，後面的 all:unset 贏。 */
.sfaq-q-btn { all: unset; box-sizing: border-box; display: flex; align-items: center;
	gap: 13px; width: 100%; cursor: pointer; padding: 16px 18px; }
.sfaq-q-text { flex: 1; font-weight: 700; font-size: 1.05em; line-height: 1.6; }
/* ⚠️ Q／A 徽章一律用 ::before 產生，DOM 裡不放裝飾節點——
   放進 <h3> 會被內容目錄外掛當成標題文字讀走（TOC 會顯示「Q01題目…」）。
   （1.6.0 移除③極簡編號之後，CSS counter 沒有任何一款在用，一起刪掉、不留死碼。） */
.sfaq-q-btn::before, .sfaq-a::before { min-width: 32px; height: 32px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .95em; flex: none; }
/* 徽章由全站設定決定（data-badge）。**1.6.0 起只剩兩種**：這裡的 ?／✓（鍵 icon，預設）
   與下面的人物頭像（鍵 girl）。Jimmy 2026-09-20：「徽章樣式我選兩個，希望能切換，預設用 ? V 那個。」
   ⚠️ 刪掉的四種是 🙋／💡、💬／✅、問／答、Q／A——後兩種本來就綁死語言、英文站不能用
   （2026-09-01 定案），前兩種是表情符號、跟品牌配色搭不起來。
   ⚠️ 沒有 [data-badge="icon"] 這種規則：icon 就是這兩行基礎規則本身，
   所以連 data-badge 都沒輸出時（理論上不會發生）長相也對得上預設值。 */
.sfaq-q-btn::before { content: "?"; }
.sfaq-a::before { content: "\2713"; }
/* ══ 內建人物（Q版女孩）══
   Jimmy 2026-09-01 指定：「直接畫兩個Q版可愛的女孩，一個在發問，一個在回答」，
   並要求做成外掛的內建人物。圖檔在 assets/img/，網址由 render.php 以 CSS 變數注入
   （不在 CSS 裡寫死路徑——外掛資料夾位置不是固定的）。
   ⚠️ 徽章本來是 32px，人物在那個尺寸看不清楚，所以這個樣式自動放大到 44px。 */
.sfaq[data-badge="girl"] .sfaq-q-btn::before,
.sfaq[data-badge="girl"] .sfaq-a::before {
	content: ""; min-width: 44px; width: 44px; height: 44px;
	background-size: cover; background-position: center top;
	background-repeat: no-repeat; box-shadow: none;
	border: 2px solid color-mix(in srgb, var(--sfaq-accent) 55%, #fff); }
.sfaq[data-badge="girl"] .sfaq-q-btn::before { background-image: var(--sfaq-avatar-q); }
.sfaq[data-badge="girl"] .sfaq-a::before { background-image: var(--sfaq-avatar-a); }
/* 對話氣泡的人物當頭像剛好合適（②清爽分隔與①線描圖示各自不吃徽章，見各自那一段） */
.sfaq[data-badge="girl"].sfaq-theme-04 .sfaq-q-btn::before { align-self: flex-end; }
.sfaq-chev { color: #c2c6cc; transition: transform .25s; flex: none; }
.sfaq-item.sfaq-open > .sfaq-q .sfaq-chev { transform: rotate(180deg); color: var(--sfaq-accent); }
.sfaq-a { display: none; gap: 13px; padding: 2px 18px 20px; }
.sfaq-item.sfaq-open > .sfaq-a { display: flex; animation: sfaq-slide .25s ease; }
@keyframes sfaq-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sfaq-a-body { flex: 1; line-height: 2; font-size: .98em; }
.sfaq-a-body a { color: var(--sfaq-primary); }
.sfaq-a-body mark:not([style]) { background: color-mix(in srgb, var(--sfaq-accent) 18%, #fff); padding: 1px 3px; }

/* ⚠️ 佈景主題可能有一條全域 `button:hover` 規則，會把任何按鈕在滑過時套上品牌色底＋白字
   （Astra 實測：#de463b 紅底白字，2026-09-01 Jimmy 回報「紅色反白很醜」）。
   `all: unset` 只管一般狀態，擋不住 :hover——`button:hover` 特異性 (0,1,1) 比 `.sfaq-q-btn` (0,1,0) 高。
   所以這裡一律用 `.sfaq` 前綴把特異性拉到 (0,2,1)，各主題的 hover 也照這個寫法各自宣告。 */
.sfaq .sfaq-q-btn:hover, .sfaq .sfaq-q-btn:focus, .sfaq .sfaq-q-btn:focus-visible {
	color: inherit; border-color: transparent; box-shadow: none; outline: none; }
.sfaq .sfaq-q-btn:focus-visible { outline: 2px solid var(--sfaq-accent); outline-offset: -2px; }

/* 直接列出模式：藏箭頭、問題不可點 */
.sfaq[data-mode="list"] .sfaq-chev { display: none; }
.sfaq[data-mode="list"] .sfaq-q-btn { cursor: default; }

/* 分享按鈕 */
.sfaq-share { border: 1px solid #e3e5e8; background: #fff; color: #8a8f98; font-size: .78em;
	padding: 5px 12px; border-radius: 20px; cursor: pointer; margin-top: 10px; display: inline-block; }
.sfaq .sfaq-share:hover, .sfaq .sfaq-share:focus { background: #fff;
	color: var(--sfaq-primary); border-color: var(--sfaq-accent); box-shadow: none; }
.sfaq .sfaq-share.sfaq-copied, .sfaq .sfaq-share.sfaq-copied:hover {
	color: #fff; background: var(--sfaq-primary); border-color: var(--sfaq-primary); }

/* 深連結進來的那一題：脈衝提示 */
.sfaq-item.sfaq-target { animation: sfaq-pulse 1.6s ease 2; }
@keyframes sfaq-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sfaq-accent) 45%, transparent); } }

/* 搜尋過濾中被藏起來的題目 */
.sfaq-item.sfaq-hidden { display: none; }

/* ══ 主題①經典卡片（兩款共用同一張卡片）══
   Jimmy 2026-09-20：「①經典卡片 留兩個，有頭像的 和 ①-C 線描圖示。」
   做法：卡片外觀兩款共用（選擇器並列，樣式只寫一份），差別只有 Q／A 那一格——
   `classic` 吃全站徽章設定（？／✓ 或人物頭像），`classic-line` 固定線描圖示、不吃設定。
   ⚠️ `.sfaq-theme-01` 不會誤套到 `classic-line`：class 是整串比對，不是前綴比對。 */
.sfaq-theme-01 .sfaq-item,
.sfaq-theme-02 .sfaq-item { border: 1px solid #e8eaee; border-radius: 14px; margin-bottom: 16px;
	overflow: hidden; box-shadow: 0 2px 8px color-mix(in srgb, var(--sfaq-primary) 6%, transparent); }
.sfaq-theme-01 .sfaq-q-btn,
.sfaq-theme-01 .sfaq-q-btn:hover,
.sfaq-theme-01 .sfaq-q-btn:focus,
.sfaq-theme-02 .sfaq-q-btn,
.sfaq-theme-02 .sfaq-q-btn:hover,
.sfaq-theme-02 .sfaq-q-btn:focus { background: linear-gradient(90deg, var(--sfaq-primary), color-mix(in srgb, var(--sfaq-primary) 84%, #6a7899)); }
.sfaq-theme-01 .sfaq-q-text,
.sfaq-theme-02 .sfaq-q-text { color: #fff; }
.sfaq-theme-01 .sfaq-chev,
.sfaq-theme-02 .sfaq-chev { color: color-mix(in srgb, #fff 55%, transparent); }
.sfaq-theme-01 .sfaq-q-btn::before { background: var(--sfaq-accent); color: var(--sfaq-primary); }
.sfaq-theme-01 .sfaq-a,
.sfaq-theme-02 .sfaq-a { background: var(--sfaq-bg); padding-top: 16px; }
.sfaq-theme-01 .sfaq-a::before { background: var(--sfaq-primary); color: var(--sfaq-accent); }

/* ── ①線描圖示：Q／A 換成線描圖示，顏色**不畫死在圖裡**——圖當遮罩、底色吃 CSS 變數，
   所以每個業主的配色它都跟得上。⚠️ 特異性要贏過 .sfaq[data-badge="girl"] … (0,3,1)，
   所以寫成 .sfaq.sfaq-theme-02[data-badge] … = (0,4,1)；
   `:not([data-badge])` 那條是「連 data-badge 都沒輸出」的保險路徑。
   ⚠️ 整段包在 @supports 裡：瀏覽器不支援 mask 時退回上面的 ?／✓，不會出現一塊實心色塊。 */
.sfaq-theme-02 {
	--sfaq-line-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.7c0 4.2-3.8 7.6-8.5 7.6-1.1 0-2.2-.2-3.2-.5L4 20.5l1.4-3.7c-1.2-1.3-1.9-3-1.9-4.9 0-4.2 3.8-7.6 8.5-7.6s8.5 3.4 8.5 7.4z'/%3E%3Cpath d='M9.9 9.6a2.2 2.2 0 0 1 4.3.7c0 1.5-2.2 2-2.2 2'/%3E%3Cpath d='M12 15.2h.01'/%3E%3C/svg%3E");
	--sfaq-line-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 17.2h5.2'/%3E%3Cpath d='M10.2 20.2h3.6'/%3E%3Cpath d='M12 3.4a5.7 5.7 0 0 0-3.3 10.3c.7.5 1.1 1.3 1.1 2.1h4.4c0-.8.4-1.6 1.1-2.1A5.7 5.7 0 0 0 12 3.4z'/%3E%3C/svg%3E"); }
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.sfaq.sfaq-theme-02[data-badge] .sfaq-q-btn::before,
	.sfaq.sfaq-theme-02:not([data-badge]) .sfaq-q-btn::before,
	.sfaq.sfaq-theme-02[data-badge] .sfaq-a::before,
	.sfaq.sfaq-theme-02:not([data-badge]) .sfaq-a::before {
		content: ""; display: inline-block; min-width: 34px; width: 34px; height: 34px;
		border: none; border-radius: 0; box-shadow: none; background-image: none;
		-webkit-mask-size: contain; mask-size: contain;
		-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
		-webkit-mask-position: center; mask-position: center; }
	.sfaq.sfaq-theme-02[data-badge] .sfaq-q-btn::before,
	.sfaq.sfaq-theme-02:not([data-badge]) .sfaq-q-btn::before {
		background-color: var(--sfaq-accent);
		-webkit-mask-image: var(--sfaq-line-q); mask-image: var(--sfaq-line-q); }
	.sfaq.sfaq-theme-02[data-badge] .sfaq-a::before,
	.sfaq.sfaq-theme-02:not([data-badge]) .sfaq-a::before {
		background-color: var(--sfaq-primary);
		-webkit-mask-image: var(--sfaq-line-a); mask-image: var(--sfaq-line-a); }
}
.sfaq-theme-02 .sfaq-q-btn { padding: 15px 18px; }
.sfaq-theme-02 .sfaq-a { padding: 14px 18px 20px; }

/* ══ 主題③清爽分隔・引號面板 ══
   Jimmy 2026-09-20 逐塊裁決：原本那款（左邊一排 Q／A＋柔和底色面板）**刪掉**，留這一款；
   同時要求「問題也有框架（答案區已有）」，所以問與答各自是一個框，用左側色條分主從：
   問題＝比答案重一點的底色＋主色粗左條，答案＝柔和底色＋強調色粗左條＋左上角一個大引號。
   ⚠️ 鍵名 accordion 是 1.0～1.4 的歷史名稱，**刻意不改**——站上 191 個區塊裡寫死了它，
      換鍵名會讓那 191 塊找不到主題、整批掉回全站預設（而且不報錯）。
   ⚠️ 這一款**不用 Q／A 那一格**，全站徽章設定對它不生效（設定頁有寫）。
   ⚠️ 大引號一律用**字元本身**「“」，不要寫 CSS 的跳脫——2026-09-20 就是那個跳脫在改檔的過程中
      被吃成一個控制字元加字母 C，前台變成一個大大的「C」，而且完全不報錯，Jimmy 自己看到才發現。
      selfcheck 有一條掃 front.css 裡的控制字元。
   收合行為由 render.php 的 sfaq_resolve() 對這款強制關掉；這裡不再有任何收合狀態的樣式。 */
.sfaq-theme-03 .sfaq-list { border: none; }
.sfaq-theme-03 .sfaq-item { border: none; padding: 0 0 18px; margin: 0; }
/* 問與答各自有框之後，題與題之間不再需要那條分隔線，留白就夠了 */
.sfaq-theme-03 .sfaq-item + .sfaq-item { border-top: none; padding-top: 0; }
/* 特異性要贏過佈景主題的 button:hover（Astra 會套紅底白字），所以 hover 一起宣告。
   ⚠️ 問題框的底色**要比答案框重一點**（Jimmy 2026-09-21）——本來問題是純白、答案是 --sfaq-bg，
      反而問題比較輕。做法是拿答案的底色再摻色，所以不管業主的配色是什麼，「問題比答案重」
      這個關係都成立（寫死一個顏色的話，深色底的站就會反過來）。
   ⚠️ 摻的是**強調色**不是主色。第一版摻主色（主色多半是接近黑的深色），混進淺色底會變成濁濁的灰，
      Jimmy 當場說「不好看，換個顏色」；摻強調色出來是暖沙色，跟答案的米白、金色左條同一個色系。 */
.sfaq-theme-03 .sfaq-q-btn, .sfaq-theme-03 .sfaq-q-btn:hover {
	background: color-mix(in srgb, var(--sfaq-accent) 24%, var(--sfaq-bg));
	border: 1px solid color-mix(in srgb, var(--sfaq-accent) 55%, var(--sfaq-bg));
	border-left: 3px solid var(--sfaq-primary); border-radius: 0 14px 14px 0;
	padding: 13px 18px; margin-bottom: 10px; align-items: center; }
.sfaq-theme-03 .sfaq-q-text { color: var(--sfaq-primary); font-weight: 800; font-size: 1.08em; line-height: 1.5; }
.sfaq-theme-03 .sfaq-a { padding: 0; align-items: flex-start; }
/* 這一款不用 Q／A 那一格。⚠️ 特異性要贏過 .sfaq[data-badge="girl"] .sfaq-q-btn::before (0,3,1)，
   所以寫成 .sfaq.sfaq-theme-03[data-badge] … = (0,4,1)；`:not([data-badge])` 是保險路徑。 */
.sfaq.sfaq-theme-03[data-badge] .sfaq-q-btn::before,
.sfaq.sfaq-theme-03:not([data-badge]) .sfaq-q-btn::before,
.sfaq.sfaq-theme-03[data-badge] .sfaq-a::before,
.sfaq.sfaq-theme-03:not([data-badge]) .sfaq-a::before { display: none; }
/* 小菱形：放在 .sfaq-q-text 的 ::before，一樣是 CSS 畫的、DOM 裡沒有節點，
   所以內容目錄外掛讀到的標題文字仍然只有題目本身。 */
.sfaq-theme-03 .sfaq-q-text::before { content: ""; display: inline-block; width: 9px; height: 9px;
	margin-right: 11px; vertical-align: 2px; background: var(--sfaq-accent); transform: rotate(45deg); }
.sfaq-theme-03 .sfaq-a-body { background: var(--sfaq-bg); border-radius: 0 14px 14px 0;
	position: relative; border: none; border-left: 3px solid var(--sfaq-accent);
	padding: 16px 20px 16px 50px; }
.sfaq-theme-03 .sfaq-a-body::before { content: "“"; position: absolute; left: 14px; top: 12px;
	font: 700 2.9em/1 Georgia, "Times New Roman", serif;
	color: color-mix(in srgb, var(--sfaq-accent) 80%, #fff); }

/* ══ 主題④對話氣泡 ══ */
.sfaq-theme-04 .sfaq-list { background: color-mix(in srgb, var(--sfaq-primary) 4%, #f7f8fb);
	border-radius: 16px; padding: 22px 18px 10px; }
.sfaq-theme-04 .sfaq-item { margin-bottom: 8px; }
.sfaq-theme-04 .sfaq-q-btn { padding: 0 0 10px; align-items: flex-end; }
.sfaq-theme-04 .sfaq-q-btn::before { background: var(--sfaq-primary); color: var(--sfaq-accent); }
.sfaq-theme-04 .sfaq-q-text { flex: none; max-width: 80%; background: var(--sfaq-primary); color: #fff;
	border-radius: 16px 16px 16px 4px; padding: 11px 16px; font-weight: 600; font-size: 1em; }
.sfaq-theme-04 .sfaq-chev { align-self: center; }
.sfaq-theme-04 .sfaq-a { padding: 0 0 14px; justify-content: flex-end; align-items: flex-end; }
.sfaq-theme-04 .sfaq-a-body { flex: none; max-width: 82%; background: #fff;
	border: 1px solid color-mix(in srgb, var(--sfaq-accent) 45%, #fff); border-radius: 16px 16px 4px 16px;
	padding: 12px 16px; box-shadow: 0 1px 4px color-mix(in srgb, var(--sfaq-primary) 5%, transparent); }
.sfaq-theme-04 .sfaq-a::before { background: var(--sfaq-accent); color: var(--sfaq-primary); order: 2; }

/* 對話氣泡：問題列本來就沒有底色，hover 也維持透明（擋佈景主題的紅底） */
.sfaq-theme-04 .sfaq-q-btn, .sfaq-theme-04 .sfaq-q-btn:hover { background: transparent; }
/* 對話氣泡的問題泡泡本身維持主色，不被 hover 蓋掉 */
.sfaq-theme-04 .sfaq-q-btn:hover .sfaq-q-text { background: var(--sfaq-primary); color: #fff; }

/* 手機 */
@media (max-width: 600px) {
	.sfaq-q-btn { padding: 14px 12px; gap: 10px; }
	.sfaq-a { padding-left: 12px; padding-right: 12px; }
	.sfaq-q-btn::before, .sfaq-a::before { min-width: 28px; height: 28px; font-size: .85em; }
	.sfaq[data-badge="girl"] .sfaq-q-btn::before,
	.sfaq[data-badge="girl"] .sfaq-a::before { min-width: 38px; width: 38px; height: 38px; }
	.sfaq-theme-02 .sfaq-q-btn { padding: 13px 12px; }
	.sfaq-theme-02 .sfaq-a { padding: 12px 12px 18px; }
	.sfaq-theme-03 .sfaq-q-btn { padding: 11px 14px; }
	.sfaq-theme-03 .sfaq-a-body { padding: 14px 16px 14px 42px; }
	.sfaq-theme-04 .sfaq-q-text, .sfaq-theme-04 .sfaq-a-body { max-width: 92%; }
}

/* 列印：一律全展開、藏互動元件 */
@media print {
	.sfaq-a { display: flex !important; }
	.sfaq-share, .sfaq-search, .sfaq-tools, .sfaq-chev { display: none !important; }
}