/* ============================================================
   云光 · 冷调主题 —— Hexo 适配层
   把 Hexo 生成的标记（markdown 正文、分页、标签云、目录、代码块）
   适配到已复刻的设计系统 main.css 之上。
   ============================================================ */

/* ---------- 面包屑 ---------- */
.breadcrumb--page { padding: 28px 0 0; }

/* ---------- 归档 / 分类 / 标签 页头 ---------- */
.chapter-head { padding: 34px 0 6px; }
.chapter-head__kick { margin-bottom: 4px; }
.chapter-head h1 { margin: 0 0 10px; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.2; }
.chapter-head p { margin: 0; color: var(--ink-2); font-size: 0.95rem; max-width: 54ch; }

/* ---------- 标签云 ---------- */
.tag-cloud-wrapper { margin-top: 18px; }
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  padding: 22px 24px; border-radius: var(--radius); background: var(--glass);
  border: 1px solid var(--line); box-shadow: var(--shadow-glass);
}
.tag-cloud a { color: var(--ink-2); line-height: 1.2; transition: color .15s, box-shadow .15s, transform .15s; }
.tag-cloud a:hover { color: var(--accent); }
.tag-cloud .tag-cloud-count { font-family: var(--font-mono); font-size: .72em; color: var(--ink-3); }

/* ---------- 分页（Hexo paginator） ---------- */
.page-nav {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 40px 0 8px; flex-wrap: wrap;
}
.page-nav a, .page-nav .page-number, .page-nav .extend, .page-nav .current {
  min-width: 40px; height: 40px; padding: 0 14px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink-2);
  font-size: .9rem; transition: all .15s var(--ease);
}
.page-nav a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.page-nav .current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- 正文 markdown（.prose 由 body 传入） ---------- */
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.35;
  margin: 2.1em 0 .8em; scroll-margin-top: 120px;
}
.prose h2 { font-size: 1.5rem; padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 1.22rem; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.prose li { margin: .35em 0; }
.prose li > ul, .prose li > ol { margin: .3em 0 .6em; }
.prose blockquote {
  margin: 1.6em 0; padding: 2px 22px; border-left: 3px solid var(--accent);
  color: var(--ink-2); background: var(--accent-softer); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote p { margin: 0; }
.prose code {
  font-family: var(--font-mono); font-size: .88em; background: var(--accent-softer);
  color: var(--accent-deep); padding: .18em .45em; border-radius: 6px;
}
.prose :not(pre) > code::before, .prose :not(pre) > code::after { content: none; }
.prose pre {
  background: var(--code-bg); color: var(--code-ink); padding: 20px 22px; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: .9rem; line-height: 1.7;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.05);
}
.prose figure.highlight, .prose .highlight { margin: 1.7em 0; }
.prose pre code { background: none; color: inherit; padding: 0; font-size: 1em; }
/* highlight.js 语法色（深色底） */
.hljs { background: transparent; }
.prose .highlight .gutter { color: var(--ink-4); padding-right: 16px; -webkit-user-select: none; user-select: none; text-align: right; }

.prose img { border-radius: var(--radius-sm); box-shadow: var(--shadow-glass); margin: .4em 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95em; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--accent-softer); font-weight: 600; }
.prose > *:first-child { margin-top: 0; }

/* ---------- 文章正文布局（阅读宽度 + TOC） ---------- */
.post-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 30px 0 0; }
.post-layout--toc .post-body { min-width: 0; }
.toc-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-glass); padding: 18px 20px; }
.toc-card__title { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 12px; }
.toc-card nav { font-size: .88rem; line-height: 1.9; }
.toc-card nav .toc-h2, .toc-card nav .toc-h3 { display: block; }
.toc-card nav .toc-h2 { font-weight: 600; margin-top: 6px; }
.toc-card nav .toc-h3 { padding-left: 16px; color: var(--ink-3); }
.toc-card nav a:hover { color: var(--accent); }

/* 正文外链 marker */
.prose a[href^="http"]::after {
  content: " ↗"; font-size: .82em; opacity: .5;
}

