/**
 * 小辉文章短代码合集 - 前端基础样式（默认兜底主题）
 * 子比主题下由 theme-adapter.css 覆写 CSS 变量。
 */

/* ---------- 插件全局缝隙变量 ----------
   所有短代码组件的上下缝隙统一走 --xhsc-gap。
   用户可在子比自定义 CSS 里 :root { --xhsc-gap: Xpx } 全站联动；
   若覆盖不生效（自定义 CSS 先于插件加载时），加 !important 即可。 */
:root {
	--xhsc-gap: 7px;
}

/* ---------- 组件级变量（默认值，子比适配层覆写） ---------- */
.xhsc-collapse,
.xhsc-posts,
.xhsc-title-plane {
	--xhsc-primary: #49a4ff;
	--xhsc-border: #e5e6eb;
	--xhsc-bg: #fff;
	--xhsc-text: #303133;
	--xhsc-muted: #909399;
	--xhsc-radius: 8px;
}

/* ---------- 折叠面板 ---------- */
.xhsc-collapse {
	/* 上下外缝走 --xhsc-gap（默认 7px）+ 0.5em 半行距补偿：
	   文字视觉边缘到段落盒边缘有约半行距的空隙，补上后面板与段落缝隙视觉对齐 */
	margin: calc(var(--xhsc-gap, 7px) + 0.5em) 0;
	border: 1px solid var(--xhsc-border);
	border-radius: var(--xhsc-radius);
	background: var(--xhsc-bg);
	overflow: hidden;
}

.xhsc-collapse.xhsc-style-simple {
	border: none;
	background: transparent;
}

.xhsc-collapse.xhsc-style-card {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.xhsc-collapse-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	list-style: none;
	color: var(--xhsc-text);
	font-weight: 700; /* 对齐子比标题 bold */
	font-size: 15px;
	transition: color 0.2s;
}

.xhsc-collapse-title::-webkit-details-marker {
	display: none;
}

.xhsc-collapse-title::marker {
	content: '';
}

.xhsc-style-simple .xhsc-collapse-title {
	padding-left: 0;
	padding-right: 0;
}

/* ========== 图标字体（StrawberryIcon 子集：仅加号 e902 与右 chevron e90a 两个字形，base64 内联） ========== */
@font-face {
	font-family: 'StrawberryIcon';
	src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAALYAAsAAAAAAwAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAB5AAAAD4AAABg+BMGM2NtYXAAAAIkAAAAMwAAADzpJOlXZ2FzcAAAAtAAAAAIAAAACAAAABBnbHlmAAABCAAAAFoAAABaxfihUWhlYWQAAAGEAAAANgAAADYV/LQhaGhlYQAAAcQAAAAgAAAAJAfEA8FobXR4AAABvAAAAAgAAAAIBMAA5mxvY2EAAAF8AAAACAAAAAgAGQAtbWF4cAAAAWQAAAAYAAAAIAAbAfFuYW1lAAACWAAAAGoAAACYB40gFXBvc3QAAALEAAAADAAAACAAAwAAAAEAwACAA0ADAAALAAABIREjESEVIREzESEDQP8AgP8AAQCAAQACAAEA/wCA/wABAAAAAQDm/+YC7QOaAAUAAAUnCQE3AQEaNAGt/lM0AdMaNAGmAaY0/iYAAAB4nGNgZGBgYGb8wCDOAAKMDGgAABo8AQ4AAAAAABkALQABAAAAAgAAm0tMo18PPPUACwQAAAAAANltt9IAAAAA2W230gAA/8AEAQPAAAAACAACAAAAAAAABAAAAADAAOZ4nGNgZGBgPvD/AAMDCwMDw///LIwMQBEUwAgAdzsEjXicY2Bm/s84gYGVgYFpJtMZBgaGfgjN+JrBmJGTAQ0IoAs4vGR6ycV84P8BBgdmIAaKMCLJKjAwAACVMAw6AAB4nGNgYGBiYGBgBmIRIMkIplkYNIA0G5BmZGB6yfSS6/9/BgYILfZf7AdYFRAAALqeCkcAeJxNysEKAWEYheFnzJiysbS2siNNrkHZWFD2aJIS9SO5e1+/WUynU+85vahtlYpqpDCj44FxrD+Xvb/q8dDEquM6/3svydHHSRuUfG2cPdzNrWO3kV304u0WZnLI5tM1W1ONheUP8l4PuwAAeJxjYGbACwAAfQAEAAEAAf//AA8=') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

/* 左侧图标：字体图标（与 CoreNext 的 czs-add 同源字形），颜色走 --xhsc-primary（子比下 = --theme-color） */
.xhsc-icon {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--xhsc-primary, #49a4ff);
	transition: transform 0.25s ease;
}

.xhsc-icon-plus::before,
.xhsc-icon-arrow::before {
	font-family: 'StrawberryIcon', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	color: inherit;
}

.xhsc-icon-plus::before {
	content: '\e902';
	transform: translate(-50%, -50%);
}

.xhsc-icon-plus::after {
	display: none;
}

.xhsc-icon-arrow::before {
	content: '\e90a';
	-webkit-text-stroke: 0.5px currentColor; /* 补粗：angle 系为线性字形，笔画比加号细 */
	transform: translate(-50%, -50%); /* 字形本身朝右 */
}

.xhsc-icon-arrow::after {
	display: none;
}

/* 展开状态（标题不变色，仅图标旋转指示） */
.xhsc-details[open] > .xhsc-collapse-title .xhsc-icon-plus {
	transform: rotate(45deg);
}

/* 展开后箭头朝下：容器 90° 与字形 -90° 合成 0° */
.xhsc-details[open] > .xhsc-collapse-title .xhsc-icon-arrow {
	transform: rotate(90deg);
}

.xhsc-collapse-body {
	padding: var(--xhsc-gap, 7px) 14px;
	border-top: 1px dashed var(--xhsc-border);
}

/* 最后一个段落的下外距不计入，保证面板底缝 = --xhsc-gap（与上缝对称） */
.xhsc-collapse-body > p:last-child {
	margin-bottom: 0 !important;
}

.xhsc-style-simple .xhsc-collapse-body {
	padding-left: 0;
	padding-right: 0;
}

.xhsc-collapse-body > *:first-child {
	margin-top: 0;
}

.xhsc-collapse-body > *:last-child {
	margin-bottom: 0;
}

/* ---------- 相关文章：横向小卡 ---------- */
.xhsc-posts {
	margin: 12px 0;
}

.xhsc-post-mini {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--xhsc-gap, 7px) 0;
}

