/*
单篇文章页专属CSS：只在is_single()加载（见functions.php的条件enqueue），不影响归档页/首页/其他页面。
包括：相关文章卡片、评论表单圆角、标题下方元信息行、文章目录、FAQ卡片、正文H2/H3层级、H3旁卡片小图标、
宽屏大图限宽。下面"相关文章"一段说明的是那部分规则的写法：卡片视觉（圆角/边框/hover/间距）和响应式断点直接照抄category-page.css那套文章列表
卡片规则，保持跟分类归档页卡片观感一致；配色/字号token统一记在docs/视觉样式规范_配色字号交互.md。
Related Posts的标记结构是Astra原生related-posts模块输出的，跟归档页列表是两套不同class，
这里按原生class逐一对应写规则，不是复制category-page.css的选择器。
*/

/* 网格断点跟category-page.css文章列表一致（<600px 1列，≥600px 2列，≥1100px 3列），
   同选择器跟Astra原生related-posts-grid-responsive那套内联CSS打权重战——
   子主题CSS在依赖链里排在astra-theme-css之后，源码顺序在后，同权重下生效。 */
.ast-single-related-posts-container .ast-related-posts-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 600px) {
	.ast-single-related-posts-container .ast-related-posts-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}
@media (min-width: 1100px) {
	.ast-single-related-posts-container .ast-related-posts-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ast-related-posts-wrapper .ast-related-post {
	margin: 0;
	background: #FFFFFF;
	border: 1px solid rgba(43,42,40,0.08);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-related-posts-wrapper .ast-related-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(43,42,40,0.10);
}
.ast-related-posts-wrapper .ast-related-posts-inner-section,
.ast-related-posts-wrapper .ast-related-post-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ast-related-posts-wrapper .post-thumb-img-content img {
	object-fit: cover;
	width: 100%;
	display: block;
}
/* Astra原生给.entry-header（包标题+分类标签的<header>）加了margin:1em auto 1em auto，
   category-page.css对应的卡片结构里没有这层包装，这里清零，交给下面每个子元素自己控制间距。 */
.ast-related-posts-wrapper .entry-header {
	margin: 0;
	padding: 0;
}
/* 选择器特意写成三层（.entry-header也写进去），照抄Astra原生dynamic-css.php里
   .ast-related-post-content .entry-header .ast-related-post-title的权重，两层选择器
   权重不够、哪怕后加载也会被原生20px这条规则盖掉（见docs/断点记录.md同类踩坑记录）。 */
.ast-related-posts-wrapper .entry-header .ast-related-post-title {
	font-size: 18px;
	line-height: 1.4;
	margin: 16px 20px 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ast-related-posts-wrapper .entry-meta {
	margin: 0 20px;
	font-size: 12px;
	color: #3E8FC4;
}
.ast-related-posts-wrapper .entry-meta a {
	color: #3E8FC4;
}
.ast-related-posts-wrapper .ast-related-post-excerpt {
	margin: 8px 20px 0;
	flex: 1;
	font-size: 14px;
	color: #6B6862;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ast-related-posts-wrapper .ast-related-post-cta {
	margin: 12px 20px 20px;
}
.ast-related-posts-wrapper .ast-related-post-cta a {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #E8834B;
}

/* "Related Posts"相关文章模块、"发表评论"评论表单，是.ast-article-single之外的独立白色容器
   （`</article>`闭合之后的兄弟元素），同样统一16px圆角。.ast-single-related-posts-container
   加overflow:hidden防止里面的文章缩略图贴边溢出；.comment-respond是纯表单不需要。 */
.ast-single-related-posts-container {
	border-radius: 16px;
	overflow: hidden;
}
.comment-respond {
	border-radius: 16px;
}

/* 文章页标题下方的元信息行（obago-post-meta.php输出，markup带entry-meta+obago-entry-meta两个class）：
   左边分享条，右边"发表评论/更新于"，两端对齐；窄屏放不下时自动折成两行。字号跟.entry-meta的15px一致。 */
.obago-entry-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 16px;
	color: #8A8378;
	width: 100%;
}
.obago-entry-meta .obago-meta-left,
.obago-entry-meta .obago-meta-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	color: #8A8378;
}
.obago-entry-meta a {
	color: #3E8FC4;
}
.obago-entry-meta a:hover {
	color: #2E6F9C;
}

