/**
 * muoce-design WP 插件 · iknow + Bulma 0.9 精准覆盖
 * 目标：把 zs.guoj.com 的视觉从 Bulma 默认主色铺满风 → muoce v1.2 师法 Anthropic / Claude 的纸面克制风
 * 加载顺序：tokens.css 在前定义所有 --mu-* 变量；本文件依赖之
 * 版本：1.2.0 · 2026-05-25
 *
 * ★ 设计目标（一句话）：「让 zs.guoj.com 看起来像 anthropic.com 的某一页」
 *
 * 覆盖策略：
 *   1. 不删除 Bulma；用更高优先级或 !important 覆盖关键属性
 *   2. 将 Bulma 主色 (.is-primary) 改为 warm-50 米白 + deep 暖近黑文字
 *   3. .box 卡片去阴影改 1px 温暖边线
 *   4. 标题 .title 全部走思源宋体
 *   5. .panel-block 列表项 hover 走主色 50（极淡）
 */

/* =========================================================================
   1) 全局基线：背景 / 文字 / 字体
   ========================================================================= */

html, body {
	background: var(--mu-color-surface-page) !important;        /* warm-50 #FAF9F5 */
	color: var(--mu-color-text-secondary) !important;            /* charcoal #6F6E6B */
	font-family: 'Noto Sans SC', var(--mu-font-sans) !important;
	font-size: 16px;
	line-height: var(--mu-line-height-normal);
}

/* WP body class 加调性 hook */
body.zh-CN,
body[class*="postid-"],
body.home,
body.archive,
body.search,
body.single,
body.page {
	background: var(--mu-color-surface-page) !important;
}

/* Bulma 默认正文颜色 */
.content,
.content p,
.subtitle:not(.is-spaced) + .title {
	color: var(--mu-color-text-secondary) !important;
}

/* =========================================================================
   2) 标题 → 思源宋体（杂志感）
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.title,
.subtitle,
.hero .title,
.hero .subtitle {
	font-family: 'Noto Serif SC', var(--mu-font-serif) !important;
	color: var(--mu-color-text-primary) !important;              /* deep #1F1F1E */
	font-weight: 500;
	letter-spacing: -0.005em;
}

/* Bulma is-family-secondary 在 iknow 用于 .hero h1，本来是 monospace，强制改宋体 */
.is-family-secondary {
	font-family: 'Noto Serif SC', var(--mu-font-serif) !important;
}

/* Bulma is-uppercase 让中文 letter-spacing 难看，关掉 */
.title.is-uppercase,
.is-uppercase {
	text-transform: none !important;
	letter-spacing: 0.02em;
}

/* 副标题轻量化 */
.subtitle,
.hero .subtitle {
	color: var(--mu-color-text-secondary) !important;
	font-weight: 400 !important;
	font-family: 'Noto Sans SC', var(--mu-font-sans) !important; /* 副标题用无衬线，反差 */
}

/* =========================================================================
   3) Hero 区：从主色铺满 → 米白 + 深哑光（★ 核心改动）
   ========================================================================= */

/* 关键：iknow 首页用 .hero.is-primary.is-bold，单文用 .hero（默认） */
.hero.is-primary,
.hero.is-bold,
.hero.is-info,
.hero {
	background: var(--mu-color-surface-page) !important;
	background-image: none !important;
	color: var(--mu-color-text-primary) !important;
	border-bottom: 1px solid var(--mu-color-border-subtle);
}

.hero.is-primary .title,
.hero.is-primary .subtitle,
.hero .title,
.hero .subtitle {
	color: var(--mu-color-text-primary) !important;
}

.hero.is-primary .subtitle,
.hero .subtitle {
	color: var(--mu-color-text-secondary) !important;
}

/* Hero body 留白慷慨 */
.hero-body {
	padding: var(--mu-space-16) var(--mu-space-6) !important;
}

@media (min-width: 768px) {
	.hero-body {
		padding: var(--mu-space-20) var(--mu-space-6) !important;
	}
}

/* Hero 大标题杂志巨字 */
.hero .title.is-1 {
	font-size: var(--mu-font-size-display) !important;            /* 48px */
	font-weight: 500 !important;
}

@media (min-width: 1024px) {
	.hero .title.is-1 {
		font-size: var(--mu-font-size-editorial) !important;       /* 64px */
	}
}

.hero .title.is-3 {
	font-size: var(--mu-font-size-3xl) !important;
}

