/*
 * 汉语学校 — 补充样式
 * 承载 theme.json 无法表达的细节：
 * 1. 「角标边框」签名区块样式（取自中文书名号「」与印章边框的双重意象）
 * 2. AI 对话演示气泡
 * 3. 统计数字的等宽字体处理
 * 4. 课程卡 / 资源行 的安静边框（克制留白，不与角标抢戏）
 */

/* ── 1. 角标边框：印章 / 引号 双重意象 ───────────────────────────── */
.is-style-corner-bracket {
	position: relative;
	padding: 2.5rem 1.5rem !important;
}
.is-style-corner-bracket::before,
.is-style-corner-bracket::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	border: 2px solid var(--wp--preset--color--seal);
	pointer-events: none;
}
.is-style-corner-bracket::before {
	top: 10px;
	left: 10px;
	border-right: none;
	border-bottom: none;
}
.is-style-corner-bracket::after {
	bottom: 10px;
	right: 10px;
	border-left: none;
	border-top: none;
}

.is-style-seal-mark {
	background-color: var(--wp--preset--color--seal) !important;
	color: var(--wp--preset--color--white);
}
.is-style-seal-mark a {
	color: var(--wp--preset--color--white) !important;
}

/* 句读点分隔符：用居中圆点取代整条横线，呼应古籍句读标点 */
.is-style-juhao {
	border: none !important;
	height: auto !important;
	text-align: center;
	overflow: visible;
}
.is-style-juhao::before {
	content: "·　·　·";
	display: block;
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.3em;
	font-size: 0.875rem;
}

/* ── 2. 站点标识：印鉷式方块「汉」── 用于 Header 中的站点图标 ───── */
.hanyu-seal-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	background: var(--wp--preset--color--seal);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.1rem;
	border-radius: 3px;
}

/* ── 3. 课程卡 / 资源行：安静的方格纸边框 ───────────────────────── */
.hanyu-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	transition: border-color 0.15s ease;
}
.hanyu-card:hover {
	border-color: var(--wp--preset--color--seal);
}

.hanyu-meta-mono {
	font-family: var(--wp--preset--font-family--data-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-soft);
}

.hanyu-stat-number {
	font-family: var(--wp--preset--font-family--data-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--seal);
	display: block;
}

.hanyu-tag {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.15rem 0.6rem;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--data-mono);
}
.hanyu-tag--jade    { background: var(--wp--preset--color--jade-bg);   color: var(--wp--preset--color--jade); }
.hanyu-tag--indigo  { background: var(--wp--preset--color--indigo-bg); color: var(--wp--preset--color--indigo); }
.hanyu-tag--ochre   { background: var(--wp--preset--color--ochre-bg);  color: var(--wp--preset--color--ochre); }
.hanyu-tag--bamboo  { background: var(--wp--preset--color--bamboo-bg); color: var(--wp--preset--color--bamboo); }
.hanyu-tag--seal    { background: #F6E2E2; color: var(--wp--preset--color--seal-deep); }

/* ── 4. AI 助手演示对话气泡（静态示意，可对接真实 API） ─────────── */
.hanyu-chat-window {
	background: var(--wp--preset--color--paper-deep);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
}
.hanyu-chat-row {
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
	align-items: flex-start;
}
.hanyu-chat-row.is-user {
	justify-content: flex-end;
}
.hanyu-chat-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	flex-shrink: 0;
}
.hanyu-chat-bubble {
	font-size: 0.875rem;
	line-height: 1.6;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	max-width: 80%;
}
.hanyu-chat-row.is-ai .hanyu-chat-bubble {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
}
.hanyu-chat-row.is-user .hanyu-chat-bubble {
	background: var(--wp--preset--color--seal);
	color: var(--wp--preset--color--white);
}
.hanyu-chat-input-row {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.8rem;
}
.hanyu-chat-input-fake {
	flex: 1;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-soft);
}

/* ── 5. 可访问性：可见焦点环，遵循减少动态偏好 ───────────────────── */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--seal);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}