/* 分享条（obago-post-share.php输出）：标题下方元信息行左侧一份，正文末尾右下角一份。
   "复制链接"是蓝框文字按钮，后面四个是32px浅蓝底圆形图标，hover反色。Astra给所有<button>设了
   实心主色背景和大padding，这里用".obago-share button.xxx"（0,2,1）压过它。 */
.obago-share {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.obago-share button.obago-share-copy {
	padding: 4px 12px;
	border: 1px solid #3E8FC4;
	border-radius: 999px;
	background: #FFFFFF;
	color: #3E8FC4;
	font-size: 13px;
	line-height: 1.6;
	cursor: pointer;
}
.obago-share button.obago-share-copy:hover {
	background: #3E8FC4;
	color: #FFFFFF;
}
.obago-share button.obago-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #EDF5FA;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.obago-share button.obago-share-icon svg {
	width: 16px;
	height: 16px;
	fill: #3E8FC4;
	transition: fill 0.2s ease;
}
/* 小红书的Simple Icons图标是"小红书"三个字的文字标志，16px认不出字，单独放大到圆圈内几乎撑满。 */
.obago-share button.obago-share-icon--xiaohongshu svg {
	width: 26px;
	height: 26px;
}
.obago-share button.obago-share-icon:hover {
	background: #3E8FC4;
}
.obago-share button.obago-share-icon:hover svg {
	fill: #FFFFFF;
}
/* 两份分享条前面各加一句引导语：顶部"分享本文："，说明这排图标是分享而不是账号链接；文末"觉得有用，分享给朋友："。 */
.obago-share--top::before {
	content: "分享本文：";
	font-size: 14px;
	color: #8A8378;
}
/* 手机端："分享本文："+复制链接+4个图标要挤在一行里（390px宽正文区约316px），图标缩到28px、间距收紧。 */
@media (max-width: 544px) {
	.obago-share {
		gap: 6px;
	}
	.obago-share button.obago-share-copy {
		padding: 3px 10px;
	}
	.obago-share button.obago-share-icon {
		width: 28px;
		height: 28px;
	}
	.obago-share button.obago-share-icon--xiaohongshu svg {
		width: 23px;
		height: 23px;
	}
}
/* 放不下一行时，引导语单独占一行，按钮整齐排在下一行，而不是图标零散折行：文末那份引导语长，手机上都这样；
   顶部那份只在≤374px（360/320这类窄屏）这样。 */
@media (max-width: 544px) {
	.obago-share--bottom::before {
		flex-basis: 100%;
		text-align: right;
	}
}
@media (max-width: 374px) {
	.obago-share--top::before {
		flex-basis: 100%;
	}
}
/* 正文末尾那一份：靠右。 */
.obago-share-end {
	display: flex;
	justify-content: flex-end;
	margin-top: 2em;
}
.obago-share--bottom {
	justify-content: flex-end;
}
.obago-share--bottom::before {
	content: "觉得有用，分享给朋友：";
	font-size: 14px;
	color: #8A8378;
}
/* 复制成功后的提示条和微信二维码弹窗，都由脚本临时插到<body>末尾。 */
.obago-share-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	z-index: 9999;
	max-width: calc(100% - 32px);
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(43, 42, 40, 0.9);
	color: #FFFFFF;
	font-size: 14px;
	text-align: center;
	transition: opacity 0.4s ease;
}
.obago-share-toast.is-hide {
	opacity: 0;
}
.obago-share-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(43, 42, 40, 0.5);
}
.obago-share-modal-card {
	position: relative;
	width: 260px;
	padding: 28px 24px 20px;
	border-radius: 16px;
	background: #FFFFFF;
	text-align: center;
}
.obago-share-modal-qr svg {
	display: block;
	width: 180px;
	height: 180px;
	margin: 0 auto 12px;
}
.obago-share-modal-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #2B2A28;
}
.obago-share-modal button.obago-share-modal-close {
	position: absolute;
	top: 6px;
	right: 10px;
	padding: 0 6px;
	border: none;
	background: transparent;
	color: #8A8378;
	font-size: 22px;
	line-height: 1.2;
	cursor: pointer;
}

