/*
Theme Name: 深色极简博客
Theme URI: https://yelongtest.app.wbtun.com
Author: 站长
Description: 基于 Twenty Twenty-Five 的深色极简子主题：深灰黑背景、天蓝强调色、留白充足的中文阅读排版。换回原主题不会丢内容。
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog-midnight
Tags: one-column, blog, dark-mode-support, block-patterns, full-site-editing
*/

/* ------------------------------------------------------------------
   说明：配色、字号、区块样式都在 theme.json 里，这里只放 theme.json
   表达不了的细节（边框、滚动条、表单控件、中文排版微调）。
   ------------------------------------------------------------------ */

/* 中文排版：避免标题和段落出现孤字、断行更自然 */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* 顶部页头：底部一条细分隔线，和正文拉开层次 */
.blog-header {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* 页脚：同样用细线收住 */
.blog-footer {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* 文章列表项之间的分隔线 */
.wp-block-separator:not(.is-style-dots) {
	border: none;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	opacity: 1;
}

/* 页面顶部那条线要和文章之间的线一样宽，不然长短不一。
   父主题的宽分隔线样式带 !important，这里必须同样强制才能盖住。 */
main > .wp-block-separator:not(.alignfull) {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--content-size) !important;
	width: 100%;
}

/* 正文里的行内代码 */
:where(:not(pre) > code) {
	background-color: var(--wp--preset--color--accent-3);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--blog-mono);
	font-size: 0.9em;
	padding: 0.15em 0.4em;
}

/* 代码块过长时可以横向滚动，不会撑破页面 */
.wp-block-code code,
.wp-block-preformatted {
	overflow-x: auto;
	white-space: pre;
}

/* 图片、视频统一圆角 */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-video video,
.wp-block-embed iframe {
	border-radius: 10px;
}

/* 正文链接：悬停时下划线离文字远一点，中文更清楚 */
.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a {
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

/* 表格：深色下加边框才看得清 */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 0.6em 0.9em;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--accent-3);
	font-weight: 600;
}

/* 表单控件（搜索框、评论框）：默认是白底黑字，深色页面里很扎眼 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	background-color: var(--wp--preset--color--accent-3);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1rem;
	padding: 0.6em 0.8em;
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--accent-1);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

/* 键盘操作时的焦点框要看得见（无障碍） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* 搜索按钮跟随主题按钮样式 */
.wp-block-search__button {
	background-color: var(--wp--preset--color--accent-1);
	border: none;
	border-radius: 6px;
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* 分页：数字之间留点距离，当前页高亮 */
.wp-block-query-pagination {
	gap: 0.9rem;
}

.wp-block-query-pagination-numbers .current {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* 评论区：每条评论之间用细线分隔 */
.wp-block-comment-template li + li {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding-top: 1.5rem;
}

/* 选中文字的颜色 */
::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* 深色滚动条，浅色滚动条在深色页面上很突兀 */
html {
	scrollbar-color: var(--wp--preset--color--accent-6) var(--wp--preset--color--base);
}

/* 手机上页头标题和导航换行时不要挤在一起 */
@media (max-width: 600px) {
	.blog-header .wp-block-group {
		row-gap: 0.4rem;
	}
}