/* ==========================================================================
   博客自定义样式（Tranquilpeak 覆盖层）
   只覆盖观感相关的项，不改布局结构。以后微调只需改这一个文件。
   ========================================================================== */

:root {
  /* 中文优先的无衬线栈：苹果设备用苹方，Windows 用微软雅黑，安卓用思源黑体 */
  --cjk-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --cjk-serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC",
    "STSong", serif;
  --mono: "JetBrains Mono", "Cascadia Code", Menlo, Consolas,
    "Courier New", monospace;
}

/* ---------- 1. 全局字体 ---------- */

html,
body {
  font-family: var(--cjk-sans);
}

/* ---------- 2. 正文 ---------- */

/* 主题把正文排成 Merriweather 衬线 + -0.3px 负字距。
   衬线体没有中文字形，中文会 fallback 到宋体，在屏幕上发虚；
   负字距是为西文设计的，套在中文上会让字挤在一起。
   同时主题自带的 Merriweather / Open Sans 字体文件已从包里移除
   （中英混排时衬线正文与无衬线中文跳变，统一走无衬线更稳），
   因此这里不再声明 Merriweather，避免空引用。 */
.post .post-content {
  font-family: var(--cjk-sans);
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.95;
  color: #4a5560;
}

.post .post-content > p {
  margin-top: 1.45em;
}

/* 正文内标题：走无衬线，靠字重和字距拉开层次 */
.post .post-content h1,
.post .post-content h2,
.post .post-content h3,
.post .post-content h4,
.post .post-content h5,
.post .post-content h6 {
  font-family: var(--cjk-sans);
  letter-spacing: 0.01em;
  color: #2c3540;
  font-weight: 600;
}

.post .post-content h1 {
  font-size: 26px;
  line-height: 1.5;
}

.post .post-content h2 {
  font-size: 22px;
  line-height: 1.55;
}

.post .post-content h3 {
  font-size: 18px;
  line-height: 1.6;
}

.post .post-content h4 {
  font-size: 16.5px;
  line-height: 1.65;
}

/* ---------- 3. 文章标题与列表标题 ---------- */

.post-header .post-title,
.postShorten .postShorten-title {
  font-family: var(--cjk-sans);
  letter-spacing: 0.01em;
  font-weight: 600;
}

/* ---------- 4. 代码 ---------- */

.post .post-content code,
.post .post-content pre,
.post .post-content pre code,
.highlight,
.highlight pre,
.highlight code {
  font-family: var(--mono);
  letter-spacing: 0;
}

.post .post-content pre,
.post .post-content .highlight {
  border-radius: 6px;
}

/* ---------- 5. 图片 ---------- */

.post .post-content img {
  border-radius: 6px;
}

/* ---------- 6. 侧栏 ---------- */

.sidebar {
  font-family: var(--cjk-sans);
}

/* ---------- 7. 引用块 ---------- */

.post .post-content blockquote {
  font-family: var(--cjk-sans);
  letter-spacing: 0;
  line-height: 1.85;
}

/* ---------- 8. 首页摘要与图注 ---------- */

/* 这两处主题写的是 "Merriweather", serif，字体文件移除后中文会退成宋体，
   和正文的无衬线排版对不上，显式拉回统一字体栈 */
.post .postShorten .postShorten-excerpt,
.caption {
  font-family: var(--cjk-sans);
  letter-spacing: 0;
}

/* ---------- 9. 全局标题字距 ---------- */

/* 主题给所有标题加了 -0.04em，那是为西文收紧字距设计的，中文会被压扁 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--cjk-sans);
  letter-spacing: 0.01em;
}

/* ---------- 10. 侧栏磨砂背景 ---------- */

/* 主题给 #sidebar 的背景是 rgba(17,26,35,0)，也就是完全透明，
   宽屏 sidebar_behavior=1 时侧栏占 500px，露出来是一块纯灰底。
   这里铺一张预模糊的题图，再做暗色渐变，让白色菜单文字压得住。

   用「预模糊图片」而不是 backdrop-filter 的原因：
   侧栏是 fixed 元素，实时滤镜在低端机和旧版 Safari 上会掉帧或不生效，
   而模糊过的图压缩率极高（这张只要 7KB），加载代价几乎为零。 */