/* Rank Math目录区块：原生<ol>没有重置list-style，会跟插件自己的::before计数器样式重复显示
   两套数字，这里补上reset；折叠交互用原生<details>/<summary>实现，不用额外写JS。 */
.wp-block-rank-math-toc-block {
	border: 1px solid #E4DFD6;
	border-radius: 8px;
	padding: 16px 20px;
	background: #FAF7F2;
	margin-bottom: 24px;
}
.wp-block-rank-math-toc-block summary,
.obago-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}
.wp-block-rank-math-toc-block summary::-webkit-details-marker,
.obago-faq summary::-webkit-details-marker {
	display: none;
}
.wp-block-rank-math-toc-block summary h2 {
	margin: 0;
	font-size: 1.6rem;
}
.wp-block-rank-math-toc-block summary::after,
.obago-faq summary::after {
	content: "\25BE";
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #3E8FC4;
	color: #fff;
	font-size: 1.3rem;
	transition: transform 0.2s ease;
	margin-left: 12px;
}
.wp-block-rank-math-toc-block details[open] summary::after,
.obago-faq[open] summary::after {
	transform: rotate(180deg);
}
.wp-block-rank-math-toc-block nav {
	margin-top: 12px;
}

/* 文章FAQ：每个问题是一个带.obago-faq的core/details区块，<summary>里放H3，保留标题层级和目录锚点；
   卡片外观跟目录区块同色系。折叠按钮完全沿用上面跟目录区块共用的summary规则，不单独覆盖。
   默认折叠靠区块不带open属性。 */
.entry-content .obago-faq {
	border: 1px solid #E4DFD6;
	border-radius: 12px;
	background: #FAF7F2;
	padding: 0;
	margin: 0 0 12px;
	overflow: hidden;
}
.entry-content .obago-faq:last-of-type {
	margin-bottom: 2.5em;
}
/* 问题栏高度主要由36px圆按钮决定（上下padding+36px），padding只留少量呼吸空间；手机端左右再收窄，
   问题文字少折行。544px为Astra手机断点。 */
.obago-faq summary {
	padding: 10px 20px;
}
@media (max-width: 544px) {
	.obago-faq summary {
		padding: 8px 16px;
	}
	.entry-content .obago-faq > :not(summary) {
		margin-left: 16px;
		margin-right: 16px;
	}
}
.obago-faq summary h3 {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.5;
	transition: color 0.2s ease;
}
.obago-faq summary:hover h3 {
	color: #3E8FC4;
}
.obago-faq[open] summary {
	border-bottom: 1px solid #E4DFD6;
}
.obago-faq > :not(summary) {
	margin-left: 20px;
	margin-right: 20px;
}
.obago-faq > :not(summary):nth-child(2) {
	margin-top: 16px;
}
.obago-faq > :last-child {
	margin-bottom: 16px;
}
.obago-faq ul {
	padding-left: 1.2em;
}
.wp-block-rank-math-toc-block nav ol {
	list-style: none;
	margin: 0;
	padding-left: 1.2em;
}
.wp-block-rank-math-toc-block nav > ol {
	padding-left: 0;
}
.wp-block-rank-math-toc-block nav ol li {
	margin-bottom: 6px;
}
.wp-block-rank-math-toc-block nav a {
	text-decoration: none;
	color: #3E8FC4;
}
.wp-block-rank-math-toc-block nav a:hover {
	color: #2E6F9C;
	text-decoration: underline;
}
/* 目录层级：H2条目深色加粗、组与组之间留白，H3条目保持链接蓝、字号更小、行距收紧，跟正文H2深色/H3蓝色对应。
   编号是插件用li::before生成的，样式写在li上编号才会跟着变。 */
.wp-block-rank-math-toc-block nav > ol > li {
	font-size: 16px;
	font-weight: 600;
	margin-top: 14px;
	margin-bottom: 0;
}
.wp-block-rank-math-toc-block nav > ol > li:first-child {
	margin-top: 0;
}
.wp-block-rank-math-toc-block nav > ol > li > a {
	color: #2B2A28;
}
.wp-block-rank-math-toc-block nav ol ol {
	margin-top: 6px;
}
.wp-block-rank-math-toc-block nav ol ol li {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 4px;
}

