/*
 * 水雲一念 —— theme.json 補不到的部分。
 * 深色模式、無圖替代版面、卡片網格、中文排版細節。
 */

/* ============ 深色模式 ============
 * 直接改寫 theme.json 產生的調色盤變數，所有區塊自動跟著變，
 * 不必逐個元件寫深色規則。
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--paper:   #181510;
		--wp--preset--color--surface: #221e17;
		--wp--preset--color--rule:    #332d23;
		--wp--preset--color--muted:   #9c9382;
		--wp--preset--color--ink:     #eae3d5;
		--wp--preset--color--accent:  #cfa065;
	}
	:root:not([data-theme="light"]) img,
	:root:not([data-theme="light"]) .wp-block-post-featured-image img {
		/* 夜間把圖片稍微壓暗，免得在暗底上刺眼 */
		filter: brightness(0.88) contrast(1.02);
	}
}
:root[data-theme="dark"] {
	--wp--preset--color--paper:   #181510;
	--wp--preset--color--surface: #221e17;
	--wp--preset--color--rule:    #332d23;
	--wp--preset--color--muted:   #9c9382;
	--wp--preset--color--ink:     #eae3d5;
	--wp--preset--color--accent:  #cfa065;
}

/* 插件元件跟著主題走 */
:root {
	--shuiyun-accent:  var(--wp--preset--color--accent);
	--shuiyun-surface: var(--wp--preset--color--surface);
	--shuiyun-border:  var(--wp--preset--color--rule);
	--shuiyun-text:    var(--wp--preset--color--ink);
	--shuiyun-muted:   var(--wp--preset--color--muted);
	/* 分類色預設回落到主強調色 */
	--shuiyun-cat: var(--wp--preset--color--accent);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ============ 中文排版 ============ */

.wp-block-post-content p { margin-block: 0 1.15em; }

/* 中文沒有詞距，不要斷字；標點壓縮交給瀏覽器 */
.wp-block-post-content,
.wp-block-post-excerpt__excerpt {
	hyphens: none;
	word-break: normal;
	overflow-wrap: break-word;
	text-spacing-trim: trim-start;
}

.wp-block-post-title a { text-decoration: none; color: inherit; }
.wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

:where(.wp-block-post-content) :is(h2, h3, h4) { margin-block: 2em 0.7em; }

/* 數字對齊 */
.wp-block-post-date { font-variant-numeric: tabular-nums; }

/* ============ 站頭 ============ */

.shuiyun-masthead {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.shuiyun-sitename a {
	font-family: var(--wp--preset--font-family--serif);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.05em;
}
.shuiyun-tagline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}
.shuiyun-masthead .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}
.shuiyun-masthead .wp-block-navigation a { color: var(--wp--preset--color--muted); }
.shuiyun-masthead .wp-block-navigation a:hover,
.shuiyun-masthead .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--ink);
}

/* ============ 區塊標題：帶延伸橫線 ============ */

.shuiyun-sectionhead { display: flex; align-items: baseline; gap: 0.75rem; }
.shuiyun-sectionhead > h2 { margin: 0; flex: none; font-size: var(--wp--preset--font-size--large); }
.shuiyun-sectionhead::after {
	content: ""; flex: 1; height: 1px;
	background: var(--wp--preset--color--rule);
	align-self: center;
}
.shuiyun-sectionhead .shuiyun-more {
	flex: none; font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent); text-decoration: none;
}

/* ============ 文章卡片 ============ */

