/* ==========================================================================
   Meme Theme 全局设计系统
   1. 设计变量
   2. 基础重置与排版
   3. 版心容器
   4. 站点头部与导航
   5. 站点底部
  6. 分页
  7. 无障碍工具类
  8. 通用组件（按钮 / 标签）
   ========================================================================== */

/* 1. 设计变量 */
:root {
	/* 主题色：柔和蓝，用于当前页与焦点圈 */
	--meme-primary: #4a7cff;

	/* 面与文字 */
	--meme-bg: #f6f6f4;
	--meme-surface: #ffffff;
	--meme-text: #1f2328;
	--meme-muted: #6b7280;
	--meme-border: rgba(31, 35, 40, 0.08);

	/* 链接：默认 #4B555F，悬停纯黑 */
	--meme-link: #4b555f;
	--meme-link-hover: #000000;
	--meme-hover-bg: #e3e3e3;
	--meme-tag-bg: #f2f2f2;

	/* 浮层遮罩：手机端菜单、灯箱这类「盖住页面」的场景统一用它，不要各写 rgba */
	--meme-scrim: rgba(31, 35, 40, 0.32);

	/* 统一圆角、阴影、版心、栅格间距 */
	--meme-border-radius: 6px;
	--meme-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	--meme-max-width: 1200px;
	--meme-gap: 20px;

	--meme-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

	/*
	 * 灯箱色板（深色浮层专用）。
	 * 浅色页面的 8 个色值在纯黑底上全部不可用，但规范禁止在模块里硬编码色值，
	 * 所以这里补一组带 lb 前缀的变量；值只在 global.css 出现一次，
	 * assets/css/lightbox.css 一律引用变量。
	 */
	--meme-lb-bg: #000000;
	--meme-lb-surface: #131315;
	--meme-lb-btn: #2a2a2e;
	--meme-lb-btn-hover: #3a3a3f;
	--meme-lb-text: #f5f5f5;
	--meme-lb-text-muted: #a1a1a6;
	--meme-lb-border: rgba(255, 255, 255, 0.12);
}

/* 2. 基础重置与排版 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * 滚动条槽常驻。
 *
 * 桌面浏览器（Windows 上 15~17px）的经典滚动条一消失，视口内容区就变宽，
 * 居中容器的中线跟着右移半个滚动条——打开灯箱（body 被锁成 overflow: hidden）
 * 时页面整体跳一下，关灯箱再跳回来，就是那个「非常明显的抖动」。
 * 实测 1440 窗口：打开前卡 Left 128.5，打开后 136，位移 7.5px，两侧合计 15px。
 *
 * stable 让浏览器在滚动条原本该在的位置**永久留出这条槽**，
 * 无论这一页当前是否真的能滚：滚动条消失时布局宽度不变，内容原地不动。
 * 代价是内容区永远比视口窄一个滚动条宽度——但这本来就是「有滚动条时」的常态，
 * 站点绝大多数页面都要滚动，所以视觉上跟现在完全一致。
 *
 * 只写 scrollbar-gutter 不写 overflow-y: scroll：
 * 后者会常驻一条灰色轨道，stable 只是留空，槽位本身是看不见的。
 */
html {
	scrollbar-gutter: stable;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--meme-bg);
	color: var(--meme-text);
	font-family: var(--meme-font);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--meme-link);
	transition: color 0.15s ease;
}

a:hover {
	color: var(--meme-link-hover);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--meme-primary);
	outline-offset: 2px;
}

/* 3. 版心容器 */
.container {
	max-width: var(--meme-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* 主内容区：只加纵向留白，横向留给 .container；撑满剩余高度让页脚贴底 */
.site-main {
	flex: 1 0 auto;
	padding-top: 24px;
	padding-bottom: 48px;
}

/*
 * 增量修正：body 是纵向 flex，而 .site-main 同时带着 .container 的 margin: 0 auto。
 * 自动外边距会取消 flex 的 stretch，让 main 的宽度退化成 fit-content ——
 * 一旦遇到超长不可断词（例如 tag 描述里一长串没有空格的字符），
 * 内容区就会被撑到视口之外，手机端整页横向错位。
 * 这里显式给 100% 宽度，再由 .container 的 max-width 收口。
 */
.site-main.container {
	width: 100%;
	min-width: 0;
}

/* 4. 站点头部与导航 */
.site-header {
	/* 吸顶：桌面与手机都固定在视口顶部，上下滚动跟随 */
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--meme-surface);
	border-bottom: 1px solid var(--meme-border);
	box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04);
	transition: box-shadow 0.2s ease;
}

/* 后台工具条本身固定在页面顶部，吸顶头部要让开它的高度 */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* 滚动离开顶部后加深阴影，和页面内容拉开层次 */
.site-header.is-stuck {
	box-shadow: 0 2px 12px rgba(31, 35, 40, 0.09);
}

