/* ============================================================
 * 全站样式：参考 Apple 官网的设计语言（简洁、留白、大圆角、毛玻璃）
 * 通过 _config.butterfly.yml 的 inject 引入，只覆盖样式，不改主题文件
 * 颜色都定义在下面的变量里，想换颜色改变量即可
 * ============================================================ */

/* ---------- 颜色与字体变量 ---------- */
:root {
  --ap-text: #1d1d1f;            /* 主文字 */
  --ap-text-2: #6e6e73;          /* 次要文字 */
  --ap-text-3: #86868b;          /* 辅助信息（日期、分类） */
  --ap-bg: #f5f5f7;              /* 页面背景（浅灰） */
  --ap-card: #ffffff;            /* 卡片背景 */
  --ap-line: #d2d2d7;            /* 分隔细线 */
  --ap-blue: #0071e3;            /* 按钮、强调 */
  --ap-link: #0066cc;            /* 链接 */
  --ap-fill: #f5f5f7;            /* 引用块、行内代码底色 */
  --ap-mark: rgba(0, 113, 227, .14);  /* 加粗的淡蓝高亮 */
  --ap-glass: rgba(255, 255, 255, .72);
  --ap-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  --ap-shadow-hover: 0 12px 36px rgba(0, 0, 0, .10);
  --ap-radius: 18px;
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  --ap-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

  /* 覆盖 Butterfly 主题自带的变量 */
  --global-bg: var(--ap-bg);
  --card-bg: var(--ap-card);
  --font-color: var(--ap-text);
  --text-highlight-color: var(--ap-text);
  --card-box-shadow: var(--ap-shadow);
  --card-hover-box-shadow: var(--ap-shadow-hover);
  --btn-bg: var(--ap-blue);
  --btn-hover-color: #0077ed;
  --blockquote-bg: var(--ap-fill);
  --blockquote-color: var(--ap-text-2);
  --toc-link-color: var(--ap-text-2);
  --scrollbar-color: #c7c7cc;
  --default-bg-color: var(--ap-blue);
  --text-bg-hover: rgba(0, 113, 227, .12);
  --pseudo-hover: var(--ap-blue);
  --hr-border: var(--ap-line);
  --hr-before-color: var(--ap-line);
  --sidebar-bg: var(--ap-card);
}

:root[data-theme="dark"] {
  --ap-text: #f5f5f7;
  --ap-text-2: #a1a1a6;
  --ap-text-3: #86868b;
  --ap-bg: #000000;
  --ap-card: #1d1d1f;
  --ap-line: #424245;
  --ap-blue: #0a84ff;
  --ap-link: #2997ff;
  --ap-fill: #2c2c2e;
  --ap-mark: rgba(41, 151, 255, .22);
  --ap-glass: rgba(29, 29, 31, .72);
  --ap-shadow: 0 4px 24px rgba(0, 0, 0, .5);
  --ap-shadow-hover: 0 12px 36px rgba(0, 0, 0, .7);

  --global-bg: var(--ap-bg);
  --card-bg: var(--ap-card);
  --font-color: var(--ap-text);
  --text-highlight-color: var(--ap-text);
  --btn-bg: var(--ap-blue);
  --blockquote-bg: var(--ap-fill);
  --blockquote-color: var(--ap-text-2);
  --toc-link-color: var(--ap-text-2);
  --scrollbar-color: #48484a;
  --hr-border: var(--ap-line);
  --hr-before-color: var(--ap-line);
  --sidebar-bg: var(--ap-card);
}

/* ---------- 全局 ---------- */
body {
  font-family: var(--ap-font);
  color: var(--ap-text);
  background: var(--ap-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .01em;
}
a { transition: color .2s ease; }
::selection { background: rgba(0, 113, 227, .2); }

/* ---------- 顶部导航：滚动后变成毛玻璃 ---------- */
#page-header.nav-fixed #nav {
  background: var(--ap-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
#page-header.nav-fixed #nav a,
#page-header.nav-fixed #nav #site-name,
#page-header.nav-fixed #nav .site-page {
  color: var(--ap-text);
  text-shadow: none;
}
#nav #site-name,
#nav .site-page {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* 首页大标题 */
#site-title {
  font-weight: 700;
  letter-spacing: -.02em;
}
#site-subtitle {
  font-weight: 400;
  letter-spacing: .02em;
}