.shuiyun-cards .wp-block-post {
	display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
}
.shuiyun-cards .wp-block-post-featured-image { margin: 0 0 0.25rem; }
.shuiyun-cards .wp-block-post-featured-image img {
	width: 100%; max-width: 100%; aspect-ratio: 3 / 2;
	object-fit: cover; border-radius: 3px; display: block;
}
.shuiyun-cards .wp-block-post-title {
	font-size: 1rem; line-height: 1.55; margin: 0; text-wrap: balance;
}
.shuiyun-cards .wp-block-post-excerpt { margin: 0; }
.shuiyun-cards .wp-block-post-excerpt__more-text { display: none; }
.shuiyun-cards .wp-block-post-terms { color: var(--shuiyun-cat); letter-spacing: 0.08em; }
.shuiyun-cards .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* 無特色圖片時的替代版面。全站 38% 的文章走這條路，所以它要好看，
   不是佔位符。 */
.shuiyun-nomedia {
	aspect-ratio: 3 / 2;
	max-width: 100%;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 3px;
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--shuiyun-cat) 7%, transparent),
			transparent 60%),
		var(--wp--preset--color--surface);
	display: flex; align-items: center; justify-content: center;
	padding: 1rem; margin-bottom: 0.25rem;
}
.shuiyun-nomedia span {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1rem, 2.4vw, 1.3rem);
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--shuiyun-cat) 70%, var(--wp--preset--color--ink));
	text-align: center;
	writing-mode: horizontal-tb;
}

/* ============ 單篇文章 ============ */

.shuiyun-entry-meta {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}
.shuiyun-entry-meta .wp-block-post-terms a { color: var(--shuiyun-cat); text-decoration: none; }

.wp-block-post-content > .wp-block-image img { border-radius: 3px; }
.wp-block-post-content figcaption { text-align: center; }

/* 分頁 */
.wp-block-query-pagination { font-size: var(--wp--preset--font-size--small); }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .current { color: var(--wp--preset--color--ink); font-weight: 600; }

/* 早期日記封存頁的說明條 */
.shuiyun-archive-note {
	background: var(--wp--preset--color--surface);
	border-inline-start: 3px solid var(--shuiyun-cat);
	border-radius: 0 4px 4px 0;
	padding: 0.9rem 1.2rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ============ 頁尾 ============ */

.shuiyun-footer {
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}
.shuiyun-footer a { color: var(--wp--preset--color--muted); }
.shuiyun-footer a:hover { color: var(--wp--preset--color--accent); }

/* ============ 窄螢幕 ============ */

@media (max-width: 600px) {
	.shuiyun-sectionhead { flex-wrap: wrap; }
	.shuiyun-sectionhead::after { display: none; }
	}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
 * 巡覽與探索模組
 * ============================================================ */

.shuiyun-blk { margin-top: var(--wp--preset--spacing--60); }

.shuiyun-intro p { margin: 0; font-size: var(--wp--preset--font-size--medium); }

/* ---------- 這裡有什麼：六個分類等寬並列 ---------- */

.shuiyun-catcards {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
}
.shuiyun-catcard {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem 0.75rem;
	align-content: start;
	padding: 0.9rem 1.1rem 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 2px solid var(--shuiyun-cat);
	border-radius: 6px;
}
.shuiyun-catcard__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600; letter-spacing: 0.04em;
	color: var(--shuiyun-cat); text-decoration: none;
}
.shuiyun-catcard__count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; color: var(--wp--preset--color--muted);
	align-self: center; font-variant-numeric: tabular-nums;
}
.shuiyun-catcard__desc {
	grid-column: 1 / -1; margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted); line-height: 1.7;
}
.shuiyun-catcard__pick {
	grid-column: 1 / -1;
	margin: 0.45rem 0 0; padding-top: 0.6rem;
	border-top: 1px dashed var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small); line-height: 1.65;
}
.shuiyun-catcard__pick em {
	display: block; font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem; letter-spacing: 0.14em;
	color: var(--shuiyun-cat); margin-bottom: 0.15rem;
}
.shuiyun-catcard__pick a { color: var(--wp--preset--color--ink); text-decoration: none; }
.shuiyun-catcard__pick a:hover { color: var(--shuiyun-cat); }

/* ---------- 系列膠囊 ---------- */

