/* ====================================================================
 * xzbk.com — 行者博客：站点名 + 小朱印押款 + 顶端紧凑一体化导航 + 自动化文章排版 + 古风分页导航
 * --------------------------------------------------------------------
 * 设计 token：宣纸 + 朱砂 + 墨黑 + 霞鹜文楷
 * ==================================================================== */

/* ========== 1. 设计 token + 覆盖 JJ 主题变量 ========== */
:root {
  /* ---- 我们的设计 token ---- */
  --paper: #faf6ec;
  --paper-deep: #f0e9d6;
  --paper-edge: #e8dfc4;
  --ink: #2c2620;
  --ink-soft: #5a4e42;
  --ink-fade: #8a7e6e;
  --cinnabar: #c0392b;
  --cinnabar-deep: #a83232;
  --cinnabar-soft: #e57368;
  --dai: #3a4a5c;
  --dai-soft: #5a6a7c;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --font-wenkai: 'STKaiti', '华文楷体', 'Kaiti SC', 'STSong', '华文宋体',
                  'Noto Serif SC', 'Songti SC', SimSun, serif;
  --font-meta: -apple-system, BlinkMacSystemFont, 'PingFang SC',
                'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* ---- 覆盖 JJ 主题的蓝色（#1e80ff / #007fff）→ 朱砂 ---- */
  --jj-body-bg-color: var(--paper);
  --jj-header-bg-color: var(--paper-deep);
  --jj-header-text-color: var(--ink-soft);
  --jj-header-text-hover: var(--ink);
  --jj-header-text-active: var(--cinnabar);
  --jj-header-nav-border-color: var(--paper-edge);
  --jj-header-article-btn-bg: var(--cinnabar);
  --jj-header-article-btn-bg-hover: var(--cinnabar-deep);
  --jj-header-article-btn-color: var(--paper);
  --jj-header-search-input-border-active: var(--cinnabar);
  --jj-header-search-btn-color-active: var(--cinnabar);
  --jj-header-search-btn-bg-active: var(--paper);
  --jj-search-history-clear-color: var(--cinnabar);
  --jj-header-comment-color: var(--ink-fade);
  --jj-header-menu-footer-text-color-hover: var(--cinnabar);
  --jj-header-login-btn-bg: transparent;
  --jj-header-login-btn-bg-hover: rgba(192, 57, 43, 0.1);
  --jj-header-login-btn-border: var(--cinnabar);
  --jj-header-login-btn-color: var(--cinnabar);
  /* 登录弹窗 */
  --jj-login-dialog-title-color: var(--ink);
  --jj-login-dialog-input-border-focus: var(--cinnabar);
  --jj-login-dialog-form-btn-bg: var(--cinnabar);
  --jj-login-dialog-form-btn-bg-hover: var(--cinnabar-deep);
  --jj-login-dialog-form-btn-color: var(--paper);
  --jj-login-dialog-link-color: var(--cinnabar);
  --jj-login-dialog-link-color-hover: var(--cinnabar-deep);
  --jj-login-dialog-input-checkbox-border-active: var(--cinnabar);
  --jj-login-dialog-input-checkbox-bg-active: var(--cinnabar);
  --jj-login-dialog-input-checkbox-text-active: var(--cinnabar);
  /* nav */
  --jj-nav-bg-color: var(--paper);
  --jj-nav-border: var(--paper-edge);
  --jj-nav-list-item-color: var(--ink-soft);
  --jj-nav-list-item-color-hover: var(--cinnabar);
  --jj-nav-list-item-color-active: var(--cinnabar);
  /* scrollbar */
  --jj-scroll-bar-bg1: var(--paper-edge);
  --jj-scroll-bar-bg2: var(--ink-fade);
  /* skeleton / img */
  --jj-img-skeleton-bg: var(--paper-deep);
  --jj-skeleton-bg: var(--paper-deep);
  --jj-skeleton-line-bg1: var(--paper-edge);
  --jj-skeleton-line-bg2: rgba(232, 223, 196, 0.5);
}

/* ========== 2. 全局字体 + 背景 ========== */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.css');

html, body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: 'LXGW WenKai Screen', 'LXGW WenKai', 'STKaiti', '华文楷体',
                'Kaiti SC', 'STSong', '华文宋体', 'Noto Serif SC',
                'Songti SC', SimSun, serif !important;
  line-height: 1.95 !important;
  font-size: 16px;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  font-family: 'LXGW WenKai Screen', 'LXGW WenKai', 'STKaiti', '华文楷体',
                'Kaiti SC', 'STSong', '华文宋体', 'Noto Serif SC',
                'Songti SC', SimSun, serif !important;
}

*, *::before, *::after {
  font-family: inherit !important;
}

