/* ==========================================================================
 * 页眉 / 页脚样式：布局骨架含姐妹站点 wuzuniao.github.io（style/header_footer.css，
 * 含 init.css 中作用于页眉页脚的布局 reset）残留约定，颜色按根目录 DESIGN_lan.md
 * （Lan 设计语言）令牌映射；页眉导航按需求简化为「logo + 回到导航站」单链接
 * （2026-09-08），页脚改为主流三列文字排列（页面导航 / 规范文档 / 开源仓库，
 * 原站二维码/图标区样式已随结构删除）：
 *   原站语义令牌 → 本项目 global.css 语义令牌（Lan）：
 *   --color-canvas(#fafafa)      → --page-bg-color（冰蓝画布 #F0F7FF）
 *   --color-elevated(#ffffff)    → --color-card-bg（白卡 #ffffff）
 *   --color-ink(#171717)         → --color-text-primary（墨 #0e0f0c）
 *   --color-body(#4d4d4d)        → --color-text-secondary（正文 #454745）
 *   --color-mute(#8f8f8f)        → --color-text-tertiary（弱文本 #868685）
 *   --color-hairline(-strong)    → --color-separator（hairline #ebebeb，Lan 无强化档）
 *   --color-link(#0070f3)        → --color-brand（Tech Blue #0066FF）
 *   --color-on-primary           → --color-text-inverse（反白 #ffffff）
 *   登录 CTA 墨底 → Lan 唯一品牌强调色 Tech Blue（DESIGN_lan.md：主 CTA 必为 Tech Blue）。
 * 主题切换 / 中英文切换控件不迁移：Lan 不做暗色模式，本服务页面无多语言版本。
 *
 * 单位基准：原站 body 16px、尺寸用 em 表达；本项目 global.css 的 html 根字号随视口
 * 缩放（rem 方案），故在页眉页脚容器上锁定 font-size: 16px，使全部 em 值与原站
 * 解析一致（原文件中的 rem 亦按 16px 基准换算为 em），不随 rem 缩放联动。
 * ========================================================================== */

/* ===== 页面骨架：页眉页脚常规流，内容区 flex:1 使页脚在内容不足时贴底 ===== */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header#site-header,
footer#site-footer {
  flex: none;
}

.auth-page,
.profile-page,
.doc-page {
  flex: 1 0 auto;
  /* flex 子项默认 min-width:auto 会被固定宽卡片（34.2rem+padding）撑出视口，
     置 0 恢复与原版一致的块级收缩行为 */
  min-width: 0;
}

/* ===== 页眉页脚范围内的最小 reset（对齐原站 init.css，仅作用于本区域） ===== */
#site-header,
#site-footer {
  /* 原站 init.css 的盒模型与元素 reset（页眉页脚所需子集） */
}

#site-header *,
#site-footer * {
  box-sizing: border-box;
}

#site-header a,
#site-footer a {
  text-decoration: none;
  color: var(--color-text-primary);
}

#site-header a:hover,
#site-footer a:hover {
  color: var(--color-brand);
}

#site-header img,
#site-footer img {
  vertical-align: bottom;
}

/* 导航与页脚容器限宽居中（对齐原站 init.css：max-width 62.5em @16px = 1000px） */
.pc-nav,
.footer {
  max-width: 62.5em;
  margin-left: auto;
  margin-right: auto;
}

/* 页眉页脚骨架子项强制全宽（原站 init.css 的 header/footer margin:auto 居中
   在块级布局下等价全宽，但本页骨架为 flex column，水平 auto margin 会使
   stretch 失效收缩为 fit-content，故此处显式 width:100%） */
header#site-header,
footer#site-footer {
  width: 100%;
}

/* em 基准锁定：与原站 body 16px 一致（见文件头说明） */
.pc-header,
.m-qian,
footer {
  font-size: 16px;
}

/* ============ PC 端导航 ============ */
.pc-header {
  width: 100%;
  background: var(--page-bg-color);
  height: 6.25em;
  box-sizing: border-box;
}

/* 导航容器：flex 布局，左侧 logo + 回到导航站链接，右侧工具区 */
.pc-nav {
  display: flex;
  align-items: center;
}

.pc-nav > .pc-nav-logo {
  flex: 0 0 auto;
  width: 18.75em;
  text-align: center;
  line-height: 6.25em;
}

.pc-nav > .pc-nav-logo > img {
  width: 15.625em;
  max-width: 15.625em;
}

/* 「回到导航站」外链（https://www.wuzuniao.com）：视觉对齐原菜单项
   （导航高度垂直居中 + 悬停变蓝）；带 #site-header 前缀提权，避免被上方
   #site-header a 链接墨色/hover 统一规则覆盖（特异性 1,0,1 > 0,1,0） */
#site-header .pc-nav-site {
  flex: 0 0 auto;
  margin-left: 0.5em;
  line-height: 6.25em;
  display: block;
  text-align: left;
  padding: 0 0.5em;
  font-size: 1em;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

