/* ============================================================
   GHUB.help —— 全站基础样式

   这份文件在「所有页面」加载，负责四件事：
   1. 设计令牌（颜色 / 字体 / 间距 / 缓动）—— 全站唯一来源
   2. 氛围层：暖纸白底 + 24px 工程网格
   3. 页眉 / 页脚（首页与内页共用同一套类名）
   4. 内页正文排版：标题区、段落、列表、表格、代码、FAQ 折叠项

   首页专属的首屏、索引表、下载区、联系区在 front.css 里，
   只用 `is_front_page()` 加载，不和这里混。

   关于优先级：Twenty Twenty-Four 的 theme.json 会输出一套
   `body{...}` / `h1{...}` 的全局样式。这里刻意用
   `html body`、`.ghub-inner .entry-content h2` 这种更高特异性的写法，
   避免靠 !important 打架。
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root{
  --paper:#f4f2ed;
  --paper-2:#ebe8e0;
  --ink:#16150f;
  --ink-2:#5a584e;
  --ink-3:#6f6d64;   /* 4.64:1 —— 三级文字也不许低于 4.5 */
  --line:rgba(22,21,15,.14);
  --line-strong:rgba(22,21,15,.30);
  --accent:#0b56e0;
  --accent-ink:#0a4bc4;

  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:40px; --space-6:64px; --space-7:96px; --space-8:144px;

  --radius-sm:2px; --radius-md:4px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:160ms; --dur-base:320ms; --dur-slow:640ms;

  --page-max:1220px;
}

/* ============================================================
   2. 基础重置
   —— 这里不做「h1~p 全部 margin:0」那种强重置，
      否则会把区块编辑器给正文排的段间距一起抹平。
      强重置只留给首页（front.css），因为那里的版式完全自绘。
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth}

html body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-cn);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}

/* 聚焦环：2px + 2px 偏移，全站统一 */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* 跳过导航：默认移出屏幕，聚焦时回到左上角 */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100000;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; font-size:14px; font-weight:600;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

/* 等宽小标签：全站唯一的「技术语感」来源 */
.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* 小标题前的一根短线，首页与内页共用 */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-2); margin-bottom:var(--space-4);
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--line-strong);
}

/* ============================================================
   3. 氛围层：24px 工程网格，透明度 3.5%
   ============================================================ */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, rgba(22,21,15,.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(22,21,15,.035) 0 1px, transparent 1px 24px);
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
/* 顶部一道极淡的信号色光晕，替代纯平背景。
   注意：左右必须贴边（不能用负 inset），否则 fixed 图层会把文档撑宽，
   在移动端造成横向溢出——这正是原站踩过的坑。 */
.glow{
  position:fixed; inset:0 0 auto 0; height:60vh; z-index:0; pointer-events:none;
  background:radial-gradient(48rem 26rem at 78% -6%, rgba(11,86,224,.10), transparent 68%);
}

.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--space-4)}

/* ============================================================
   4. 页眉
   ============================================================ */
.site-head{
  position:relative; z-index:2;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(8px);
}
.site-head__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); min-height:64px;
}
/* 品牌标记：黑色圆底 + 白色变形 J（站点字母图标）。
   圆用 background 画、图用 filter 压成纯白剪影，两者都可单独改。 */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand__mark{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--ink);
  display:grid; place-items:center;
  overflow:hidden;
}
.brand__mark img{
  width:17px; height:17px;
  display:block;
  /* brightness(0) 先把任意颜色压成黑，invert(1) 再翻成白 —— 等效于「任意图 → 白色剪影」 */
  filter:brightness(0) invert(1);
}
.brand__name{font-size:15px; font-weight:700; letter-spacing:.06em}
.brand__name em{font-style:normal; color:var(--ink-3); font-weight:400}

.nav{display:flex; align-items:center; gap:var(--space-1)}
.nav a{
  font-size:13.5px; text-decoration:none; padding:10px 12px;
  color:var(--ink-2); border-radius:var(--radius-sm);
  transition:color var(--dur-fast) ease-out;
  position:relative;
}
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ============================================================
   5. 页脚
   ============================================================ */
