/* ==========================================================================
   WW Revel 博客局部样式
   在主站完整样式（assets/ww-revel.css）之后加载；只做两件事：
     1. 补回被主站全局 reset 清掉的「正文可读性」（列表符号、链接下划线等）
     2. 博客自己的版式（文章卡片、文章页、分页、搜索框）
   变量全部取自主站设计令牌 --cf-*，所以主站改配色这里自动跟随。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面外壳
   -------------------------------------------------------------------------- */
.cf-blog {
  padding-block: var(--cf-section-y);
}

.cf-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-s-2);
  width: fit-content;
}

.cf-footer__logo img {
  width: 32px;
  height: 32px;
}

.cf-blog-hero {
  padding-block: var(--cf-s-9) var(--cf-s-7);
  background-color: var(--cf-surface-2);
  border-block-end: 1px solid var(--cf-border);
}

.cf-blog-hero h1 {
  margin-block-end: var(--cf-s-3);
}

.cf-blog-hero p {
  max-width: 62ch;
  font-size: var(--cf-fs-lead);
  color: var(--cf-text-muted);
}

.cf-blog-hero .cf-eyebrow {
  margin-block-end: var(--cf-s-3);
}

/* --------------------------------------------------------------------------
   2. 文章卡片网格（列表 / 归档 / 搜索共用）
   -------------------------------------------------------------------------- */
.cf-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cf-s-5);
}

@media (min-width: 700px) {
  .cf-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .cf-posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cf-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-md);
  box-shadow: var(--cf-shadow-sm);
  transition: transform var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease),
    border-color var(--cf-dur) var(--cf-ease);
}

.cf-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cf-shadow-md);
  border-color: var(--cf-accent);
}

.cf-post-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--cf-surface-2);
}

.cf-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cf-dur-slow) var(--cf-ease);
}

.cf-post-card:hover .cf-post-card__media img {
  transform: scale(1.04);
}

.cf-post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--cf-s-2);
  padding: var(--cf-s-4);
}

.cf-post-card__cat {
  align-self: flex-start;
}

.cf-post-card__title {
  font-size: var(--cf-fs-h3);
}

.cf-post-card__title a:hover {
  color: var(--cf-accent);
}

.cf-post-card__excerpt {
  font-size: var(--cf-fs-sm);
  color: var(--cf-text-muted);
}

.cf-post-card__meta {
  margin-block-start: auto;
  padding-block-start: var(--cf-s-2);
  font-size: var(--cf-fs-xs);
  color: var(--cf-text-subtle);
}

/* --------------------------------------------------------------------------
   3. 文章页
   -------------------------------------------------------------------------- */
.cf-article {
  max-width: 72ch;
  margin-inline: auto;
}

.cf-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-s-3);
  margin-block-end: var(--cf-s-5);
  font-size: var(--cf-fs-sm);
  color: var(--cf-text-muted);
}

.cf-article__thumb {
  margin-block-end: var(--cf-s-6);
  overflow: hidden;
  border-radius: var(--cf-r-lg);
}

.cf-article__thumb img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   4. 正文可读性 —— 必须补回主站全局 reset 清掉的东西
   -------------------------------------------------------------------------- */
.entry-content {
  font-size: var(--cf-fs-lead);
}

.entry-content > * + * {
  margin-block-start: var(--cf-s-4);
}

.entry-content h2 {
  margin-block-start: var(--cf-s-7);
  font-size: var(--cf-fs-h2);
}

.entry-content h3 {
  margin-block-start: var(--cf-s-6);
  font-size: var(--cf-fs-h3);
}

.entry-content h4 {
  margin-block-start: var(--cf-s-5);
}

/* 主站把 ul/ol 的 list-style 和缩进都清掉了，正文里必须加回来 */
.entry-content ul {
  list-style: disc;
  padding-inline-start: 1.5em;
}

.entry-content ol {
  list-style: decimal;
  padding-inline-start: 1.5em;
}

.entry-content li + li {
  margin-block-start: var(--cf-s-1);
}

.entry-content li > ul,
.entry-content li > ol {
  margin-block-start: var(--cf-s-1);
}

/* 主站把 a 的颜色和下划线也清掉了 */
.entry-content a {
  color: var(--cf-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.entry-content a:hover {
  color: var(--cf-accent-hover);
  text-decoration-thickness: 2px;
}

.entry-content blockquote {
  margin: 0;
  padding-inline-start: var(--cf-s-5);
  border-inline-start: 4px solid var(--cf-cat-holiday);
  color: var(--cf-text-muted);
  font-style: italic;
}

.entry-content code {
  padding-block: 0.1em;
  padding-inline: 0.4em;
  border-radius: var(--cf-r-xs);
  background-color: var(--cf-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.entry-content pre {
  overflow-x: auto;
  padding: var(--cf-s-4);
  border-radius: var(--cf-r-md);
  background-color: var(--cf-forest-900);
  color: #f2ede4;
}

.entry-content pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cf-fs-sm);
}

.entry-content th,
.entry-content td {
  padding: var(--cf-s-3);
  border: 1px solid var(--cf-border);
  text-align: start;
}

.entry-content th {
  background-color: var(--cf-surface-2);
  font-weight: var(--cf-fw-bold);
}

.entry-content hr {
  border: 0;
  border-block-start: 1px solid var(--cf-border);
}

.entry-content img {
  border-radius: var(--cf-r-md);
}

.entry-content figure {
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. 文章内上一篇/下一篇
   -------------------------------------------------------------------------- */
.cf-postnav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cf-s-4);
  margin-block-start: var(--cf-s-8);
  padding-block-start: var(--cf-s-6);
  border-block-start: 1px solid var(--cf-border);
}

@media (min-width: 700px) {
  .cf-postnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cf-postnav__item {
  display: flex;
  flex-direction: column;
  gap: var(--cf-s-2);
  padding: var(--cf-s-4);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-md);
  background-color: var(--cf-surface);
}

.cf-postnav__label {
  font-size: var(--cf-fs-xs);
  font-weight: var(--cf-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-subtle);
}

[dir='rtl'] .cf-postnav__label {
  letter-spacing: 0;
  text-transform: none;
}

.cf-postnav__item--next {
  text-align: end;
}

/* --------------------------------------------------------------------------
   6. 分页
   -------------------------------------------------------------------------- */
.cf-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cf-s-2);
  margin-block-start: var(--cf-s-8);
}

