/*
 * atonkevin.ai 品牌樣式：深色底＋紫粉漸層，追 Vue 版視覺（不求逐像素）。
 * 由 zz-atonkevin-site.php 全站載入（光詠試點頁除外）。顏色對比一律 ≥ 4.5:1（wp_checks/contrast.mjs 驗）。
 */

:root:root {
	--ak-bg: #0f0d1a;
	--ak-surface: #1a1730;
	--ak-surface-2: #231f3d;
	--ak-border: #342f58;
	--ak-text: #dcd8ea;
	--ak-muted: #b1abc8;
	--ak-heading: #ffffff;
	--ak-accent: #b69cff;
	--ak-accent-hover: #f0abfc;
	--ak-btn-from: #6d28d9;
	--ak-btn-to: #be185d;
	--ak-grad-text: linear-gradient(90deg, #c4b5fd 0%, #f0abfc 55%, #f9a8d4 100%);
	--ak-radius: 14px;

	/* Blocksy 調色盤（1 主色、2 hover、3 內文、4 標題、5 邊框、6 淡底、7 站底、8 頁首頁尾底） */
	--theme-palette-color-1: var(--ak-accent);
	--theme-palette-color-2: var(--ak-accent-hover);
	--theme-palette-color-3: var(--ak-text);
	--theme-palette-color-4: var(--ak-heading);
	--theme-palette-color-5: var(--ak-border);
	--theme-palette-color-6: var(--ak-surface);
	--theme-palette-color-7: var(--ak-bg);
	--theme-palette-color-8: #141126;
	--theme-button-background-initial-color: var(--ak-btn-from);
	--theme-button-background-hover-color: var(--ak-btn-to);
	--theme-font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

body {
	background: var(--ak-bg);
	color: var(--ak-text);
	line-height: 1.8;
}

/* 頁首頁尾 */
#header [data-row],
#header .ct-header,
.ct-footer,
#footer [data-row] {
	background-color: #141126 !important;
	border-color: var(--ak-border) !important;
}
#header .ct-menu-link,
#header .site-title a,
.ct-footer,
.ct-footer a {
	color: var(--ak-text) !important;
}
#header .ct-menu-link:hover,
#header .current-menu-item > .ct-menu-link {
	color: var(--ak-accent-hover) !important;
}
#header .site-title a {
	font-weight: 700;
	letter-spacing: .06em;
}
.ct-footer-copyright {
	color: var(--ak-muted) !important;
	font-size: 14px;
	line-height: 1.7;
}

/* 內容寬度與段落 */
.ak-page {
	--ak-maxw: 1120px;
}
.ak-page p,
.ak-page li {
	color: var(--ak-text);
}
.ak-page a:not(.wp-block-button__link) {
	color: var(--ak-accent);
	text-underline-offset: 3px;
}
.ak-page a:not(.wp-block-button__link):hover {
	color: var(--ak-accent-hover);
}
.ak-page h1,
.ak-page h2,
.ak-page h3,
.ak-page h4 {
	color: var(--ak-heading);
	line-height: 1.4;
	letter-spacing: .02em;
}
.ak-page h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	margin-top: 2.2em;
}
.ak-page h3 {
	font-size: 1.2rem;
}

/* Hero */
.ak-hero {
	padding: clamp(48px, 8vw, 110px) 0 clamp(32px, 5vw, 64px);
	text-align: center;
}
.ak-hero h1 {
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
	margin: 0 0 .4em;
	text-wrap: balance;
}
.ak-grad {
	background: var(--ak-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
.ak-eyebrow {
	color: var(--ak-accent) !important;
	font-size: .9rem;
	letter-spacing: .18em;
	margin-bottom: .6em;
}
.ak-lede {
	color: var(--ak-muted) !important;
	font-size: 1.1rem;
	max-width: 46em;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ak-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 1.6em;
}

/* 按鈕：白字壓深紫→深粉，兩端對比皆 ≥ 4.5 */
.ak-page .wp-block-button__link {
	background: linear-gradient(90deg, var(--ak-btn-from), var(--ak-btn-to));
	color: #fff !important;
	border: 0;
	border-radius: 999px;
	padding: .7em 1.8em;
	font-weight: 600;
	text-decoration: none;
}
.ak-page .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--ak-accent);
	color: var(--ak-accent) !important;
}
.ak-page .wp-block-button__link:hover {
	filter: brightness(1.12);
}

/* 區塊與卡片 */
.ak-sec {
	margin-top: clamp(40px, 6vw, 80px);
}
.ak-sec > h2:first-child {
	margin-top: 0;
}
.ak-sec-lead {
	color: var(--ak-muted) !important;
}
.ak-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin-top: 1.4em;
}
.ak-card {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-radius);
	padding: 22px 22px 18px;
}
.ak-card > *:first-child {
	margin-top: 0;
}
.ak-card h3 {
	margin: 0 0 .5em;
	font-size: 1.08rem;
}
.ak-card p {
	margin: 0 0 .7em;
	font-size: .96rem;
}
.ak-card .ak-meta {
	color: var(--ak-muted) !important;
	font-size: .86rem;
}
.ak-note {
	background: var(--ak-surface-2);
	border-left: 3px solid var(--ak-accent);
	border-radius: 0 var(--ak-radius) var(--ak-radius) 0;
	padding: 14px 18px;
}
.ak-note p {
	margin: 0;
}