.site-foot{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:var(--paper-2);
  padding-block:var(--space-4);
  font-size:12.5px; line-height:1.9; color:var(--ink-2);
}
.site-foot__top{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4) var(--space-6);
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--line);
}
/* 右侧成组：链接 + 二维码，避免三栏 grid 把两者拉开 */
.foot-aside{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--space-4) var(--space-5);
}
/* 页脚二维码：必须留白色静区，否则手机扫不出来 */
.foot-qr{
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-start;
}
.foot-qr img{
  width:116px; height:116px;
  box-sizing:content-box;   /* 让 116 是二维码本身，白色静区额外加在外圈 */
  padding:6px;              /* 二维码四周的白色静区，太小会扫不出来 */
  background:#fff;
  border:1px solid var(--line-strong);
  display:block;
}
.foot-qr .mono{color:var(--ink-3)}
.site-foot__links{display:flex; flex-wrap:wrap; gap:var(--space-4)}
.site-foot__links a{text-decoration:none; color:var(--ink-2)}
.site-foot__links a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.disclaimer{max-width:52em; color:var(--ink-2)}
.disclaimer strong{color:var(--ink); font-weight:600}
/* 可点击元素最小 44px 高（页脚链接补足） */
.site-foot__links a{display:inline-block; padding-block:11px}
.site-foot__links{margin-block:-11px}

/* ============================================================
   6. 内页框架
   —— 只对带 .ghub-inner 的 body 生效（functions.php 里加的类），
      首页不受影响。
   ============================================================ */
.ghub-inner{
  /* 把父主题的调色板与字体映射到我们这一套：
     区块自己写的 has-base-background-color 之类会自动跟着变 */
  --wp--preset--color--base:#f4f2ed;
  --wp--preset--color--contrast:#16150f;
  --wp--preset--color--accent:#0b56e0;
  --wp--preset--color--accent-5:#ebe8e0;
  --wp--preset--font-family--heading:var(--font-cn);
  --wp--preset--font-family--body:var(--font-cn);
  /* 正文栏宽：720px ≈ 中文每行 40 字上下，比默认的 620 更耐读 */
  --wp--style--global--content-size:720px;
  --wp--style--global--wide-size:1100px;
}

.ghub-inner main{position:relative; z-index:1}
.ghub-inner main.wp-block-group{
  margin-block:0;
  padding-block:var(--space-7) var(--space-6);
}

/* 标题区：一根 2px 实线压底，和首页索引表的表头呼应 */
.ghub-inner .wp-block-post-title{
  font-family:var(--font-cn);
  font-size:clamp(1.95rem, 4.4vw, 3rem);
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:800;
  text-wrap:balance;
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-4);
  border-bottom:2px solid var(--ink);
}
/* 标题上方那行等宽小字，由 functions.php 注入 */
.ghub-inner .page-kicker{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-2); margin-bottom:14px;
}
.ghub-inner .page-kicker::before{
  content:""; width:28px; height:1px; background:var(--line-strong);
}

.ghub-inner .wp-block-post-date,
.ghub-inner .wp-block-post-author-name,
.ghub-inner .wp-block-post-terms{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   7. 正文排版
   —— 父主题的全局样式只保证「能用」，这里重新定节奏
   ============================================================ */
.ghub-inner .entry-content{
  font-family:var(--font-cn);
  font-size:16.5px;
  line-height:1.85;
  color:var(--ink);
}

.ghub-inner .entry-content p{margin-block:0 1.15em}
.ghub-inner .entry-content p:last-child{margin-bottom:0}

.ghub-inner .entry-content h2,
.ghub-inner .entry-content h3,
.ghub-inner .entry-content h4{
  font-family:var(--font-cn);
  font-weight:700;
  letter-spacing:-.012em;
  line-height:1.35;
  text-wrap:balance;
}
.ghub-inner .entry-content h2{
  font-size:clamp(1.28rem, 2.2vw, 1.55rem);
  margin-block:2.1em .75em;
  padding-top:.85em;
  border-top:1px solid var(--line);
}
.ghub-inner .entry-content h3{
  font-size:clamp(1.1rem, 1.7vw, 1.22rem);
  margin-block:1.7em .6em;
}
.ghub-inner .entry-content h4{
  font-size:1rem;
  margin-block:1.5em .5em;
}
/* 正文第一段的 h2 不需要一根顶线，避免和标题下的粗线打架 */
.ghub-inner .entry-content > h2:first-child{
  margin-top:0; padding-top:0; border-top:0;
}

/*
 * 正文里的链接用信号蓝。
 * 但必须排除按钮：按钮的 <a> 也是 .entry-content 的后代，
 * 这条选择器特异性 (0,2,1) 会压过 .wp-block-button__link (0,2,0)，
 * 结果黑底按钮上的字被刷成蓝色，读不清。
 */
.ghub-inner .entry-content a:not(.wp-block-button__link){
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur-fast) ease-out;
}
.ghub-inner .entry-content a:not(.wp-block-button__link):hover{
  color:var(--accent-ink);
  text-decoration-thickness:2px;
}

