/*
	Theme Name: 352m Blog
	Theme URI: https://www.352m.com/
	Description: 三五二萌文网博客主题，重做视觉与配色（橙色主色 + 青绿/紫色强调，苹果风格排版与留白），保留原布局结构，补齐 SEO / GEO 支持。
	Author: 352m
	Version: 1.1
*/
/* 依赖 Bootstrap 5.3.3（assets/bootstrap/），加载顺序见 functions.php 里的 footerScript() */

/* ==================== 配色变量 ==================== */
:root{
	--color-bg: #FFF8F2;
	--color-bg-alt: #FFEDE0;
	--color-surface: #FFFFFF;
	--color-text: #2E2622;
	--color-text-muted: #85786C;
	--color-border: #F0DCC8;

	/* 主色：橙色系 */
	--color-accent-50: #FFB67A;
	--color-accent-200: #FF8E53;
	--color-accent-500: #E46828;
	--color-accent-900: #9F2600;
	--color-accent: var(--color-accent-500);
	--color-accent-hover: var(--color-accent-900);
	--color-accent-soft: var(--color-accent-50);

	/* 强调色：青绿（点赞/成功类状态） */
	--color-success-200: #00D294;
	--color-success-500: #00B176;
	--color-success-900: #007942;
	--color-success: var(--color-success-500);
	--color-success-hover: var(--color-success-900);

	/* 标签/次要强调：不用紫色了，统一走橙色系的浅色变体 */
	--color-secondary-200: var(--color-accent-50);
	--color-secondary-500: var(--color-accent-500);
	--color-secondary-900: var(--color-accent-900);
	--color-secondary: var(--color-secondary-500);
	--color-secondary-hover: var(--color-secondary-900);

	/* 顶部/导航/页脚深色区域：深橙棕色，跟主色同一色系，不再用紫色 */
	--color-deep: #5C2A0F;
	--color-header-bg: var(--color-deep);
	--color-header-text: #FCE3CE;
	--color-header-text-muted: #E0A87C;

	--color-danger: var(--color-accent-900);
	--container-max: 1520px;
	--sidebar-width: 360px;
	--gutter: 32px;

	/* 苹果风格：卡片用柔和阴影代替生硬描边，圆角更大更"软" */
	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 10px;
	--shadow-sm: 0 1px 2px rgba(30,20,10,.04), 0 1px 6px rgba(30,20,10,.05);
	--shadow-md: 0 6px 24px rgba(30,20,10,.07);

	/* 系统字体优先；中文回退到系统自带的苹方/雅黑；再往后是免费商用的 Noto Sans SC 兜底 */
	--font-system: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC",
		"Helvetica Neue", "Segoe UI", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;

	/* 映射到 Bootstrap 5 的设计 token，让页面里任何标准 Bootstrap 组件也跟着走同一套配色 */
	--bs-body-bg: var(--color-bg);
	--bs-body-color: var(--color-text);
	--bs-primary: var(--color-accent);
	--bs-primary-rgb: 228, 104, 40;
	--bs-link-color: var(--color-accent);
	--bs-link-hover-color: var(--color-accent-hover);
	--bs-border-color: var(--color-border);
	--bs-danger: var(--color-danger);
	--bs-success: var(--color-success);
	--bs-font-sans-serif: var(--font-system);
}

/* ==================== 基础 / 重置 ==================== */
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
body{
	margin:0;
	font-family:var(--font-system);
	font-size:15px;
	line-height:1.75;
	color:var(--color-text);
	background-color:var(--color-bg);
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
}
a{ color:var(--color-accent); text-decoration:none; transition:color .15s ease; }
a:hover, a:focus{ color:var(--color-accent-hover); text-decoration:none; }
img{ max-width:100%; height:auto; vertical-align:middle; border:0; }
ul, ol{ padding:0; margin:0; list-style:none; }
li{ line-height:1.6; }
hr{ margin:32px 0; border:0; border-top:1px solid var(--color-border); }
::selection{ background:var(--color-accent-soft); color:var(--color-header-bg); }
.pull-right{ float:right; }
.pull-left{ float:left; }
.muted{ color:var(--color-text-muted); margin-right:24px; display:inline-block; }
.muted .fa{ margin-right:6px; }
.text-success{ color:var(--color-success); }
.text-danger, .text-error{ color:var(--color-danger); }
.clearfix:before, .clearfix:after{ content:""; display:table; }
.clearfix:after{ clear:both; }

