/*!
Theme Name: KaiyanCat
Author: Kaiyanai
Description: 开言猫：基于 Underscores 深度定制。
Version: 1.1.0
Tested up to: 6.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
Text Domain: kaiyancat

KaiyanCat is based on Underscores https://underscores.me/
Grid System powered by Bento (fenbox)
Typography inspired by Typecho Default
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables (自定义变量：颜色与圆角)
# Generic
	- Normalize
	- Box sizing
# Layouts (Bento 栅格系统)
# Base (基础排版)
	- Typography
	- Elements
	- Links
	- Forms
# Components (核心组件)
	- Header & Navigation
	- Posts and pages
	- Comments
	- Widgets
# Utilities (WP 必需与无障碍)
	- Accessibility
	- Alignments
	- Captions
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables (自定义变量：修改颜色和圆角只需改这里)
--------------------------------------------------------------*/
:root {
	/* 主题色：现代靛蓝 (区别于原版的深蓝) */
	--primary-color: #4f46e5;
	--primary-hover: #4338ca;
	
	/* 文本与边框颜色 */
	--text-main: #374151;
	--text-muted: #9ca3af;
	--border-color: #e5e7eb;
	--bg-body: #f9fafb;     /* 极浅的灰色背景 */
	--bg-content: #ffffff;  /* 纯白的内容区背景 */

	/* 全局圆角大小：区别于原版的直角 */
	--border-radius: 8px;
	--radius-sm: 4px;
	--radius-lg: 12px;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize v8.0.1 */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; } sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template, [hidden] { display: none; }

/*--------------------------------------------------------------
# Layouts (Bento Grid System 移植)
--------------------------------------------------------------*/
.container, .row [class*="col-"] { box-sizing: border-box; }
.container { margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; }
.row { margin-right: -10px; margin-left: -10px; }
.row [class*="col-"] { float: left; min-height: 1px; padding-right: 10px; padding-left: 10px; }
.row [class*="-push-"], .row [class*="-pull-"] { position: relative; }

/* Mobile and up */
.col-mb-1 { width: 8.33333%; } .col-mb-2 { width: 16.66667%; } .col-mb-3 { width: 25%; } .col-mb-4 { width: 33.33333%; }
.col-mb-5 { width: 41.66667%; } .col-mb-6 { width: 50%; } .col-mb-7 { width: 58.33333%; } .col-mb-8 { width: 66.66667%; }
.col-mb-9 { width: 75%; } .col-mb-10 { width: 83.33333%; } .col-mb-11 { width: 91.66667%; } .col-mb-12 { width: 100%; }

/* Tablet and up */
@media (min-width: 768px) {
	.container { max-width: 728px; }
	.col-tb-3 { width: 25%; } .col-tb-4 { width: 33.33333%; } .col-tb-6 { width: 50%; } .col-tb-8 { width: 66.66667%; } .col-tb-9 { width: 75%; } .col-tb-12 { width: 100%; }
}
/* Desktop and up */
@media (min-width: 992px) {
	.container { max-width: 952px; }
	.col-3 { width: 25%; } .col-4 { width: 33.33333%; } .col-6 { width: 50%; } .col-8 { width: 66.66667%; } .col-9 { width: 75%; } .col-12 { width: 100%; }
	.col-offset-1 { margin-left: 8.33333%; }
}
/* Widescreen and up */
@media (min-width: 1200px) {
	.container { max-width: 1160px; }
}

/* Clearfix */
.clearfix, .row { zoom: 1; }
.clearfix:before, .row:before, .clearfix:after, .row:after { content: " "; display: table; }
.clearfix:after, .row:after { clear: both; }

