/*
Theme Name: Inkline Editorial
Theme Name (zh): 墨線編輯體
Theme URI: https://github.com/example/inkline
Author: Harry · ASJ ICT
Author URI: https://example.com/
Description: 墨線編輯體（Inkline Editorial）—— 暖紙底色、襯線標題、髮絲線分隔、等寬元信息的編輯部長文主題。原生深淺色雙主題、墨水屏模式、全站博客數據頁、REST 統計端點，零前端框架依賴，核心塊完整適配。
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inkline
Tags: blog, editorial, one-column, two-columns, block-patterns, block-styles, wide-blocks, custom-colors, editor-style, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================================================
   0. 設計令牌 Design tokens
   --------------------------------------------------------------------------
   規則：所有組件一律引用令牌，不得寫死色值。
   深淺色以同一組令牌名稱承載，切換只改令牌值。
   ========================================================================== */

:root {
	color-scheme: light;

	/* --- 顏色令牌（淺色） --- */
	--bg: #f7f4ed;
	--ink: #191713;
	--muted: #6b6357;
	--accent: #b23a1e;
	--accent-ink: #f7f4ed;
	--rule: #cfc8b9;
	--rule-strong: #191713;
	--code-bg: #efeadd;

	/* --- 結構令牌 --- */
	--rule-hair: 1px;
	--rule-structural: 2px;
	--radius-none: 0;
	--radius-hair: 2px;
	--max-wide: 1220px;
	--max-content: 720px;
	--measure: 72ch;
	--focus-width: 2px;

	/* --- 4px 基準間距 --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* --- 字體族 --- */
	--font-heading: "Instrument Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
	--font-body: "Source Serif 4", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
	--font-mono: "IBM Plex Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", Consolas, ui-monospace, monospace;

	/* --- 排版尺度 --- */
	--fs-h1: clamp(2.2rem, 5vw, 3.4rem);
	--fs-h2: clamp(1.55rem, 3vw, 2.15rem);
	--fs-h3: 1.35rem;
	--fs-h4: 1.1rem;
	--fs-lead: 20px;
	--fs-body: 17.5px;
	--fs-small: 14px;
	--fs-code: 13.5px;
	--fs-caption: 12px;
	--fs-meta: 11px;

	--lh-body: 1.8;
	--lh-heading: 1.18;
	--lh-code: 1.9;
	--track-meta: 0.14em;

	/* --- 動效（僅三檔） --- */
	--dur-color: 0.2s;
	--dur-track: 0.3s;
	--dur-reveal: 0.6s;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* --- 讓 theme.json 產生的預設變數跟隨令牌 ---
	   這樣核心塊由 theme.json 驅動的樣式會自動跟著深色模式走，
	   達成「編輯器與前台一致」且不必在組件裡寫死色值。 */
	--wp--preset--color--paper: var(--bg);
	--wp--preset--color--ink: var(--ink);
	--wp--preset--color--muted: var(--muted);
	--wp--preset--color--accent: var(--accent);
	--wp--preset--color--accent-ink: var(--accent-ink);
	--wp--preset--color--rule: var(--rule);
	--wp--preset--color--rule-strong: var(--rule-strong);
	--wp--preset--color--surface-code: var(--code-bg);
	--wp--preset--font-size--h1: clamp(2.2rem, 5vw, 3.4rem);
	--wp--preset--font-size--h2: clamp(1.55rem, 3vw, 2.15rem);
	--wp--preset--font-size--h3: 1.35rem;
}

/* --- 深色令牌 ---
   1) 無 data-theme（未設定／無 JS／noscript）→ 跟隨系統
   2) data-theme="light" → 明確鎖定淺色（媒體查詢被排除）
   3) data-theme="dark"  → 明確鎖定深色（置於媒體查詢之後勝出） */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg: #141310;
		--ink: #ede8dc;
		--muted: #9a9183;
		--accent: #e86a4c;
		--accent-ink: #141310;
		--rule: #3a362e;
		--rule-strong: #ede8dc;
		--code-bg: #1c1a16;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #141310;
	--ink: #ede8dc;
	--muted: #9a9183;
	--accent: #e86a4c;
	--accent-ink: #141310;
	--rule: #3a362e;
	--rule-strong: #ede8dc;
	--code-bg: #1c1a16;
}

