/* ============================================================================
   H&C 主题 — 文章正文样式层（article.css）
   ----------------------------------------------------------------------------
   作用：让「插件（Githuber MD / Gutenberg）写出来的普通 HTML」直接呈现
        我们确认过的博客页效果 —— 作者不需要在正文里写任何 class。

   原理：
     本文件只使用「元素选择器」(p / h2 / table ...)，特异性低于 Tailwind 的
     类选择器。因此：
       · 老文章里已有的 Tailwind class  → 仍然生效（类选择器优先级更高）
       · 新文章里光秃秃的语义标签        → 由本文件接管样式
     两层叠加，新旧文章视觉一致。

   加载顺序：tailwind.css（编译产物）→ article.css（本文件）
   作用域  ：.hc-article-body（single.php 的正文容器 class）
   ========================================================================== */

/* ⚠️ 必须分层！tailwind.css 用的是 CSS 级联层（@layer theme, base, components, utilities）。
   未分层的规则优先级【高于】任何分层规则（与选择器权重无关）——
   所以不套 @layer 的话，本文件的元素规则会反过来压掉工具类，
   与下面"元素选择器特异性更低、工具类仍生效"的假设【完全相反】。
   套进 @layer components 后，utilities 层的工具类才能正常覆盖本文件。 */
