/* ==========================================================================
   自定义样式
   参考 https://www.sqlsec.com/ 的排版风格做的细节调整。
   想改配色 / 圆角，优先去 _config.butterfly.yml 里改，
   只有配置项覆盖不到的地方才写在这里。
   ========================================================================== */

/* --- 首页大图 ---------------------------------------------------------- */

/* 站点标题（大图上的那一行）稍微加点字重和字距 */
#site-title {
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 打字机副标题：留出高度，避免文字切换时整块布局跳动 */
#site-subtitle {
  min-height: 1.6em;
}

/* --- 侧边栏卡片 -------------------------------------------------------- */

/* 个人卡片头像描边，避免浅色头像和卡片背景糊在一起 */
.card-info .avatar-img img {
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.18);
}

/* 公告：行距松一点，长段落更好读 */
.card-announcement .announcement_content {
  font-size: 0.93em;
  line-height: 1.85;
}

/* 彩色标签云：行高加大，字号差异看起来更舒服 */
.card-tag-cloud a {
  line-height: 2.3;
}

/* --- 文章列表 ---------------------------------------------------------- */

/* 封面轻微放大，鼠标悬停时更有反馈感 */
.recent-post-item .post_cover img {
  transition: transform 0.6s ease;
}

.recent-post-item:hover .post_cover img {
  transform: scale(1.04);
}

/* 文章卡片的标签：只保留第一个标签前的图标。
   主题模板是 each 循环，每渲染一个标签就输出一个 <i class="fas fa-tag">，
   多标签时会出现一排重复的小标签图标。这里用 :first-of-type 只留第一个，
   分隔符（•）与分类的 fa-inbox 图标都不受影响。 */
.article-meta.tags .fa-tag:not(:first-of-type) {
  display: none;
}

/* --- 正文 -------------------------------------------------------------- */

/* 代码块里的行号不要被选中复制走 */
#article-container .highlight .gutter {
  user-select: none;
}

/* 注意：图片说明文字 .img-alt 不要在这里改颜色。
   主题默认是固定的 #858585，深浅两种模式下都能看清；
   而 --dark-grey 在深色模式下是 alpha(#FFFFFF, .2)（主题只用它画边框），
   拿来当文字颜色会几乎看不见。 */

/* --- 评论区（Twikoo）的代码样式 ---------------------------------------- */

/* 背景：正文的代码样式全都挂在 <article class="container" id="article-container">
   下面（.container code / .container pre），而 #post-comment 是它的兄弟节点，
   取不到这些规则。Twikoo 渲染评论时又会自己往 #twikoo 里插一份 Prism 的浅色主题
   （prism.min.css），结果评论里代码块是白底黑字、行内代码连底色都没有，和正文
   两套观感。
   下面的选择器都比 Prism 的 pre[class*=language-] / :not(pre)>code[class*=language-]
   更具体（多一层 .twikoo .tk-content），所以不依赖样式表的加载顺序也能生效。 */

/* 行内代码：对齐 .container code */
.twikoo .tk-content :not(pre) > code,
.twikoo .tk-preview-container :not(pre) > code {
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(27, 31, 35, 0.05);
  color: #f47466;
  font-family: consolas, Menlo, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: var(--global-font-size);
  text-shadow: none;
}

[data-theme='dark'] .twikoo .tk-content :not(pre) > code,
[data-theme='dark'] .twikoo .tk-preview-container :not(pre) > code {
  background: #2c2c2c;
}

/* 代码块：对齐 .container pre 的 pale night 深色底。
   这里不限定 [class*=language-]，因为没写语言的围栏（``` 后面空着）Twikoo 渲染出来
   的 code 没有 language- 类，只按属性选择器会漏掉它。 */
.twikoo .tk-content pre,
.twikoo .tk-preview-container pre {
  margin: 0.6em 0; /* 正文是 24px，但评论区整体行距更紧，跟着 <p> 的节奏走 */
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--hl-bg);
  color: var(--hl-color);
  font-family: consolas, Menlo, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: var(--global-font-size);
  line-height: 1.6;
  text-shadow: none;
  box-shadow: 0 5px 10px 0 rgba(41, 45, 62, 0.4);
}

[data-theme='dark'] .twikoo .tk-content pre,
[data-theme='dark'] .twikoo .tk-preview-container pre {
  box-shadow: none;
}

/* Prism 会给 pre 里的 code 再刷一层纯黑字 + 白色 text-shadow，深色底上必须清掉 */
.twikoo .tk-content pre code,
.twikoo .tk-preview-container pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-shadow: none;
}

/* 标题栏：Twikoo 借 Prism 的 toolbar 插件，把语言名和复制按钮做成一个绝对定位的浮层
   （div.code-toolbar > div.toolbar，right/top 各 4px），飘在代码右上角；正文则是一条
   独立的 mac 风格标题栏。这里把 .code-toolbar 改成纵向 flex，再用 order:-1 把 .toolbar
   提到 <pre> 前面，就还原成「标题栏 + 代码区」的结构了。 */
.twikoo .tk-content .code-toolbar,
.twikoo .tk-preview-container .code-toolbar {
  display: flex;
  flex-direction: column;
  margin: 0.6em 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--hl-bg);
  box-shadow: 0 5px 10px 0 rgba(41, 45, 62, 0.4);
}