/* --- 墨水屏模式（data-eink="on"）---
   動效歸零、灰階收斂為純黑白、強調色改為墨色反色方案。
   派生令牌以 var() 引用，故不必為淺／深各寫一份。 */

:root[data-eink="on"] {
	--bg: #ffffff;
	--ink: #000000;
	--muted: #000000;
	--accent: var(--ink);
	--accent-ink: var(--bg);
	--rule: var(--ink);
	--rule-strong: var(--ink);
	--code-bg: var(--bg);
}

@media (prefers-color-scheme: dark) {
	:root[data-eink="on"]:not([data-theme="light"]) {
		--bg: #000000;
		--ink: #ffffff;
	}
}

:root[data-eink="on"][data-theme="dark"] {
	--bg: #000000;
	--ink: #ffffff;
}

/* ==========================================================================
   1. 基礎重設 Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 錨點跳轉時避開粘性頁頭 */
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* 中文排版：行內標點擠壓 + 中英混排自動間隙 */
	text-spacing-trim: space-first;
	text-autospace: normal;
	overflow-x: hidden;
}

/* 窄屏收窄根內距（WP 以 :root 上的自訂屬性驅動 body padding） */
@media (max-width: 600px) {
	:root {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}
}

/* --- 根內距：WP 全域樣式已輸出時沿用其值；未輸出時由主題自補 ---
   theme.json 開著 useRootPaddingAwareAlignments，WP 會把
   --wp--style--root--padding-* 寫在 :root 並用它撐開 body。
   一旦該變數缺席（外掛關閉該功能、或樣式被替換），
   .alignfull 的負外距就會失去抵銷對象而橫向溢出，
   故此處以同一組變數補上 body 內距，讓兩者永遠成對。 */
body {
	padding-inline: var(--wp--style--root--padding-left, var(--sp-5))
		var(--wp--style--root--padding-right, var(--sp-5));
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

figure {
	margin: var(--sp-6) 0;
}

hr {
	border: 0;
	border-top: var(--rule-hair) solid var(--rule);
	margin: var(--sp-7) 0;
}

/* --- 焦點可見：2px 強調色描邊 --- */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
	outline: var(--focus-width) solid var(--accent);
	outline-offset: 2px;
	border-radius: 0;
}

::selection {
	background-color: var(--accent);
	color: var(--accent-ink);
}

/* --- 跳轉到正文 --- */
/* 以「往上移出視口」隱藏，而非 left:-9999px。
   在 RTL 文件中，向左的超額內容屬於可捲動溢位，用大負值會讓
   documentElement.scrollWidth 暴增（360 視口可達 10359），
   一旦有外掛或使用者樣式重置 overflow，就會長出橫向卷軸。 */
.skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 999;
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--bg);
	color: var(--ink);
	border: var(--rule-hair) solid var(--rule-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	letter-spacing: var(--track-meta);
	text-transform: uppercase;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	inset-block-start: var(--sp-4);
	inset-inline-start: var(--sp-4);
	transform: translateY(0);
}

.ink-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ink-visually-hidden:focus-visible {
	position: fixed !important;
	/* 邏輯屬性：RTL 下自動靠右，不必另寫覆寫 */
	inset-block-start: 16px;
	inset-inline-start: 16px;
	inset-block-end: auto;
	inset-inline-end: auto;
	z-index: 999;
	width: auto;
	height: auto;
	padding: var(--sp-3) var(--sp-4);
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background-color: var(--bg);
	border: var(--rule-hair) solid var(--rule-strong);
}

/* ==========================================================================
   2. 版式尺度與結構容器 Layout
   ========================================================================== */

.ink-shell {
	width: 100%;
	max-width: var(--max-wide);
	margin-inline: auto;
	/* 與 WP 根內距對齊：根內距由 body 承擔，容器本身不再加內距 */
}

.ink-measure {
	max-width: var(--measure);
}

.ink-stack > * + * {
	margin-block-start: var(--sp-5);
}

