/* =========================================================
   文章页：空上下篇容器隐藏（补充 34）/ 首页卡片字数与搜索框右移（补充 37）/ KaTeX 公式字体恢复（补充 43）/ 页内锚点落点（补充 44）/ 正文图片查看器（补充 45）/ 超链接 hover 下划线（补充 53）。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   补充 34：隐藏「空的」上下篇容器
   - 主题的 pagination.pug 用 `if page.total !== 1` 判断，但文章页的 page.total 常常不是 1，
     所以只剩 1 篇文章时仍会渲染出一个空的 <nav class="pagination-post" id="pagination"></nav>，
     它自带 margin-top: 40px → 文章底部凭空多出 40px 空白
   - 该 nav 生成时没有子节点也没有空白文本，:empty 能命中
   ========================================================= */
#pagination.pagination-post:empty {
    display: none !important;
}

/* =========================================================
   
   
   ========================================================= */

/* =========================================================
   补充 37：首页卡片总字数 + 搜索框右移
   
     已随评论区移除）
   ========================================================= */

/* --- 1) 首页卡片的「总字数」---
   结构由 /js/index-card-meta.js 在构建期注入，样式复用主题的 .article-meta */

.recent-post-item .card-wordcount-num {
    display: inline-block;
    min-width: 1.1em;
}

/* --- 3) 导航搜索框右移一点 ---
   #menus 是右对齐的（左边 #blog-info 是 flex:1 把它顶到右边），
   所以给 #search-button 加 margin-left 只会挤压标题区域、搜索框位置纹丝不动。
   用 .site-page 自带的 position: relative + left 做纯视觉位移，不动布局。*/
#nav #search-button .nav-search-box {
    left: 10px;
}

/* =========================================================
   
   ------------------------------------------------------------------
   原来：.article-meta-wrap 是普通行内流，为了让
        「日期 | 分类 | 总字数 | 阅读量」挤在**一行内**，
        只能一路抠字号（0.9em → 0.88em）和图标/分隔符间距（439px 塞进 421px）。
        这种「刚好放得下」的排版很脆：分类名一长、或者到移动端窄屏就散架，
        
   现在：容器 flex + flex-wrap，每一项是**不可拆分的整体**，放不下就整项换行；
        间距交给 gap，宽屏窄屏都不用再调像素。
        行尾那根竖线分隔符交给 gap 取代（留着她会在换行处孤零零挂在行尾）。

    选择器必须和主题那条**同级**（1 id + 3 class + 1 class）：
   主题是 `#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap`，
   写成 `.recent-post-item .article-meta-wrap` 特异性更低会被压掉。
   custom.css 在 index.css 之后加载，所以同级即可反超。
   ========================================================= */
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.12em 0.6em;
}

/* 每一项整体换行，绝不把图标和文字拆到两行 */
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap > * {
    white-space: nowrap;
}

/* 竖线分隔符不参与排版了 */
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-separator {
    display: none;
}

/* 图标与文字之间留一点气口 */
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap i {
    margin-right: 3px;
}

/* =========================================================
   
   ------------------------------------------------------------------
   自建计数器（/pv）已下线：迁 Cloudflare Pages 后没有后端，相对路径会 404。
   相关的注入与脚本已移除；服务器上的计数服务与历史数据保留未动。
   ========================================================= */

/* =========================================================
   
   ========================================================= */

/* =========================================================
   补充 43：把 KaTeX 公式自己的字体还给它
   「补充 7」的全站字体兜底带 !important 且命中 span/div，而 KaTeX
   公式整棵子树都是 span，会把 KaTeX 的字体全部吃掉。这里按 .katex
   子树整块恢复 KaTeX 字体；!important 之间比特异性，26 条专用类
   （如 .mathnormal）优先级更高，各自照旧。
   注意：以后给 .katex 子树加字体类规则必须带 !important，否则会被
   「补充 7」吃掉。
   字体文件在 /css/fonts/（katex.min.css 用相对路径 fonts/）。
   ========================================================= */