/* ---------- 卡片：大圆角 + 柔和阴影 + 悬停微微上浮 ---------- */
#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts),
#post,
#page,
#archive,
#tag,
#category {
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  border: none;
}
#recent-posts > .recent-post-item {
  transition: transform .3s ease, box-shadow .3s ease;
}
#recent-posts > .recent-post-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--ap-shadow-hover);
}
#recent-posts > .recent-post-item .post_cover img {
  border-radius: 0;
}

/* 首页文章列表 */
#recent-posts .article-title {
  color: var(--ap-text);
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
}
#recent-posts .article-title:hover { color: var(--ap-link); }
#recent-posts .article-meta-wrap,
#recent-posts .article-meta-wrap a {
  color: var(--ap-text-3);
  font-size: 12.5px;
}
#recent-posts .content {
  color: var(--ap-text-2);
  line-height: 1.7;
}

/* ---------- 侧栏 ---------- */
#aside-content .card-widget .item-headline {
  font-weight: 600;
  letter-spacing: -.01em;
}
#aside-content .card-info .author-info__name {
  font-weight: 600;
  letter-spacing: -.01em;
}
#aside-content .card-info .author-info__description,
#aside-content .card-info .headline {
  color: var(--ap-text-2);
}
/* 胶囊按钮 */
#aside-content #card-info-btn {
  border-radius: 980px;
  background: var(--ap-blue);
  font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}
#aside-content #card-info-btn:hover {
  background: #0077ed;
  transform: scale(1.02);
}
/* 最新文章 */
#aside-content .aside-list > .aside-list-item .content > .title { color: var(--ap-text); }
#aside-content .aside-list > .aside-list-item .content > time { color: var(--ap-text-3); }

/* 目录：当前小节用淡蓝底 + 蓝字，而不是整块青色 */
#aside-content #card-toc .toc-content .toc-link.active {
  background: rgba(0, 113, 227, .10);
  color: var(--ap-blue);
  border-radius: 8px;
  font-weight: 600;
}
#aside-content #card-toc .toc-content .toc-link:hover { color: var(--ap-blue); }
#aside-content #card-toc .toc-percentage { color: var(--ap-text-3); }

/* ---------- 分页、右下角按钮 ---------- */
#pagination .page-number,
#pagination .extend {
  border-radius: 980px;
}
#pagination .page-number.current {
  background: var(--ap-blue);
}
#rightside > div > button,
#rightside > div > a {
  border-radius: 50%;
  background: var(--ap-glass);
  color: var(--ap-text);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--ap-shadow);
}
#rightside > div > button:hover,
#rightside > div > a:hover { background: var(--ap-blue); color: #fff; }

/* ---------- 页脚：浅灰底 + 小号灰字 ---------- */
#footer {
  background: var(--ap-bg) !important;
  border-top: 1px solid var(--ap-line);
}
#footer::before { display: none; }
#footer #footer-wrap,
#footer #footer-wrap a {
  color: var(--ap-text-3);
  font-size: 12px;
  text-shadow: none;
}
#footer #footer-wrap a:hover { color: var(--ap-link); }

/* ---------- 文章页顶部的标题区 ---------- */
#post-info #post-title,
#post-info .post-title {
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 文章底部：版权、标签、上一篇/下一篇 */
#post .post-copyright {
  border: none;
  border-radius: 14px;
  background: var(--ap-fill);
}
#post .post-copyright::before { display: none; }
#post .tag_share .post-meta__tags {
  border-radius: 980px;
  border-color: var(--ap-line);
}
#pagination.pagination-post,
.relatedPosts > .relatedPosts-list > div,
#post .pagination-related {
  border-radius: 14px;
  overflow: hidden;
}

/* 相关推荐、上一篇/下一篇：文章没有封面图时，主题会用深色色块垫底，
 * 这里改成浅灰卡片 + 深色文字；有封面图的文章不受影响 */
.relatedPosts-list > div:has(> a > .cover[style*="default-bg-color"]),
#pagination.pagination-post > div:has(> a > .cover[style*="default-bg-color"]) {
  background: var(--ap-fill);
  transition: background .2s ease;
}
.relatedPosts-list > div:has(> a > .cover[style*="default-bg-color"]):hover,
#pagination.pagination-post > div:has(> a > .cover[style*="default-bg-color"]):hover {
  background: var(--ap-line);
}
.relatedPosts-list .cover[style*="default-bg-color"],
#pagination.pagination-post .cover[style*="default-bg-color"] {
  display: none;
}
.relatedPosts-list > div:has(> a > .cover[style*="default-bg-color"]) :is(.content, .date, .title),
#pagination.pagination-post > div:has(> a > .cover[style*="default-bg-color"]) :is(.pagination-info, .label, .prev_info, .next_info) {
  color: var(--ap-text);
}
.relatedPosts-list > div:has(> a > .cover[style*="default-bg-color"]) .date,
#pagination.pagination-post > div:has(> a > .cover[style*="default-bg-color"]) .label {
  color: var(--ap-text-3);
}
.relatedPosts-list .title,
#pagination.pagination-post :is(.prev_info, .next_info) {
  font-weight: 600;
}
.relatedPosts > .relatedPosts-headline {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ============================================================
 * 文章正文
 * ============================================================ */
#article-container {
  color: var(--ap-text);
  font-size: 15.5px;
  line-height: 1.8;
}
#article-container p { margin: 0 0 1em; }