/*--------------------------------------------------------------
# Base (排版与颜色融合)
--------------------------------------------------------------*/
body {
	background-color: var(--bg-body);
	color: var(--text-main);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { color: #111; clear: both; }
p { margin-bottom: 1.5em; }

/* Links */
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
a:hover, a:active { color: var(--primary-hover); }

/* Special Links Style */
.post-meta a, .post-content a, .widget a, .comment-content a { border-bottom: 1px solid var(--border-color); }
.post-meta a:hover, .post-content a:hover, .widget a:hover, .comment-content a:hover { border-bottom-color: var(--primary-color); }

/* Code & Pre (加入圆角) */
pre, code {
	padding: 2px 4px;
	background: #f1f5f9;
	font-family: Menlo, Monaco, Consolas, monospace;
	font-size: .92857em;
	border-radius: var(--radius-sm);
}
code { color: #ef4444; }
pre { padding: 15px; overflow: auto; max-height: 400px; border-radius: var(--border-radius); border: 1px solid var(--border-color); }
pre code { padding: 0; color: inherit; background: transparent; }

/* Blockquote (加入圆角) */
blockquote {
	margin: 1em 0;
	padding: 10px 20px;
	background: #f3f4f6;
	border-left: 4px solid var(--primary-color);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* Images & Tables */
img { height: auto; max-width: 100%; border-radius: var(--radius-sm); }
table { margin: 0 0 1.5em; width: 100%; border-collapse: collapse; }
table th, table td { padding: 8px; border: 1px solid var(--border-color); }

/* Forms (全面圆角化) */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {
	padding: 8px 12px;
	border: 1px solid var(--border-color);
	width: 100%;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	transition: border-color 0.3s;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--primary-color); outline: none; }
textarea { resize: vertical; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
	border: none;
	background: var(--primary-color);
	color: #fff;
	padding: 8px 20px;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: background 0.3s;
}
button:hover, input[type="submit"]:hover { background: var(--primary-hover); }

/*--------------------------------------------------------------
# Components (核心组件)
--------------------------------------------------------------*/

/* Header */
#header, .site-header {
	padding: 40px 0 20px;
	background: var(--bg-content);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 30px;
}
#logo, .site-title a { color: #111; font-size: 2.2em; font-weight: bold; border: none; }
.description, .site-description { margin: .5em 0 0; color: var(--text-muted); }

/* Navigation (圆角胶囊菜单) */
#nav-menu, .main-navigation { margin: 25px 0 0; }
#nav-menu ul, .main-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#nav-menu li, .main-navigation li { display: block; }
#nav-menu a, .main-navigation a {
	display: block;
	padding: 6px 18px;
	border: 1px solid transparent;
	border-radius: 20px; /* 胶囊状圆角 */
	color: var(--text-main);
}
#nav-menu a:hover, #nav-menu .current a, .main-navigation .current-menu-item > a {
	background: var(--bg-body);
	color: var(--primary-color);
}

/* Search Box (圆角化) */
#search { position: relative; margin-top: 15px; }
#search input { border-radius: 20px; padding-right: 40px; background: var(--bg-body); border: none; }
#search button {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	background: transparent; color: var(--text-muted); padding: 0;
}

/* Posts */
.post, .type-post {
	padding: 25px;
	background: var(--bg-content);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	margin-bottom: 25px;
}
.post-title, .entry-title { margin: 0 0 .5em; font-size: 1.6em; }
.post-title a, .entry-title a { border: none; color: #111; }
.post-title a:hover, .entry-title a:hover { color: var(--primary-color); }

.post-meta, .entry-meta { margin-bottom: 15px; padding: 0; color: var(--text-muted); font-size: .9em; }
.post-meta li { display: inline-block; margin: 0 8px 0 0; padding-left: 12px; border-left: 1px solid var(--border-color); }
.post-meta li:first-child { margin-left: 0; padding-left: 0; border: none; }

.post-content, .entry-content { line-height: 1.7; word-wrap: break-word; }
.post-content hr, .entry-content hr { margin: 2em auto; width: 100px; border-top: 2px solid var(--border-color); }

/* Pagination (圆角翻页) */
.page-navigator, .pagination { list-style: none; margin: 30px 0; padding: 0; text-align: center; }
.page-navigator li, .pagination .page-numbers { display: inline-block; margin: 0 4px; }
.page-navigator a, .pagination a.page-numbers, .pagination span.page-numbers {
	display: inline-block; padding: 5px 15px; border-radius: var(--border-radius); border: 1px solid var(--border-color); background: var(--bg-content); color: var(--text-main);
}
.page-navigator a:hover, .pagination a.page-numbers:hover { background: var(--bg-body); color: var(--primary-color); border-bottom: 1px solid var(--border-color); }
.page-navigator .current a, .pagination .current { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Comments */
#comments { padding-top: 20px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li {
	padding: 20px;
	margin-top: 15px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background: var(--bg-content);
}
.comment-author .avatar { float: left; margin-right: 15px; border-radius: 50%; }
.comment-meta { margin-bottom: 10px; font-size: 0.9em; color: var(--text-muted); }
.comment-reply-link { display: inline-block; margin-top: 10px; font-size: 0.9em; }

/* Widgets */
#secondary { word-wrap: break-word; }
.widget {
	margin-bottom: 30px;
	background: var(--bg-content);
	padding: 20px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}
.widget-title { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; border-left: 4px solid var(--primary-color); padding-left: 10px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
.widget li:last-child { border-bottom: none; }

/* Footer */
#footer, .site-footer { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 0.9em; border-top: 1px solid var(--border-color); margin-top: 40px; }

/*--------------------------------------------------------------
# Utilities (WP 必需类名与无障碍)
--------------------------------------------------------------*/

/* Accessibility (无障碍优化：完美合并了 WP 和 Typecho 的要求) */
.screen-reader-text, .sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus, .sr-only.focusable:focus {
	background-color: var(--bg-content);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--primary-color);
	display: block;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Alignments */
.alignleft { float: left; margin: 0 1.5em 1.5em 0; }
.alignright { float: right; margin: 0 0 1.5em 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }

/* Captions */
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { text-align: center; color: var(--text-muted); font-size: 0.9em; margin-top: 10px; }