/**
 * Fanproxy 文章正文排版美化（article.css）
 *
 * 作用于 .single-content-inner 容器内的所有元素，
 * 已发布文章和新发文章自动生效,无需修改文章内容.
 *
 * 加载方式见 functions.php 中的 fanproxy_enqueue_article_style()，
 * 仅在文章页（is_singular('post')）加载.
 *
 * 配色跟随主题 CSS 变量.
 * 不改变主题原有字体大小,只调整间距、颜色、背景、边框等视觉排版.
 * 代码块（pre）的样式由 functions.php 中的 highlight.js 方案处理,本文件不覆盖.
 */


/* ===== 段落 ===== */

.single-content-inner p {
	line-height: 1.9;
	color: var(--pt-body-color);
	word-wrap: break-word;
}


/* ===== 标题 ===== */
/*
 * 不改字号,只加背景色 + 左色条 + 间距,让标题在正文中更醒目.
 */

.single-content-inner h2 {
	position: relative;
	padding: 10px 16px 10px 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pt-headings-color);
	background: rgba(33, 107, 233, 0.08);
	border-left: 4px solid var(--pt-accent-color);
	border-radius: 0 var(--pt-soft-radius) var(--pt-soft-radius) 0;
	scroll-margin-top: 90px;
}

.single-content-inner h3 {
	position: relative;
	padding: 6px 14px 6px 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pt-headings-color);
	background: rgba(33, 107, 233, 0.05);
	border-left: 3px solid var(--pt-accent-color);
	border-radius: 0 var(--pt-soft-radius) var(--pt-soft-radius) 0;
	scroll-margin-top: 90px;
}

.single-content-inner h4 {
	position: relative;
	padding: 4px 12px 4px 10px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pt-headings-color);
	background: rgba(33, 107, 233, 0.03);
	border-left: 3px solid var(--pt-accent-color);
	border-radius: 0 var(--pt-soft-radius) var(--pt-soft-radius) 0;
	scroll-margin-top: 90px;
}

/* 容器内第一个标题去掉上方大间距 */
.single-content-inner > h2:first-child,
.single-content-inner > h3:first-child,
.single-content-inner > h4:first-child {
	margin-top: 0;
}


/* ===== 图片 ===== */

.single-content-inner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pt-soft-radius);
	box-shadow: var(--pt-shadow-soft);
}

/* 居中图片（<p style="text-align:center"><img></p>）保持居中 */
.single-content-inner p > img:only-child {
	display: inline-block;
}


/* ===== 表格 ===== */
/*
 * 文章里的表格是手写 HTML,带 border="1" cellpadding="8" 等旧属性,
 * 表头 background-color 还少写了 # 号导致无效.这里统一用 CSS 接管外观.
 */

.single-content-inner table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--pt-border-color, #e9e8ff);
	border-radius: var(--pt-soft-radius);
	overflow: hidden;
	box-shadow: var(--pt-shadow-soft);
}

.single-content-inner table thead {
	background-color: var(--pt-accent-color);
}

.single-content-inner table thead th {
	padding: 13px 16px;
	color: #fff;
	font-weight: 600;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.single-content-inner table tbody td {
	padding: 12px 16px;
	border: 1px solid #e4e5ea;
	color: var(--pt-body-color);
	word-break: break-word;
}

/* 斑马纹 */
.single-content-inner table tbody tr:nth-child(even) {
	background-color: rgba(33, 107, 233, 0.03);
}

/* 悬停高亮 */
.single-content-inner table tbody tr:hover {
	background-color: rgba(33, 107, 233, 0.07);
}


/* ===== 引用 ===== */

.single-content-inner blockquote {
	padding: 14px 20px;
	border-left: 4px solid var(--pt-accent-color);
	background: var(--pt-accent-80-color, rgba(33, 107, 233, 0.08));
	border-radius: 0 var(--pt-soft-radius) var(--pt-soft-radius) 0;
	color: var(--pt-body-color);
}

.single-content-inner blockquote p:last-child {
	margin-bottom: 0;
}


/* ===== 列表 ===== */

.single-content-inner ul,
.single-content-inner ol {
	padding-left: 1.8em;
}

.single-content-inner li {
	line-height: 1.9;
}

/* 无序列表符号跟随强调色 */
.single-content-inner ul li::marker {
	color: var(--pt-accent-color);
}


/* ===== 行内代码（排除代码块 pre > code） ===== */
/*
 * 代码块 <pre><code> 已由 functions.php 中的 highlight.js 方案处理,
 * 这里只管正文里行内出现的 <code>,用 :not(pre) > code 精确排除代码块.
 */

.single-content-inner :not(pre) > code {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	padding: 2px 6px;
	margin: 0 1px;
	background: rgba(33, 107, 233, 0.1);
	color: #c7254e;
	border-radius: 4px;
	word-break: break-word;
}


/* ===== 加粗 ===== */

.single-content-inner strong {
	color: var(--pt-headings-color);
	font-weight: 700;
}


/* ===== 问答 Q/A 行 ===== */
/*
 * 文章常见问题用 <p><strong>Q1：...</strong></p> + <p>A：...</p> 结构.
 * 用 :has() 识别"仅含一个 strong 子元素"的段落（即 Q 行）,加左色条
 * + 浅背景突出显示;A 行紧跟其后,拉近间距形成一组.
 * 注意：<p><span><strong>注意：...</strong></span></p> 不会被误伤,
 * 因为 strong 的父元素是 span 而非 p,不满足 > strong:only-child.
 */

.single-content-inner p:has(> strong:only-child) {
	padding: 10px 16px 10px 14px;
	border-left: 4px solid var(--pt-accent-color);
	background: rgba(33, 107, 233, 0.05);
	border-radius: 0 6px 6px 0;
}

/* A 行紧跟 Q 行,拉近间距 */
.single-content-inner p:has(> strong:only-child) + p {
	margin-top: -0.5em;
}


/* ===== 分隔线 ===== */

.single-content-inner hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--pt-border-color, #e9e8ff) 20%, var(--pt-border-color, #e9e8ff) 80%, transparent);
}


/* ===== 高亮标记 / 键盘按键 ===== */

.single-content-inner mark {
	padding: 2px 4px;
	background: #fff3a0;
	border-radius: 3px;
}

.single-content-inner kbd {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	padding: 2px 6px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-bottom-width: 2px;
	border-radius: 4px;
	color: var(--pt-headings-color);
}


/* ===== 链接过渡（主题已有下划线样式,这里补过渡动画） ===== */

.single-content-inner a {
	transition: color 0.2s ease;
}