/*
Theme Name: 老王SEO笔记
Author: 王
Description: 个人独立站建设与SEO学习记录
Version: 1.0
*/

:root{
    --bg: #ffffff;
    --text: #1a1a1a;
    --text-soft: #6b6b6b;
    --text-faint: #9a9a9a;
    --accent: #2f5fff;
    --accent-soft: rgba(47,95,255,0.08);
    --orange: #e8590c;
    --orange-soft: rgba(232,89,12,0.1);
    --line: #e8e8e8;
    --font-sans: 'Noto Sans SC', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  body{
    font-family: var(--font-sans); color: var(--text); background: var(--bg);
    line-height: 1.7; font-size: 15px;
  }
  a{ text-decoration:none; color: inherit; }
  ul{ list-style:none; }
  
  /* ===== 顶部极简标题条 ===== */
  .site-top{
    padding: 24px 32px; border-bottom: 1px solid var(--line);
  }
  .site-top a{ font-weight: 700; font-size: 16px; }
  .site-top .desc{ font-size: 12px; color: var(--text-faint); margin-top: 4px; font-family: var(--font-mono); }
  
  /* ===== 搜索框 通用 ===== */
  .search-box{ position: relative; margin-bottom: 20px; }
  .search-box input{
    width: 100%; border: 1px solid var(--line); border-radius: 6px;
    padding: 9px 12px 9px 32px; font-size: 13px; font-family: var(--font-sans);
    background: #fafafa;
  }
  .search-box input:focus{ outline:none; border-color: var(--accent); background:#fff; }
  .search-box::before{
    content: '⌕'; position:absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); font-size: 15px;
  }
  
  /* ===== 首页：分类目录列表 ===== */
  .index-wrap{ max-width: 1400px; margin: 0 auto; padding: 40px 32px 80px; }
  .index-group{ margin-bottom: 38px; }
  .index-group-title{
    font-size: 17px; font-weight: 700; color: var(--accent);
    font-family: var(--font-mono); letter-spacing: 0.03em;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .index-group-title .count{ color: var(--text-faint); font-weight:400; }
  .index-list li{
    display:flex; align-items:baseline; gap: 10px; flex-wrap: wrap;
    padding: 7px 0;
  }
  .index-list a{
    font-size: 14.5px; color: var(--text);
    border-bottom: 1px solid transparent;
  }
  .index-list a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
  .index-list .date{
    font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap;
  }
  .index-empty{ font-size: 13px; color: var(--text-faint); }
  .index-list li.is-hidden{ display:none; }
  .index-group.is-hidden{ display:none; }
  
  /* ===== 文章详情页：左右两栏 ===== */
  .article-layout{ display:flex; max-width: 1280px; margin: 0 auto; align-items:flex-start; }
  
  .sidebar{
    width: 280px; flex-shrink:0; position: sticky; top: 0;
    height: 100vh; overflow-y: auto;
    padding: 28px 22px; border-right: 1px solid var(--line);
  }
  .sidebar-group{ margin-bottom: 24px; }
  .sidebar-group-title{
    font-size: 15px; font-weight: 700; color: var(--accent);
    font-family: var(--font-mono); letter-spacing: 0.03em; margin-bottom: 8px;
  }
  .sidebar-list li a{
    display:block; font-size: 13px; color: var(--text-soft);
    padding: 6px 8px; border-radius: 5px; line-height:1.5;
  }
  .sidebar-list li a:hover{ background: var(--accent-soft); color: var(--accent); }
  .sidebar-list li.current a{ background: var(--orange-soft); color: var(--orange); font-weight:700; }
  .sidebar-list li.is-hidden{ display:none; }
  
  .article-main{ flex:1; min-width:0; padding: 44px 56px 80px; max-width: 800px; }
  .article-main .cat-label{
    font-family: var(--font-mono); font-size: 14px; color: var(--accent); margin-bottom: 10px; display:block;
  }
  .article-main h1{ font-size: 28px; font-weight: 800; line-height:1.4; margin-bottom: 8px; }
  .article-main .date{ font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 32px; display:block; }
  
  /* 正文排版 */
  .entry-content{ font-size: 15.5px; line-height: 1.85; }
  .entry-content > * + *{ margin-top: 1.3em; }
  .entry-content h2{ font-size: 21px; font-weight: 800; margin-top: 2em; }
  .entry-content h3{ font-size: 17px; font-weight: 700; margin-top: 1.6em; }
  .entry-content a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .entry-content ul, .entry-content ol{ padding-left: 22px; }
  .entry-content li{ margin-bottom: 0.4em; }
  .entry-content blockquote{
    border-left: 3px solid var(--accent); padding-left: 18px; color: var(--text-soft);
  }
  .entry-content img{ width:100%; border-radius: 8px; }
  .entry-content code{
    background: #f4f4f4; padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.88em;
  }
  .entry-content pre{
    background: #1a1a1a; color: #e8e8e8; padding: 18px; border-radius: 8px;
    overflow-x: auto; font-family: var(--font-mono); font-size: 13px;
  }
  .entry-content hr{ border:none; border-top: 1px solid var(--line); margin: 2em 0; }
  
  @media (max-width: 900px){
    .article-layout{ flex-direction:column; }
    .sidebar{ width:100%; height:auto; position:relative; border-right:none; border-bottom:1px solid var(--line); }
    .article-main{ padding: 32px 24px 60px; }
  }
  .index-list li{
    flex-wrap: wrap;
  }
  .item-left{
    display:flex; align-items:baseline; gap: 10px; flex-wrap: wrap;
  }
  .tag-chip{
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
    background: #f4f4f4; padding: 2px 7px; border-radius: 4px;
  }
  .site-top-row{ display:flex; justify-content:space-between; align-items:center; }
.new-post-btn{
  font-size: 13px; font-weight: 700; color: #fff; background: var(--accent);
  padding: 8px 16px; border-radius: 6px;
}
.new-post-btn:hover{ background: #1d3fc7; }

/* 快速记录 */
.quick-capture{
  border: 1px solid var(--line); border-radius: 8px; padding: 14px;
  margin-bottom: 24px; background: #fafafa;
}
.quick-capture textarea{
  width: 100%; border: none; background: none; resize: vertical;
  font-family: var(--font-sans); font-size: 14px; outline: none;
}
#quick-capture-submit{
  background: var(--accent); color: #fff; border: none; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 6px; cursor: pointer; margin-top: 8px;
}
.quick-capture-msg{ font-size: 12px; color: var(--text-faint); margin-left: 12px; }

/* 提醒条 */
.notice-bar{
  background: var(--orange-soft); color: var(--orange); font-size: 13px;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 20px;
}

/* 置顶 */
.pinned-group{ background: var(--orange-soft); padding: 14px; border-radius: 8px; }
.pinned-group .index-group-title span{ color: var(--orange); }

/* 标签云 */
.tag-cloud-box{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag-cloud-item{
  font-family: var(--font-mono); font-size: 12px; color: var(--text-soft);
  background: #f4f4f4; padding: 5px 10px; border-radius: 999px;
}
.tag-cloud-item:hover{ background: var(--accent-soft); color: var(--accent); }
.tag-cloud-item span{ color: var(--text-faint); margin-left: 3px; }
.index-groups-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 12px 60px;
  align-items: start;
}
.index-groups-grid .index-group{ margin-bottom: 0; }
.sidebar-capture{ margin-bottom: 16px; }
.sidebar-capture textarea{
  min-height: 160px;
}