/* 兜底：KaTeX 子树默认字体，数字、运算符、括号都靠它。
   KaTeX_Size1~4（大运算符、可伸缩括号）有专门规则，这里不用管。 */
.katex,
.katex span {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}
.katex .mathnormal {
    font-family: KaTeX_Math, "Times New Roman", serif !important;
    font-style: italic !important;
}
.katex .boldsymbol {
    font-family: KaTeX_Math, "Times New Roman", serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
}
.katex .mathit {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
    font-style: italic !important;
}
.katex .mathbf {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
    font-weight: 700 !important;
}
.katex .mainrm {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
    font-style: normal !important;
}
.katex .textrm {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}
.katex .textsf,
.katex .mathsf {
    font-family: KaTeX_SansSerif !important;
}
.katex .texttt,
.katex .mathtt {
    font-family: KaTeX_Typewriter !important;
}
.katex .amsrm,
.katex .mathbb,
.katex .textbb {
    font-family: KaTeX_AMS !important;
}
.katex .mathcal {
    font-family: KaTeX_Caligraphic !important;
}
.katex .mathfrak,
.katex .textfrak {
    font-family: KaTeX_Fraktur !important;
}
.katex .mathboldfrak,
.katex .textboldfrak {
    font-family: KaTeX_Fraktur !important;
    font-weight: 700 !important;
}
.katex .mathscr,
.katex .textscr {
    font-family: KaTeX_Script !important;
}
.katex .mathboldsf,
.katex .textboldsf {
    font-family: KaTeX_SansSerif !important;
    font-weight: 700 !important;
}
.katex .mathitsf,
.katex .mathsfit,
.katex .textitsf {
    font-family: KaTeX_SansSerif !important;
    font-style: italic !important;
}
.katex .delimsizing.size1,
.katex .delimsizing.mult .delim-size1 > span,
.katex .op-symbol.small-op {
    font-family: KaTeX_Size1 !important;
}
.katex .delimsizing.size2,
.katex .op-symbol.large-op {
    font-family: KaTeX_Size2 !important;
}
.katex .delimsizing.size3 {
    font-family: KaTeX_Size3 !important;
}
.katex .delimsizing.size4,
.katex .delimsizing.mult .delim-size4 > span {
    font-family: KaTeX_Size4 !important;
}
/* 行内公式别被正文的 justify 拉开字距（KaTeX 自己就是靠 span 定位的）。
   
     
     
     
    **只写 `.katex` 这一条**，不要另写 `.katex-display > .katex`：
      行间公式里 `.katex-display`(1em) 套 `.katex`，两条都写 em 会**连乘**直接炸掉。
      只写这一条时，行内/行间都按正文 16px 作基准，两边同尺寸。 */
#article-container .katex {
    letter-spacing: normal;
    font-size: 1.3em;
}

/* =========================================================
   补充 44：页内锚点跳转的落点，避开吸顶导航条
   ------------------------------------------------------------------
   「补充 43」的另一半是 JS（source/js/anchor-scroll.js，走 Lenis 平滑滚动 + 扣掉导航高度）。
   这里是不依赖 JS 的兜底：开页就带 #锚点（或浏览器自己处理 hash）时，
   scroll-padding-top 会让目标停在导航条下方，而不是贴到视口最顶上。
   导航条高度 ≈ 60px，+12px 余量 = 72（与 JS 里 navOffset() 的口径一致）。
   ========================================================= */
html {
    scroll-padding-top: 72px;
}

/* =========================================================
   补充 45：正文图片查看器（JS 见 source/js/img-viewer.js）
   ------------------------------------------------------------------
   背景：站内原本**没有**任何图片查看器（lightbox 配置为空），点正文图片没反应，
   带链接的图还会把整页跳成一张裸图（没有关闭入口）。这里给一个自带关闭入口的看图器。
   关闭方式：右上角 ×、点图片、点图外的背景、Esc 四种都给。
    不用 inset / CSS 变量等新语法：主力渠道是微信内置浏览器，老内核解析失败会让整条声明作废。
   ========================================================= */
