/* ==========================================================================
   页面骨架与备案页脚（含全局基准）
   --------------------------------------------------------------------------
   只管结构，颜色引用 theme.css 的变量，亮色/暗色共用一份。
   依赖：theme.css 需先加载
   由 _theme_css.html 引入，是每个页面都会加载的基础层，
   因此全局基准（html 根字号、body 字体/配色、基础重置）也放在这里。

   页脚有两种形态：
   1) .site-footer--fixed   首页用，始终吸在视口底部
   2) .site-footer--sticky  其他页面用，内容不满一屏时贴底、满了就跟着内容走
   ========================================================================== */

/* ==========================================================================
   全局基准
   --------------------------------------------------------------------------
   根字号、正文字体、配色是整个站点的排版基准，每个页面都要有，
   因此放在这个「每页都加载」的基础层里（原来是塞在 markdown.css，
   导致不用 Markdown 的页面也被迫加载整个 Markdown 排版文件）。
   1rem / em 都相对这里定义的字号，各模块的尺寸才有一致参照。
   ========================================================================== */
html {
    /* 桌面根字号 */
    font-size: var(--base-font);
}

body {
    /* 字体栈决定中英文与标点的回退字形；不写死单一字体，交给系统按语言选 */
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;

    /* 防止长链接撑破视口导致整页横向滚动：超长 URL 在任意位置强制断行 */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   基础重置
   --------------------------------------------------------------------------
   浏览器默认给 body 8px 外边距。不重置的话，后面撑满一屏的骨架会在这
   16px 之外再补一屏，导致内容明明不满一屏却出现滚动条，页脚永远贴不到底。
   ========================================================================== */
html,
body {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   可访问性工具类
   --------------------------------------------------------------------------
   .sr-only：只给读屏软件的文字（如图标按钮的 label）。
   不能用 display:none —— 那会连可访问名一起消失；
   用 1px 裁剪，视觉上看不见但仍在无障碍树里。

   放在这里是因为它是全站基础设施，只依赖本文件（被 _theme_css.html 引入），
   每个页面都拿得到；放在某个模块的 CSS 里会让别的模块引用不到而各抄一份。
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------- 可滚动的主体内容 ---------- */
.page-content {
    /* 必须显式 width: 100%：
       这个容器有时是 grid 单元格的子元素（阅读页带目录时），
       而 margin: 0 auto 会让它在 grid 里进入 shrink-to-fit 计算。
       内容短（如只有一句话的文章）时就会塌成很窄一条，
       长文章因为文字把宽度撑开反而不明显 —— 所以这个 bug
       只在短文章上暴露。显式给宽度后行为就稳定了。 */
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    box-sizing: border-box;
    /* 默认给固定页脚留出空间，下面两种页脚形态会各自覆盖 */
    padding-bottom: 70px;
}

/* 无页脚的页面（编辑器等）不需要为页脚预留空间 */
.page-content--no-footer {
    padding-bottom: 0;
}

/* ==========================================================================
   页脚骨架：内容不满一屏时贴底，满了就跟随滚动
   --------------------------------------------------------------------------
   思路：外层容器撑满一屏并设为纵向 flex，
   主体区 flex:1 把剩余空间全部吃掉，页脚排在最后。
   内容少 → 主体被拉伸，页脚自然落在视口底部；
   内容多 → 主体超出容器高度，页脚就被推到内容之后，随页面一起滚动。

   注意用 min-height 而不是 height：height 会把容器钉死在一屏高，
   内容超出时页脚会悬浮在内容之上或产生内部滚动条，反而不对。

   高度单位用 dvh：它随移动端地址栏的收放变化，vh 会把地址栏算进去。
   此处原本还叠了一行 vh 作旧浏览器兜底，但同属性后者覆盖前者，
   兜底从未生效，已作为死声明移除。
   ========================================================================== */
.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}

/* 主体区一律吃掉剩余空间，把页脚顶到底部。
   注意要覆盖两种主体容器：
   - .page-content  普通页面（列表页等）
   - .read-layout   阅读页（可能是单栏，也可能是「目录 + 正文」两栏）
   少写一个，对应页面的页脚就会浮在半空而不是贴底。 */
.page-shell > .page-content,
.page-shell > .read-layout {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    /* 这种骨架下页脚不再悬浮，所以不需要给页脚预留 padding */
    padding-bottom: 0;
}

/* ---------- 形态一：始终固定（首页） ---------- */
.site-footer--fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

/* 固定页脚会盖住内容，主体区必须留出等高的空隙 */
.has-fixed-footer .page-content {
    padding-bottom: 70px;
}

/* ---------- 底部备案页脚（两种形态共用的外观） ---------- */
.site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    /* 适配 iPhone 底部安全区 */
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));

    font-size: 13px;
    color: var(--footer-text);
    line-height: 1.9;
    text-align: center;

    /* 防止页脚内容过长时溢出 */
    max-height: 40vh;
    overflow-y: auto;
}

/* 跟随滚动的形态：页脚就该老老实实待在内容末尾，不吸底、不截断 */
.site-footer--sticky {
    /* flex 子项默认允许收缩，显式禁止，避免被上方内容压扁 */
    flex: 0 0 auto;
    /* 继承自 .site-footer 的限高与内部滚动都要去掉，
       否则跟随滚动时页脚会被截断成 40vh 并出现内部滚动条 */
    max-height: none;
    overflow: visible;
    /* 明确静态定位，防止误继承 fixed */
    position: static;
}

.site-footer a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--footer-link-hover);
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 16px;
}

.footer-divider {
    color: var(--footer-divider);
    user-select: none;
}

.footer-police {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-police img {
    width: 16px;
    height: 16px;
    display: block;
}

/* ==========================================================================
   移动端适配
   ========================================================================== */
@media (max-width: 640px) {
    /* 移动端根字号：与上面的桌面基准配套，全站统一从这里取 */
    html {
        font-size: var(--base-font-mobile);
    }

    /* 页面级左右留白：所有页面容器统一从这里取（--page-gutter 定义在 theme.css）。
       之前是每个内容块各自加内边距（只有正文 .markdown-body 加了），
       结果就是标题、分页这类块贴着屏幕、正文却有留白 —— 老出这种错位。
       放到容器上，容器里的一切自动对齐，新增块也不用再记着补一次。
       只写左右：上下留白由各页面的骨架自己控制。 */
    .page-content {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
    }

    .has-fixed-footer .page-content {
        padding-bottom: 100px; /* 手机端页脚更高，留更多空间 */
    }

    /* 无页脚的页面同样不需要预留 */
    .page-content--no-footer {
        padding-bottom: 0;
    }

    .site-footer {
        font-size: 12px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }

    .footer-row {
        flex-direction: column;
        gap: 2px;
    }

    /* 竖排后分隔符无意义 */
    .footer-divider {
        display: none;
    }
}