#sidebar {
  background-color: #141a22;
  background-image:
    linear-gradient(
      180deg,
      rgba(14, 20, 28, 0.52) 0%,
      rgba(14, 20, 28, 0.66) 52%,
      rgba(14, 20, 28, 0.80) 100%
    ),
    url('/images/sidebar-bg.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* 小屏滑出的侧栏更窄，背景裁切后色块更碎，把遮罩加深一档保证文字清楚 */
@media (max-width: 767px) {
  #sidebar {
    background-image:
      linear-gradient(
        180deg,
        rgba(14, 20, 28, 0.72) 0%,
        rgba(14, 20, 28, 0.84) 60%,
        rgba(14, 20, 28, 0.92) 100%
      ),
      url('/images/sidebar-bg.webp');
  }
}

/* ---------- 11. 侧栏作者档案 ---------- */

/* 主题给 .sidebar-profile 写死 height: 130px，但内容实际约 165px：
   头像 90 + 名字 23 + 简介 23 + 简介内层 <p> 的 margin-bottom 24。
   多出来的 35px 会压到第一个菜单项上，所以改成自适应高度。

   另外简介模板是 <h5><p>…</p></h5>，内层 p 继承了全局 `margin: 0 0 1.5em`，
   在大屏叠在照片上时会把档案块撑得很松，一并清零。 */
#sidebar[data-behavior="1"] .sidebar-profile {
  height: auto;
  padding-top: 0;
  padding-bottom: 18px;
}

#sidebar .sidebar-profile-bio p {
  margin: 0;
}

/* 头像加一圈细白边 + 投影，让它从模糊背景里浮出来 */
#sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-picture {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.38);
}

/* 名字用纯白加粗，简介降到 13px、降低不透明度，
   两者拉开层级，避免名字和简介糊成一片。

   注意这里必须带上中间的 .sidebar-profile：主题的对应规则是
   #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-name，
   少一层类名就比不过它，字号和颜色会被主题改回去。 */
#sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-name {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

#sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-bio {
  max-width: 260px;
  margin: 5px auto 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(235, 235, 235, 0.66);
}

/* 简介只在 ≥1200px 显示（主题自己的媒体查询），
   更窄时档案块自动收成「头像 + 名字」，这里补回垂直留白 */
@media (max-width: 1199px) {
  #sidebar[data-behavior="1"] .sidebar-profile {
    padding-bottom: 12px;
  }
}

/* ---------- 12. 首页卡片等高 ---------- */

/* demo 的卡片之所以齐平，是因为它的缩略图高 140 + 上下 margin 共 175px，
   而摘要短、始终撑不到这个高度，所以卡片高度由缩略图决定。
   我们的摘要有 54 字到 317 字不等，结构也不同（有的是表格，有的带小标题），
   卡片就会被内容撑得一高一低。

   做法：标题强制一行，摘要固定两行高度，让每张卡都恒定为同一个高度。 */

.postShorten .postShorten-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 正文裁剪：用 line-clamp 让第 3 行直接以省略号收尾，而不是靠固定高度硬切。
   （早前用固定高度 + 底部白渐变淡出，结果渐变把第 2 行后半句也蒙掉了，
   看起来像文字没显示全。line-clamp 只在真正溢出时才出现省略号，正文完整可读。）
   「阅读全文」放在这个盒子外面、按正常文档流排在下面，两者永远不会叠在一起。 */
.postShorten .postShorten-excerpt {
  position: relative;
  margin-top: 14px;
}

/* 留 72px（= 2 行 62.4px 再多一点余量），既不会误切第 2 行，
   又能给没有 description、回退到 post.excerpt 的文章兜个底 */
.postShorten .postShorten-excerpt-body {
  position: relative;
  max-height: 72px;
  overflow: hidden;
}

/* description 渲染成单个 <p>，直接按 2 行截断 */
.postShorten .postShorten-excerpt-body > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
}

/* 摘要有可能是 <p>、<h2>、<ul>、<table> 开头，
   首元素 margin-top / 末元素 margin-bottom 会多撑出空白，统一清零 */
.postShorten .postShorten-excerpt-body > *:first-child {
  margin-top: 0;
}

.postShorten .postShorten-excerpt-body > *:last-child {
  margin-bottom: 0;
}

.postShorten .postShorten-excerpt_link {
  display: inline-block;
  margin-top: 6px;
}

/* ---------- 13. 文章目录（TOC） ---------- */

/* 主题没有为 hexo-util 生成的 .toc 结构写任何样式，
   <ol class="toc"> 会退化成浏览器默认的有序列表（带数字、无缩进层级）。
   这里补一套克制的样式：去掉序号与圆点、用左侧细线表示层级、层级越深字号越小。 */

