/* ==========================================================
   自定义视觉样式：清爽极简
   与 _config.fluid.yml 的 color / font 配置配套使用；
   暗色触发方式与主题一致：prefers-color-scheme 自动 +
   [data-user-color-scheme="dark"] 手动切换。
   ========================================================== */

/* ---------- 强调色与代码字体变量 ---------- */
:root {
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --accent-soft-bg: rgba(13, 148, 136, 0.07);
  --banner-dark-mask: rgba(15, 19, 26, 0.88);
  --code-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) {
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --accent-soft-bg: rgba(45, 212, 191, 0.1);
  }
}

[data-user-color-scheme="dark"] {
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-soft-bg: rgba(45, 212, 191, 0.1);
}

/* ---------- 头图 ----------
   浅色 SVG 头图不需要黑色蒙版（主题以内联样式输出，需 !important）；
   暗色模式下叠加深色蒙版压暗，避免刺眼。 */
.banner .mask {
  background-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) .banner .mask {
    background-color: var(--banner-dark-mask) !important;
  }
}

[data-user-color-scheme="dark"] .banner .mask {
  background-color: var(--banner-dark-mask) !important;
}

/* ---------- 导航栏 ----------
   顶部透明状态去掉默认重阴影保持通透；
   滚动收起后用 1px 分隔线 + 极轻阴影。 */
.navbar {
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 500;
}

.top-nav-collapse,
.navbar-col-show {
  -webkit-box-shadow: 0 1px 0 var(--line-color), 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 1px 0 var(--line-color), 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

/* ---------- 主面板 ----------
   替换默认的 Material 重阴影，圆角放大。 */
#board {
  border-radius: 14px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* ---------- 首页文章列表 ---------- */
.index-card {
  margin-bottom: 3.25rem;
}

.index-header {
  font-weight: 600;
}

.index-btm,
.index-btm a {
  font-size: 0.8125rem;
}

/* ---------- 文章正文排版 ---------- */
.markdown-body {
  font-size: 1.0625rem;
  line-height: 1.85;
}

.post-content {
  max-width: 860px;
}

.markdown-body p {
  margin-top: 0;
  margin-bottom: 1.15em;
}

.markdown-body li + li {
  margin-top: 0.25em;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-weight: 600;
  line-height: 1.45;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

.markdown-body h2 {
  margin-top: 2.4em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--line-color);
}

.markdown-body h3 {
  margin-top: 1.9em;
}

/* 正文链接 hover 时改为下划线提示，去掉突兀的颜色跳变感 */
.markdown-body a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* ---------- 代码 ---------- */
.markdown-body pre,
.markdown-body code {
  font-family: var(--code-font);
}

/* 行内代码：强调色淡底 */
.markdown-body :not(pre) > code {
  background-color: var(--accent-soft-bg);
  color: var(--accent-strong);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

/* 代码块：圆角 + 细边框 */
.markdown-body .code-wrapper {
  border-radius: 10px;
  border: 1px solid var(--line-color);
}

/* ---------- 首屏入场动画 ----------
   主题的 .fade-in-up 只有 animation-name 没有时长，实际不动；
   这里统一补一套克制的入场：导航下滑、头图轻微缩放沉降、
   标语上浮、主面板上浮，时长短、幅度小、只在加载时跑一次。 */
@keyframes cg-fade-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cg-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cg-banner-settle {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1);
  }
}

.navbar {
  animation: cg-fade-down 0.5s ease-out both;
}

#banner {
  animation: cg-banner-settle 1.1s ease-out;
  /* backwards：只在起始阶段生效，结束后不残留 transform，
     避免干扰主题可能施加的内联样式 */
  animation-fill-mode: backwards;
}

.banner-text {
  animation: cg-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

#board {
  animation: cg-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
}

@media (prefers-reduced-motion: reduce) {
  .navbar,
  #banner,
  .banner-text,
  #board {
    animation: none;
  }
}

/* ---------- 引用块 ---------- */
.markdown-body blockquote {
  border-left: 3px solid var(--accent);
  background-color: var(--accent-soft-bg);
  padding: 0.75em 1.1em;
  border-radius: 0 8px 8px 0;
  margin: 1.4em 0;
}

.markdown-body blockquote p:last-child {
  margin-bottom: 0;
}