/* =========================================================================
   4) Navbar 顶部导航：从 Bulma 默认 → 纸面克制
   ========================================================================= */

.navbar {
	background: var(--mu-color-surface-card) !important;
	border-bottom: 1px solid var(--mu-color-border-subtle) !important;
	box-shadow: none !important;
	min-height: 56px;
}

.navbar-brand {
	min-height: 56px;
	align-items: center;
}

.navbar-item {
	color: var(--mu-color-text-secondary) !important;
	font-weight: 500;
	transition: color var(--mu-duration-fast) var(--mu-ease-out);
}

.navbar-item:hover,
.navbar-item.is-active,
.navbar-item:focus {
	background: transparent !important;
	color: var(--mu-color-primary-500) !important;                /* 主色仅在可点击 hover */
}

/* ★ navbar 装 12 个分类时紧凑化 + 允许换行（PC ≥1024） */
@media (min-width: 1024px) {
	.navbar-menu .navbar-start {
		display: flex !important;
		flex-wrap: wrap;                                          /* 装不下时自动换第二行 */
		align-items: center;
		gap: 0;
	}

	.navbar-start > .navbar-item,
	.navbar-start > a.navbar-item {
		padding: 8px 10px !important;                             /* 默认 12px → 10px 紧凑 */
		font-size: 14px !important;                               /* 中文菜单项 14px 更协调 */
		min-height: 40px !important;
		line-height: 1.4;
	}

	/* 超大屏（≥1280）恢复舒展一些 */
	@media (min-width: 1280px) {
		.navbar-start > .navbar-item,
		.navbar-start > a.navbar-item {
			padding: 8px 12px !important;
			font-size: 15px !important;
		}
	}
}

/* container 不要被 Bulma 1.0 默认的 1024px 卡死，PC 端给 navbar 更多宽度 */
@media (min-width: 1024px) {
	.navbar > .container {
		max-width: 1280px !important;
	}
}

/* 品牌字（站名）用衬线 —— 兜底：如 logo 图加载失败，文字依然好看 */
.navbar-item.has-text-orbitron,
.navbar-brand .navbar-item span {
	font-family: 'Noto Serif SC', var(--mu-font-serif) !important;
	color: var(--mu-color-text-primary) !important;
	font-size: 20px;
	letter-spacing: -0.005em;
}

/* Bulma .has-text-info 在 navbar 是站名颜色，覆盖为 deep */
.navbar .has-text-info {
	color: var(--mu-color-text-primary) !important;
}

/* ★ 用纯文字 Logo 替代 navbar 站名乱码（图小看不清，文字更稳） */
.navbar-brand > a.navbar-item:first-child {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 8px 16px !important;
	height: 56px;
}

.navbar-brand > a.navbar-item:first-child > span,
.navbar-brand > a.navbar-item:first-child > img {
	/* 隐藏 ?????? 乱码文字 + 任何旧的 custom_logo 图 */
	display: none !important;
}

.navbar-brand > a.navbar-item:first-child::before {
	content: 'MUOME';
	display: inline-block;
	font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.18em;                    /* 字间距大 = 高级感 */
	color: var(--mu-color-text-primary);       /* deep #1F1F1E */
	line-height: 1;
	padding-left: 2px;                          /* 让 letter-spacing 视觉上居中 */
}

.navbar-brand > a.navbar-item:first-child::after {
	/* 末尾一个小蓝点 mark，承接 Logo 的设计语言 */
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mu-color-primary-500);
	margin-left: 2px;
	margin-top: 12px;                           /* 拉到字基线下方 */
	align-self: flex-end;
	transform: translateY(-2px);
}

@media (max-width: 480px) {
	.navbar-brand > a.navbar-item:first-child::before {
		font-size: 18px;
		letter-spacing: 0.14em;
	}
}

/* 移动端 burger 按钮 */
.navbar-burger {
	min-height: 44px;                                              /* ★ 触控 */
	width: 56px;
	color: var(--mu-color-text-secondary) !important;
}
.navbar-burger:hover {
	background: var(--mu-color-warm-100) !important;
}

/* 移动端展开菜单纸面背景 */
@media (max-width: 1023px) {
	.navbar-menu.is-active {
		background: var(--mu-color-surface-page) !important;
		box-shadow: var(--mu-shadow-md);
		padding: var(--mu-space-3) 0;
	}
	.navbar-menu .navbar-item {
		min-height: 48px;
		padding-left: var(--mu-space-5);
	}
}