#site-header .pc-nav-site:hover {
  color: var(--color-brand);
}

/* ============ 右侧工具区（登录按钮容器，占位） ============ */
.pc-nav-tools {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625em;
}

/* ============ 登录按钮（全站 header 注入；见 nav-partial.js） ============ */
/* 登录按钮（选择器带 #site-header 前缀提权：特异性 (1,1,0) 高于上方 #site-header a
   链接墨色规则 (1,0,1)——否则反白前景色被整体链接色覆盖，蓝底渲染成黑字）。
   默认（未登录）：Lan 主 CTA——Tech Blue 底反白胶囊（DESIGN_lan.md button-primary，
   Tech Blue 是唯一 CTA 色；hover 以透明度反馈，不引入令牌外色值）；
   已登录 .is-logged：切换为中性胶囊，显示本地存储内的用户名（去除高亮）。 */
#site-header .nav-login {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 1em;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: 0.8125em;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* 默认态悬停：Tech Blue 底轻微降不透明度（保持反白文字） */
#site-header .nav-login:hover {
  opacity: 0.85;
  color: var(--color-text-inverse);
}

/* 已登录态：白底发丝边中性胶囊，去除高亮 */
#site-header .nav-login.is-logged {
  border-color: var(--color-separator);
  background-color: var(--color-card-bg);
  color: var(--color-text-secondary);
  font-weight: 400;
}

#site-header .nav-login.is-logged:hover {
  opacity: 1;
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}

/* ============ 页脚 ============ */
footer {
  width: 100%;
  /* 白色页脚面（--color-card-bg），在整体冰蓝画布上轻微区分（对齐原站 elevated 语义） */
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
}

/* 主区：左侧品牌 logo + 右侧三列文字链接（页面导航 / 规范文档 / 开源仓库） */
.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2em;
  padding: 2.5em 0;
  /* 主分割线：链接区与备案/版权区分界 */
  border-bottom: 1px solid var(--color-separator);
  box-sizing: border-box;
}

.footer-brand {
  flex: 0 0 auto;
}

.footer-brand img {
  /* 不缩放：至少维持图片固有大小（250x100） */
  max-width: 100%;
}

.footer-cols {
  display: flex;
  gap: 5em;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1em;
  /* 子项内容宽（不随列拉伸），链接 hover 区域与文字等宽 */
  align-items: flex-start;
}

/* 列内链接：带 #site-footer 前缀提权（特异性高于上方 #site-footer a 链接统一色规则）；
   flex + center 使带图标项（GitHub/Gitee）的图标与文字垂直居中 */
#site-footer .footer-col > a {
  color: var(--color-text-secondary);
  font-size: 0.875em;
  line-height: 1.6;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.35em;
}

#site-footer .footer-col > a:hover {
  color: var(--color-brand);
}

/* 「联系我们」悬停邮箱卡片：纯 CSS tooltip，hover 时以白卡形式显示邮箱
   （Lan 卡片语言：白底 + hairline 描边 + 12px 圆角 + 轻阴影；朝上弹出避免
   被页脚底部截断；触屏无 hover 场景自然不显示，移动端直接点击进 QQ 客服、
   不展示邮箱文案（2026-09-10）） */
.footer-contact {
  position: relative;
}

.footer-contact-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 0.5em 0.75em;
  border: 1px solid var(--color-separator);
  border-radius: 0.75rem;
  background: var(--color-card-bg);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  font-size: 0.9em;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

#site-footer .footer-contact:hover .footer-contact-card,
#site-footer .footer-contact:focus-visible .footer-contact-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.copyright {
  text-align: center;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  font-size: 0.875em;
}

.copyright > p {
  line-height: 1.5em;
  /* 收紧 UA 默认 1em 外边距：备案行与版权行间距适中不松散 */
  margin: 0.25em 0;
  color: var(--color-text-tertiary);
}

.copyright > p > a {
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}

.copyright > p > a:hover {
  color: var(--color-brand);
}

.gongan {
  margin-left: 1em;
}

.gongan > img {
  margin-bottom: 2px;
}

/* PC 界面下隐藏手机版内容 */
.m-qian {
  display: none;
}

.m-footer {
  display: none;
}

/* 小于 1600 大于 1200 稍微调整字体 */
@media screen and (max-width: 1600px) and (min-width: 1025px) {
  /* 导航栏：回到导航站链接（视觉对齐原菜单项的降档字号） */
  #site-header .pc-nav-site {
    font-size: 0.9375em;
  }

  /* 页脚 */
  #site-footer .footer-col > a {
    font-size: 0.8125em;
  }

  .copyright {
    font-size: 0.8125em;
  }
}