.site-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	min-height: 64px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.site-title {
	color: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-title:hover {
	color: var(--meme-link-hover);
}

.site-nav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-list a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--meme-border-radius);
	color: var(--meme-link);
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav-list a:hover {
	background: var(--meme-hover-bg);
	color: var(--meme-link-hover);
}

.site-nav-list .current-menu-item > a,
.site-nav-list .current_page_item > a {
	background: var(--meme-hover-bg);
	color: var(--meme-link-hover);
	font-weight: 600;
}

/* 后台尚未创建菜单时，仅对管理员的提示 */
.site-nav-hint {
	margin: 0;
	color: var(--meme-muted);
	font-size: 12px;
}

.site-nav-hint a {
	color: var(--meme-link);
}

/* 4.1 头部布局：品牌 + 汉堡按钮 + 折叠面板（搜索 + 菜单）
   --------------------------------------------------------------------------
   一份标记同时服务两种形态：
   - 桌面：品牌在左，面板（搜索 + 菜单）在右，始终可见，没有汉堡按钮。
   - ≤768px：面板收进汉堡按钮下，默认折叠，点击向下展开。
   折叠只在 html 带 .js 时生效（见 inc/enqueue.php 的 head 内联脚本），
   所以禁用 JS 时手机端菜单依然完整可见，不会变成打不开的死菜单。
   -------------------------------------------------------------------------- */

.site-header-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.site-nav-panel {
	display: flex;
	align-items: center;
}

.site-nav-panel-inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* 汉堡按钮：默认不显示，只在带 JS 的手机端出现 */
.site-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--meme-surface);
	border: 1px solid var(--meme-border);
	border-radius: var(--meme-border-radius);
	color: var(--meme-link);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.site-nav-toggle:hover {
	background: var(--meme-hover-bg);
	color: var(--meme-link-hover);
}

/* 三条横线用一条中线 + 两个伪元素画，展开时旋转成 × */
.site-nav-toggle-bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: background-color 0.2s ease;
}

.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: top 0.2s ease, transform 0.2s ease;
}

.site-nav-toggle-bars::before {
	top: -6px;
}

.site-nav-toggle-bars::after {
	top: 6px;
}

.site-header.is-open .site-nav-toggle-bars {
	background: transparent;
}

