@charset "utf-8";
/* ===========================================================================
   header-footer.css —— 全站「页头 / 页脚 / 通用外框」公共样式唯一来源
   ---------------------------------------------------------------------------
   本站每个模板都把页头页脚代码内联在自己文件里（header.html / footer.html
   等公共片段已弃用），历史上各页面的主 CSS 又各自复制了一份页头页脚样式，
   导致移动端出现差异：搜索框宽度、页脚字号、导航折行、logo 尺寸等。

   本文件的基础规则由 index.2026040901.css 逐条抽取而来 —— index 的页头页脚
   即全站基准。规则除以下两点外与 index 完全一致：
     1) var(--shadow-sm) 增加字面量回退值（部分旧 CSS 未定义该变量）；
     2) 末尾「旧版兼容覆盖」把旧写法显式收敛到 index 的取值。

   加载要求：必须放在【所有页面自身 CSS 之后】，靠“同优先级、后加载者生效”覆盖旧写法。
   维护要求：页头页脚样式只改本文件；不要再改各页面主 CSS 里的同名规则。
   =========================================================================== */


/* ---------- 基础（全站通用，取自 index.2026040901.css） ---------- */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.topbar-bg {
    background-color: #fff;
    box-shadow: var(--shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
    border-bottom: 1px solid var(--border-color);
}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    color: #666;
    font-size: 13px;
}
.header {
    background-color: #fff;
}
.header-container {
    display: flex;
    flex-direction: column;
    padding: 15px 0 0;
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    gap: 20px;
}
.logo {
    height: 70px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo img {
    height: 100%;
    width: auto;
}
.site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.nav-container {
    background-color: var(--primary-light);
    border-radius: 8px;
    margin-top: 10px;
    padding: 0 8px;
    transition: background 0.2s;
}
.navbar {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
}
.navbar li {
    padding: 0;
    position: relative;
}
.navbar li a {
    font-weight: 500;
    font-size: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    color: #1a68cc;
    transition: all 0.25s;
    border-radius: 6px;
    white-space: nowrap;
}
.navbar li a:hover {
    color: var(--nav-hover);
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.navbar li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 6px;
    left: 18px;
    right: 18px;
    background-color: var(--nav-hover);
    transition: width 0.25s ease;
    border-radius: 3px;
}
.navbar li a:hover:after {
    width: calc(100% - 36px);
}
.stats-bar {
    background-color: var(--primary-light);
    padding: 8px 0;
    margin-top: 15px;
    border-radius: 0 0 8px 8px;
}
.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.stats-info {
    font-size: 14px;
    color: var(--text-light);
}
.stats-info strong {
    color: var(--primary);
    font-weight: bold;
    padding: 0 3px;
}
.quick-links {
    font-size: 14px;
    display: flex;
    gap: 15px;
}
.quick-links a {
    color: var(--primary);
    font-weight: 500;
}
.quick-links a:hover {
    text-decoration: underline;
}
.footer {
    margin-top: 50px;
    padding: 40px 0 30px;
    background: #fff;
    text-align: center;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
}
.footer-menu {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 20px;
}
.footer-menu a {
    font-size: 14px;
    color: var(--text-light);
}
.footer-menu a:hover {
    color: var(--primary);
}
.footer-copyright {
    font-size: 13px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.footer-beian {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.footer-beian a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-light);
}
.footer-beian img {
    width: 15px;
    height: 15px;
}
.scroll-buttons {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.scroll-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2c7de6, #1a68cc);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(44, 125, 230, 0.35);
    cursor: pointer;
    transition: all 0.25s;
    font-size: 22px;
    font-weight: bold;
    border: 2px solid white;
}
.scroll-btn:hover {
    background: linear-gradient(145deg, #1a68cc, #0d4a9c);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(44, 125, 230, 0.45);
}
.scroll-btn.scroll-up::after {
    content: "↑";
}
.scroll-btn.scroll-down::after {
    content: "↓";
}

@media (max-width: 991px) {
    .topbar {
        display: none;
    }
    .stats-bar {
        display: none;
    }
    .header-top {
        flex-direction: column;
        padding: 10px 0;
        gap: 15px;
    }
    .logo {
        height: 60px;
        margin-bottom: 5px;
    }
    .search-area {
        width: 100%;
    }
    .nav-container {
        margin-top: 5px;
        padding: 0 5px;
    }
    .navbar {
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    .navbar li a {
        padding: 12px 8px;
        font-size: 14px;
        white-space: nowrap;
    }
    .scroll-buttons {
        display: none;
    }
    .footer-menu a {
        font-size: 13px;
    }
    .footer-copyright {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 12px;
    }
    /* 导航保持项目既有的分档设计：≤991px 单行、≤400px 允许折行
       （见本文件末尾的设计说明）。这里不再叠加横滚，避免与之冲突。 */
    .navbar li a {
        padding: 10px 6px;
        font-size: 13px;
    }
    /* 2026-11-06（P3-1）：回到顶部按钮贴边太远时小屏容易误触，收到 12px */
    .scroll-buttons {
        right: 12px;
        bottom: 12px;
        gap: 8px;
    }
    .footer-beian {
        flex-direction: column;
        gap: 8px;
    }
    .footer-menu a {
        font-size: 13px;
    }
    .footer-copyright {
        font-size: 12px;
    }
    .footer-beian a {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .navbar li a {
        padding: 9px 6px;
        font-size: 13px;
    }
}

/* ===========================================================================
   旧版兼容覆盖
   ---------------------------------------------------------------------------
   把「旧版页面主 CSS」里与 index 不一致的写法收敛掉。分两类：
     A. index 没有显式声明、旧版声明了的属性 → 这里显式写回 index 的实际取值；
     B. index 与旧版都声明的属性            → 上面已按 index 覆盖，无需重复。
   若某天各页面主 CSS 已同步（不再有旧写法），本段可整段删除。

   注：带 !important 的两条，是因为旧版把 .navbar li a 的 padding 写成了
       padding:10px 5px !important，非 !important 无法覆盖，必须同级对抗。
   =========================================================================== */

/* A0. 字体栈：6 个旧页面（category/article/artinfo/top/feedback/diypage）用的是
       "PingFang SC","Microsoft YaHei",sans-serif 的短栈，index 用的是完整系统字体栈。
       字体不同会直接影响换行与观感，这里统一到 index 的取值。 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

/* A1. .header-top —— 旧版用 margin-bottom:15px 撑间距，index 用 padding-bottom:15px */
.header-top {
    margin: 0;
}

/* A2. 图片最大宽度：index 的全局 img{max-width:100%} 旧版没有，
       只把范围限定在页头页脚内的图片，避免影响正文图片 */
.logo img,
.footer-beian img {
    max-width: 100%;
}

/* A3. .navbar li a —— 旧版声明 position:relative + display:block，index 为默认定位 + flex */
.navbar li a {
    position: static;
}

/* A3b. .stats-bar —— 旧版写 margin:15px 0，index 只有 margin-top:15px（margin-bottom 为 0） */
.stats-bar {
    margin: 15px 0 0;
}

/* A3c. .footer-menu a —— 旧版用 margin:0 15px 10px 排版，index 用父级 flex gap */
.footer-menu a {
    margin: 0;
}

/* A3d. .footer-beian —— 旧版多写了 margin-bottom:5px */
.footer-beian {
    margin-bottom: 0;
}

/* A4. .footer-menu —— 旧版（artinfo 等）写死了 max-width:1200px 与左右 padding */
.footer-menu {
    padding: 0;
    max-width: none;
}

/* A5. .footer-copy / .footer-ad —— 旧版多写了外边距，index 无 */
.footer-copy {
    margin: 0;
}

.footer-ad {
    margin-top: 0;
    width: auto;
}

/* A6. .quick-links a —— 旧版用 margin-left 撑间距，index 用父级 flex gap */
.quick-links a {
    margin: 0;
}

/* A7. .stats-container —— 旧版移动端改成纵向，index 始终横向（该条移动端本就 display:none） */
.stats-container {
    flex-direction: row;
    align-items: center;
}

/* ---- 移动端（≤991px）---- */
@media (max-width: 991px) {
    /* A8. 旧版：.header-top align-items:stretch + margin-bottom:10px */
    .header-top {
        align-items: center;
        margin-bottom: 0;
    }
    /* A9. 旧版：.logo 居中并留 15px 下边距。
          normal 在 flex 容器中等价 flex-start，写 normal 可让 index 保持逐位一致 */
    .logo {
        justify-content: normal;
    }
    /* A10. 旧版：导航项 flex:1 0 auto + text-align:center，会撑满并换行 */
    .navbar li {
        flex: 0 1 auto;
        text-align: start;
    }
    /* A11. 旧版：.navbar li a 的 padding 带 !important，且 justify-content:center */
    .navbar li a {
        padding: 12px 8px !important;
        font-size: 14px;
        justify-content: normal;
    }
    /* A12. index 的 .header-container 移动端仍是 padding:15px 0 0（旧版为 10px 0 0） */
    .header-container {
        padding: 15px 0 0;
    }
    /* A12b. 旧版：备案链接在移动端 justify-content:center（index 无此声明） */
    .footer-beian a {
        justify-content: normal;
    }
    /* A13. 统计条内部：旧版改成纵向 + 快捷链接换行 */
    .stats-container {
        flex-wrap: wrap;
        gap: 8px 20px;
    }
    .quick-links {
        flex-wrap: nowrap;
        margin-top: 0;
    }
    .quick-links a {
        margin: 0;
    }
}

/* ---- 移动端（≤576px）---- */
@media (max-width: 576px) {
    /* A14. 对抗旧版 .navbar li a 的 padding !important */
    .navbar li a {
        padding: 10px 6px !important;
        font-size: 13px;
    }
}

/* ---- 移动端（≤480px）---- */
@media (max-width: 480px) {
    /* A15. 对抗旧版 .navbar li a 的 padding !important */
    .navbar li a {
        padding: 9px 6px !important;
        font-size: 13px;
    }
}

/* ===========================================================================
   窄屏（≤576px）：导航允许换行
   ---------------------------------------------------------------------------
   v1.0.22 导航新增「百科」后共 6 项，≤991px 的 .navbar{flex-wrap:nowrap} 在
   320/360px 视口会被撑出横向滚动（6 项 min-content ≈ 369px）。
   2026-11-08 新增「专题聚合」后共 7 项，min-content ≈ 433px，401~433px 之间
   原来的 nowrap 同样会溢出，因此折行断点从 ≤400px 放宽到 ≤576px。
   flex-wrap 只在内容确实放不下时才折行，≥433px 仍是单行，观感不变。
   =========================================================================== */
@media (max-width: 576px) {
    .navbar {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}



/* ==================================================================
 * 2026-11-07 跟进整改 ②：RSS 订阅独立成行
 * 原来 {#$rss_links#} 放在 .footer-menu 里，链接被 .footer-menu a 的
 * 14px / --text-light 覆盖，与 12px 的「RSS 订阅：」标签大小颜色不一致。
 * 现在单独一行放在菜单下、备案号上，链接与标签统一 12px 同色同透明度。
 * ================================================================== */
.footer-rss {
    margin: -8px 0 14px;
    text-align: center;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-light);
}
.footer-rss .hf-rss-links {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    font-size: 12px;
}
.footer-rss .hf-rss-links > span,
.footer-rss .hf-rss-links a {
    font-size: 12px;
    color: inherit;
    opacity: .8;
    text-decoration: none;
}
.footer-rss .hf-rss-links a:hover { color: var(--primary); opacity: 1; }
@media (max-width: 576px) {
    .footer-rss { margin: -4px 0 12px; }
}

/* 专题聚合 · 全站页脚热门专题内链（2026-11-07，渲染后注入，模板零改动） */
.footer-topic{margin:-6px 0 14px;text-align:center;font-size:12px;line-height:1.8;color:var(--text-light,#8a94a6);overflow-wrap:anywhere}
.footer-topic a{color:inherit;opacity:.85;text-decoration:none;margin:0 3px}
.footer-topic a:hover{opacity:1;text-decoration:underline}
.footer-topic .ft-sep{opacity:.5;margin:0 3px}


/* ================================================================== *
 * 随机栏目「换一批」按钮（2026-11-10）
 * 用 currentColor + 透明底，自动适配 default / guoqing / spring 三套配色，
 * 不改动各主题原有的标题样式；父级是 flex 时 margin-left:auto 把它推到右上角。
 * ================================================================== */
.hf-rand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.7;
    font-weight: 400;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: .62;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.hf-rand-btn:hover, .hf-rand-btn:focus-visible { opacity: 1; color: #1a68cc; outline: none; }
.hf-rand-btn:disabled { opacity: .35; cursor: default; }
.hf-rand-btn .hf-rand-ico { font-size: 13px; line-height: 1; }
/* 接口返回的条目比模板节点少时，多余节点只隐藏、不删（下次换一批还能用） */
.hf-rand-hide { display: none !important; }

/* 已有「更多 / 徽标」占住右侧的容器：按钮不再二次抢 margin-left:auto */
.top-header .hf-rand-btn,
.au-panel-h .hf-rand-btn { margin-left: 0; }

/* 窄屏（≤360px）标题+按钮可能挤在一行：允许标题栏换行，按钮本身不压缩 */
.recommendation-column-title { flex-wrap: wrap; }
.hf-rand-btn { flex: 0 0 auto; }
@media (max-width: 360px) {
    .hf-rand-btn { padding: 2px 7px; font-size: 11px; }
}

@media (max-width: 360px) {
    .top-header { gap: 6px; }
    .top-header .top-badge { padding: 3px 7px; font-size: 11px; }
}


/* ================================================================== *
 * 推荐站点卡片：站点名只占一行，超出显示「...」（2026-11-10 v1.9.12）
 * ------------------------------------------------------------------
 * 站长资讯频道 / 百科频道的「推荐站点」，以及百科总开关关闭时各频道页
 * 回落的推荐站点卡片，都用 .recommended-name 显示站点名。原来没有约束，
 * 长站名会折成多行、卡片高低不齐。
 * max-width:100% 同时防止 .recommended-sites 的 1fr(min-content) 被
 * nowrap 长标题撑宽（否则 text-overflow 不触发，与站点详情页同一个坑）。
 * 本文件在各页面 CSS 之后加载，可覆盖 baike.css 的 overflow-wrap:anywhere。
 * ================================================================== */
.recommended-name {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* grid 项默认 min-width:auto(=min-content)，窄屏下 nowrap 长站名仍会把
   auto-fill 的列撑宽（实测 375px 下列被撑到 755px 并导致整页横向溢出）。
   允许卡片收缩后列宽固定，省略号才会真正触发。 */
.recommended-card { min-width: 0; }