/* ============ 移动端 ============ */
@media screen and (max-width: 1024px) {
  /* 移动端导航 */
  .pc-header {
    display: none;
  }

  .m-qian {
    display: block;
    height: 60px;
    background: var(--page-bg-color);
    width: 100%;
    overflow: hidden;
  }

  .m-qian .m-qian-lf {
    padding-top: 5px;
    padding-left: 5px;
    float: left;
  }

  .m-qian .m-qian-lf .m-qian-logo {
    height: 50px;
    display: block;
  }

  .m-qian .m-qian-rg {
    padding-right: 5%;
    padding-top: 17.5px;
    float: right;
  }

  /* 顶栏工具区：「回到导航站」+ 登录按钮同排 flex 居中（登录作为最右子项贴齐右缘）。
     尺寸核验：logo 250x100 在移动端高 50px → 宽 125px；右簇 5% + 链接(5 字 ≈ 70px)
     + 按钮(≈ 50px) + 间距合计 ≈ 135px；左 125 + 右 135 = 260px < 320px 视口，无溢出风险。 */
  .m-qian-tools {
    display: flex;
    align-items: center;
    gap: 0.75em;
  }

  /* 「回到导航站」顶栏链接（带 #site-header 前缀提权，理由同 PC 端 .pc-nav-site） */
  #site-header .m-qian-site {
    color: var(--color-text-secondary);
    font-size: 0.8125em;
    line-height: 25px;
    transition: color 0.15s ease;
  }

  #site-header .m-qian-site:hover {
    color: var(--color-brand);
  }

  /* 登录按钮尺寸覆盖（特异性高于基规则 #site-header .nav-login） */
  #site-header .m-qian-tools .nav-login {
    height: 25px;
    padding: 0 0.9em;
    font-size: 0.8125em;
  }

  /* 移动端页脚 */
  .footer {
    display: none;
  }

  .m-footer {
    display: block;
    padding: 2em 1.25em;
    background: var(--color-card-bg);
  }

  /* 三列文字排列：页面导航 / 规范文档 / 开源仓库（与 PC 端页脚同构）。
     移动端收拢居中（不沿用 space-between：窄屏下剩余空间全被拉开成列间距，
     首尾列还贴着容器 1.25em 左右 padding），gap 固定 3em 使列间距稳定不随屏宽放大 */
  .m-footer-cols {
    display: flex;
    justify-content: center;
    gap: 3em;
    padding-bottom: 1.25em;
    border-bottom: 1px solid var(--color-separator);
  }

  .m-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    /* 子项内容宽（同 PC 端 .footer-col） */
    align-items: flex-start;
  }

  /* 列内链接：带 #site-footer 前缀提权（理由同 PC 端）；flex + center 对齐图标与文字 */
  #site-footer .m-footer-col > a {
    color: var(--color-text-secondary);
    font-size: 0.875em;
    line-height: 1.6;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.3em;
  }

  #site-footer .m-footer-col > a:hover {
    color: var(--color-brand);
  }

  .m-copyright {
    text-align: center;
    font-size: 0.75em;
    padding-top: 0.75em;
  }

  .m-copyright > p {
    line-height: 1.5em;
    /* 收紧 UA 默认 1em 外边距（同 PC 端 .copyright > p） */
    margin: 0.25em 0;
    color: var(--color-text-tertiary);
  }

  .m-copyright > p > a {
    color: var(--color-text-tertiary);
    transition: color 0.15s ease;
  }

  .m-copyright > p > a:hover {
    color: var(--color-brand);
  }

  .gongan {
    margin-left: 0;
  }
}

/* ============ 页眉 <noscript> 兜底（JS 禁用时可见，仅供爬虫/无脚本用户） ============ */
/* 页眉/页脚由 nav-partial.js 注入；JS 禁用时显示各页面 <noscript> 内的兜底导航
   （logo + 回到导航站 + 登录入口）。链接颜色不单独声明——继承 #site-header a
   统一色规则，hover 变蓝由既有规则自动生效（规避特异性覆盖问题） */
.noscript-nav {
  max-width: 62.5em;
  margin: 0 auto;
  padding: 1em 1.25em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 1.25em;
  background: var(--page-bg-color);
  border-bottom: 1px solid var(--color-separator);
  font-size: 16px;
}

.noscript-nav > a {
  font-size: 0.9375em;
  line-height: 1.6;
}

.noscript-nav img {
  height: 2.5em;
  display: block;
}

/* ============ 页脚 <noscript> 兜底（JS 禁用时可见，仅供爬虫/无脚本用户） ============ */
/* 页脚由 nav-partial.js 注入，JS 禁用时显示此兜底。
   仅在不执行 JS 时由浏览器渲染；启用 JS 时 nav-partial.js 会覆盖占位节点，noscript 不显示 */
.noscript-footer {
  max-width: 62.5em;
  margin: 0 auto;
  padding: 1em 1.25em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
  background: var(--color-card-bg);
  border-top: 1px solid var(--color-separator);
  color: var(--color-text-tertiary);
  font-size: 0.875em;
}

.noscript-footer > a {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.noscript-footer > a:hover {
  color: var(--color-brand);
}