/* ============================================================
   之寒的小站 · 前端 UI 优化（由插件注入，不改主题文件）
   全部是「增量叠加」：想关掉只要在后台把开关关掉，主题立刻回到原样。
   ============================================================ */
:root {
  --zp-accent: #ff7eb6;
  --zp-accent-2: #9d7bff;
  --zp-radius: 14px;
  --zp-line: rgba(120, 100, 140, .16);
  --zp-shadow: 0 6px 22px rgba(60, 45, 70, .10);
}

/* ------------------------------------------------------------
   1. 修掉横向溢出（首页底部那条横向滚动条）
   ---------------------------------------------------------- */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
canvas { max-width: 100%; }

/* 特效脚本产生的画布固定在背景层，不要参与布局 */
canvas#c_nest, canvas[id^="c_nest"], .canvas-nest {
  position: fixed !important;
  top: 0; left: 0;
  z-index: 0 !important;
  pointer-events: none;
}

/* ------------------------------------------------------------
   2. 首屏横幅：文字更好读、头像更有质感
   ---------------------------------------------------------- */
.headertop .focusinfo .header-info p {
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: 3px;
  line-height: 1.9;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(20, 16, 28, .42);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.headertop .header-tou img {
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 12px 34px rgba(60, 30, 80, .35);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.headertop .header-tou img:hover { transform: scale(1.06) rotate(-2deg); }

/* 顶栏：站点名与菜单更清楚、更好点 */
.site-top .site-title, .site-top .site-name { text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
ul#menu-meun1.menu > li > a {
  font-size: 14px;
  letter-spacing: .6px;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
ul#menu-meun1.menu > li > a:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}
ul#menu-meun1.menu > li.current-menu-item > a {
  background: linear-gradient(100deg, rgba(255, 126, 182, .92), rgba(157, 123, 255, .92));
  color: #fff !important;
}

/* ------------------------------------------------------------
   3. 正文观感（长文阅读）
   ---------------------------------------------------------- */
.entry-content, .post-content {
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .2px;
}
.entry-content h2, .entry-content h3 { letter-spacing: .6px; scroll-margin-top: 90px; }
.entry-content blockquote {
  border-left: 3px solid var(--zp-accent);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--zp-accent) 7%, transparent);
}
.entry-content pre {
  border-radius: 12px;
  box-shadow: var(--zp-shadow);
  overflow-x: auto;
}
.entry-content table { display: block; overflow-x: auto; }

/* ------------------------------------------------------------
   4. 图片：统一圆角 + 未加载时的占位，避免长文跳动
   ---------------------------------------------------------- */
.entry-content img, .post-content img, article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.entry-content img[loading="lazy"] { background: rgba(140, 120, 160, .06); }
.entry-content figcaption, .wp-caption-text {
  font-size: 12.5px;
  opacity: .72;
  text-align: center;
  margin-top: 6px;
}

/* 文章卡片：轻微抬升，别再"贴"在背景上 */
#content article, .site-main > article {
  border-radius: var(--zp-radius);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}
@media (hover: hover) {
  #content article:hover, .site-main > article:hover {
    transform: translateY(-3px);
    box-shadow: var(--zp-shadow);
  }
}

/* ------------------------------------------------------------
   5. 性能：长列表跳过屏幕外渲染（对图片多的首页提升明显）
   ---------------------------------------------------------- */
@supports (content-visibility: auto) {
  #content article:not(:first-of-type),
  .site-main article:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: 780px;
  }
}

/* ------------------------------------------------------------
   6. 细节：滚动条 / 选中色 / 按钮手感
   ---------------------------------------------------------- */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--zp-accent), var(--zp-accent-2));
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
  }
  ::-webkit-scrollbar-track { background: transparent; }
}
::selection { background: color-mix(in srgb, var(--zp-accent) 35%, transparent); }
button, input[type="submit"], .btn, a.button { transition: transform .18s ease, box-shadow .18s ease; }
button:active, input[type="submit"]:active, .btn:active, a.button:active { transform: scale(.97); }

/* 手机端 */
@media (max-width: 640px) {
  .entry-content, .post-content { font-size: 15.5px; line-height: 1.9; }
  .headertop .focusinfo .header-info p { font-size: 16px; padding: 10px 16px; letter-spacing: 2px; }
}