.cf-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding-block: var(--cf-s-2);
  padding-inline: var(--cf-s-3);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-sm);
  font-size: var(--cf-fs-sm);
  font-weight: var(--cf-fw-medium);
}

.cf-pagination .page-numbers:hover {
  border-color: var(--cf-accent);
  color: var(--cf-accent);
}

.cf-pagination .page-numbers.current {
  background-color: var(--cf-primary);
  border-color: var(--cf-primary);
  color: var(--cf-primary-ink);
}

/* --------------------------------------------------------------------------
   7. 搜索框
   -------------------------------------------------------------------------- */
.cf-searchform {
  display: flex;
  gap: var(--cf-s-2);
  max-width: 32rem;
}

.cf-searchform input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--cf-s-3);
  padding-inline: var(--cf-s-4);
  border: 1px solid var(--cf-border-strong);
  border-radius: var(--cf-r-full);
  background-color: var(--cf-surface);
}

/* --------------------------------------------------------------------------
   8. 后台工具条下的固定页头（登录状态下 WordPress 会顶下 32/46px）
   -------------------------------------------------------------------------- */
body.admin-bar .cf-header {
  inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .cf-header {
    inset-block-start: 46px;
  }
}

/* --------------------------------------------------------------------------
   9. 文章底部引导回主站
   -------------------------------------------------------------------------- */
.cf-blog-cta {
  margin-block-start: var(--cf-s-8);
  padding-block: var(--cf-s-7);
  padding-inline: var(--cf-s-6);
  border-radius: var(--cf-r-xl);
  background: linear-gradient(135deg, var(--cf-forest-900), var(--cf-forest-700) 62%, #2e6b4f);
  color: #fff;
}

.cf-blog-cta h2 {
  margin-block-end: var(--cf-s-3);
  color: #fff;
}

.cf-blog-cta p {
  margin-block-end: var(--cf-s-5);
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.84);
}

.cf-blog-cta .cf-btn {
  background-color: var(--cf-gold-500);
  color: #1a1208;
}

.cf-blog-cta .cf-btn:hover {
  background-color: var(--cf-gold-300);
}

/* --------------------------------------------------------------------------
   评论
   变量全部取自主站设计令牌 --cf-*，所以主站改配色这里自动跟随。
   只用逻辑属性（margin-block / padding-inline），阿语 RTL 不会错位。
   -------------------------------------------------------------------------- */
.cf-comments {
  margin-block-start: var(--cf-s-8);
  padding-block-start: var(--cf-s-6);
  border-block-start: 1px solid var(--cf-border);
}

.cf-comments__title {
  font-size: var(--cf-fs-h3);
  margin-block-end: var(--cf-s-4);
}

.cf-comments__list,
.cf-comments__list ol,
.cf-comments__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-comments__list ol.children {
  margin-inline-start: var(--cf-s-6);
  padding-block-start: var(--cf-s-4);
}

.cf-comments__list li.comment {
  padding-block: var(--cf-s-4);
  border-block-start: 1px solid var(--cf-border);
}

.cf-comments__list li.comment:first-child {
  border-block-start: 0;
}

.cf-comments .comment-meta {
  display: flex;
  align-items: center;
  gap: var(--cf-s-3);
  margin-block-end: var(--cf-s-2);
  font-size: var(--cf-fs-sm);
  color: var(--cf-text-muted);
}

.cf-comments .avatar {
  border-radius: var(--cf-r-full);
}

.cf-comments .comment-author cite {
  font-style: normal;
  font-weight: var(--cf-fw-bold);
  color: var(--cf-text);
}

.cf-comments .comment-content {
  color: var(--cf-text);
}

.cf-comments .comment-content p {
  margin-block-end: var(--cf-s-3);
}

.cf-comments__notes,
.cf-comments__closed {
  font-size: var(--cf-fs-sm);
  color: var(--cf-text-muted);
}

/* 评论表单：与主站表单同一套观感 */
.cf-comments .comment-form > p {
  margin-block-end: var(--cf-s-4);
}

.cf-comments .comment-form label {
  display: block;
  margin-block-end: var(--cf-s-1);
  font-size: var(--cf-fs-sm);
  font-weight: var(--cf-fw-medium);
}

.cf-comments .comment-form input[type='text'],
.cf-comments .comment-form input[type='email'],
.cf-comments .comment-form input[type='url'],
.cf-comments .comment-form textarea {
  inline-size: 100%;
  padding-block: var(--cf-s-2);
  padding-inline: var(--cf-s-3);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-md);
  background-color: var(--cf-surface);
  color: var(--cf-text);
  font: inherit;
}

.cf-comments .comment-form input:focus-visible,
.cf-comments .comment-form textarea:focus-visible {
  outline: 2px solid var(--cf-focus);
  outline-offset: 1px;
}

.cf-comments .comment-form .form-submit {
  margin-block-start: var(--cf-s-4);
}