/* 髮絲線與結構線 */
.ink-hairline {
	border: 0;
	border-top: var(--rule-hair) solid var(--rule);
}

.ink-rule-strong {
	border: 0;
	border-top: var(--rule-structural) solid var(--rule-strong);
}

/* ==========================================================================
   3. 標題與文字 Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	line-height: 1.12;
}

h2 {
	font-size: var(--fs-h2);
	line-height: 1.2;
}

h3 {
	font-size: var(--fs-h3);
	line-height: 1.25;
}

h4,
h5,
h6 {
	font-size: var(--fs-h4);
	line-height: 1.3;
}

/* H2 前的 1px 短橫線裝飾（正文內） */
.ink-entry-content h2 {
	margin-block-start: var(--sp-8);
	padding-block-start: 0;
}

.ink-entry-content h2::before {
	content: "";
	display: block;
	width: 48px;
	height: var(--rule-hair);
	background-color: var(--accent);
	margin-block-end: var(--sp-4);
}

.ink-entry-content h3 {
	margin-block-start: var(--sp-7);
}

p {
	margin: 0 0 1em;
}

/* 中文：段間距 1em，不使用首行縮進 */
.ink-entry-content > p {
	margin-block: 0 1em;
	text-indent: 0;
}

a {
	color: var(--ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--dur-color) linear, text-decoration-color var(--dur-color) linear;
}

a:hover,
a:focus {
	color: var(--accent);
}

strong,
b {
	font-weight: 600;
}

mark {
	background-color: transparent;
	color: var(--accent);
	font-weight: 600;
}

small {
	font-size: var(--fs-caption);
}

/* --- 等寬元信息 --- */
.ink-meta,
.ink-mono {
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	line-height: 1.5;
	letter-spacing: var(--track-meta);
	text-transform: uppercase;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.ink-meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: var(--rule-hair) solid var(--rule);
}

.ink-meta a:hover,
.ink-meta a:focus {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.ink-meta--plain {
	text-transform: none;
	letter-spacing: 0.06em;
}

.ink-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --- Kicker 標籤：等寬小字 + 短橫線 --- */
.ink-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin-block-end: var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	letter-spacing: var(--track-meta);
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}

.ink-kicker::before {
	content: "";
	width: 24px;
	height: var(--rule-hair);
	background-color: currentColor;
	flex: none;
}

.ink-kicker a {
	color: inherit;
	text-decoration: none;
}

.ink-kicker a:hover,
.ink-kicker a:focus {
	letter-spacing: calc(var(--track-meta) + 0.06em);
}

/* --- 導語 --- */
.ink-lead {
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: var(--muted);
}

/* --- 首字下沉（僅文章首段）---
   預設＝規格值 3.6em 強調色；CJK 首字自動降級（可過濾器關閉）。
   同時兼容 core/post-content 是否輸出外層 .wp-block-post-content。 */
.ink-post .ink-entry-content > p:first-child::first-letter,
.ink-post .ink-entry-content > .wp-block-post-content > p:first-child::first-letter,
.ink-post .ink-entry-content > .entry-content > p:first-child::first-letter {
	float: left;
	font-family: var(--font-heading);
	font-size: 3.6em;
	line-height: 0.82;
	padding-inline-end: 0.08em;
	margin-block-start: 0.06em;
	color: var(--accent);
}

/* CJK 安全模式：不浮動、不撐行高（首字放大改為行內強調） */
.ink-dropcap-cjk .ink-entry-content > p:first-child::first-letter,
.ink-dropcap-cjk .ink-entry-content > .wp-block-post-content > p:first-child::first-letter,
.ink-dropcap-cjk .ink-entry-content > .entry-content > p:first-child::first-letter {
	float: none;
	font-size: 1.6em;
	line-height: 1;
	padding-inline-end: 0;
	margin-block-start: 0;
	color: var(--accent);
	font-family: inherit;
	font-weight: 600;
}

.ink-dropcap-off .ink-entry-content > p:first-child::first-letter,
.ink-dropcap-off .ink-entry-content > .wp-block-post-content > p:first-child::first-letter,
.ink-dropcap-off .ink-entry-content > .entry-content > p:first-child::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding-inline-end: 0;
	margin-block-start: 0;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
}

