/*
Theme Name: Robert Coffee
Description: robert.coffee 專用的輕量佈景主題：手寫 classic 主題，單欄文章＋桌機右側固定目錄，系統字型、深色模式跟隨系統，不載 jQuery；主題 JS 只有兩支按需載入的小檔（浮動目錄、圖庫燈箱）。
Author: Robert
Version: 1.1.0
Requires at least: 6.7
Requires PHP: 8.3
Text Domain: robert-coffee
*/

/* 一、色彩與尺寸（淺色為預設；深色跟隨系統，或由 Aa 閱讀設定指定） */
:root {
	--bg: #fdfcfa;
	--surface: #f5f1eb;
	--text: #1f1d1a;
	--muted: #5b554d;
	--border: #ddd5ca;
	--accent: #8a4a1c;
	--accent-strong: #6b3712;
	--code-bg: #f1ece4;
	--mark: #fbe7c6;
	--shadow: rgba(31, 29, 26, .22);
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--measure: 680px;
	--gutter: 16px;
	/* 錨定廣告的高度（theme-header-toc-adpreview design 第三段）：AdSense 手機標準錨定是 50px 高的橫幅加外框，
	   正式機量到實際高度後改這裡。--rc-ad-top／--rc-ad-bottom 在錨定廣告出現時才等於它（第二段末的選擇器） */
	--rc-ad-anchor-h: 70px;
	--rc-ad-top: 0px;
	--rc-ad-bottom: 0px;
	color-scheme: light dark;
}
@media (min-width: 768px) { :root { --rc-ad-anchor-h: 100px; } }
/* 深色：Aa 閱讀設定手動選（data-theme，unified-article-layout design 第八段），沒選時跟隨系統 */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { --bg: #161412; --surface: #221f1b; --text: #ebe6df; --muted: #b5ada2; --border: #3d3831; --accent: #e6ae80; --accent-strong: #f3c7a0; --code-bg: #26221e; --mark: #5a4424; --shadow: rgba(235, 230, 223, .2); color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #161412; --surface: #221f1b; --text: #ebe6df; --muted: #b5ada2; --border: #3d3831; --accent: #e6ae80; --accent-strong: #f3c7a0; --code-bg: #26221e; --mark: #5a4424; --shadow: rgba(235, 230, 223, .2); } }

/* 二、基本排版 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.85;
	overflow-wrap: break-word;
	word-break: normal;
	line-break: strict;
}
@media (min-width: 768px) { body { font-size: 18px; } }
/* 英文頁：拉丁字型優先，引號與撇號才不會用到中文字型的全形字 */
.lang-en { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { line-height: 1.4; margin: 2.2em 0 .8em; font-weight: 700; color: var(--text); }
h1 { font-size: 1.4em; margin-top: .3em; }
@media (min-width: 768px) { h1 { font-size: 1.75em; } }
h2 { font-size: 1.45em; }
h3 { font-size: 1.22em; }
h4 { font-size: 1.08em; }
p, ul, ol, dl, figure, blockquote, pre, table { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.5em; }
li + li { margin-top: .3em; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
img, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
mark { background: var(--mark); color: inherit; padding: 0 .1em; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--text); color: var(--bg); border-radius: 4px; }
.skip-link:focus { top: 8px; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: middle; }

/* 三、頁首：手機用 <details> 開合（details 的 open 屬性控制後面的面板），不用 JS */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.header-inner {
	max-width: 1100px; margin: 0 auto; padding: 8px var(--gutter);
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
}
.site-title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; flex: 1 1 auto; }
.site-title a { color: var(--text); text-decoration: none; display: inline-block; padding: 8px 0; }
.site-tagline { display: block; margin: -6px 0 6px; font-size: .8rem; font-weight: 400; line-height: 1.5; color: var(--muted); }
/* logo（inc/template-tags.php rc_site_logo()）：站名左邊，手機 40 px、桌機 48 px 高；寬高由 img 的 width／height 定比例，不位移 */
.site-title.has-logo a { display: inline-flex; align-items: center; gap: 10px; }
.site-logo { display: block; flex: 0 0 auto; width: auto; height: 40px; border-radius: 8px; }
/* 多了 logo 之後英文副標（Sharing Story in a coffee time）會把「Menu」擠到第二行；站名區改成吃剩下的寬度、副標自己換行 */
.site-title.has-logo { flex: 1 1 0; min-width: 0; }
.site-title.has-logo .site-tagline { margin: 0; }
@media (min-width: 1024px) { .site-logo { height: 48px; } }
.lang-switch { font-size: .95rem; }
.lang-switch a { display: inline-block; min-height: 44px; padding: 10px 8px; line-height: 24px; }
.nav-toggle > summary {
	list-style: none; cursor: pointer; min-height: 44px; padding: 10px 8px;
	display: flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--text);
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle[open] > summary { color: var(--accent); }
.nav-panel { display: none; flex-basis: 100%; padding: 4px 0 12px; }
.nav-toggle[open] ~ .nav-panel { display: block; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu a { display: block; min-height: 44px; padding: 10px 4px; line-height: 24px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.menu a:hover, .menu .current-menu-item > a { color: var(--accent); }
.menu .sub-menu a { padding-left: 1.4em; font-size: .95em; color: var(--muted); }
.search-form { display: flex; gap: 6px; margin-top: 12px; }
.search-form input[type="search"] {
	flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px;
	color: var(--text); background: var(--bg); border: 1px solid var(--muted); border-radius: 6px;
}
.search-form button {
	min-width: 44px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 1rem; cursor: pointer;
	color: var(--bg); background: var(--accent); border: 0; border-radius: 6px;
}
@media (min-width:1024px){.site-title,.site-title.has-logo{flex:0 0 auto;margin-right:auto;}.nav-toggle{display:none;}.nav-panel{display:flex;flex-basis:auto;align-items:center;gap:12px;padding:0;order:3;}.menu{display:flex;flex-wrap:wrap;}.menu > li > a{white-space:nowrap;}.menu > li{position:relative;}.menu a{border:0;padding:10px 6px;font-size:.95rem}.menu .sub-menu{display:none;position:absolute;top:100%;left:0;z-index:20;min-width:16em;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 0;box-shadow:0 6px 20px rgba(0,0,0,.08);}.menu li:is(:hover,:focus-within):not(.rc-x) > .sub-menu,.menu-group[aria-expanded="true"] + .sub-menu{display:block;}.menu > li > a,.menu .menu-group{width:auto;border:0;padding:10px 10px;font-size:.95rem;white-space:nowrap}.menu .sub-menu a{padding:8px 14px;color:var(--text);}.search-form{margin:0;}.site-header .search-form input[type="search"]{width:8em;}.lang-switch{order:2;}}
/* 桌機：搜尋收成放大鏡、1024–1199 選單縮小（分享併進日期列的規則在 css/single.css） */
@media (min-width:1024px){.hdr-js .site-header form{position:relative}.hdr-js .site-header input{position:absolute;right:50px;opacity:0;pointer-events:none}.hdr-js .site-header form:focus-within input{opacity:1;pointer-events:auto}}
@media (min-width:1024px) and (max-width:1199px){.menu a,.menu > li > a,.menu .menu-group{padding:10px 4px;font-size:.85rem}.header-inner{gap:4px 8px}}
/* 三之二、選單分組（unified-article-layout design 第七段，inc/menu.php）：「生活」「專欄」是按鈕不是連結；桌機滑過或聚焦展開、點按鈕切換，
   手機點按鈕展開（js/header.js）；沒有 JS 時手機的子選單一律展開。.rc-x＝按 Esc 收起後，滑鼠或焦點離開前不再展開 */
.menu-group{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 4px;border:0;border-bottom:1px solid var(--border);background:none;font:inherit;line-height:24px;color:var(--text);text-align:left;cursor:pointer}
.menu-group::after{content:"";width:.4em;height:.4em;margin:0 .4em .25em .5em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.menu-group[aria-expanded="true"]::after{margin-bottom:-.15em;transform:rotate(-135deg)}
.menu-group:hover,.menu-group[aria-expanded="true"]{color:var(--accent)}
@media (max-width:1023px){.hdr-js .menu-group[aria-expanded="false"] + .sub-menu{display:none}}

/* 三之一、頁首往下捲收起、往上滑出現（theme-header-toc-adpreview design 第一段；js/header.js 內嵌在頁尾）
   JS 在 <html> 加 .hdr-js 之後頁首才 sticky，沒有 JS 就是一般靜態頁首。收起與讓位都用 transform，不推動版面（CLS 0）。
   --hdr-h 是 JS 量到的頁首高度（手機選單開著時不重量），錨點跳轉時留出這段高度，標題不會被頁首蓋住 */
.hdr-js { scroll-padding-top: calc(var(--hdr-h, 0px) + var(--rc-ad-top) + 16px); }
.hdr-js .site-header { position: sticky; top: 0; z-index: 40; transform: translateY(var(--rc-ad-top)); transition: transform .2s ease-out; }
.hdr-hide .site-header { transform: translateY(-100%); box-shadow: none; }
/* 用鍵盤 Tab 進頁首時一定看得到 */
.hdr-hide .site-header:focus-within { transform: translateY(var(--rc-ad-top)); }
/* 手機選單很長時在頁首裡捲，不會有一段卡在畫面外 */
.hdr-js .nav-toggle[open] ~ .nav-panel { max-height: calc(100vh - var(--hdr-h, 60px) - var(--rc-ad-top) - var(--rc-ad-bottom)); max-height: calc(100dvh - var(--hdr-h, 60px) - var(--rc-ad-top) - var(--rc-ad-bottom)); overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .hdr-js .site-header { transition: none; } }

/* 四、版面：單欄 680px。桌機兩欄（內文＋右欄）：文章頁的格線與右欄在 css/single.css、css/sidebar.css；
   .layout-single 是專欄首頁（template-parts/column-archive.php）的兩欄；列表頁（.layout-cards）最寬 1100 */
.site-main { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 48px; }
.site-main.layout-cards { max-width: calc(1100px + 2 * var(--gutter)); }
.sidebar { display: none; }
@media (min-width: 1024px) {
	.site-main.layout-single { max-width: 1100px; display: grid; grid-template-columns: minmax(0, var(--measure)) 280px; gap: 56px; justify-content: center; }
	.layout-single .primary { min-width: 0; }
}

/* 五、麵包屑（文章頁與列表頁） */
.breadcrumbs, .rc-kicker { font-size: .85rem; color: var(--muted); margin: 0 0 .6em; line-height: 1.6; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs .separator { padding: 0 .3em; }
.breadcrumbs p { margin: 0; }
/* 麵包屑最後一段就是下面的文章標題：畫面上不重複（BreadcrumbList schema 不受影響） */
.breadcrumbs .last, .breadcrumbs .separator:has(+ .last) { display: none; }

/* 五之一、色塊（短訊標記；列表卡片與文章標題區共用） */
.rc-chip{padding:1px 10px;font-size:.8rem;border-radius:4px;text-decoration:none}
.rc-chip.rc-chip-aside{background:0;color:var(--accent);border:1px solid}

/* 八、廣告版位：先保留高度，廣告載入時不把內文往下推 */
.ad-container { min-height: 280px; margin: 1.6em 0; }
@media (max-width: 767px) { .google-auto-placed { min-height: 600px; } }
/* 錨定廣告出現時讓位（theme-header-toc-adpreview design 第三段）：浮動按鈕往上、頁首與右欄往下、頁尾多留一段。
   有 JS 時由 js/header.js 量錨定廣告實際佔的高度（收合時只剩把手、關閉時歸零），寫進 html 的 style 蓋過下面兩行；沒有 JS 時照下面兩行給固定高度。
   ins.adsbygoogle 是正式機 AdSense 放在 body 最後的錨定廣告（data-anchor-status 與 style 裡的 top／bottom 要在正式機核對）；
   .rc-adp-* 是 dev 的廣告位預覽（mu-plugins-dev/rc-dev-ad-preview.php） */
html:has(> body > .rc-adp-bottom, > body > ins.adsbygoogle[data-anchor-status="displayed"][style*="bottom: 0"]) { --rc-ad-bottom: var(--rc-ad-anchor-h); }
html:has(> body > .rc-adp-top.on, > body > ins.adsbygoogle[data-anchor-status="displayed"][style*=" top: 0"], > body > ins.adsbygoogle[data-anchor-status="displayed"][style^="top: 0"]) { --rc-ad-top: var(--rc-ad-anchor-h); }

/* 十、列表頁（首頁、分類、標籤、搜尋）：標題與分頁；圖卡在 css/cards.css */
.archive-header { margin-bottom: 1.6em; }
.archive-header h1 { margin: 0 0 .3em; font-size: 1.5em; }
.archive-description { color: var(--muted); font-size: .95rem; }
.pagination { margin: 2em 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pagination .page-numbers { display: inline-block; min-width: 44px; min-height: 44px; padding: 10px 12px; text-align: center; line-height: 24px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; }
.pagination .current, .rc-chip { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.pagination .dots { border: 0; }
.not-found .search-form { max-width: 420px; }

/* 十一、頁尾 */
.site-footer { border-top: 1px solid var(--border); padding: 24px var(--gutter) calc(24px + var(--rc-ad-bottom)); font-size: .85rem; color: var(--muted); text-align: center; }
.site-footer p { margin: 0 0 .4em; }
/* 浮動按鈕固定在右下角，捲動中一定會壓過一部分內文；頁尾底下多留按鈕的高度，捲到底時最後一行能移到按鈕上方 */
@media (max-width: 1023px) {
	body:has(.fab) .site-footer { padding-bottom: calc(80px + var(--rc-ad-bottom) + env(safe-area-inset-bottom)); }
	body:has(.fab-top) .site-footer { padding-bottom: calc(140px + var(--rc-ad-bottom) + env(safe-area-inset-bottom)); }
	body:has(.toc-fab) .site-footer { padding-bottom: calc(208px + var(--rc-ad-bottom) + env(safe-area-inset-bottom)); }
}
.site-footer a { color: var(--muted); }

/* 十二、浮動按鈕（回到頂端、手機目錄、手機的 Aa）：fixed＋只改透明度，不推動版面；目錄面板在 css/single.css */
.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(calc(-1 * var(--rc-ad-bottom))); }
.fab-btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--accent); color: var(--bg); text-decoration: none; font-size: 11px; line-height: 1.2;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: opacity .2s, visibility .2s;
}
.fab-btn:hover { color: var(--bg); background: var(--accent-strong); }
.fab-btn:not(.on) { opacity: 0; visibility: hidden; }
.fab-top { width: 48px; height: 48px; background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.fab-top:hover { color: var(--accent); background: var(--surface); }
@media (min-width: 1024px) { .toc-fab { display: none; } }

/* 十三、列印 */
@media print {
	.site-header, .sidebar, .post-nav, .related, .comments-area, .ad-container, .toc, .site-footer, .fab, .popular-mobile, .rc-adp { display: none !important; }
	body { background: #fff; color: #000; }
}