/* ============================================================================
   站点自定义样式（custom.css）
   ============================================================================
   这个文件通过 _config.anzhiyu.yml 的 inject.head 注入到每个页面的 <head>，
   排在主题样式之后，所以这里的规则会覆盖主题默认值。

   目前包含三类：
     1. 移动端排版修复（宽表格、宽公式不要撑破手机屏幕）
     2. 纯公式标题的隐藏文本（给侧边目录用）
     3. 一些小细节

   想加自己的样式，直接写在文件末尾即可，不用动主题。
   ============================================================================ */


/* ==========================================================================
   1) 移动端排版修复
   ========================================================================== */

/* 宽表格：自己横向滚动，不撑破页面
   （表格的滚动容器由 scripts/04-wrap-tables.js 补上） */
#article-container .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#article-container .table-wrap > table {
  margin: 0;
}

/* 行内公式：只限制最大宽度，【绝对不能】加 overflow。
   ⚠️ 踩过的坑（2026-10-08）：行内块元素一旦 overflow 不是 visible，
   CSS 规定它的基线就变成「底边距边缘」而不是文字基线 ——
   结果公式会整体上浮，看起来像上标，和正文完全对不齐。
   宽公式的横向溢出交给外层处理（表格有 .table-wrap 滚动容器，
   正文里极少出现超宽的行内公式）。 */
#article-container mjx-container:not([display="true"]) {
  max-width: 100%;
}

/* 兜底：图片、代码块、长链接都不许超出容器 */
#article-container img {
  max-width: 100%;
  height: auto;
}

#article-container pre {
  max-width: 100%;
  overflow-x: auto;
}

#article-container a {
  word-break: break-word;
}

#article-container p,
#article-container li {
  overflow-wrap: break-word;
}


/* ==========================================================================
   2) 纯公式标题的隐藏文本
   ==========================================================================
   像「# $\text{I}$」这样的标题，公式渲染成 SVG 之后就没有文字了，
   而侧边目录是靠抓标题文字生成的 —— 结果目录里会出现一串空白条目。

   配套的 scripts/00-protect-math.js 会给这类标题插一段
   <span class="math-heading-text">I</span>，
   下面这段样式让它「读者看不见，但目录和屏幕阅读器读得到」。
   ========================================================================== */
#article-container .math-heading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 标题本身要作为定位参考，隐藏文本才不会跑到别处去 */
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  position: relative;
}


/* ==========================================================================
   3) 小细节
   ========================================================================== */

/* 公式单独成段时，给一点上下留白，别和正文贴太紧 */
#article-container mjx-container[display="true"] {
  margin: 0.8em 0;
}

/* 目录里的公式标题条目，hover 时给个提示色（原本是空白的，容易以为点不动） */
.toc-content .toc-link:hover .toc-text {
  color: var(--anzhiyu-main);
}