/* ==========================================================================
   4. 發絲線列表（首頁 / 歸檔 / 數據頁共用同一構件）
   ========================================================================== */

.ink-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule-hair) solid var(--rule);
	counter-reset: ink-item;
}

.ink-list__item {
	position: relative;
	display: block;
	padding: var(--sp-5) 0;
	border-bottom: var(--rule-hair) solid var(--rule);
	padding-inline-start: 0;
	transition: padding-inline-start var(--dur-color) linear;
}

.ink-list__item:hover,
.ink-list__item:focus-within {
	padding-inline-start: 10px;
}

.ink-list__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-4);
}

.ink-list__index {
	flex: none;
	min-width: 2.4em;
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	letter-spacing: var(--track-meta);
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-color) linear;
}

.ink-list__item:hover .ink-list__index,
.ink-list__item:focus-within .ink-list__index {
	color: var(--accent);
}

.ink-list__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

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

.ink-list__title a:hover,
.ink-list__title a:focus {
	color: var(--accent);
}

.ink-list__meta {
	margin-block-start: var(--sp-2);
	color: var(--muted);
}

.ink-list__excerpt {
	margin-block-start: var(--sp-3);
	max-width: var(--measure);
	color: var(--muted);
	font-size: var(--fs-small);
	line-height: 1.7;
}

/* 置頂標籤 */
.ink-badge {
	display: inline-block;
	flex: none;
	padding: 2px var(--sp-2);
	border: var(--rule-hair) solid var(--accent);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	line-height: 1.4;
	letter-spacing: var(--track-meta);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. 資料列（等寬數字 + 髮絲線，供數據頁與圖表數據表共用）
   ========================================================================== */

.ink-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.ink-table caption {
	caption-side: bottom;
	padding-block-start: var(--sp-3);
	text-align: start;
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	color: var(--muted);
	letter-spacing: 0.04em;
}

.ink-table th,
.ink-table td {
	padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
	text-align: start;
	vertical-align: baseline;
	/* 表格僅橫向發絲線，無斑馬紋 */
	border-bottom: var(--rule-hair) solid var(--rule);
	background-color: transparent;
}

.ink-table thead th {
	border-bottom-color: var(--rule-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	letter-spacing: var(--track-meta);
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 400;
}

.ink-table tbody tr:last-child th,
.ink-table tbody tr:last-child td {
	border-bottom: 0;
}

.ink-table .ink-num,
.ink-table td:last-child,
.ink-table th:last-child {
	text-align: end;
	white-space: nowrap;
}

/* ==========================================================================
   6. 入場動效（IntersectionObserver 觸發，一次性）
   ========================================================================== */

.ink-reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
	will-change: opacity, transform;
}

.ink-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* 無 JS 時不得把內容藏起來 */
html.no-js .ink-reveal {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   7. 動效歸零：prefers-reduced-motion 與墨水屏
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.ink-reveal {
		opacity: 1;
		transform: none;
	}
}

:root[data-eink="on"] *,
:root[data-eink="on"] *::before,
:root[data-eink="on"] *::after {
	transition: none !important;
	animation: none !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

:root[data-eink="on"] .ink-reveal {
	opacity: 1;
	transform: none;
}

:root[data-eink="on"] img,
:root[data-eink="on"] video {
	filter: grayscale(1) contrast(1.12);
}

/* ==========================================================================
   8. 列印
   ========================================================================== */

@media print {
	:root {
		--bg: #ffffff;
		--ink: #000000;
		--muted: #000000;
		--accent: #000000;
		--rule: #000000;
		--rule-strong: #000000;
		--code-bg: #ffffff;
	}

	body {
		font-size: 11pt;
	}

	.ink-header,
	.ink-footer,
	.ink-toc,
	.ink-copy,
	.ink-pagination,
	.ink-related,
	.ink-prevnext,
	.comment-respond {
		display: none !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-family: var(--font-mono);
		font-size: 9pt;
	}
}