/* =========================================================================
   5) Section / Container：留白慷慨
   ========================================================================= */

.section {
	padding: var(--mu-space-12) var(--mu-space-5) !important;
	background: transparent !important;
}

@media (min-width: 768px) {
	.section {
		padding: var(--mu-space-16) var(--mu-space-6) !important;
	}
}

.container {
	max-width: var(--mu-container-pc-md) !important;              /* 1024 */
}

/* 单文阅读限宽 (杂志感) */
.single .container,
.page .container {
	max-width: var(--mu-container-pc-editorial) !important;       /* 880 */
}

/* =========================================================================
   6) .box 卡片：去阴影改温暖边线（★ Claude 风核心改动）
   ========================================================================= */

.box {
	background: var(--mu-color-surface-card) !important;
	border: 1px solid var(--mu-color-border-subtle) !important;
	border-radius: var(--mu-radius-lg) !important;                /* 6px 书页感 */
	box-shadow: none !important;
	padding: var(--mu-space-2) !important;                        /* 内部 panel-block 自己有 padding */
	color: var(--mu-color-text-secondary);
}

/* =========================================================================
   7) Panel-block 文章列表项：iknow 首页核心
   ========================================================================= */

.panel-block {
	color: var(--mu-color-text-primary) !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--mu-color-border-subtle) !important;
	padding: var(--mu-space-4) var(--mu-space-5) !important;
	min-height: var(--mu-touch-list-item);                         /* 56 */
	font-size: var(--mu-font-size-base) !important;
	font-weight: 500;
	transition: background var(--mu-duration-fast) var(--mu-ease-out);
}

.panel-block:last-child {
	border-bottom: none !important;
}

.panel-block:hover,
.panel-block:focus {
	background: var(--mu-color-warm-100) !important;
	color: var(--mu-color-primary-600) !important;
}

.panel-block .panel-icon {
	color: var(--mu-color-wood-medium) !important;                /* 文档图标走木色，安邸感 */
	margin-right: var(--mu-space-3);
}

/* =========================================================================
   8) 文章分类入口（template-iknow-home.php 的卡片）
   ========================================================================= */

.column .box .title,
.column .box .subtitle {
	margin-bottom: var(--mu-space-2);
}

.column .box a.has-text-info,
.column .box a {
	color: var(--mu-color-primary-500) !important;
}

/* =========================================================================
   9) 按钮：Bulma .button + iknow CTA
   ========================================================================= */

.button {
	min-height: var(--mu-touch-min) !important;                   /* 44 */
	padding: 0 var(--mu-space-4) !important;
	border-radius: var(--mu-radius-md) !important;                /* 4px */
	font-family: 'Noto Sans SC', var(--mu-font-sans) !important;
	font-weight: 500;
	font-size: var(--mu-font-size-base) !important;
	border: 1px solid var(--mu-color-border-default) !important;
	background: var(--mu-color-surface-card) !important;
	color: var(--mu-color-text-primary) !important;
	box-shadow: none !important;
	transition: background var(--mu-duration-fast) var(--mu-ease-out),
	            border-color var(--mu-duration-fast) var(--mu-ease-out);
}

.button:hover {
	background: var(--mu-color-warm-100) !important;
	border-color: var(--mu-color-text-secondary) !important;
}