[data-theme='dark'] .twikoo .tk-content .code-toolbar,
[data-theme='dark'] .twikoo .tk-preview-container .code-toolbar {
  box-shadow: none;
}

.twikoo .tk-content .code-toolbar > .toolbar,
.twikoo .tk-preview-container .code-toolbar > .toolbar {
  position: static; /* 从浮层改回普通块，让它正经占住标题栏那一行 */
  order: -1; /* 排到 <pre> 前面 */
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 24px;
  height: 2.15em;
  padding: 0 8px;
  background: var(--hltools-bg);
  color: var(--hltools-color);
  font-size: var(--global-font-size);
  font-weight: normal;
}

/* 左上角那三个 mac 圆点。不改 Twikoo 的 DOM，用一个 12px 的圆点加两道
   box-shadow 画出来：第二个偏移 20px、第三个 40px，后面再留 40px 给语言名，
   正好对应正文 .macStyle > * 的 width:12px / margin-right:8px。 */
.twikoo .tk-content .code-toolbar > .toolbar::before,
.twikoo .tk-preview-container .code-toolbar > .toolbar::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0 40px 0 3px;
  border-radius: 50%;
  background: #fc625d;
  box-shadow: 20px 0 0 #fdbc40, 40px 0 0 #35cd4b;
}

/* 语言名，对齐正文的 .code-lang */
.twikoo .tk-content .code-toolbar > .toolbar > .toolbar-item:first-child,
.twikoo .tk-preview-container .code-toolbar > .toolbar > .toolbar-item:first-child {
  flex: 1 1 auto;
  overflow: hidden;
  padding-right: 10px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.15em;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
}

/* 复制按钮推到最右边（正文那边是复制 / 全屏 / 收起三个图标） */
.twikoo .tk-content .code-toolbar > .toolbar > .toolbar-item:last-child,
.twikoo .tk-preview-container .code-toolbar > .toolbar > .toolbar-item:last-child {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 按钮本身：Twikoo 默认是「描边小方块 + 继承 --font-color」，改成正文 .highlight-tools
   里那种无边框的图标按钮配色 */
.twikoo .tk-content .code-toolbar > .toolbar > .toolbar-item > button,
.twikoo .tk-content .code-toolbar > .toolbar > .toolbar-item > span,
.twikoo .tk-preview-container .code-toolbar > .toolbar > .toolbar-item > button,
.twikoo .tk-preview-container .code-toolbar > .toolbar > .toolbar-item > span {
  padding: 0 4px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.92em;
  cursor: pointer;
}

.twikoo .tk-content .code-toolbar > .toolbar > .toolbar-item > button:hover {
  color: #fff;
}

/* 已经进了标题栏的 <pre>：圆角、投影、外边距统一交给外层 .code-toolbar */
.twikoo .tk-content .code-toolbar > pre,
.twikoo .tk-preview-container .code-toolbar > pre {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Prism 默认主题的 token 配色是给浅色底配的（关键字 #07a、字符串 #690、数字 #905），
   直接放到深色底上对比度很低。这里换成正文 highlight 用的那套 pale night 配色，
   按语义一一对应：comment / keyword / string / number / function / builtin / tag … */
.twikoo .tk-content .token.comment,
.twikoo .tk-content .token.prolog,
.twikoo .tk-content .token.doctype,
.twikoo .tk-content .token.cdata {
  color: #676e95;
}

.twikoo .tk-content .token.punctuation {
  color: var(--hl-color);
}

.twikoo .tk-content .token.tag,
.twikoo .tk-content .token.keyword,
.twikoo .tk-content .token.atrule {
  color: #89ddff;
}

.twikoo .tk-content .token.attr-name,
.twikoo .tk-content .token.property,
.twikoo .tk-content .token.regex,
.twikoo .tk-content .token.important,
.twikoo .tk-content .token.variable,
.twikoo .tk-content .token.deleted {
  color: #ff5370;
}

.twikoo .tk-content .token.string,
.twikoo .tk-content .token.char,
.twikoo .tk-content .token.attr-value,
.twikoo .tk-content .token.inserted {
  color: #c3e88d;
}

.twikoo .tk-content .token.number,
.twikoo .tk-content .token.boolean,
.twikoo .tk-content .token.constant,
.twikoo .tk-content .token.symbol {
  color: #f78c6c;
}

.twikoo .tk-content .token.function,
.twikoo .tk-content .token.class-name {
  color: #82aaff;
}

.twikoo .tk-content .token.builtin {
  color: #ffcb6b;
}

.twikoo .tk-content .token.operator,
.twikoo .tk-content .token.entity,
.twikoo .tk-content .token.url,
.twikoo .tk-content .token.namespace {
  color: #c792ea;
}

/* --- 打赏页收款码 ------------------------------------------------------ */

/* 并排居中，窄屏自动换行 */
.reward-qrcode {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 24px 0;
}

.reward-qrcode-item {
  text-align: center;
}

/* 收款码统一白底 + 内边距：扫码需要码周围有一圈「静默区」，
   深色模式下如果没有这层白底，对比度不够会扫不出来 */
.reward-qrcode-item img {
  display: block;
  width: 220px;
  max-width: 58vw;
  height: auto;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
}

.reward-qrcode-item span {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--font-color);
  opacity: 0.75;
}