/* 文章标签（复用 main.css 内的 .article-tags / .chip） */
.article-tags .chip { padding: 9px 15px; }

/* ---------- 免宽带窄屏 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-nav a:hover { transform: none; }
  .tag-cloud a { transition: none; }
}

/* 深色底座下 highlight 行号对比 */
[data-theme="dark"] .prose pre { border-color: rgba(255,255,255,.06); }

/* 响应式：正文网格收窄 */
@media (max-width: 900px) {
  .post-layout--toc { grid-template-columns: 1fr; }
}

/* ---------- 文章页 ---------- */
.article-title {
  font-size: 1.75rem; font-weight: 720; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--ink); margin: 14px 0 0; max-width: 30em;
}
.article-lead { color: var(--ink-2); font-size: 1rem; line-height: 1.7; margin: 16px 0 0; max-width: 60ch; }
.meta-upd { opacity: .8; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.post-nav__link {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass);
  box-shadow: var(--shadow-glass); transition: all .18s var(--ease);
}
.post-nav__link:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.post-nav__link--next { text-align: right; }
.post-nav__label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.post-nav__title { font-weight: 620; color: var(--ink); font-size: .98rem; line-height: 1.4; }

/* ---------- 侧栏 友链圆点 / 最新条目 hover ---------- */
.widget-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--glass-weak);
  font-size: .84rem; color: var(--ink-2); transition: all .15s var(--ease);
}
.widget-links a:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.widget-links .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .75; }
.widget-media { gap: 0; }
.widget-media__item {
  display: block; padding: 9px 10px; border-radius: var(--radius-xs); transition: background .15s;
}
.widget-media__item:hover { background: var(--accent-softer); }

/* ---------- 本地搜索 ---------- */
.search-results {
  margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass-strong); box-shadow: var(--shadow-glass); overflow: hidden;
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.search-results[hidden] { display: none; }
.search-results__item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.search-results__item:last-child { border-bottom: none; }
.search-results__item:hover { background: var(--accent-softer); }
.search-results__t { font-weight: 600; font-size: .92rem; color: var(--ink); }
.search-results__m { font-size: .76rem; color: var(--ink-3); margin-top: 2px; }
.search-results__empty { padding: 14px 16px; color: var(--ink-3); font-size: .86rem; }

/* ---------- 滚动入场（与 main.css .reveal 联动） ---------- */
.reveal.is-in .is-in { transform: none; }

/* ============================================================
   WordPress 适配层
   ============================================================ */

/* ---------- 无障碍隐藏（WordPress 大量使用） ---------- */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--bg-panel); clip-path: none; color: var(--accent);
  display: block; font-size: .9rem; height: auto; left: 6px; padding: 12px 20px;
  top: 6px; width: auto; z-index: 100000; border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lift);
}

/* ---------- 分页：WordPress 输出 .nav-links > .page-numbers ---------- */
.page-nav .nav-links {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.page-nav .page-numbers {
  min-width: 40px; height: 40px; padding: 0 14px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink-2);
  font-size: .9rem; transition: all .15s var(--ease); text-decoration: none;
}
.page-nav a.page-numbers:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-1px);
}
.page-nav .page-numbers.current {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.page-nav .page-numbers.dots { border-color: transparent; background: none; }

/* ---------- 文章标签（WordPress 输出无 class 的 <a>） ---------- */
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.article-tags a {
  display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass-weak); color: var(--ink-2);
  font-size: .85rem; transition: all .15s var(--ease);
}
.article-tags a::before { content: "#"; opacity: .5; margin-right: 3px; }
.article-tags a:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); transform: translateY(-1px);
}

/* ---------- 上下篇 cell ---------- */
.post-nav__cell {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass);
  box-shadow: var(--shadow-glass); transition: all .18s var(--ease); min-width: 0;
}
.post-nav__cell:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px);
}
.post-nav__cell--next { text-align: right; }
.post-nav a.post-nav__title { font-weight: 620; color: var(--ink); font-size: .98rem; line-height: 1.4; }
.post-nav a.post-nav__title:hover { color: var(--accent); }
.post-nav__none { color: var(--ink-4); font-size: .92rem; }