.button.is-primary {
	background: var(--mu-color-primary-500) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.button.is-primary:hover {
	background: var(--mu-color-primary-600) !important;
}

.button.is-info,
.button.is-link {
	background: transparent !important;
	color: var(--mu-color-primary-500) !important;
	border-color: var(--mu-color-primary-500) !important;
}

/* =========================================================================
   10) 输入框 / 搜索 (Hero 内的 search form)
   ========================================================================= */

.input,
.textarea,
input[type="text"],
input[type="search"],
input[type="email"] {
	font-size: 16px !important;                                    /* iOS 防缩放 */
	min-height: var(--mu-touch-min) !important;
	background: var(--mu-color-surface-card) !important;
	border: 1px solid var(--mu-color-border-default) !important;
	border-radius: var(--mu-radius-md) !important;
	color: var(--mu-color-text-primary) !important;
	box-shadow: none !important;
	padding: 0 var(--mu-space-3);
}

.input:focus,
.textarea:focus {
	border-color: var(--mu-color-border-focus) !important;
	box-shadow: var(--mu-shadow-focus-ring) !important;
}

.input::placeholder,
.textarea::placeholder {
	color: var(--mu-color-text-tertiary) !important;
}

/* Hero 内的搜索框居中限宽 */
.hero .search-form,
.hero .searchform {
	max-width: 480px;
	margin: var(--mu-space-6) auto 0;
	display: flex;
	gap: var(--mu-space-2);
}

/* =========================================================================
   11) Sidebar / Widget
   ========================================================================= */

.widget {
	background: var(--mu-color-surface-card);
	border: 1px solid var(--mu-color-border-subtle);
	border-radius: var(--mu-radius-lg);
	padding: var(--mu-space-5);
	margin-bottom: var(--mu-space-4);
}

.widget-title,
.widget h2,
.widget h3 {
	font-family: 'Noto Serif SC', var(--mu-font-serif) !important;
	font-size: var(--mu-font-size-lg) !important;
	color: var(--mu-color-text-primary) !important;
	margin: 0 0 var(--mu-space-3) 0;
	padding-bottom: var(--mu-space-2);
	border-bottom: 1px solid var(--mu-color-border-subtle);
}

.widget ul,
.widget ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget li {
	padding: var(--mu-space-2) 0;
	border-bottom: 1px solid var(--mu-color-border-subtle);
}
.widget li:last-child { border-bottom: none; }

.widget a {
	color: var(--mu-color-text-secondary) !important;
	text-decoration: none;
}
.widget a:hover {
	color: var(--mu-color-primary-500) !important;
}

/* =========================================================================
   12) 文章正文（.content / .entry-content）
   ========================================================================= */

.content,
.entry-content,
article .content {
	font-size: 17px;                                              /* 阅读字号略大于全局 */
	line-height: var(--mu-line-height-relaxed);                   /* 1.8 杂志感 */
	color: var(--mu-color-text-secondary);
}

.content h2,
.content h3,
.entry-content h2,
.entry-content h3 {
	font-family: 'Noto Serif SC', var(--mu-font-serif);
	color: var(--mu-color-text-primary);
	margin-top: var(--mu-space-10);
	margin-bottom: var(--mu-space-4);
}

.content h2,
.entry-content h2 {
	font-size: var(--mu-font-size-2xl);
}

.content h3,
.entry-content h3 {
	font-size: var(--mu-font-size-xl);
}

.content p,
.entry-content p {
	margin: 0 0 var(--mu-space-5);
}

/* 链接 */
.content a,
.entry-content a,
a:not(.button):not(.panel-block):not(.navbar-item) {
	color: var(--mu-color-primary-500);
	text-decoration: underline;
	text-decoration-color: var(--mu-color-primary-100);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--mu-duration-fast) var(--mu-ease-out);
}

.content a:hover,
.entry-content a:hover {
	text-decoration-color: var(--mu-color-primary-500);
}

/* 引用块 */
.content blockquote,
.entry-content blockquote {
	margin: var(--mu-space-6) 0;
	padding: var(--mu-space-3) var(--mu-space-5);
	border-left: 3px solid var(--mu-color-wood-medium);
	background: var(--mu-color-warm-100);
	color: var(--mu-color-text-primary);
	font-family: 'Noto Serif SC', var(--mu-font-serif);
	font-size: var(--mu-font-size-lg);
	line-height: var(--mu-line-height-relaxed);
}

/* 代码块 */
.content pre,
.entry-content pre,
.content code,
.entry-content code {
	background: var(--mu-color-warm-100);
	border: 1px solid var(--mu-color-border-subtle);
	border-radius: var(--mu-radius-md);
	font-family: var(--mu-font-mono);
}

.content pre,
.entry-content pre {
	padding: var(--mu-space-4);
	overflow-x: auto;
	font-size: 14px;
}

.content code,
.entry-content code {
	padding: 2px 6px;
	font-size: 0.92em;
}

.content img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--mu-radius-lg);
	margin: var(--mu-space-6) 0;
}

/* =========================================================================
   13) 面包屑（iknow 提供）
   ========================================================================= */

.breadcrumb {
	font-size: var(--mu-font-size-sm);
	margin-bottom: var(--mu-space-4) !important;
}

.breadcrumb a {
	color: var(--mu-color-text-tertiary) !important;
	padding: 0 var(--mu-space-2);
}

.breadcrumb a:hover {
	color: var(--mu-color-primary-500) !important;
}

.breadcrumb li.is-active a {
	color: var(--mu-color-text-primary) !important;
	font-weight: 500;
}