.post-content h1#table-of-contents {
  margin: 30px 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3c4650;
}

.post-content .toc {
  margin: 0 0 30px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid rgba(0, 0, 0, 0.07);
  list-style: none;
  font-size: 15px;
  line-height: 1.95;
}

/* 嵌套层：不再画线，只做缩进与字号递减 */
.post-content .toc .toc {
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 0;
  font-size: 14.5px;
}

.post-content .toc .toc .toc {
  font-size: 14px;
}

.post-content .toc-item {
  list-style: none;
  margin: 0;
}

.post-content .toc-link {
  display: inline-block;
  padding: 1px 0;
  border-bottom: 0 !important;
  color: #5d686f;
  text-decoration: none;
  transition: color 0.15s ease;
}

.post-content .toc-link:hover,
.post-content .toc-link:focus-visible {
  color: #11181f;
}

/* ---------- 14. 「{% image %}」图片容器 ---------- */

/* 主题的样式表里只有 figure.highlight（代码块），
   image 标签生成的 .figure / .fig-img / .caption 竟然一条规则都没有，
   这里补齐，否则图片会按原始宽度溢出正文，图注也变成一行普通文字。 */

.post-content .figure {
  margin: 26px 0;
  max-width: 100%;
}

.post-content .figure.fig-100 {
  width: 100%;
}

.post-content .figure .fig-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: zoom-in;
}

.post-content .figure .caption {
  display: block;
  margin-top: 9px;
  /* 主题给 .caption 设了 Merriweather 斜体，而那个 @font-face 早已删掉，
     中文会掉进衬线回退字体，所以这里换回正文字体栈并取消斜体 */
  font-family: var(--cjk-sans);
  font-size: 13px;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #8a949c;
  text-align: center;
}

/* 独立 fancybox（列表项里的那几张）也统一圆角与手型光标 */
.post-content a.fancybox {
  display: inline-block;
  max-width: 100%;
}

.post-content a.fancybox img {
  border-radius: 6px;
  cursor: zoom-in;
}

/* ---------- 15. Tabbed 代码块（{% tabbed_codeblock %}） ---------- */

/* 主题只写了 .codeblock--tabbed 的 tab 按钮与内层 figure 的边距，
   .tabs-content 这个容器本身没有任何规则，
   导致 figcaption 的 20px 下边距 + figure.highlight 的 10px 上边距叠成 30px 空档。
   首尾各收一次，让上下留白与普通代码块一致。 */
.post-content .codeblock--tabbed .tabs-content > figure.highlight:first-child {
  margin-top: 0;
}

.post-content .codeblock--tabbed .tabs-content > figure.highlight:last-child {
  margin-bottom: 0;
}

/* tab 按钮在深色代码块上默认只有 hover 才换底色，
   这里给未选中项补一点弱化的文字色，避免和选中项区分不出来 */
.post-content .codeblock--tabbed figcaption .tabs .tab {
  color: inherit;
  opacity: 0.62;
  transition: opacity 0.15s ease;
}

.post-content .codeblock--tabbed figcaption .tabs .tab:hover,
.post-content .codeblock--tabbed figcaption .tabs .tab.active {
  opacity: 1;
}

/* ---------- 15. Tabbed 代码块（{% tabbed_codeblock %}） ---------- */

/* 主题只写了 .codeblock--tabbed 的 tab 按钮与内层 figure 的边距，
   .tabs-content 这个容器本身没有任何规则，
   导致 figcaption 的 20px 下边距 + figure.highlight 的 10px 上边距叠成 30px 空档。
   首尾各收一次，让上下留白与普通代码块一致。 */
.post-content .codeblock--tabbed .tabs-content > figure.highlight:first-child {
  margin-top: 0;
}

.post-content .codeblock--tabbed .tabs-content > figure.highlight:last-child {
  margin-bottom: 0;
}

/* tab 按钮在深色代码块上默认只有 hover 才换底色，
   这里给未选中项补一点弱化的文字色，避免和选中项区分不出来 */
.post-content .codeblock--tabbed figcaption .tabs .tab {
  color: inherit;
  opacity: 0.62;
  transition: opacity 0.15s ease;
}

.post-content .codeblock--tabbed figcaption .tabs .tab:hover,
.post-content .codeblock--tabbed figcaption .tabs .tab.active {
  opacity: 1;
}