.container{ max-width:var(--container-max); margin:0 auto 40px; position:relative; padding:0 20px; box-sizing:border-box; }
.container:before, .container:after{ content:""; display:table; }
.container:after{ clear:both; }
.container-inner{ max-width:var(--container-max); width:100%; margin:0 auto; position:relative; box-sizing:border-box; }

/* ==================== 顶部 header / logo / 搜索 / 导航 ====================
   改版：第一行"左 logo + 右搜索"，第二行才是导航——比原来"大 logo 单独一行
   + 导航另一行"矮很多，头部不再占那么大块屏幕。 */
.header{ width:100%; background:var(--color-header-bg); position:relative; z-index:999; }
.header-top{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 20px;
}
.site-logo{ display:block; }
.site-logo .site-title{ display:inline-block; margin:0; padding:0; cursor:pointer; font-weight:400; }
.site-mono{
	letter-spacing:-.5px;
	color:var(--color-accent-soft);
	font-size:24px;
	font-weight:700;
	margin:0; padding:0;
	transition:color .2s ease;
}
.site-logo .site-title:hover .site-mono{ color:#fff; }

.header-search{ position:relative; flex-shrink:0; }

.navbar{
	background-color: var(--color-header-bg);
	border-top:1px solid rgba(255,255,255,.08);
	clear:both;
}
.navbar .nav{ position:relative; display:block; margin:0 auto; max-width:var(--container-max); font-size:14px; padding:0 20px; box-sizing:border-box; }
.navbar .nav:after{ content:""; display:table; clear:both; }
.navbar .nav>li{ position:relative; float:left; }
.navbar .nav li a{ display:block; padding:13px 18px; color:var(--color-header-text); transition:background-color .15s ease; }
.navbar .nav li a:hover, .navbar .nav li a:focus{ background-color:var(--color-accent); color:#fff; }
.navbar .nav li.current-menu-item>a, .navbar .nav li.current_page_item>a{ background-color:var(--color-accent); color:#fff; }
.navbar .nav>li>ul{ position:absolute; left:0; top:100%; min-width:160px; background:var(--color-header-bg); display:none; z-index:10; padding:8px 0; border-radius:0 0 var(--radius-sm) var(--radius-sm); box-shadow:var(--shadow-md); }
.navbar .nav>li:hover>ul{ display:block; }
.navbar .nav>li>ul>li>a{ padding:10px 20px; color:var(--color-header-text); }
.navbar .nav>li>ul>li>a:hover{ background:var(--color-accent); color:#fff; }
.screen-mini{ display:none; }
.navbar .screen-mini .btn{ background:var(--color-accent); border:0; padding:12px 18px; }

.toggle-search{
	padding:9px 14px;
	background:var(--color-accent);
	color:#fff; cursor:pointer;
	border-radius:var(--radius-sm);
	transition:opacity .15s ease;
}
.toggle-search:hover, .toggle-search.active{ opacity:.85; }
.search-expand{
	display:none; position:absolute; top:100%; right:0; margin-top:8px; width:280px;
	background:var(--color-accent); z-index:20;
	border-radius:var(--radius-sm);
	box-shadow:var(--shadow-md);
}
.search-expand-inner{ padding:10px; }
.search-expand .themeform input{ width:100%; border:0; outline:0; padding:10px 12px; border-radius:var(--radius-sm); }

.speedbar{
	background-color:transparent;
	color:var(--color-text-muted);
	padding:16px 0 8px;
	margin-bottom:0;
	overflow:hidden;
}

/* ==================== 内容双栏布局 ====================
   注意：.content-wrap 和 .sidebar 在模板里是 .container 下的并列兄弟节点（不是父子），
   get_sidebar() 是在 .content-wrap 关闭之后才输出的，所以不能指望在 .content-wrap 上
   开 flex 来排两栏——那样 .sidebar 完全排不到里面去，会直接掉到下面。
   这里用经典的浮动 + 负 margin 手法把两个兄弟节点摆成两栏（.container 已加 clearfix）。 */
.content-wrap{ width:100%; float:left; }
.content{ margin-right:calc(var(--sidebar-width) + var(--gutter)); min-width:0; }
.sidebar{
	float:left;
	width:var(--sidebar-width);
	margin-left:calc(var(--sidebar-width) * -1);
	position:relative;
}

/* ==================== 首页文章列表（excerpt 卡片） ==================== */
.excerpt{
	background-color:var(--color-surface);
	border:0;
	box-shadow:var(--shadow-sm);
	border-radius:var(--radius-lg);
	padding:28px 28px 24px;
	margin-bottom:24px;
	position:relative;
	transition:box-shadow .2s ease, transform .2s ease;
}
.excerpt:hover{ box-shadow:var(--shadow-md); }
.excerpt:after{ content:""; display:table; clear:both; }
.excerpt-nothumbnail{ padding-left:28px; }
.excerpt header{ margin:0 0 12px; }
.excerpt header .label{
	display:inline-block; margin-right:8px; padding:4px 12px;
	background:var(--color-accent); color:#fff; border-radius:100px; font-size:12px; font-weight:500;
}
.excerpt h2{ display:inline; font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.2px; }
.excerpt h2 a{ color:var(--color-text); }
.excerpt h2 a:hover{ color:var(--color-accent); }
.excerpt .focus{ float:left; width:200px; height:123px; margin:6px 24px 8px 0; overflow:hidden; border-radius:var(--radius-md); background:var(--color-bg-alt); }
.excerpt .focus a{ display:block; width:200px; height:123px; }
.excerpt .focus a img{ display:block; width:200px; height:123px; object-fit:cover; transition:transform .35s ease; }
.excerpt:hover .focus a img{ transform:scale(1.06); }
.excerpt .note{ display:block; color:var(--color-text-muted); margin:10px 0; line-height:1.85; }
.excerpt .auth-span{ margin:16px 0 0; overflow:hidden; line-height:2; }
.excerpt .action{ background:transparent!important; border:0; padding:0; color:var(--color-success)!important; }
.comm{
	position:absolute; right:24px; top:24px;
	background:var(--color-accent); color:#fff;
	padding:2px 10px; border-radius:100px; font-size:12px;
}

.archive-header{ background:var(--color-surface); box-shadow:var(--shadow-sm); padding:24px 28px; margin-bottom:24px; border-radius:var(--radius-lg); }
.archive-header h1{ font-size:22px; font-weight:700; color:var(--color-text); margin:0 0 6px; letter-spacing:-.3px; }
.archive-header-info{ color:var(--color-text-muted); margin:0; }

/* ==================== 单篇文章 ==================== */
.article-header{ padding:20px 32px 24px; background:var(--color-surface); box-shadow:var(--shadow-sm); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.article-title{ font-size:30px; font-weight:700; line-height:1.4; margin:12px 0; letter-spacing:-.4px; }
.article-title a{ color:var(--color-text); }
.article-header .meta{
	margin-top:16px; padding-top:16px;
	border-top:1px solid var(--color-border);
	display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px;
}
.article-header .meta .muted{ margin-right:0; font-size:13px; }

.breadcrumbs{ background:var(--color-surface); padding:14px 32px; margin-bottom:2px; font-size:13px; color:var(--color-text-muted); }
.breadcrumbs a{ color:var(--color-accent); }

.article-content{
	font-size:18px; line-height:1.95;
	background:var(--color-surface);
	padding:36px 32px;
	word-break:break-word;
}
.article-content p{ margin:0 0 22px; }
.article-content h2{
	font-size:21px; font-weight:700; margin:36px 0 20px; padding:10px 18px;
	border-left:4px solid var(--color-accent);
	background-color:var(--color-bg-alt);
	border-radius:0 var(--radius-sm) var(--radius-sm) 0;
	letter-spacing:-.2px;
}
.article-content h3{ font-size:19px; font-weight:700; margin:28px 0 16px; }
.article-content h4{ font-size:16px; font-weight:700; margin:22px 0 12px; }
.article-content a{ color:var(--color-accent); text-decoration:underline; text-underline-offset:2px; }
.article-content a:hover{ color:var(--color-accent-hover); }
.article-content ul, .article-content ol{ margin:12px 0 22px 28px; list-style:disc; }
.article-content ol{ list-style:decimal; }
.article-content table{ width:100%; border-collapse:collapse; margin-bottom:22px; border-radius:var(--radius-sm); overflow:hidden; }
.article-content table th, .article-content table td{ border:1px solid var(--color-border); padding:10px 14px; }
.article-content table th{ background:var(--color-accent-soft); }
.article-content blockquote{
	margin:22px 0; padding:16px 22px;
	border-left:3px solid var(--color-accent);
	background:var(--color-bg-alt); color:var(--color-text-muted);
	border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.article-content pre{
	background:var(--color-bg-alt);
	border-radius:var(--radius-sm);
	padding:16px 18px;
	margin:0 0 22px;
	font-size:14px;
	line-height:1.7;
	white-space:pre-wrap;
	overflow-wrap:break-word;
	word-break:break-word;
	overflow-x:auto;
}
.article-content code{
	font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
	background:var(--color-bg-alt);
	padding:2px 6px;
	border-radius:4px;
	font-size:.9em;
	word-break:break-word;
}
.article-content pre code{ background:none; padding:0; border-radius:0; }
.article-content .alignleft{ float:left; margin-right:18px; }
.article-content .alignright{ float:right; margin-left:18px; }
.article-content .aligncenter{ display:block; margin:0 auto; }
.article-content a.dl{
	display:inline-block; margin:14px 8px 14px 0; padding:10px 22px;
	background:var(--color-accent); color:#fff!important; border-radius:100px; text-decoration:none!important;
	transition:background-color .15s ease;
}
.article-content a.dl:hover{ background:var(--color-accent-hover); }

.article-social{ text-align:center; padding:32px; background:var(--color-surface); }
.action{
	display:inline-block; padding:10px 30px; margin:0 6px;
	background:var(--color-success); color:#fff; border-radius:100px; font-size:14px; font-weight:500;
	transition:background-color .15s ease, transform .15s ease;
}
.action:hover{ background:var(--color-success-hover); color:#fff; }
.action.actived{ background:var(--color-success-hover); }

.article-footer{ background:var(--color-surface); padding:20px 32px; }
.article-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.article-tags i{ color:var(--color-text-muted); margin-right:4px; }
.article-tags a{
	display:inline-block; padding:5px 14px; border-radius:100px;
	background:var(--color-secondary-200); color:var(--color-header-bg);
	transition:background-color .15s ease;
}
.article-tags a:hover{ background:var(--color-secondary); color:#fff; }

.article-nav{
	background:var(--color-surface);
	padding:20px 32px; overflow:hidden; font-size:14px; color:var(--color-text-muted);
	border-radius:0 0 var(--radius-lg) var(--radius-lg);
	box-shadow:var(--shadow-sm);
}
.article-nav-next{ float:right; }

/* 注意：modules/related.php 里 .relates 是嵌在 .related_posts 内部的（父子关系，不是兄弟），
   两个都套完整卡片样式（阴影+圆角+padding）会变成"卡片里套卡片"，看着很乱。
   改成 .related_posts 是唯一外层卡片，.relates 只是里面的一个分节，用一条分隔线隔开。 */
.related_posts{ background:var(--color-surface); box-shadow:var(--shadow-sm); margin:24px 0; padding:24px 28px; border-radius:var(--radius-lg); }
.related_posts:after{ content:""; display:table; clear:both; }
.relates{ margin-top:20px; padding-top:20px; border-top:1px solid var(--color-border); }
.relates h3{ font-size:16px; font-weight:700; margin:0 0 14px; color:var(--color-text); }
.relates li{ float:left; width:49%; line-height:1.8; color:var(--color-text-muted); }
.related_box{ float:left; width:25%; padding-bottom:12px; box-sizing:border-box; padding-right:12px; }
.related_box img{ width:100%; height:auto; aspect-ratio:185/110; object-fit:cover; display:block; border-radius:var(--radius-sm); background:var(--color-bg-alt); }
.related_box .r_title{ font-size:13px; padding:8px 4px; }

/* ==================== 侧栏 widget ==================== */
.social{ text-align:center; padding:20px 0; }
.social a{
	display:inline-block; width:36px; height:36px; line-height:36px;
	margin:0 5px; border-radius:50%; background:var(--color-accent); color:#fff!important;
	transition:background-color .15s ease, transform .15s ease;
}
.social a:hover{ background:var(--color-accent-hover); transform:translateY(-2px); }

.widget{
	background:var(--color-surface);
	box-shadow:var(--shadow-sm);
	border-radius:var(--radius-lg);
	margin-bottom:24px;
	overflow:hidden;
}
.widget .title{ position:relative; height:auto; margin:0; padding:18px 22px; background:var(--color-bg-alt); }
.widget .title h2{ font-size:16px; font-weight:700; color:var(--color-text); margin:0; width:auto; line-height:1.4; letter-spacing:-.2px; }

/* 通用文本/自定义 HTML 类 widget（比如"网站已运行时间"这种自带样式的小工具）：
   只兜底容器的内边距和换行方式，不覆盖 widget 自己内容里的样式/脚本。 */
.widget_text, .widget_block, .widget_custom_html{ padding:20px 22px; box-sizing:border-box; }
.widget_text .textwidget, .widget_block > *{ max-width:100%; overflow-wrap:break-word; word-break:break-word; line-height:1.8; text-align:center; box-sizing:border-box; }

/* "网站已运行时间" 这个 #sitetime 明确要求不换行——它的行内 style 只设了颜色和行高，
   没设字号，所以这里补一个偏小的字号保证 360px 侧栏宽度下一行放得下。 */
#sitetime{ white-space:nowrap; font-size:13px; }

/* "友情链接" 自定义 HTML 小工具用的是 .f-link，原来完全没样式，列表很朴素；
   小工具自己的 <ul style="padding:..."> 是行内样式，要用 !important 才盖得掉。 */
.f-link{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:2px 8px;
	list-style:none!important;
	padding:4px 0!important;
	margin:0!important;
	text-align:left;
}
.f-link li{ min-width:0; margin:0; }
.f-link li a{
	display:block; overflow:hidden; padding:10px 12px; border-radius:var(--radius-sm);
	color:var(--color-text); transition:background-color .15s ease, color .15s ease;
	text-align:left; text-overflow:ellipsis; white-space:nowrap;
}
.f-link li a:hover{ background:var(--color-bg-alt); color:var(--color-accent); }

.widget_categories ul, .widget_archive ul{ padding:18px 22px; overflow:hidden; }
.widget_categories li, .widget_archive li{ float:left; width:50%; margin-bottom:10px; color:var(--color-text-muted); }
.widget_nav_menu ul, .widget_links ul, .widget_pages ul{ padding:16px 22px; }
.widget_nav_menu li{ margin-bottom:12px; }
.widget_links li{ width:50%; float:left; }
.widget_pages li{ float:left; width:50%; margin-bottom:10px; }
.widget_meta ul{ padding:10px 22px 18px; }
.widget_recent_entries li{ padding:12px 22px; border-bottom:1px solid var(--color-border); }
.widget_recent_entries li:last-child{ border-bottom:0; }
.widget_recent_entries span{ display:block; font-size:12px; color:var(--color-text-muted); margin-top:2px; }
.widget_calendar table{ width:100%; text-align:center; margin:0; }
.widget_calendar caption{ padding:14px 0; }
.widget_calendar td, .widget_calendar th{ padding:8px; border:1px solid var(--color-border); }
.widget_calendar thead th{ background:var(--color-bg-alt); }
.widget_calendar td a{ display:block; background:var(--color-accent); color:#fff; border-radius:6px; }

.readers{ padding:22px; overflow:hidden; }
.readers a{ display:inline-block; width:25%; text-align:center; font-size:12px; color:var(--color-text-muted); }
.readers a img{ border-radius:50%; margin-bottom:6px; }

.tag-clouds, .tagcloud{ padding:18px 22px; overflow:hidden; }
.tag-clouds li{ float:left; width:50%; margin-bottom:10px; color:var(--color-text-muted); }
.tagcloud a{ display:inline-block; margin:0 6px 8px 0; padding:4px 12px; background:var(--color-secondary-200); color:var(--color-header-bg); border-radius:100px; }

.hot-posts{ padding:18px 22px; }
.hot-posts li{ border-bottom:1px solid var(--color-border); padding:10px 0; }

/* 7 个自定义 widget（d_banner / d_textbanner / d_subscribe / d_reader / d_comment / d_tag / d_postlist） */
.d_banner img{ display:block; width:100%; }
.d_banner_inner{ overflow:hidden; }
.d_banner .sell{ display:block; text-align:center; height:100px; line-height:100px; color:var(--color-text-muted); border:1px dashed var(--color-border); border-radius:var(--radius-md); }

.d_textbanner a{ display:block; padding:20px 22px; }
.d_textbanner h3{ font-size:17px; margin:0 0 6px; }
.d_textbanner p{ color:var(--color-text-muted); margin:0; }

.d_subscribe form{ padding:18px 22px; }
.d_subscribe p{ color:var(--color-text-muted); margin-bottom:10px; }
.d_subscribe input.rsstxt{ width:100%; padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); margin-bottom:10px; box-sizing:border-box; }
.d_subscribe .rssbutton{ background:var(--color-accent); color:#fff; border:0; padding:8px 20px; border-radius:100px; }

.d_reader ul{ padding:18px 18px 8px; overflow:hidden; }
.d_reader li{ float:left; width:40px; height:40px; margin:0 8px 8px 0; }
.d_reader li a{ display:block; color:#fff; }

.d_comment ul{ padding:12px 0 18px; }
.d_comment li{ padding:12px 22px; overflow:hidden; }
.d_comment .avatar{ float:left; width:40px; border-radius:var(--radius-sm); margin-right:12px; }
.d_comment div.muted{
	background:var(--color-bg-alt); border-radius:var(--radius-sm);
	padding:10px 12px; font-size:13px; margin:0;
}

.d_tags{ padding:18px 18px 10px; }
.d_tags a{
	display:inline-block; margin:0 8px 8px 0; padding:5px 14px;
	background:var(--color-secondary); color:#fff; border-radius:100px; opacity:.9;
}
.d_tags a:hover{ opacity:1; }

.d_postlist ul{ padding:12px 22px 18px; }
.d_postlist li a{ display:block; padding:10px 0; border-bottom:1px solid var(--color-border); position:relative; }
.d_postlist li:last-child a{ border-bottom:0; }
.d_postlist .thumbnail{ float:left; width:100px; height:64px; margin-right:14px; border-radius:var(--radius-sm); overflow:hidden; background:var(--color-bg-alt); }
.d_postlist .thumbnail img{ width:100px; height:64px; object-fit:cover; display:block; }
.d_postlist .text{ display:block; }
.d_postlist .nopic li a{ padding:12px 0; }

/* ==================== 分页 / 评论 ==================== */
.pagination{ padding:24px 0; text-align:center; background:transparent; }
.pagination ul{ display:inline-block; }
.pagination ul>li{ display:inline-block; margin:0 3px; }
.pagination ul>li>a, .pagination ul>li>span{
	display:inline-block; padding:8px 18px; border-radius:100px;
	background:var(--color-surface); box-shadow:var(--shadow-sm); color:var(--color-text);
	transition:background-color .15s ease, color .15s ease;
}
.pagination ul>li>a:hover{ background:var(--color-accent); color:#fff; }
.pagination ul>.active>a, .pagination ul>.active>span{ background:var(--color-accent); color:#fff; }

.commentnav{ text-align:center; padding:24px; }
.commentnav a, .commentnav .current{ display:inline-block; padding:6px 16px; margin:0 3px; background:var(--color-surface); box-shadow:var(--shadow-sm); border-radius:100px; }
.commentnav .current{ background:var(--color-accent); color:#fff; }

#comments{ font-size:16px; font-weight:600; padding:24px 32px 8px; background:var(--color-surface); color:var(--color-accent); }
.commentlist{ background:var(--color-surface); padding:8px 32px 16px; }
.comment{ padding:16px 0; }
.c-avatar .avatar{ width:48px; height:48px; border-radius:var(--radius-sm); position:absolute; }
.c-main{
	margin-left:64px; background:var(--color-bg-alt);
	border-radius:var(--radius-md); padding:14px 18px; font-size:14px;
}
.c-meta{ color:var(--color-text-muted); font-size:13px; }
.c-author{ margin-right:10px; font-weight:600; color:var(--color-text); }
.comment-reply-link{ color:var(--color-accent); margin-left:8px; }
.children .comment{ margin-left:56px; }
.c-approved{ background:var(--color-accent-soft); border-radius:100px; padding:2px 10px; }
#respond{ background:var(--color-surface); padding:24px 32px 32px; border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-sm); }
#commentform textarea, #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"]{
	border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 14px;
}
.comt-submit{ background:var(--color-accent); color:#fff; border:0; border-radius:100px; }
.comt-submit:hover{ background:var(--color-accent-hover); }

/* ==================== 归档 / 页面模板 ==================== */
.archives .item{ overflow:hidden; margin-bottom:22px; border-bottom:1px solid var(--color-border); padding-bottom:18px; }
.archives h3{ color:var(--color-accent); font-size:19px; font-weight:700; }
.archives-list li{ list-style:disc; margin-left:20px; }

/* 自定义 page 模板（友情链接/归档/标签墙等 pages/*.php）用的两栏布局：
   .pagesidebar 是绝对定位贴左侧，.pagecontent 用 margin-left 让出空间，
   父级 .pagewrapper 必须 position:relative 撑起这个上下文——这几行之前重写时漏掉了，
   导致侧边菜单和内容区没法并排，页面看起来是乱的。 */
.pagewrapper{
	background:var(--color-surface);
	position:relative;
	border-radius:var(--radius-lg);
	overflow:hidden;
	box-shadow:var(--shadow-sm);
}
.pagesidebar{
	position:absolute; top:0; left:0; bottom:0; width:200px;
	background:var(--color-bg-alt);
}
.pagesider-menu{ padding:12px 0; }
.pagesider-menu a{ display:block; padding:12px 20px; color:var(--color-text-muted); border-left:3px solid transparent; }
.pagesider-menu a:hover, .pagesider-menu li.current_page_item a{ background:var(--color-surface); color:var(--color-accent); border-left-color:var(--color-accent); }
.pagecontent{ margin-left:200px; min-height:400px; padding:32px; }
.pageheader{ background:transparent; padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--color-border); }
.pageheader h1{ font-size:24px; font-weight:700; margin:0; letter-spacing:-.3px; }
.pageheader h1 a{ color:var(--color-text); }

/* 友情链接列表 */
.link-content{ padding:8px 0; }
.link-content li{
	float:left; width:16.6%; min-width:110px; text-align:center;
	font-size:13px; margin-bottom:20px; box-sizing:border-box; padding:0 8px;
}
.link-content li a{ display:block; color:var(--color-text); }
.link-content li img{
	width:56px; height:56px; border-radius:50%;
	margin-bottom:8px; box-shadow:var(--shadow-sm);
	transition:transform .3s ease;
}
.link-content li:hover img{ transform:rotate(360deg); }
.link-content li .sitename{ display:block; color:var(--color-text-muted); }
.link-content li a:hover .sitename{ color:var(--color-accent); }

/* ==================== 广告位 / 其他 ==================== */
.banner{ text-align:center; overflow:hidden; }
.banner img{ display:block; margin:0 auto; }
.footer{ background:var(--color-header-bg); color:var(--color-header-text-muted); margin-top:40px; font-size:13px; line-height:1.9; }
.footer-inner{ max-width:var(--container-max); margin:0 auto; padding:32px 20px; text-align:center; }
.footer a{ color:var(--color-header-text-muted); }
.footer a:hover{ color:#fff; }
.footer .copyright{ float:none; }
.footer .trackcode{ float:none; }
.footer .beian-row{
	display:flex; align-items:center; justify-content:center; gap:6px;
	margin:10px auto 0; padding:0;
}
.footer .beian-row img{ display:inline-block; vertical-align:middle; opacity:.85; }

.rollto{ position:fixed; right:24px; bottom:64px; z-index:999; }
.rollto .btn{ background:var(--color-accent); color:#fff; border:0; border-radius:50%; width:40px; height:40px; box-shadow:var(--shadow-md); }

/* Font Awesome 图标颜色跟随正文，不强制发白 */
.fa{ color:inherit; }

/* ==================== 响应式 ==================== */
@media (max-width: 991px){
	.content{ margin-right:0; }
	.sidebar{ float:none; width:100%; margin-left:0; }
	.navbar .nav>li>a{ padding:12px 16px; }
	.container{ padding:0 16px; }
	.header-top{ padding:12px 16px; }
}
@media (max-width: 767px){
	.article-title{ font-size:22px; }
	.article-content{ padding:24px 20px; font-size:16px; }
	.article-header, .article-footer, .article-nav, .article-social, .breadcrumbs{ padding-left:20px; padding-right:20px; }
	.excerpt{ padding:20px; }
	.excerpt .focus, .excerpt .focus a, .excerpt .focus a img{ width:100px; height:64px; }
	.related_box{ width:50%; }
	.speedbar, .banner{ display:none; }
	.pagesidebar{ position:static; width:100%; }
	.pagecontent{ margin-left:0; }
	.link-content li{ width:33.3%; }
}