/* =========================================================================
   14) 分页
   ========================================================================= */

.pagination,
.pagination-list {
	font-family: var(--mu-font-sans);
}

.pagination-link,
.pagination-previous,
.pagination-next {
	min-height: 40px !important;
	min-width: 40px !important;
	border-radius: var(--mu-radius-md) !important;
	border: 1px solid var(--mu-color-border-subtle) !important;
	background: var(--mu-color-surface-card) !important;
	color: var(--mu-color-text-secondary) !important;
}

.pagination-link:hover,
.pagination-previous:hover,
.pagination-next:hover {
	border-color: var(--mu-color-text-secondary) !important;
	color: var(--mu-color-text-primary) !important;
}

.pagination-link.is-current {
	background: var(--mu-color-primary-500) !important;
	border-color: var(--mu-color-primary-500) !important;
	color: #fff !important;
}

/* =========================================================================
   15) 页脚
   ========================================================================= */

.footer {
	background: var(--mu-color-warm-100) !important;
	border-top: 1px solid var(--mu-color-border-subtle);
	color: var(--mu-color-text-tertiary) !important;
	padding: var(--mu-space-10) var(--mu-space-5);
	font-size: var(--mu-font-size-sm);
}

.footer a {
	color: var(--mu-color-text-secondary);
}
.footer a:hover {
	color: var(--mu-color-primary-500);
}

/* =========================================================================
   16) 信息提示 / Notification
   ========================================================================= */

.notification {
	background: var(--mu-color-warm-100) !important;
	border: 1px solid var(--mu-color-border-subtle) !important;
	border-radius: var(--mu-radius-lg) !important;
	color: var(--mu-color-text-primary) !important;
	box-shadow: none !important;
}

.notification.is-primary,
.notification.is-info {
	background: var(--mu-color-info-bg) !important;
	color: var(--mu-color-info-text) !important;
	border-color: var(--mu-color-info-main) !important;
}

.notification.is-success {
	background: var(--mu-color-success-bg) !important;
	color: var(--mu-color-success-text) !important;
}

.notification.is-warning {
	background: var(--mu-color-warning-bg) !important;
	color: var(--mu-color-warning-text) !important;
}

.notification.is-danger {
	background: var(--mu-color-danger-bg) !important;
	color: var(--mu-color-danger-text) !important;
}

/* =========================================================================
   17) Tag / Badge
   ========================================================================= */

.tag {
	background: var(--mu-color-warm-100) !important;
	color: var(--mu-color-text-secondary) !important;
	border-radius: var(--mu-radius-sm) !important;
	font-size: 12px !important;
	font-weight: 500;
	padding: 2px var(--mu-space-2) !important;
	height: auto !important;
}

.tag.is-primary {
	background: var(--mu-color-primary-50) !important;
	color: var(--mu-color-primary-700) !important;
}

.tag.is-info {
	background: var(--mu-color-info-bg) !important;
	color: var(--mu-color-info-text) !important;
}

/* =========================================================================
   18) FontAwesome 图标颜色统一
   ========================================================================= */

.fa, .fas, .far, .fal, .fab, .ik-icon {
	color: inherit;
}

/* =========================================================================
   19) 移动端 viewport 优化
   ========================================================================= */

@media (max-width: 767px) {
	.hero-body { padding: var(--mu-space-10) var(--mu-space-5) !important; }
	.hero .title.is-1 { font-size: var(--mu-font-size-3xl) !important; }
	.section { padding: var(--mu-space-8) var(--mu-space-5) !important; }
	.container { padding: 0; }
	.columns { margin: 0; }
	.column { padding: 0; }

	/* 移动端隐藏 sidebar（节省视口） */
	.single .columns > .column:last-child:not(:only-child),
	.page .columns > .column:last-child:not(:only-child) {
		display: none;
	}
}

/* =========================================================================
   20) Selection（选中文本配色）
   ========================================================================= */

::selection {
	background: var(--mu-color-primary-100);
	color: var(--mu-color-primary-900);
}

/* =========================================================================
   21) 滚动条（PC 端）
   ========================================================================= */

@media (min-width: 768px) {
	::-webkit-scrollbar { width: 10px; height: 10px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb {
		background: var(--mu-color-warm-200);
		border-radius: 5px;
	}
	::-webkit-scrollbar-thumb:hover {
		background: var(--mu-color-text-tertiary);
	}
}