/* ========== 3. 链接 ========== */
a {
  color: var(--cinnabar) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
a:hover {
  color: var(--cinnabar-deep) !important;
  border-bottom-color: var(--cinnabar-deep);
}

/* ========== 4. 标题（楷体）========== */
h1, h2, h3, h4, h5, h6,
.article-title, .post-title, .entry-title,
h1.article-title, .post-content h1, .post-content h2, .post-content h3 {
  font-family: var(--font-wenkai) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}

/* ========== 5. 顶栏与全集成导航栏（极简紧凑单行设计）========== */
.header {
  background: var(--paper-deep) !important;
  border-bottom: 1px solid var(--paper-edge) !important;
  box-shadow: 0 2px 10px rgba(44, 38, 32, 0.04) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
.header-container {
  padding: 0.6rem 1.5rem !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.header-logo {
  display: none !important;
}
.site-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-wenkai) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding: 0.2rem 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.site-name:hover {
  color: var(--cinnabar-deep) !important;
  border-bottom: none !important;
}
.site-name-seal {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url('/usr/themes/jj/static/images/xzbk/seal-text.webp');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  transform: translateY(-2px);
}
.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 1.8rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.header-nav {
  display: flex !important;
  align-items: center !important;
}
.header-nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.header-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
}
.header-nav-list-item {
  font-family: var(--font-wenkai) !important;
  color: var(--ink-soft) !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  border-bottom: none !important;
  white-space: nowrap !important;
}
.header-nav-list-item:hover,
.header-nav-list-item.active {
  color: var(--cinnabar) !important;
  background: rgba(192, 57, 43, 0.08) !important;
}
.header-nav-list-item.active {
  font-weight: 700 !important;
}

/* 隐藏旧版独立的二级栏目导航栏与横幅，使页面极致紧凑 */
.nav, .nav-secondary-warp {
  display: none !important;
}

/* 主内容区顶部微调 */
.main {
  margin-top: 1.25rem !important;
}

/* ========== 6. 卡片与按钮 ========== */
.article-card, .post-card, .card {
  background: var(--paper-deep) !important;
  border: 1px solid var(--paper-edge) !important;
  border-radius: 6px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-card:hover, .post-card:hover, .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 38, 32, 0.08);
}
button, .button, .btn,
.header-login-btn, .login-dialog-form-btn,
.header-article-btn, .header-article-btn.login {
  font-family: var(--font-meta) !important;
  background: var(--cinnabar) !important;
  color: var(--paper) !important;
  border: 1px solid var(--cinnabar) !important;
  border-radius: 4px !important;
  transition: all 0.2s;
}
button:hover, .button:hover,
.header-login-btn:hover, .login-dialog-form-btn:hover,
.header-article-btn:hover {
  background: var(--cinnabar-deep) !important;
  border-color: var(--cinnabar-deep) !important;
}

/* ========== 7. 现代化文章正文排版系统 ========== */
.article-content, .article-content-card, .post-content, .markdown-body {
  font-family: var(--font-wenkai) !important;
  font-size: 1.08rem !important;
  line-height: 2.05 !important;
  color: var(--ink) !important;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 段落与首行缩进 */
.article-content-markdown p,
.markdown-body p {
  margin: 1.25rem 0 !important;
  line-height: 2.05 !important;
  text-indent: 2em;
  word-break: break-word;
}
.article-content-markdown p:first-child,
.markdown-body p:first-child,
.article-content-markdown p > img,
.markdown-body p:has(img) {
  text-indent: 0 !important;
}

/* 文章主标题 */
.article-content-title,
.post-title,
h1.article-title {
  color: var(--cinnabar) !important;
  text-align: center !important;
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  margin: 1.5rem 0 1.2rem !important;
  line-height: 1.4 !important;
}

/* 二级标题 H2 */
.article-content-markdown h2,
.markdown-body h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  border-left: 5px solid var(--cinnabar) !important;
  background: linear-gradient(90deg, rgba(240, 233, 214, 0.8) 0%, rgba(250, 246, 236, 0) 100%) !important;
  padding: 0.6rem 1rem !important;
  margin: 2.5rem 0 1.25rem !important;
  border-radius: 0 6px 6px 0 !important;
  border-bottom: 1px dashed var(--paper-edge) !important;
}

/* 三级标题 H3 */
.article-content-markdown h3,
.markdown-body h3 {
  font-size: 1.28rem !important;
  font-weight: 600 !important;
  color: var(--cinnabar-deep) !important;
  margin: 2rem 0 1rem !important;
  padding-left: 1.2rem !important;
  position: relative !important;
}
.article-content-markdown h3::before,
.markdown-body h3::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cinnabar);
  font-size: 0.75rem;
}

/* 四级标题 H4 */
.article-content-markdown h4,
.markdown-body h4 {
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
  margin: 1.5rem 0 0.75rem !important;
}

/* 引用块 Blockquote */
.article-content-markdown blockquote,
.markdown-body blockquote {
  margin: 1.8rem 0 !important;
  padding: 1.2rem 1.6rem !important;
  background: var(--paper-deep) !important;
  border-left: 4px solid var(--cinnabar) !important;
  border-radius: 4px !important;
  color: var(--ink-soft) !important;
  font-style: normal !important;
  box-shadow: inset 0 0 0 1px var(--paper-edge) !important;
  position: relative !important;
}
.article-content-markdown blockquote p,
.markdown-body blockquote p {
  text-indent: 0 !important;
  margin: 0.5rem 0 !important;
}