/*
 * 少数页面（驱动下载、更新日志）里，作者自己加了深色底的按钮和区块。
 * 这些页面的正文链接改成跟随所在区域的前景色 ——
 * 黑色区块里是浅色字，纸白底色上是墨黑字，靠 currentColor 自动适配，
 * 不再用蓝色跟深色背景打架。
 * 类名由 functions.php 按 slug 自动挂（download / release）。
 */
.ghub-plain-links .entry-content a:not(.wp-block-button__link){
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.ghub-inner .entry-content ul,
.ghub-inner .entry-content ol{
  padding-inline-start:1.45em;
  margin-block:0 1.3em;
}
.ghub-inner .entry-content ul{list-style:disc}
.ghub-inner .entry-content ol{list-style:decimal}
.ghub-inner .entry-content li{margin-block:.42em}
.ghub-inner .entry-content li::marker{color:var(--ink-3)}

.ghub-inner .entry-content blockquote{
  margin:1.7em 0;
  padding:2px 0 2px 20px;
  border-left:2px solid var(--accent);
  color:var(--ink-2);
  font-size:15.5px;
}
.ghub-inner .entry-content blockquote p:last-child{margin-bottom:0}

.ghub-inner .entry-content code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:rgba(22,21,15,.07);
  padding:.15em .4em;
  border-radius:var(--radius-sm);
}
.ghub-inner .entry-content pre{
  margin-block:1.6em;
  padding:16px 18px;
  background:var(--ink);
  color:#f4f2ed;
  font-size:12.5px;
  line-height:1.75;
  overflow:auto;
  border-radius:var(--radius-sm);
}
.ghub-inner .entry-content pre code{
  background:none; padding:0; color:inherit; font-size:inherit;
}

.ghub-inner .entry-content table{
  width:100%;
  border-collapse:collapse;
  margin-block:1.7em;
  font-size:14.5px;
  line-height:1.6;
}
.ghub-inner .entry-content th,
.ghub-inner .entry-content td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.ghub-inner .entry-content th{
  font-weight:600;
  border-bottom:1px solid var(--line-strong);
  background:rgba(22,21,15,.025);
}

.ghub-inner .entry-content img{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.ghub-inner .entry-content figure{margin-block:1.8em}
.ghub-inner .entry-content figcaption{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.07em;
  color:var(--ink-3);
  margin-top:9px;
}

.ghub-inner .entry-content hr{
  border:0;
  border-top:1px solid var(--line-strong);
  margin-block:2.2em;
}

/* ============================================================
   8. FAQ 折叠项（core/details 区块）
   —— 只负责折叠态的外观：分隔线、+ / – 指示器、展开高亮。
      编号不在这里生成，内容里已经有「1.」「2.」
   ============================================================ */
.ghub-inner .wp-block-details{
  border-bottom:1px solid var(--line);
  scroll-margin-top:24px;
  transition:background var(--dur-fast) ease-out;
}
.ghub-inner .wp-block-details:first-of-type{border-top:1px solid var(--line)}

.ghub-inner .wp-block-details > summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:16px 34px 16px 0;
  font-size:15.5px;
  font-weight:600;
  line-height:1.6;
  color:var(--ink);
  transition:color var(--dur-fast) ease-out;
}
.ghub-inner .wp-block-details > summary::-webkit-details-marker{display:none}
.ghub-inner .wp-block-details > summary::marker{content:""}

/*
 * 这里刻意没有用 CSS counter 加 01…19 的编号。
 * 原站的 summary 文字本身就带着「1.」「2.」——再加一层会变成
 * 「01  1.卡初始化」的双重编号。内容里的编号是作者维护的，
 * 样式不该跟它抢这个位置。
 */

/* 右侧展开指示：+ / –，比三角更贴这台机器的语气 */
.ghub-inner .wp-block-details > summary::after{
  content:"+";
  position:absolute;
  right:4px; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:400;
  color:var(--ink-3);
  transition:transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease-out;
}
.ghub-inner .wp-block-details[open] > summary::after{
  content:"–"; color:var(--ink);
}
.ghub-inner .wp-block-details > summary:hover{color:var(--accent)}