/* 链接：蓝色，悬停下划线 */
#article-container a:not(.headerlink):not(.fancybox) {
  color: var(--ap-link);
  text-decoration: none;
  border-bottom: none;
}
#article-container a:not(.headerlink):not(.fancybox):hover { text-decoration: underline; }

/* ---------- 标题：靠字号、字重、留白区分层级 ---------- */
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  color: var(--ap-text);
  font-weight: 600;
  line-height: 1.3;
  padding: 0;
  border: none;
  background: none;
}
/* 去掉 Butterfly 标题前的小图标 */
#article-container :is(h1, h2, h3, h4, h5, h6)::before { display: none; }
#article-container :is(h1, h2, h3, h4, h5, h6) { padding-left: 0 !important; }

/* 一级/二级：大章节，上方一条细线隔开 */
#article-container h1,
#article-container h2 {
  margin: 2.6em 0 .9em;
  padding-top: 1.1em;
  border-top: 1px solid var(--ap-line);
  letter-spacing: -.02em;
}
#article-container h1 { font-size: 1.9em; }
#article-container h2 { font-size: 1.6em; }
#article-container > :is(h1, h2):first-child {
  margin-top: .2em;
  padding-top: 0;
  border-top: none;
}

/* 三级：小节 */
#article-container h3 {
  margin: 2em 0 .7em;
  font-size: 1.28em;
  letter-spacing: -.015em;
}

/* 四级：灰色小标题 */
#article-container h4 {
  margin: 1.6em 0 .5em;
  font-size: 1.06em;
  color: var(--ap-text-2);
}

/* ---------- 重点：加粗 + 淡蓝高亮 ---------- */
#article-container strong,
#article-container b {
  color: var(--ap-text);
  font-weight: 600;
  background: linear-gradient(transparent 62%, var(--ap-mark) 0);
  padding: 0 .08em;
}
#article-container :is(h1, h2, h3, h4, h5, h6, th) :is(strong, b) {
  background: none;
  padding: 0;
}

/* ---------- 列表：缩进 + 细线表示层级 ---------- */
#article-container ul,
#article-container ol {
  padding-left: 1.5em;
}
#article-container li { margin: .35em 0; }
#article-container li::marker { color: var(--ap-text-3); }
#article-container ol > li::marker { font-weight: 600; }

#article-container li > ul,
#article-container li > ol {
  margin: .35em 0 .35em .15em;
  padding-left: 1.35em;
  border-left: 1px solid var(--ap-line);
}

/* ---------- 引用块：浅灰圆角卡片 ---------- */
#article-container blockquote {
  margin: 1.2em 0;
  padding: .9em 1.2em;
  border: none;
  border-radius: 14px;
  background: var(--ap-fill);
  color: var(--ap-text-2);
}
#article-container blockquote > :last-child { margin-bottom: 0; }

/* ---------- 代码 ---------- */
#article-container :not(pre) > code {
  font-family: var(--ap-mono);
  font-size: .88em;
  padding: .12em .4em;
  border-radius: 6px;
  background: var(--ap-fill);
  color: #c41a16;
}
:root[data-theme="dark"] #article-container :not(pre) > code { color: #ff7b72; }
/* 只给代码本身设等宽字体；不能用 figure.highlight *，否则工具栏图标（字体图标）会变成问号 */
#article-container figure.highlight :is(pre, code, .line, .gutter) {
  font-family: var(--ap-mono) !important;
}

/* ---------- 代码块：深色 Mac 窗口风格 ----------
 * 配合 _config.butterfly.yml 的 highlight_theme: mac
 * 工具栏：左边红黄绿三个点，右边 [语言] [复制] [全屏] [折叠]
 * 全屏按钮由 source/js/code-tools.js 添加 */