/* 重点标记与高亮 */
.article-content-markdown strong,
.markdown-body strong {
  font-weight: 700 !important;
  color: var(--cinnabar-deep) !important;
  background: linear-gradient(180deg, transparent 65%, rgba(192, 57, 43, 0.15) 65%) !important;
  padding: 0 3px !important;
  border-radius: 2px !important;
}

/* 行内代码 */
.article-content-markdown code:not([class*="language-"]),
.markdown-body code:not([class*="language-"]) {
  font-family: Consolas, Monaco, monospace !important;
  font-size: 0.9em !important;
  background: var(--paper-deep) !important;
  color: var(--cinnabar-deep) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--paper-edge) !important;
}

/* 代码块 Pre */
.article-content-markdown pre,
.markdown-body pre {
  background: #25221e !important;
  color: #e6dfd5 !important;
  padding: 1.2rem !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1.8rem 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.article-content-markdown pre code,
.markdown-body pre code {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* 图片自适应、居中与质感相框 */
.article-content-markdown img,
.markdown-body img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 1.8rem auto !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(44, 38, 32, 0.1) !important;
  border: 1px solid var(--paper-edge) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.article-content-markdown img:hover,
.markdown-body img:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(44, 38, 32, 0.15) !important;
}

/* 表格响应式 */
.table-responsive,
.article-content-markdown .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  margin: 1.8rem 0 !important;
}
.article-content-markdown table,
.markdown-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 1.5rem 0 !important;
  border: 1px solid var(--paper-edge) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.article-content-markdown table th,
.markdown-body table th {
  background: var(--paper-deep) !important;
  color: var(--cinnabar-deep) !important;
  font-weight: 700 !important;
  padding: 0.8rem 1rem !important;
  border: 1px solid var(--paper-edge) !important;
  text-align: left !important;
}
.article-content-markdown table td,
.markdown-body table td {
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--paper-edge) !important;
  color: var(--ink) !important;
}
.article-content-markdown table tr:nth-child(even),
.markdown-body table tr:nth-child(even) {
  background: rgba(240, 233, 214, 0.4) !important;
}
.article-content-markdown table tr:hover,
.markdown-body table tr:hover {
  background: rgba(192, 57, 43, 0.05) !important;
}

/* 列表排版 */
.article-content-markdown ul,
.markdown-body ul,
.article-content-markdown ol,
.markdown-body ol {
  padding-left: 2rem !important;
  margin: 1.25rem 0 !important;
}
.article-content-markdown li,
.markdown-body li {
  margin: 0.5rem 0 !important;
  line-height: 1.9 !important;
}
.article-content-markdown ul > li::marker,
.markdown-body ul > li::marker {
  color: var(--cinnabar) !important;
}

/* 分隔线 HR */
.article-content-markdown hr,
.markdown-body hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--paper-edge) 50%, transparent 100%) !important;
  margin: 2.5rem 0 !important;
}

/* ========== 8. 侧栏与页脚 ========== */
.main-right h3, .sidebar h3, .widget-title {
  font-family: var(--font-wenkai) !important;
  color: var(--ink-soft) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--cinnabar) !important;
  padding-left: 0.75rem !important;
  margin: 1.5rem 0 0.75rem !important;
}
.site-footer, footer, .footer {
  background: transparent !important;
  border-top: 1px solid var(--paper-edge) !important;
  color: var(--ink-fade) !important;
  font-family: var(--font-meta) !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  padding: 2rem 1rem !important;
  margin-top: 2rem !important;
}

/* ========== 9. 文章分页导航（上一页/下一页/页码）========== */
.article-pagination-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 2.5rem 0 1.5rem !important;
  width: 100% !important;
}
.pagination-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}
.pagination-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pagination-list li a,
.pagination-list li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 0.8rem !important;
  border-radius: 6px !important;
  font-family: var(--font-wenkai) !important;
  font-size: 0.98rem !important;
  color: var(--ink-soft) !important;
  background: var(--paper-deep) !important;
  border: 1px solid var(--paper-edge) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(44, 38, 32, 0.04) !important;
}
.pagination-list li a:hover {
  background: var(--cinnabar) !important;
  color: var(--paper) !important;
  border-color: var(--cinnabar) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.25) !important;
}
.pagination-list li.active a,
.pagination-list li.active span {
  background: var(--cinnabar) !important;
  color: var(--paper) !important;
  border-color: var(--cinnabar) !important;
  font-weight: 700 !important;
  cursor: default !important;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.25) !important;
}
.pagination-list li.prev a,
.pagination-list li.next a {
  font-weight: 600 !important;
  padding: 0 1.1rem !important;
}

/* ========== 10. 滚动条与选中 ========== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink-fade); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
::selection { background: var(--cinnabar); color: var(--paper); }
::-moz-selection { background: var(--cinnabar); color: var(--paper); }