/* ============================================================
 * Nexmoe 主题自定义样式
 * 主题配置里的 customStyles 会引入本文件（生成到 /custom.css）
 * ============================================================ */

/* 评论区（Gitalk）与正文之间的间距 */
#gitalk-container {
  margin-top: 24px;
}

/* 侧边栏友情链接头像：圆形 */
.nexmoe-widget-wrap .nexmoe-link ul li a img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

/* 文章封面图统一裁切，避免不同比例的图片变形 */
.nexmoe-post-cover img {
  object-fit: cover;
}

/* ---------- 关于页 ---------- */

/* 深色模式下正文引用块（主题只做了浅色配色） */
@media (prefers-color-scheme: dark) {
  article blockquote {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #c9c9c9;
  }

  /* 标题下方的分隔线 */
  article h2:before {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  /* 文章底部的版权信息块 */
  .nexmoe-post .nexmoe-post-copyright {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--color-text-2);
  }
}

/* 关于页：技能图标 */
.about-skills {
  margin: 18px 0 6px;
  text-align: center;
}

.about-skills picture {
  display: block;
}

.about-skills img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

/* 关于页的链接按钮：联系我 / 赞助 */
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 4px;
}

.about-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background-color: var(--color-primary-bg);
  color: var(--color-text-1);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.about-links a:hover,
.about-links a:focus {
  background-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 78, 106, 0.28);
}

.about-links a .nexmoefont {
  font-size: 18px;
  line-height: 1;
}

/* ============================================================
 * 代码块语法高亮配色（atom-one-dark）
 *
 * 站点 _config.yml 中 highlight.hljs 为 false，Hexo 生成的是
 * <figure class="highlight"><span class="keyword"> 这种自带类名，
 * 而主题引入的 atom-one-dark 只匹配 highlight.js 的 .hljs-* 类名，
 * 所以代码块只有底色没有配色。这里把同一套配色映射到 Hexo 类名上。
 * 如果以后改成 highlight.hljs: true，可以删掉这一段。
 * ============================================================ */

.highlight .comment,
.highlight .quote {
  color: #5c6370;
  font-style: italic;
}

.highlight .doctag,
.highlight .formula,
.highlight .keyword {
  color: #c678dd;
}

.highlight .deletion,
.highlight .name,
.highlight .section,
.highlight .selector-tag,
.highlight .subst {
  color: #e06c75;
}

.highlight .literal {
  color: #56b6c2;
}

.highlight .addition,
.highlight .attribute,
.highlight .meta .string,
.highlight .regexp,
.highlight .string {
  color: #98c379;
}

.highlight .attr,
.highlight .number,
.highlight .selector-attr,
.highlight .selector-class,
.highlight .selector-pseudo,
.highlight .template-variable,
.highlight .type,
.highlight .variable {
  color: #d19a66;
}

.highlight .bullet,
.highlight .link,
.highlight .meta,
.highlight .selector-id,
.highlight .symbol,
.highlight .title {
  color: #61aeee;
}

.highlight .built_in,
.highlight .class .title,
.highlight .title.class_ {
  color: #e6c07b;
}

.highlight .emphasis {
  font-style: italic;
}

.highlight .strong {
  font-weight: 700;
}