@layer components {

/* ---------- 1. 基础排版 ---------------------------------------------------- */
.hc-article-body {
  color: #334155;              /* slate-700 */
  line-height: 1.75;           /* leading-relaxed */
  font-size: 1rem;
}
.hc-article-body > * + * { margin-top: 1.5rem; }   /* space-y-6 */

.hc-article-body p { margin: 0; }

.hc-article-body h2,
.hc-article-body h3,
.hc-article-body h4 {
  color: #1e293b;              /* slate-800 */
  font-weight: 700;
  line-height: 1.3;
  scroll-margin-top: 7rem;     /* 避开 sticky header，锚点跳转不被遮挡 */
}
.hc-article-body h2 { font-size: 1.5rem;   margin-top: 2.5rem; margin-bottom: 1rem; }
.hc-article-body h3 { font-size: 1.25rem;  margin-top: 2rem;   margin-bottom: .75rem; }
.hc-article-body h4 { font-size: 1.05rem;  margin-top: 1.5rem; margin-bottom: .5rem; }

.hc-article-body a { color: #f97316; text-decoration: none; transition: color .15s; }
.hc-article-body a:hover { text-decoration: underline; }

.hc-article-body strong { color: #1e293b; font-weight: 700; }
.hc-article-body em { font-style: italic; }

/* ---------- 2. 列表 -------------------------------------------------------- */
.hc-article-body ul,
.hc-article-body ol { padding-left: 1.5rem; }
.hc-article-body ul { list-style: disc; }
.hc-article-body ol { list-style: decimal; }
.hc-article-body li + li { margin-top: .4rem; }
.hc-article-body li > ul,
.hc-article-body li > ol { margin-top: .4rem; }

/* Githuber MD 的 GFM 任务列表 */
.hc-article-body .gfm-task-list { list-style: none; padding-left: 0; }
.hc-article-body .gfm-task-list li { display: flex; gap: .5rem; align-items: flex-start; }
.hc-article-body .gfm-task-list input { margin-top: .35rem; }

/* ---------- 3. 引用 -------------------------------------------------------- */
.hc-article-body blockquote {
  border-left: 4px solid #f97316;
  background: #fff7ed;                      /* orange-50 */
  border-radius: 0 .5rem .5rem 0;
  padding: 1rem 1.25rem;
  color: #475569;
}
.hc-article-body blockquote p + p { margin-top: .75rem; }

/* ---------- 4. 表格（老文章无 class 也能看）-------------------------------- */
.hc-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  text-align: left;
  border: 1px solid #cbd5e1;                /* slate-300 */
}
.hc-article-body thead { background: #334155; color: #fff; }   /* slate-700 */
.hc-article-body th {
  padding: .625rem 1rem;
  border: 1px solid #475569;                /* slate-600 */
  font-weight: 600;
}
.hc-article-body td {
  padding: .5rem 1rem;
  border: 1px solid #cbd5e1;
  vertical-align: top;
}
.hc-article-body tbody tr:nth-child(odd)  { background: #fff; }
.hc-article-body tbody tr:nth-child(even) { background: #f1f5f9; }  /* slate-100 */

/* 让所有表格在手机上可横向滚动（Githuber 输出的裸表格也能滚） */
.hc-article-body .hc-table-wrap,
.hc-article-body .overflow-x-auto { overflow-x: auto; margin: 2rem 0; }
.hc-article-body > table { display: block; overflow-x: auto; }

/* ---------- 5. 图片 -------------------------------------------------------- */
.hc-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
  margin-left: auto;
  margin-right: auto;
}
.hc-article-body figure { margin: 2rem 0; }
.hc-article-body figcaption {
  margin-top: .5rem;
  font-size: .8125rem;
  color: #64748b;
  text-align: center;
}

/* ---------- 6. 代码 -------------------------------------------------------- */
.hc-article-body code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: .375rem;
  padding: .125rem .375rem;
  font-size: .875em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #be123c;
}
.hc-article-body pre {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: .75rem;
  padding: 1.25rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.6;
}
.hc-article-body pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ---------- 7. 分隔线 ------------------------------------------------------ */
.hc-article-body hr { border: 0; border-top: 1px solid #cbd5e1; margin: 2.5rem 0; }

/* ============================================================================
   8. 脚注（★ 关键）
   ----------------------------------------------------------------------------
   Githuber MD 用 Markdown `[^1]` 写脚注，保存后正文里长这样（实测线上原文）：
     · 正文标记  <a href="#fn:1" class="footnote-ref" id="fnref1:1">…</a>
     · 文末区块  <div class="footnotes"><hr><ol>
                    <li id="fn:1"><p>说明文字
                      <a href="#fnref1:1" class="footnote-backref">↩</a></p></li>
                 </ol></div>
   而线上现有 CSS 里【没有任何一条】匹配这些类名 —— 也就是说老文章脚注
   目前是完全没样式的。下面把它做成我们确认过的 References 区样式。
   ========================================================================== */

/* 正文里的上标标记 ^N */
.hc-article-body .footnote-ref,
.hc-article-body a[data-footnote-ref] {
  color: #f97316;
  font-size: .7em;
  vertical-align: super;
  text-decoration: none;
  padding: 0 .15em;
}
.hc-article-body .footnote-ref:hover,
.hc-article-body a[data-footnote-ref]:hover { text-decoration: underline; }

/* 文末 References 区块 */
.hc-article-body .footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #cbd5e1;
}
.hc-article-body .footnotes hr { display: none; }   /* 用上面的 border-top 代替 */
.hc-article-body .footnotes ol {
  list-style: decimal;
  padding-left: 1.5rem;
  font-size: .875rem;
  color: #475569;
}
.hc-article-body .footnotes li + li { margin-top: .5rem; }
.hc-article-body .footnotes p { margin: 0; }

/* 回跳箭头 ↩ */
.hc-article-body .footnote-backref {
  color: #f97316;
  text-decoration: none;
  font-size: .875rem;
  margin-left: .25rem;
}
.hc-article-body .footnote-backref:hover { text-decoration: underline; }

/* ============================================================================
   9. 目录（TOC）—— 由主题自动从正文 H2/H3/H4 生成，作者不用管
   结构：<div class="hc-toc-box"><h2>Content</h2>
            <ul class="hc-toc"><li class="hc-toc-l2"><a href="#section-1">…</a></li>
                               <li class="hc-toc-l3">…</li></ul></div>
   ========================================================================== */
.hc-toc-box {
  background: #e2e8f0;              /* slate-200 */
  border-radius: .75rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.hc-toc-box > h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 .75rem;
}
.hc-toc { list-style: none; padding: 0; margin: 0; }
.hc-toc li { margin: 0; padding: .125rem 0; }
.hc-toc a {
  color: #475569;
  font-size: .875rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color .15s;
}
.hc-toc a:hover { color: #f97316; }
.hc-toc-l3 { margin-left: 1.25rem; }
.hc-toc-l4 { margin-left: 2.5rem; }

/*
 * ⚠️ 文末 FAQ 的样式**不在这里**。
 *
 * 博客 FAQ 写在**文章正文里**，用 assets/components.css 的设计系统组件：
 *   .hc-faq / .hc-faq-light / .hc-faq-q / .hc-faq-icon / .hc-faq-a
 *
 * 2026-09-16 删掉了本文件原有的 6 条 `.hc-faq` / `.hc-faq-item` 规则，原因：
 *   ① 它们是为 single.php 里一段"重复渲染 FAQ"的代码准备的 —— 那段已删除（§36.37）
 *   ② 它们与 components.css 的 `.hc-faq` **同名冲突**：两处定义同一类名，
 *      而 components.css 后加载会赢，导致文章页 FAQ 拿到的是深色那套样式
 * 所以：**不要再往本文件加 .hc-faq 规则**，要改样式请改 components.css。
 */

} /* @layer components */