.site-header.is-open .site-nav-toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header.is-open .site-nav-toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* 搜索表单：输入框走变量，提交按钮复用 .meme-btn */
.site-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.site-search-field {
	width: 200px;
	height: 34px;
	padding: 0 12px;
	background: var(--meme-bg);
	border: 1px solid transparent;
	border-radius: var(--meme-border-radius);
	color: var(--meme-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	appearance: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-search-field::placeholder {
	color: var(--meme-muted);
}

.site-search-field:hover {
	border-color: var(--meme-border);
}

.site-search-field:focus {
	background: var(--meme-surface);
	border-color: var(--meme-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(74, 124, 255, 0.18);
}

.site-search-submit {
	height: 34px;
	font-size: 13px;
}

/* 4.2 输入框内的放大镜按钮
   --------------------------------------------------------------------------
   搜索表单结构改为 .site-search-box 包住「输入框 + 提交按钮」，
   按钮绝对定位贴在输入框右侧，只留一个图标，不再占一行胶囊的位置。
   -------------------------------------------------------------------------- */

.site-search-box {
	position: relative;
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	min-width: 0;
}

/* 右侧留出按钮落位，输入的文字不会压到放大镜下面 */
.site-search-field {
	padding-right: 40px;
}

/* 覆盖上面的胶囊按钮尺寸与白底：图标按钮要透明、要小、要贴着输入框右边 */
.site-search-submit {
	position: absolute;
	top: 50%;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--meme-border-radius);
	box-shadow: none;
	color: var(--meme-muted);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-search-submit:hover {
	background: var(--meme-hover-bg);
	box-shadow: none;
	color: var(--meme-link-hover);
}

.site-search-submit svg {
	display: block;
	width: 16px;
	height: 16px;
}

/*
 * 焦点态：去掉原来的主题蓝光圈，改用全局阴影把输入框「抬」起来。
 * 只用 --meme-shadow，不额外造第二个焦点色。
 * 注意不要再给输入框加 :focus-visible 的蓝色描边 —— 文本框只要获得焦点
 * 就会命中 :focus-visible，鼠标点击也会出现蓝圈，等于白改。
 */
.site-search-field:focus {
	background: var(--meme-surface);
	border-color: var(--meme-hover-bg);
	box-shadow: var(--meme-shadow);
	outline: none;
}

@media (max-width: 768px) {
	.site-header-inner {
		gap: 8px 12px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* 品牌行独占一行，汉堡按钮靠右 */
	.site-header-brand {
		flex: 1 0 100%;
	}

	.js .site-nav-toggle {
		display: inline-flex;
	}

	/* 面板换到品牌行下方，纵向排列 */
	.site-nav-panel {
		flex: 1 0 100%;
	}

	.site-nav-panel-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.site-search {
		width: 100%;
	}

	.site-search-field {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* 菜单竖排，整行可点，更适合手指操作 */
	.site-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav-list a {
		display: block;
		padding: 10px 12px;
	}

	/*
	 * 折叠：max-height 0 → 70vh。
	 * 不用 grid-template-rows 的 0fr→1fr：那个写法在 flex 换行上下文里
	 * 会因高度不定把 1fr 解析成 0，出现「点了没反应」。
	 * max-height 即使过渡没跑起来，终点也是明确的 70vh，最差只是没有动画。
	 * 收起时给内层 visibility: hidden，把搜索框和链接移出 Tab 序列。
	 */
	.js .site-nav-panel {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	.js .site-nav-panel-inner {
		visibility: hidden;
		transition: visibility 0s linear 0.25s;
	}

	.js .site-header.is-open .site-nav-panel {
		max-height: 70vh;
		overflow-y: auto;
	}

	.js .site-header.is-open .site-nav-panel-inner {
		visibility: visible;
		transition: visibility 0s;
	}

	/*
	 * 增量：面板换成普通块级盒子。
	 * 基础层 .site-nav-panel 是 display: flex + align-items: center，
	 * 内层作为 flex 子项会按 max-content 收缩（实测只有 213px），
	 * 搜索框和菜单就都贴在卡片左边。改成 block 后内层撑满卡片宽度，
	 * 内容才是居中的。
	 */
	.site-nav-panel {
		display: block;
	}

	/*
	 * 增量：展开面板改成浮在页面上的白色卡片（参考设计稿）。
	 * 绝对定位后不再参与头部高度计算：展开时下面的内容不会被顶下去，
	 * 收起时也不会因为高度变化引起整页回流。
	 * 收起态额外隐藏面板自身 —— padding 与阴影在 max-height: 0 时仍会画出
	 * 一条 24px 的白边，只藏内层是不够的。
	 */
	.js .site-nav-panel {
		position: absolute;
		top: calc(100% + 6px);
		left: 50%;
		width: calc(100% - 20px);
		max-width: 440px;
		z-index: 2;
		padding: 12px;
		background: var(--meme-surface);
		border-radius: var(--meme-border-radius);
		box-shadow: var(--meme-shadow);
		visibility: hidden;
		transform: translateX(-50%);
		transition: max-height 0.25s ease, visibility 0s linear 0.25s;
	}

	.js .site-header.is-open .site-nav-panel {
		visibility: visible;
		transition: max-height 0.25s ease, visibility 0s;
	}

	.site-nav-panel-inner {
		gap: 12px;
	}

	/* 面板里的搜索框：白底 + 细边，从白卡片上再分出一层 */
	.site-search-box {
		flex: 1 1 auto;
		width: 100%;
	}

	.site-nav-panel .site-search-field {
		width: 100%;
		height: 38px;
		background: var(--meme-surface);
		border-color: var(--meme-border);
	}

	/* 手指点击的落点放大到 30×30，视觉上仍贴输入框右内侧 */
	.site-nav-panel .site-search-submit {
		width: 30px;
		height: 30px;
	}

	/* 菜单：细线分隔的整行列表，替换原来的一排胶囊 */
	.site-nav-panel .site-nav-list a {
		padding: 11px 4px;
		border-radius: 0;
		text-align: center;
	}

	.site-nav-panel .site-nav-list li + li {
		border-top: 1px solid var(--meme-border);
	}

	/* 卡片列表不需要胶囊底色，当前项与悬停只靠字色区分 */
	.site-nav-panel .site-nav-list .current-menu-item > a,
	.site-nav-panel .site-nav-list .current_page_item > a,
	.site-nav-panel .site-nav-list a:hover {
		background: transparent;
	}
}

/* 4.2 桌面布局：品牌在左、菜单居中、搜索右置
   --------------------------------------------------------------------------
   面板与面板内层在桌面只承担「分组」职责，不参与视觉：
   用 display: contents 让它们从盒模型里退场，搜索与菜单直接成为
   .site-header-inner 栅格里的两个格子 —— 只有脱离面板包裹，
   菜单才可能相对整条头部居中，而不是在面板内部居中。
   三列 1fr auto 1fr：两侧等宽，中间那列天然落在版心中线上。
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.site-header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-nav-panel,
	.site-nav-panel-inner {
		display: contents;
	}

	.site-header-brand {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.site-nav {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	/* 无菜单时的管理员提示也落在中间那列，不要掉到第二行 */
	.site-nav-hint {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.site-search {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/* 4.3 移动端菜单遮罩
   --------------------------------------------------------------------------
   面板虽然浮在页面之上，但它下面的卡片依然能被点到：视觉上被菜单「盖住」，
   点击却直接穿透，误触一发就跳走了。这层遮罩专门接住落在页面上的点击。
   两个必须记住的点：
   1. 遮罩放在 </header> 之后（body 的直接子元素），不放 header 内部。
      .site-header 自带 z-index: 100，已是独立层叠上下文；遮罩写进去以后
      无论 z-index 多低都压不过 header 自己的背景，整条头部会被一起压暗。
      放在 body 层、z-index 99（低于 100），头部与浮层面板保持原色，
      只有下面的内容被压暗，点击被接住。
   2. 默认 display: none，只在「带 .js 的 ≤768px」下启用。
      无 JS 时手机端面板是常显的普通块，不需要遮罩也不会锁死页面。
   开合状态由 header.js 直接给遮罩加 .is-visible，不依赖 body 类名，
   避免和别处可能存在的 body 类名打架。
   -------------------------------------------------------------------------- */
.site-nav-scrim {
	display: none;
}

@media (max-width: 768px) {
	.js .site-nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99;
		background: var(--meme-scrim);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	/*
	 * 打开态：淡入并把点击接进来。
	 * visibility 与 opacity 的过渡延迟要分开写，否则淡出过程中遮罩已经隐形，
	 * 又会有一瞬间能点到下面的卡片。
	 */
	.js .site-nav-scrim.is-visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.2s ease, visibility 0s;
	}
}

/* 5. 站点底部 */
.site-footer {
	margin-top: 48px;
	background: var(--meme-surface);
	border-top: 1px solid var(--meme-border);
	color: var(--meme-muted);
	font-size: 13px;
}

.site-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.site-footer p {
	margin: 0;
}

/*
 * 增量：页脚内容居中。
 * .site-footer-inner 是 flex + space-between，只有一个版权段落时会贴左，
 * 这里改成居中对齐；将来加第二段（备案号等）时同样按中线排布。
 */
.site-footer-inner {
	justify-content: center;
	text-align: center;
}

/* 6. 分页（WordPress 默认 the_posts_pagination 输出） */
.navigation.pagination {
	margin: 32px 0 0;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: var(--meme-surface);
	border-radius: var(--meme-border-radius);
	box-shadow: var(--meme-shadow);
	color: var(--meme-link);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.navigation.pagination a.page-numbers:hover {
	background: var(--meme-hover-bg);
	color: var(--meme-link-hover);
}

.navigation.pagination .page-numbers.current {
	background: var(--meme-primary);
	color: #fff;
	font-weight: 600;
}

.navigation.pagination .page-numbers.dots {
	background: transparent;
	box-shadow: none;
	min-width: 24px;
}

/* 7. 无障碍工具类：用 clip 方案，禁用 display:none */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 12px;
	background: var(--meme-surface);
	border-radius: var(--meme-border-radius);
	box-shadow: var(--meme-shadow);
	clip: auto;
	clip-path: none;
}

/* 8. 通用组件
   --------------------------------------------------------------------------
   按钮与标签两套原子类，供后续灯箱、筛选、空状态等模块直接复用。
   参数与顶部菜单保持一致：14px 字、6px 12px 内边距、--meme-border-radius 圆角、
   --meme-link 字色、悬停底 --meme-hover-bg + 纯黑字。
   -------------------------------------------------------------------------- */

/* 按钮：可用于 <a>、<button>、<input type="submit"> */
.meme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--meme-surface);
	border: 0;
	border-radius: var(--meme-border-radius);
	box-shadow: var(--meme-shadow);
	color: var(--meme-link);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.meme-btn:hover {
	background: var(--meme-hover-bg);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09);
	color: var(--meme-link-hover);
	text-decoration: none;
}

/* 按下时下沉 1px，给出“已经点到了”的触感反馈 */
.meme-btn:active {
	transform: translateY(1px);
}

.meme-btn:disabled,
.meme-btn[aria-disabled="true"] {
	box-shadow: none;
	cursor: default;
	opacity: 0.55;
}

/* 标签：淡灰底小胶囊，用于 tag 链接等 */
.meme-tag {
	display: inline-block;
	padding: 1px 8px;
	background: var(--meme-tag-bg);
	border-radius: var(--meme-border-radius);
	color: var(--meme-link);
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.meme-tag:hover {
	background: var(--meme-hover-bg);
	color: var(--meme-link-hover);
	text-decoration: none;
}