/* ==========================================================================
   theme-wp.css — WordPress 版本相对原静态站的补充与修正
   --------------------------------------------------------------------------
   加载顺序排在 theme/layout/components 之后，用于修正「服务端渲染」带来的
   标记差异（按钮改成链接、按钮改成 span 等），不改动原设计文件。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 分页：客户端版用 button，服务端版用 a / span，补齐盒模型
   -------------------------------------------------------------------------- */
.pager > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-700);
  font-size: 0.9rem;
  font-weight: 700;
}

.pager > span.is-current {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.pager > span.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.pager > span.is-ellipsis {
  min-width: 18px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   2. 分类筛选：button → a，保证可点击可抓取
   -------------------------------------------------------------------------- */
a.chip,
a.tag {
  text-decoration: none;
  cursor: pointer;
}

a.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* --------------------------------------------------------------------------
   3. 自定义标志（后台设定后替换品牌方块）
   -------------------------------------------------------------------------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
}

.brand-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.brand-logo .custom-logo {
  display: block;
  width: auto;
  max-height: 42px;
}

.site-footer .brand-logo .custom-logo {
  max-height: 46px;
}

/* --------------------------------------------------------------------------
   4. 页脚与抽屉里的联系信息改成链接后的观感
   -------------------------------------------------------------------------- */
.footer-contact a,
.drawer-contact a {
  color: inherit;
  text-decoration: none;
}

.footer-contact a:hover,
.drawer-contact a:hover {
  color: var(--brand-500);
}

.footer-bottom .footer-legal a[href*="beian.miit.gov.cn"] {
  color: inherit;
}

/* --------------------------------------------------------------------------
   5. WordPress 自带类的最小适配
   -------------------------------------------------------------------------- */

/* 对齐 / 图片类（编辑器常用） */
.alignleft {
  float: left;
  margin: 0 26px 18px 0;
}

.alignright {
  float: right;
  margin: 0 0 18px 26px;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  padding: 12px 18px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-xs);
  z-index: 100000;
}

/* 文章正文里的分页链接（wp_link_pages） */
.article-content .post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-weight: 700;
  text-decoration: none;
}

.article-content .post-page-numbers.current {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. 搜索结果 / 归档页里被高亮的关键词
   -------------------------------------------------------------------------- */
.khp-highlight {
  background: rgba(37, 99, 235, 0.14);
  border-radius: 3px;
  padding: 0 2px;
}

/* --------------------------------------------------------------------------
   7. 404 与空结果
   -------------------------------------------------------------------------- */
.khp-error-code {
  font-size: clamp(3.4rem, 10vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   8. 入场动画的无脚本兜底
   --------------------------------------------------------------------------
   theme.css 里 [data-reveal] 初始为 opacity:0，靠 JS 加 .is-in 才显现。
   header.php 会在 <html> 上打一个 khp-js 标记：只有脚本确实可用时才保留
   「先隐藏」这一状态；脚本被禁用 / 被拦截 / 被 CSP 拦下时，内容直接可见，
   不会被永久藏住（对 SEO、无障碍与弱网都更安全）。
   -------------------------------------------------------------------------- */
html:not(.khp-js) [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}