/* 正文图片给出「可点」的提示：cursor 用内置 zoom-in
   （125% / 150% 系统缩放下位图光标会拉伸发虚，故不用自绘位图光标）。 */
#article-container img {
    cursor: zoom-in;
}

.zx-iv {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.zx-iv.zx-iv-on {
    display: flex;
}
.zx-iv.zx-iv-show {
    opacity: 1;
}
.zx-iv > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 4px;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
    /* 底图淡入的同时轻微放大，避免硬切 */
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* 与正文图片同一套提示（内置 zoom-out，见上面「正文图片给出可点提示」的来回记录） */
    cursor: zoom-out;
}
.zx-iv.zx-iv-show > img {
    transform: scale(1);
}
.zx-iv-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.zx-iv-close:hover {
    background: var(--zx-d-line);
}
.zx-iv-close:active {
    transform: scale(0.92);
}
/* 打开期间锁住页面滚动（滚动条宽度由 JS 补在 html 的 padding-right 上，防横跳） */
html.zx-iv-lock {
    overflow: hidden;
}

@media (max-width: 768px) {
    .zx-iv > img {
        max-width: 94vw;
        max-height: 80vh;
    }
    .zx-iv-close {
        top: 12px;
        right: 12px;
    }
}

/* =========================================================
   补充 53：文章内超链接 hover 黑线（仿 im.qq.com 的下划线交互）
   ------------------------------------------------------------------
   效果：默认外观一字不改（仍是主题蓝、无下划线）；鼠标悬停时文字底部
   出现一条 2px 下划线，颜色跟随链接本身（currentColor，蓝链接=蓝线），
   从左往右展开；移开鼠标反向收回（transform 原路变回）。

   实现要点：
   - 线画在 ::after 上（position:absolute 挂在 a 自身），用 scaleX(0)→scaleX(1)
     做展开/收回，transform-origin 固定 left：进场从左往右长出来，离场往左缩回去。
   - 线的画法必须是 **height:0 + border-bottom:2px**，不能用 height + background：
     背景线在 105%/115%/135% 这类非整数设备缩放下，动画定格重栅格化
     后会被半透明摊到两个设备像素里，蓝线肉眼发灰/变淡（2026-09-30 像素采样
     实测复现）；而 Chromium 对 border 渲染做像素对齐（pixel-snapping），
     任意缩放下都是满覆盖实心行（同日 A/B 实测 1.05/1.35 全部 100%）。
     2px ≈ 16px 正文的笔画粗细（用户要求与文字粗细相当）。
   - 颜色用 currentColor：深浅色模式下都自动等于链接文字色，无需单独适配。
   - 排除 {% btn %} 按钮链接（.btn 自带边框，再画线会重叠）。
   - 老内核兼容：:has() 只用来让「含图片的链接」不参与（下面最后两条），
     微信老内核不认 :has 会丢弃这两条，退化为图片链接 hover 也有线——
     只是视觉小瑕疵，不会让任何规则整条作废；主体三条选择器全是老语法。
   ========================================================= */
#article-container a:not(.btn) {
    position: relative;
    text-decoration: none;
}

#article-container a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 0;
    border-bottom: 2px solid currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
    pointer-events: none;
}

#article-container a:not(.btn):hover {
    text-decoration: none;
}

#article-container a:not(.btn):hover::after {
    transform: scaleX(1);
}

/* 含图片的链接（图床外链、点图看大图）不参与：支持 :has 的浏览器生效 */
#article-container a:has(img):not(.btn) {
    position: static;
}

#article-container a:has(img):not(.btn)::after {
    content: none;
}