/* 表格：窄螢幕四欄以上的表改成橫向捲動，英文字不從中間斷開 */
.ak-page .wp-block-table {
	overflow-x: auto;
}
/* 產生器輸出 has-fixed-layout（等寬欄），core 再給儲存格 word-break:break-word，窄欄裡的變數名就斷成「N8N_ENCR／YPTION_KE／Y」「Applicatio／ns」。
   改成依內容配欄寬、不在字中間斷；放不下時整張左右捲，前面由 zz-atonkevin-site.php 補「左右滑」提示（M4 D011628、D012343，2026-10-21） */
.ak-page .wp-block-table table,
.ak-page .wp-block-table table.has-fixed-layout {
	border-collapse: collapse;
	width: 100%;
	table-layout: auto;
	overflow-wrap: normal;
	word-break: normal;
}
.ak-page .wp-block-table .has-fixed-layout th,
.ak-page .wp-block-table .has-fixed-layout td {
	word-break: normal;
}
.ak-page .ak-scroll-hint {
	margin: 0 0 6px;
	font-size: 0.85em;
	color: var(--ak-muted);
	text-align: right;
}
.ak-page .ak-scroll-hint[hidden] {
	display: none;
}
.ak-page .ak-nowrap {
	white-space: nowrap;
}
@media (max-width: 600px) {
	.ak-page .wp-block-table table:has(th:nth-child(4)) {
		table-layout: auto;
		min-width: 600px;
	}
	/* 五欄以上：600px 放不下長英文名（例：AWS_ACCESS_KEY_ID），整張再加寬、靠左右捲（M4 複驗 D185638） */
	.ak-page .wp-block-table table:has(th:nth-child(5)) {
		min-width: 760px;
	}
	/* 剛好四欄：第一欄是名稱（例：Google Cloud 服務帳戶金鑰），其他欄字多時會被擠到 70px、英文字從中間斷（M4 驗收 D184640）。
	   五欄以上不套：第一欄常是純數字「順序」，撐寬反而擠壓後面欄位（D185638） */
	.ak-page .wp-block-table table:has(th:nth-child(4)):not(:has(th:nth-child(5))) th:first-child,
	.ak-page .wp-block-table table:has(th:nth-child(4)):not(:has(th:nth-child(5))) td:first-child {
		min-width: 8em;
	}
}
.ak-page .wp-block-table th,
.ak-page .wp-block-table td {
	border: 1px solid var(--ak-border);
	padding: 10px 12px;
	color: var(--ak-text);
	vertical-align: top;
}
.ak-page .wp-block-table th {
	background: var(--ak-surface-2);
	color: var(--ak-heading);
	text-align: left;
}

/* 卡片內圖片（QR Code 等）統一大小 */
.ak-card .wp-block-image img {
	width: 180px;
	height: auto;
	border-radius: 8px;
}

/* 常見問題 */
.ak-faq .wp-block-details {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-radius);
	padding: 14px 18px;
	margin: 0 0 12px;
}
.ak-faq summary {
	color: var(--ak-heading);
	font-weight: 600;
	cursor: pointer;
	margin: 0;
}
.ak-faq .wp-block-details > :not(summary) {
	margin-top: .6em;
	margin-bottom: 0;
}

/* 表單（CF7） */
.ak-page .wpcf7 input:not([type=submit]),
.ak-page .wpcf7 textarea {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	color: var(--ak-text);
	border-radius: 10px;
}
.ak-page .wpcf7 label {
	color: var(--ak-text);
}
.ak-page .wpcf7 input[type=submit] {
	background: linear-gradient(90deg, var(--ak-btn-from), var(--ak-btn-to));
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .7em 2em;
	font-weight: 600;
}

/* 作者欄＋更新日期（文章：作者欄在上、帶分隔線；頁面只有更新日期） */
.ak-byline,
.ak-updated {
	color: var(--ak-muted) !important;
	font-size: .88rem;
	margin-top: 3em !important;
	border-top: 1px solid var(--ak-border);
	padding-top: 1em;
}
.ak-byline + .ak-updated {
	margin-top: .4em !important;
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 600px) {
	.ak-grid {
		grid-template-columns: 1fr;
	}
	.ak-hero {
		text-align: left;
	}
	.ak-hero .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* 文章頁摘要在手機也顯示：Blocksy 給 .page-description 加 ct-hidden-sm（≤689.98px 隱藏），業主 2026-10-08 裁示手機也要看得到 */
@media (max-width: 689.98px) {
	.single-post .hero-section .page-description.ct-hidden-sm {
		display: block !important;
	}
}

/* 程式碼區塊不折行、改左右捲動（2026-10-18 GEO #33 M4 驗收 D142321：核心 white-space:break-spaces 讓手機上一行指令折成好幾行，看起來像不同指令） */
.ak-page .wp-block-code {
	overflow-x: auto;
}
.ak-page .wp-block-code code {
	white-space: pre;
	overflow-wrap: normal;
}