/* ==========================================================================
   自定义样式
   参考 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)（主题只用它画边框），
   拿来当文字颜色会几乎看不见。 */

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

/* 并排居中，窄屏自动换行 */
.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;
}