.shuiyun-chips { list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.55rem; }
.shuiyun-chip {
	display: inline-flex; align-items: baseline; gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.shuiyun-chip:hover { border-color: var(--shuiyun-cat); }
.shuiyun-chip b { font-weight: 600; }
.shuiyun-chip i {
	font-style: normal; font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem; color: var(--wp--preset--color--muted);
}

.shuiyun-catseries { margin: var(--wp--preset--spacing--40) 0; }
.shuiyun-catseries h2 {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em; color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans); font-weight: 500;
	margin: 0 0 0.7rem;
}

/* ---------- 那些年的這幾天 ---------- */

.shuiyun-otd {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr);
	column-gap: var(--wp--preset--spacing--50);
}
.shuiyun-otd li {
	display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.75rem;
	align-items: baseline;
	padding: 0.45rem 0; border-bottom: 1px solid var(--wp--preset--color--rule);
}
.shuiyun-otd__year {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem; color: var(--shuiyun-cat);
	font-variant-numeric: tabular-nums;
}
.shuiyun-otd a { color: var(--wp--preset--color--ink); text-decoration: none;
	font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.shuiyun-otd a:hover { color: var(--shuiyun-cat); }

/* ---------- 隨手記 ---------- */

.shuiyun-jots { list-style: none; margin: 0; padding: 0; }
.shuiyun-jot {
	display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.9rem;
	padding: 0.85rem 0; border-bottom: 1px solid var(--wp--preset--color--rule);
}
.shuiyun-jot:last-child { border-bottom: 0; }
.shuiyun-jot__date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; color: var(--wp--preset--color--muted);
	line-height: 2.4; white-space: nowrap;
}
.shuiyun-jot__body { font-size: var(--wp--preset--font-size--small); line-height: 1.85; }
.shuiyun-jot__body b { font-weight: 600; color: var(--shuiyun-cat); }
.shuiyun-jot__body a { color: inherit; text-decoration: none; }
.shuiyun-jot__body a:hover { text-decoration: underline; text-decoration-color: var(--shuiyun-cat); }

/* ---------- 相關文章 ---------- */

.shuiyun-rel { margin-top: var(--wp--preset--spacing--60); }
.shuiyun-rel__head {
	display: flex; align-items: baseline; gap: 0.75rem;
	font-size: var(--wp--preset--font-size--large); margin: 0 0 0.8rem;
}
.shuiyun-rel__head::after { content: ""; flex: 1; height: 1px;
	background: var(--wp--preset--color--rule); align-self: center; }
.shuiyun-rel__hint {
	order: 3; flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem; color: var(--wp--preset--color--muted);
}
.shuiyun-rel__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
}
.shuiyun-rel__item a {
	display: block; padding-top: 0.55rem;
	border-top: 2px solid var(--shuiyun-cat);
	color: var(--wp--preset--color--ink); text-decoration: none;
	font-size: var(--wp--preset--font-size--small); line-height: 1.6;
}
.shuiyun-rel__item a:hover { color: var(--shuiyun-cat); }
.shuiyun-rel__date {
	display: block; font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem; color: var(--wp--preset--color--muted); margin-bottom: 0.2rem;
}

/* ---------- 換個題目 ---------- */

.shuiyun-cross {
	margin-top: var(--wp--preset--spacing--50);
	padding: 1.1rem 1.3rem;
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
}
.shuiyun-cross__head {
	font-size: var(--wp--preset--font-size--large); margin: 0 0 0.2rem;
}
.shuiyun-cross__lead {
	margin: 0 0 0.9rem; font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}
.shuiyun-cross__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
}
.shuiyun-cross__item a {
	display: block; padding-inline-start: 0.7rem;
	border-inline-start: 2px solid var(--shuiyun-cat);
	color: var(--wp--preset--color--ink); text-decoration: none;
	font-size: var(--wp--preset--font-size--small); line-height: 1.6;
}
.shuiyun-cross__item a:hover { color: var(--shuiyun-cat); }
.shuiyun-cross__cat {
	display: block; font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem; letter-spacing: 0.12em;
	color: var(--shuiyun-cat); margin-bottom: 0.15rem;
}