/* ---------- 封面图 / 归档描述 ---------- */
.article-cover {
  margin: 26px 0 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-glass); line-height: 0;
}
.article-cover img { width: 100%; height: auto; display: block; }
.chapter-head__desc { color: var(--ink-3); font-size: .93rem; margin-top: 10px; line-height: 1.7; }

/* ---------- 评论列表 ---------- */
.comments { margin-top: 46px; }
.comments__title {
  font-size: 1.15rem; font-weight: 680; color: var(--ink);
  margin: 0 0 18px; letter-spacing: -0.01em;
}
.comments__closed { color: var(--ink-3); font-size: .9rem; }
.comment-list, .comment-list ol.children {
  list-style: none; margin: 0 0 26px; padding: 0;
}
.comment-list ol.children { margin: 14px 0 0; padding-left: 26px; }
.comment-list li { margin-bottom: 12px; }
.yg-comment__inner {
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass); box-shadow: var(--shadow-sm);
}
.yg-comment__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.yg-comment__avatar img {
  width: 36px; height: 36px; border-radius: 50%; display: block;
  border: 1px solid var(--line);
}
.yg-comment__author { display: block; font-weight: 620; color: var(--ink); font-size: .93rem; }
.yg-comment__author a { color: var(--ink); }
.yg-comment__author a:hover { color: var(--accent); }
.yg-comment__meta { font-size: .76rem; color: var(--ink-3); }
.yg-comment__body p { margin: 0 0 .6em; color: var(--ink-2); font-size: .92rem; line-height: 1.75; }
.yg-comment__body p:last-child { margin-bottom: 0; }
.yg-comment__foot { margin-top: 8px; }
.yg-comment__reply a, .comment-reply-link { font-size: .8rem; color: var(--accent); }
li.bypostauthor > .yg-comment__inner {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---------- 评论表单 ---------- */
.comment-form-wrap {
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass); box-shadow: var(--shadow-glass); margin-top: 8px;
}
.comment-form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.comment-form .input { width: 100%; margin: 0; }
.comment-form .input--area { align-items: flex-start; padding: 12px 14px; }
.comment-form textarea {
  width: 100%; border: none; background: none; outline: none; resize: vertical;
  color: var(--ink); font: inherit; font-size: .93rem; line-height: 1.7; min-height: 110px;
}
.comment-form textarea::placeholder { color: var(--ink-4); }
.comment-form__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.comment-form__hint { font-size: .86rem; color: var(--ink-3); margin: 0 0 12px; }
.comment-form__hint a { color: var(--accent); }
.comment-form__cancel a { font-size: .84rem; color: var(--ink-3); }
.comment-form .comment-form-cookies-consent {
  display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-3);
  margin-top: 10px;
}
.comment-form .comment-form-cookies-consent label { margin: 0; }

/* ---------- 区块编辑器正文（.wp-block-*） ---------- */
.prose .wp-block-heading { scroll-margin-top: 90px; }
.prose .wp-block-list { padding-left: 1.3em; }
.prose .wp-block-quote {
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 4px 0 4px 18px; margin: 22px 0; color: var(--ink-2); font-style: normal;
}
.prose .wp-block-quote cite {
  display: block; margin-top: 8px; font-size: .84rem; color: var(--ink-3); font-style: normal;
}
.prose .wp-block-code, .prose .wp-block-preformatted {
  background: var(--code-bg, rgba(20,30,40,.055)); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 16px 18px; overflow-x: auto;
  font-size: .86rem; line-height: 1.65;
}
.prose .wp-block-code code { background: none; border: none; padding: 0; }
.prose .wp-block-image { margin: 26px 0; }
.prose .wp-block-image img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose figcaption, .prose .wp-caption-text {
  font-size: .82rem; color: var(--ink-3); text-align: center; margin-top: 9px;
}
.prose .wp-block-separator {
  border: none; border-top: 1px solid var(--line); margin: 34px auto; width: 100%;
}
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose .wp-block-table th, .prose .wp-block-table td {
  border: 1px solid var(--line); padding: 10px 13px; text-align: left;
}
.prose .wp-block-table th { background: var(--glass-weak); font-weight: 620; color: var(--ink); }
.prose .wp-block-button__link {
  display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: .92rem; font-weight: 560;
}
.prose .wp-block-embed { margin: 26px 0; }
.prose .wp-block-embed iframe { max-width: 100%; border-radius: var(--radius-sm); }