/* 文章正文H2/H3层级区分：H2左侧珊瑚橙竖条+加大上间距，H3改主色蓝并缩小字号。
   只选.entry-content的直接子元素，目录区块（summary里的h2）和FAQ卡片（summary里的h3）都嵌套在
   details里，不会被命中。Astra原生用`.entry-content :where(h2)`，权重低，这里的选择器足以覆盖。 */
.single-post .entry-content > h2 {
	border-left: 4px solid #E8834B;
	padding-left: 14px;
	margin-top: 2.2em;
}
.single-post .entry-content > h3 {
	color: #3E8FC4;
	font-size: 20px;
	margin-top: 1.6em;
}
@media (max-width: 544px) {
	.single-post .entry-content > h3 {
		font-size: 18px;
	}
}

/* 标题旁的小图标（如各州公交卡样卡）：图片作为行内img放在H3文字后面、加class obago-h3-card，
   高度约为标题字号的2.4倍，宽度按原图比例自适应。 */
.entry-content h3 .obago-h3-card {
	height: 2.4em;
	width: auto;
	margin-left: 12px;
	vertical-align: middle;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(43, 42, 40, 0.18);
}

/* 宽屏下正文里整宽的图片和视频限制最大宽度并居中，避免铺满整栏显得压抑；大图有点击放大可看细节。
   只选正文直接子元素，并排的columns里的图和标题旁的小图标不受影响；
   正文栏本身窄于720px时（手机/平板）自然铺满。 */
.single-post .entry-content > .wp-block-image,
.single-post .entry-content > .wp-block-embed {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* 文章底部"前一篇/后一篇"（markup来自obago-post-navigation-display.php）：两张白色卡片各占一半，
   跟全站卡片同一套圆角/边框/hover上浮；前一篇"缩略图 + ←上一篇/标题"靠左，后一篇"下一篇→/标题 + 缩略图"靠右。
   ≤544px两张上下排、各占满一行。Astra手机端用.single .nav-links .nav-previous/.nav-next（0,3,0）把两边设成
   居中、给.nav-previous + .nav-next设width:50%，下面带.single的选择器多一层class压回。 */
.post-navigation {
	margin: 24px 0;
}
/* Astra原生把.nav-links设成flex（权重高于.post-navigation .nav-links），这里加.single压过去才能变成grid；
   用minmax(0,1fr)而不是1fr：1fr的最小宽度是内容宽度，标题长的那张会把另一张挤窄。 */
.single .post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* 两张卡片之间的间距随屏宽变大：545px约30px，768px约42px，1024px约56px，1440px起80px。 */
	gap: clamp(24px, 5.5vw, 80px);
}
.single .post-navigation .nav-links .nav-previous,
.single .post-navigation .nav-links .nav-next,
.single .post-navigation .nav-links .nav-previous + .nav-next {
	width: auto;
	padding: 0;
	text-align: left;
}
.single .post-navigation .nav-links .nav-next,
.single .post-navigation .nav-links .nav-previous + .nav-next {
	grid-column: 2;
	text-align: right;
}
.post-navigation .nav-links a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(43, 42, 40, 0.08);
	border-radius: 16px;
	background: #FFFFFF;
	color: #2B2A28;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post-navigation .nav-next a {
	justify-content: flex-end;
}
.post-navigation .nav-links a:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(43, 42, 40, 0.10);
}
.post-navigation .nav-links a:hover .obago-post-nav-title {
	color: #3E8FC4;
}
.post-navigation img.obago-post-nav-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
}
.obago-post-nav-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.obago-post-nav-label {
	font-size: 13px;
	font-weight: 600;
	color: #3E8FC4;
}
.obago-post-nav-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	transition: color 0.2s ease;
}
@media (max-width: 544px) {
	.single .post-navigation .nav-links {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.single .post-navigation .nav-links .nav-next,
	.single .post-navigation .nav-links .nav-previous + .nav-next {
		grid-column: 1;
	}
	.post-navigation img.obago-post-nav-thumb {
		width: 56px;
		height: 56px;
	}
}