@media (max-width: 760px) {
	.shuiyun-catcards, .shuiyun-rel__list { grid-template-columns: 1fr; }
	.shuiyun-otd, .shuiyun-cross__list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.shuiyun-jot { grid-template-columns: 1fr; gap: 0.2rem; }
	.shuiyun-jot__date { line-height: 1.6; }
}

/* ---------- 「關於」頁的題記 ---------- */

.shuiyun-epigraph {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 2.1;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.shuiyun-epigraph-rule {
	border: 0; height: 1px; width: 4rem;
	background: var(--wp--preset--color--rule);
	margin: 0 auto var(--wp--preset--spacing--50);
}

/* ---------- 文章標籤（緊鄰相關文章，因為相關文章正是從標籤算出來的）---------- */

.shuiyun-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.shuiyun-tags__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
	margin-inline-end: 0.2rem;
}
.shuiyun-tags__item {
	padding: 0.12em 0.7em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--shuiyun-cat);
	text-decoration: none;
	line-height: 1.9;
}
.shuiyun-tags__item:hover {
	border-color: var(--shuiyun-cat);
	text-decoration: none;
}
/* 標籤既然就在上面，相關文章不用再空出一大段 */
.shuiyun-tags + .shuiyun-rel { margin-top: var(--wp--preset--spacing--40); }

/* ---------- 地點 ---------- */
/* 文章頁的地點列緊接在標籤列前面，兩條都畫上邊框會變成雙線，
   所以第二條的邊框和上緣間距都收掉。 */

.shuiyun-tags--place + .shuiyun-tags {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.shuiyun-tags--place .shuiyun-tags__item {
	background: color-mix(in srgb, var(--shuiyun-cat) 8%, transparent);
	border-color: transparent;
}

.shuiyun-tags--place .shuiyun-tags__item:hover {
	border-color: var(--shuiyun-cat);
}

/* 地點封存頁頂部的麵包屑與下層地點 */

.shuiyun-placenav {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: var(--wp--preset--spacing--30);
}

.shuiyun-placenav__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.shuiyun-placenav__crumbs a { color: inherit; text-decoration: none; }
.shuiyun-placenav__crumbs a:hover { color: var(--shuiyun-cat); }
.shuiyun-placenav__crumbs span { opacity: 0.5; }

.shuiyun-placenav__children {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.shuiyun-placenav__child {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.12em 0.7em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--shuiyun-cat);
	text-decoration: none;
	line-height: 1.9;
}

.shuiyun-placenav__child:hover {
	border-color: var(--shuiyun-cat);
	text-decoration: none;
}

.shuiyun-placenav__child span {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

/* 地點頁 */

.shuiyun-places {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--50);
}

.shuiyun-places__region-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.shuiyun-places__region-head a { color: var(--wp--preset--color--ink); text-decoration: none; }
.shuiyun-places__region-head a:hover { color: var(--shuiyun-cat); }

.shuiyun-places__region-n {
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.shuiyun-places__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.shuiyun-places__card {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.shuiyun-places__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
}

/* 比例交給外框，圖片填滿它——WordPress 會替 <img> 補上 width/height 屬性，
   直接給 img 設 aspect-ratio 會被壓過，一排卡片就高高低低。 */
.shuiyun-places__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
}

.shuiyun-places__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

/* 沒有任何圖片的地點（早期日記那批）改放年份 */
.shuiyun-places__thumb--none {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--rule);
}

.shuiyun-places__years {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}

.shuiyun-places__link:hover .shuiyun-places__thumb {
	opacity: 0.88;
}