/* ---------- 对齐类 ---------- */
.prose .alignleft { float: left; margin: 6px 24px 18px 0; }
.prose .alignright { float: right; margin: 6px 0 18px 24px; }
.prose .aligncenter { margin-left: auto; margin-right: auto; display: block; }
.prose .alignwide { width: min(100%, calc(var(--read-w) + 120px)); margin-left: auto; margin-right: auto; }
.prose .alignfull { width: 100%; }
.prose .wp-block-image.alignleft, .prose .wp-block-image.alignright { max-width: 46%; }

/* ---------- 置顶文章 ---------- */
.post-item.sticky { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.post-item.sticky::before {
  content: "置顶"; position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: var(--accent); color: var(--accent-ink);
}

@media (max-width: 700px) {
  .comment-form__row { grid-template-columns: 1fr; }
  .post-nav__cell--next { text-align: left; }
  .prose .alignleft, .prose .alignright { float: none; margin: 18px auto; }
  .prose .wp-block-image.alignleft, .prose .wp-block-image.alignright { max-width: 100%; }
}

/* ---------- 视觉评审修正 ---------- */
/* 输入框 placeholder 原先过浅，几乎看不见 */
.widget .input input::placeholder,
.comment-form input::placeholder,
.comment-form textarea::placeholder,
.empty .input input::placeholder {
  color: var(--ink-3);
  opacity: .85;
}
/* 侧栏列表最后一项贴底，补足下内边距 */
.widget-media__item:last-child,
.widget-list > a:last-child { margin-bottom: 0; }
.widget .widget-media,
.widget .widget-list { padding-bottom: 2px; }

/* ---------- 文章卡片列表间距（.post-list 容器，继承设计 18px 呼吸感） ---------- */
.post-list {
  display: flex; flex-direction: column; gap: 18px;
}
/* ---------- 评论框小圆角（原为大圆角 var(--radius) 20px，用户反馈难看） ---------- */
.comment-form-wrap {
  border-radius: var(--radius-sm);
}

/* ---------- 评论表单圆角统一（覆盖 main.css 的 .comment-form 20px 大圆角 + 双边框） ---------- */
.comment-form-wrap {
  border: none;           /* 去掉外层边框，避免与 .comment-form 叠成双线 */
  padding: 0;             /* 外层不再撑内边距，交给 .comment-form */
  background: none; box-shadow: none;
}
.comment-form-wrap .comment-form,
.comment-form {
  border-radius: var(--radius-sm);   /* 20px → 14px 小圆角 */
  border-color: var(--line);
}
/* 评论输入框与评论框整体协调：胶囊 999px → 小圆角 */
.comment-form-wrap .input,
.comment-form .input {
  border-radius: var(--radius-xs);
}
.comment-form-wrap .input--area,
.comment-form .input--area {
  border-radius: var(--radius-xs);
}
/* 评论列表项与表单圆角一致（已是 radius-sm，保持不变，这里确保不被外层影响） */
.comment-list { margin-bottom: 20px; }

/* ---------- 内容区与顶部悬浮胶囊导航之间留出呼吸空间 ----------
   顶部导航是 sticky 悬浮胶囊(top:16px, 高约62px)，原内容紧贴其下。
   给整块内容(main + 侧栏)统一加顶部间距，让侧栏搜索框不再紧挨导航，
   且左右两栏保持对齐。 */
.container.layout-split {
  margin-top: 30px;
}
@media (max-width: 760px) {
  .container.layout-split { margin-top: 22px; }
}