/* 展开后的内容与标题文字左对齐（左右留出与 summary 相同的边界） */
.ghub-inner .wp-block-details > *:not(summary){
  margin-inline-start:0;
  margin-inline-end:34px;
  margin-block:0 18px;
}
.ghub-inner .wp-block-details[open]{background:rgba(22,21,15,.022)}

/* 从首页带 #f03 过来时，那条要能被一眼找到 */
.ghub-inner .wp-block-details:target{background:rgba(11,86,224,.05)}

/* ============================================================
   9. 表单（内页评论区、搜索区块）
   ============================================================ */
.ghub-inner input[type="text"],
.ghub-inner input[type="email"],
.ghub-inner input[type="url"],
.ghub-inner input[type="search"],
.ghub-inner textarea{
  font-family:var(--font-cn);
  font-size:15px;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius-sm);
  max-width:100%;
}
.ghub-inner input:focus-visible,
.ghub-inner textarea:focus-visible{
  border-color:var(--accent);
  outline-offset:1px;
}
/*
 * 按钮。
 * 只定「形态」（字号、内边距、圆角、过渡），颜色让位给作者：
 * 在编辑器里给按钮设过背景色 / 文字色的，这里一律不覆盖，
 * 否则会出现「我在后台设了黑底白字，前台却变成蓝字」这种事。
 * 没设颜色的，兜底成墨黑底 + 纸白字。
 */
.ghub-inner .wp-block-button__link,
.ghub-inner button[type="submit"],
.ghub-inner input[type="submit"]{
  font-family:var(--font-cn);
  font-size:14px;
  font-weight:600;
  padding:12px 20px;
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-decoration:none;
  transition:background var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}

/* 背景兜底：没显式设背景的才给墨黑底 */
.ghub-inner .wp-block-button__link:not(.has-background),
.ghub-inner button[type="submit"],
.ghub-inner input[type="submit"]{
  background:var(--ink);
  border-color:var(--ink);
}

/* 文字兜底：没显式设文字色的才给纸白字 */
.ghub-inner .wp-block-button__link:not(.has-text-color),
.ghub-inner button[type="submit"],
.ghub-inner input[type="submit"]{
  color:var(--paper);
}

/* hover 只作用于「我们自己定的」墨黑按钮，作者设过底色的不动 */
.ghub-inner .wp-block-button__link:not(.has-background):hover,
.ghub-inner button[type="submit"]:hover,
.ghub-inner input[type="submit"]:hover{
  background:var(--accent);
  border-color:var(--accent);
}

/* ============================================================
   10. 动效与降级
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   11. 响应式
   ============================================================ */
@media (max-width:1000px){
  .ghub-inner main.wp-block-group{padding-block:var(--space-6) var(--space-5)}
}
@media (max-width:720px){
  .wrap{padding-inline:var(--space-3)}

  /* 移动端不做汉堡菜单：只有 4 个入口，折行比藏起来更好用 */
  .site-head__in{
    flex-wrap:wrap; align-items:center;
    gap:2px; min-height:0;
    padding-block:10px;
  }
  .nav{
    width:100%;
    flex-wrap:wrap;
    gap:0;
    margin-inline:-10px;   /* 抵掉链接自身的横向内边距，左对齐到容器边缘 */
  }
  .nav a{
    padding:9px 10px;
    font-size:13px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }
  .nav a::after{left:10px; right:10px; bottom:4px}

  .site-foot__top{gap:var(--space-4)}
  .foot-aside{width:100%; gap:var(--space-4)}
  .foot-qr{flex-direction:column; align-items:flex-start; gap:8px}
  .foot-qr img{width:96px; height:96px}

  /* 内页：正文占满，折叠项左右不留缩进 */
  .ghub-inner main.wp-block-group{padding-block:var(--space-5) var(--space-5)}
  .ghub-inner .wp-block-post-title{
    font-size:clamp(1.7rem, 7.4vw, 2.3rem);
    margin-bottom:var(--space-2);
    padding-bottom:var(--space-3);
  }
  .ghub-inner .entry-content{font-size:16px; line-height:1.8}
  .ghub-inner .wp-block-details > summary{
    padding:15px 30px 15px 0;
    font-size:15px;
  }
  .ghub-inner .wp-block-details > *:not(summary){
    margin-inline-end:0;
  }
  .ghub-inner .entry-content h2{margin-block-start:1.9em}
  .ghub-inner .entry-content table{display:block; overflow-x:auto; white-space:nowrap}
}