.shuiyun-places__name {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.shuiyun-places__link:hover .shuiyun-places__name { color: var(--shuiyun-cat); }

.shuiyun-places__n {
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.shuiyun-places__subs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
}

.shuiyun-places__subs a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.shuiyun-places__subs a:hover { color: var(--shuiyun-cat); }

/* 第三層（薩格勒布之於克羅地亞）前面加個 ›，跟封存頁的麵包屑同一個符號，
   讀起來是「在前一個裡面」。中間層不帶數字，數字只掛在最深的那層。 */
.shuiyun-places__sub--deep::before {
	content: "›";
	opacity: 0.45;
	margin-inline-end: 0.25rem;
}

.shuiyun-places__sub-n {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.shuiyun-places__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* 升格成分段的國家（美國）縮排，標題小一級，表示它掛在洲底下。
   它現在是巢狀在洲的 section 裡、而且依篇數排在對的位置上，
   所以要自己撐開上下間距，不能靠外層的 gap。 */
.shuiyun-places__region--l3 {
	margin-block: var(--wp--preset--spacing--50);
	margin-inline-start: 1.25rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 2px solid var(--wp--preset--color--rule);
}

/* 同一段裡若有多排卡片（分段前後各一排），彼此也要有間距 */
.shuiyun-places__grid + .shuiyun-places__grid,
.shuiyun-places__region--l3 + .shuiyun-places__grid {
	margin-top: var(--wp--preset--spacing--50);
}

.shuiyun-places__region--l3 .shuiyun-places__region-head {
	font-size: var(--wp--preset--font-size--medium);
	border-bottom-style: dashed;
}

@media (max-width: 600px) {
	.shuiyun-places__region--l3 { margin-inline-start: 0; padding-inline-start: 0.75rem; }
}

/* ---------- 手機版的選單浮層 ---------- */
/*
 * 兩個獨立的毛病，合起來讓手機選單的文字貼在螢幕右緣被切掉。
 *
 * 一、站頭的導覽設了 justifyContent:right（桌機靠右是對的），核心據此把
 *     --navigation-layout-justification-setting 設成 flex-end，而浮層裡
 *     每一層都拿這個變數當 align-items——於是直式選單整排貼右。
 *     直式靠右很難掃讀，改回靠左。
 *
 *     **要連 <ul> 一起指定**：核心把 items-justified-right 同時掛在 <nav>
 *     和裡面的 <ul> 上，只改外層容器的話，<ul> 會把變數重新設回 flex-end，
 *     底下的項目照樣貼右。
 *
 * 二、核心給浮層的內距是
 *     `padding: clamp(1rem, var(--wp--style--root--padding-top), 20rem) …`。
 *     theme.json 原本把 root padding 的 top/bottom 寫成**無單位的 "0"**，
 *     而 `clamp(1rem, 0, 20rem)` 在 CSS 裡是無效值——簡寫裡只要有一個
 *     無效值，**整條宣告就作廢**，四邊內距一起變 0，文字直接貼到螢幕邊緣。
 *
 *     已在 theme.json 改成 "0px"，內距就回到核心本來的 1rem。
 *     這類 0 以後一律帶單位：它在別處都跟 0px 等價，只有進了 clamp()
 *     之類的數學函式才會突然變成毒藥，而且不會報錯。
 */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.9rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * 三、深色模式下浮層是白底黑字。核心對「沒有自訂背景的導覽」寫死了
 *     一組 fallback：
 *
 *       .wp-block-navigation:not(.has-background)
 *         .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
 *       { background-color: #fff }   （color: #000 同理）
 *
 *     那是 (0,5,0) 的選擇器，要蓋掉得堆到六層 class，很難讀。核心自己在
 *     這一帶也用 !important（項目的 color/background），所以這裡跟著用，
 *     並在註解裡寫明是在蓋哪一條——比一串重複的 class 誠實。
 *
 *     色票本身會跟著 prefers-color-scheme 換，所以兩種模式都對。
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--accent);
}