.xhsc-post-mini + .xhsc-post-mini {
	border-top: 1px dashed var(--xhsc-border);
}

.xhsc-post-thumb {
	flex: none;
	display: block;
	width: 96px;
	height: 60px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--xhsc-border);
}

.xhsc-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.xhsc-post-mini:hover .xhsc-post-thumb img,
.xhsc-post-card:hover .xhsc-post-thumb img {
	transform: scale(1.05);
}

.xhsc-post-con {
	flex: 1;
	min-width: 0;
}

.xhsc-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--xhsc-text);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.2s;
}

.xhsc-post-mini:hover .xhsc-post-title,
.xhsc-post-card:hover .xhsc-post-title {
	color: var(--xhsc-primary);
}

.xhsc-post-meta {
	margin-top: 4px;
	font-size: 12px;
	color: var(--xhsc-muted);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------- 相关文章：图文网格 ---------- */
.xhsc-posts-card {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (max-width: 768px) {
	.xhsc-posts-card {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.xhsc-posts-card {
		grid-template-columns: 1fr;
	}
}

.xhsc-post-card {
	border: 1px solid var(--xhsc-border);
	border-radius: var(--xhsc-radius);
	overflow: hidden;
	background: var(--xhsc-bg);
	transition: box-shadow 0.25s, transform 0.25s;
}

.xhsc-post-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.xhsc-post-card .xhsc-post-thumb {
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 62%;
	position: relative;
	border-radius: 0;
}

.xhsc-post-card .xhsc-post-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.xhsc-post-card .xhsc-post-con {
	padding: 10px 12px 12px;
}

/* ---------- 相关文章：纯文字列表 ---------- */
.xhsc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xhsc-list li {
	padding: 7px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.xhsc-list li + li {
	border-top: 1px dashed var(--xhsc-border);
}

.xhsc-list li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--xhsc-primary);
	opacity: 0.6;
	flex: none;
}

.xhsc-list a {
	color: var(--xhsc-text);
	text-decoration: none;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.2s;
}

.xhsc-list li:hover a {
	color: var(--xhsc-primary);
}

.xhsc-list-meta {
	font-size: 12px;
	color: var(--xhsc-muted);
	flex: none;
}

/* ---------- 空状态（仅管理员可见） ---------- */
.xhsc-posts-empty {
	padding: 10px 12px;
	border: 1px dashed #f56c6c;
	border-radius: 6px;
	color: #f56c6c;
	font-size: 13px;
	background: #fef0f0;
	margin: 10px 0;
}

/* ---------- 视频播放（[xh_video]） ----------
   子比环境：播放器由主题 zib_new_dplayer 输出、样式由主题接管，
   此处仅补缝隙（--xhsc-gap 体系）与圆角；
   非子比环境：原生 video 兜底。 */
.xhsc-video {
	margin: calc(var(--xhsc-gap, 7px) + 0.5em) 0;
	border-radius: 8px;
	overflow: hidden;
}

.xhsc-video .xhsc-video-native {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
}

/* ---------- 超级嵌入（[xh_embed]） ----------
   输出结构与子比"超级嵌入"一致（.wp-block-embed.is-type-video），
   子比下由主题样式接管；此处兜底非子比环境的等比容器与铺满 iframe。 */
.xhsc-embed {
	margin: calc(var(--xhsc-gap, 7px) + 0.5em) 0;
}

/* 嵌入视频为文章内容首/尾元素时，对齐其它组件的行为（子比会清首尾子元素的 margin，
   上缝隙与其它组件一致；不能用 padding 补偿——padding 会让可见的圆角容器上方
   多出一条缝，实测比其它组件多出 0.5em） */
.wp-posts-content > .xhsc-embed:first-child {
	margin-top: 0;
	padding-top: 0;
}

.wp-posts-content > .xhsc-embed:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.xhsc-embed .wp-block-embed {
	border-radius: 8px;
	overflow: hidden;
}

.xhsc-embed .wp-block-embed.is-type-video > div {
	position: relative;
	overflow: hidden;
}

.xhsc-embed .wp-block-embed.is-type-video iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- 标题面板（[xh_title_plane]，迁移自 CoreNext title-plane） ----------
   虚线框 + 标签牌式标题条；
   颜色保持 CoreNext 原版：主色 #007aff、底色 #e2edfa（用户定稿：不随主题色联动），
   外缝走 --xhsc-gap 体系（含 0.5em 半行距补偿，与其他组件对齐）。 */
.xhsc-title-plane {
	--xhsc-plane-color: #007aff; /* CoreNext 原版主色 */
	margin: calc(var(--xhsc-gap, 7px) + 0.5em) 0;
	padding: 2px;
	background: #e2edfa;
	border: 2px dashed var(--xhsc-plane-color, #007aff);
	border-radius: var(--xhsc-radius, 8px);
	/* 默认文字 = 子比正文浅色值 #4e5358，恒定不随深浅切换（用户定稿 2026-09-11：
	   面板为"浅色岛"，深色下子比正文会切亮字，在浅蓝底上不可读，故钉死浅色值）。
	   字号不设值：继承主题正文（子比 .wp-posts-content = 16px，用户定稿 2026-09-11） */
	color: #4e5358;
	word-break: break-all;
}

/* 标题条：实底 CoreNext 原版主色白字，inline-block 宽度随标题文字（标签牌效果）
   选择器用后代形式 (0,2,0)：站点 .wp-posts-content p 的 margin !important 为 (0,1,1)，
   单类 !important (0,1,0) 压不住，会导致气泡多出 7px 下边距（间距变 14px） */
.xhsc-title-plane .xhsc-title-plane-head {
	margin: 0 !important; /* 对抗站点/主题的 p margin（含 !important 规则） */
	background: var(--xhsc-plane-color, #007aff);
	color: #fff;
	border-radius: calc(var(--xhsc-radius, 8px) - 4px); /* 内圆角 = 面板圆角 - 边框 2px - 内衬 2px */
	display: inline-block;
	font-size: 17px; /* CoreNext 原版 14px，用户定稿 2026-09-11 */
	font-weight: 400; /* CoreNext 原版未设字重（默认正常），显式钉死防主题样式带粗 */
	line-height: 1.6;
	padding: 0 18px; /* CoreNext 原版 0 20px，用户定稿 2026-09-11 两侧各减 2px */
}

/* 加粗字（b/strong）：默认色的变纯黑（对齐站点自定义 JS「加粗字体更黑一点」——
   面板位于 .wp-posts-content 内，那段 JS 本就覆盖面板；此处补 CSS 兜底深色模式并用纯黑统一）。
   显式指定颜色（内联 style / 彩色类）的加粗字保留原色：内联 style 优先级高于本规则 */
.xhsc-title-plane b,
.xhsc-title-plane strong {
	color: #000;
}

.xhsc-title-plane-body {
	padding: 10px;
}

/* 有标题条时：标题气泡与内容的间距走全局缝隙 --xhsc-gap（默认 7px）；无标题形态保持原版 10px */
.xhsc-title-plane-head + .xhsc-title-plane-body {
	padding-top: var(--xhsc-gap, 7px);
}

.xhsc-title-plane-body > *:first-child {
	margin-top: 0;
}

/* 末段下外距不计入，保证面板底缝均匀（对抗站点 p margin-bottom !important） */
.xhsc-title-plane-body > p:last-child {
	margin-bottom: 0 !important;
}