:root,
:root[data-theme="dark"] {
  --hl-bg: #2b2b2b;
  --hltools-bg: #2b2b2b;
  --hltools-color: #c9c9c9;
  --hlnumber-bg: #2b2b2b;
  --hlnumber-color: rgba(255, 255, 255, .3);
  --hlscrollbar-bg: #444;
}
#article-container figure.highlight {
  margin: 1.2em 0 1.6em;
  border-radius: 10px;
  background: var(--hl-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] #article-container figure.highlight {
  box-shadow: 0 0 0 1px #3a3a3c, 0 8px 24px rgba(0, 0, 0, .5);
}

/* 隐藏行号（主题的复制功能依赖行号表格结构，所以用 CSS 隐藏而不是在配置里关掉） */
#article-container figure.highlight .gutter { display: none; }
#article-container figure.highlight table td.code { padding-left: 0; }

/* 代码区 */
#article-container figure.highlight pre {
  padding: .9em 1.2em 1.1em;
  font-size: 13.5px;
  line-height: 1.75;
}

/* 工具栏 */
#article-container figure.highlight .highlight-tools {
  justify-content: flex-end;
  gap: 6px;
  height: 2.7em;
  padding: 0 10px 0 80px;   /* 左边留给三个圆点 */
  font-size: 12px;
}
/* 三个圆点稍微大一点、垂直居中 */
#article-container figure.highlight .highlight-tools::after {
  left: 14px;
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
}

/* 右侧的小按钮：语言、复制、全屏，统一成灰色小框 */
#article-container figure.highlight .highlight-tools :is(.code-lang, .copy-button, .hl-fullscreen-btn) {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  color: #c9c9c9;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
#article-container figure.highlight .highlight-tools .code-lang { order: 1; cursor: default; }
/* "复制成功"提示：不占位置，显示在三个圆点右边 */
#article-container figure.highlight .highlight-tools .copy-notice {
  position: absolute;
  left: 80px;
  right: auto;
  font-size: 12px;
  color: #8fd18f;
  pointer-events: none;
}
#article-container figure.highlight .highlight-tools > * { flex-shrink: 0; white-space: nowrap; }
#article-container figure.highlight .highlight-tools .copy-button { order: 3; cursor: pointer; }
#article-container figure.highlight .highlight-tools .hl-fullscreen-btn { order: 4; cursor: pointer; }
#article-container figure.highlight .highlight-tools .expand {
  order: 5;
  position: static;
  padding: 0 4px;
  color: #9a9a9a;
}
#article-container figure.highlight .highlight-tools :is(.copy-button, .hl-fullscreen-btn):hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
/* 复制按钮：图标换成"复制"样式的双方块，并在后面加上文字 */
#article-container figure.highlight .highlight-tools .copy-button::before { content: "\f0c5"; }
#article-container figure.highlight .highlight-tools .copy-button::after {
  content: "复制";
  font-family: var(--ap-font);
  font-weight: 400;
}

/* 手机等窄屏：按钮只显示图标，不显示文字 */
@media (max-width: 600px) {
  #article-container figure.highlight .highlight-tools .copy-button::after,
  #article-container figure.highlight .highlight-tools .hl-fullscreen-btn span {
    display: none;
  }
}

/* 全屏状态 */
#article-container figure.highlight.hl-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  border-radius: 0;
  overflow: auto;
}
#article-container figure.highlight.hl-fullscreen .highlight-tools {
  position: sticky;
  top: 0;
  z-index: 1;
}
#article-container figure.highlight.hl-fullscreen pre { font-size: 15px; }
body.hl-fullscreen-open { overflow: hidden; }

/* ---------- 表格：细线（代码块内部也是 table，要排除掉） ---------- */
/* 主题默认 overflow-x: scroll 会一直显示滚动条，改成需要时才显示 */
#article-container .table-wrap { overflow-x: auto; }
#article-container table:not(.highlight table) {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ap-line);
  border-collapse: separate;
  border-spacing: 0;
}
#article-container table:not(.highlight table) th {
  background: var(--ap-fill);
  font-weight: 600;
}
#article-container table:not(.highlight table) :is(th, td) {
  border: none;
  border-bottom: 1px solid var(--ap-line);
  border-right: 1px solid var(--ap-line);
  padding: .55em .9em;
}
#article-container table:not(.highlight table) tr > :last-child { border-right: none; }
#article-container table:not(.highlight table) tr:last-child > td { border-bottom: none; }

/* ---------- 图片：圆角 ---------- */
#article-container img {
  border-radius: 12px;
}

/* ---------- 分隔线 ---------- */
#article-container hr {
  border: none;
  border-top: 1px solid var(--ap-line);
  margin: 2.4em 0;
}
#article-container hr::before { display: none; }