/*
Theme Name: QSPM - Project Management
Theme URI: https://qspm.com
Description: 专为 QSPM (Quality Service Project Management) 设计 - 项目管理/效率工具/商业咨询 Typecho 主题。极简专业风格，SEO满分，原生响应式。
Author: QSPM Team
Author URI: https://qspm.com
Version: 1.0.0
Tags: project-management, business, consulting, productivity, seo, responsive, minimal
*/

/* ============================================================
   Reset & Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:1rem;
  line-height:1.7;
  color:#333;
  background:#fff;
  word-break:break-word;
  overflow-wrap:break-word;
}
a{color:#333;text-decoration:none}
a:hover{text-decoration:underline;color:#000}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button,input,textarea,select{
  font:inherit;
  border:none;
  background:none;
  outline:none;
}

/* 屏幕阅读器专用 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap;
}

/* ============================================================
   Layout
   ============================================================ */
.container{
  width:100%;
  max-width:780px;
  margin:0 auto;
  padding:0 20px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  padding:32px 0 24px;
  border-bottom:1px solid #eee;
  margin-bottom:40px;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.site-title{
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:-0.02em;
}
.site-title a{color:#333}
.site-title a:hover{text-decoration:none;color:#000}

/* 导航 */
.site-nav ul{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.site-nav a{
  font-size:0.9rem;
  color:#555;
}
.site-nav a:hover{color:#000;text-decoration:none}

/* 移动端汉堡菜单 */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
  background:none;
  border:none;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#333;
}

/* ============================================================
   Main Content
   ============================================================ */
.site-main{
  min-height:60vh;
  padding-bottom:60px;
}

/* ============================================================
   面包屑
   ============================================================ */
.breadcrumb{
  margin-bottom:24px;
  font-size:0.82rem;
  color:#999;
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  list-style:none;
}
.breadcrumb li+li::before{content:"›";margin-right:4px;color:#ccc}
.breadcrumb a{color:#666}
.breadcrumb a:hover{color:#333}

/* ============================================================
   文章列表
   ============================================================ */
.post-list{list-style:none}
.post-item{
  padding:28px 0;
  border-bottom:1px solid #f0f0f0;
}
.post-item:last-child{border-bottom:none}

.post-title{
  font-size:1.2rem;
  font-weight:600;
  line-height:1.4;
  margin-bottom:8px;
}
.post-title a{color:#222}
.post-title a:hover{color:#000;text-decoration:none;border-bottom:1px solid #333}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.8rem;
  color:#999;
  margin-bottom:10px;
  align-items:center;
}
.post-meta time{color:#aaa}
.post-meta .cats a,.post-meta .tags a{color:#888}
.post-meta .cats a:hover,.post-meta .tags a:hover{color:#333}

.post-excerpt{
  font-size:0.92rem;
  color:#666;
  line-height:1.7;
  margin-bottom:12px;
}
.read-more{
  font-size:0.82rem;
  color:#888;
  border-bottom:1px solid #ddd;
}
.read-more:hover{color:#333;border-bottom-color:#333;text-decoration:none}

/* ============================================================
   文章页 / 页面
   ============================================================ */
.post-header{
  margin-bottom:32px;
}
.post-header h1,.post-header h2{
  font-size:1.6rem;
  font-weight:700;
  line-height:1.4;
  color:#111;
  margin-bottom:12px;
}

/* 文章内容排版 */
.post-content{
  font-size:1rem;
  line-height:1.8;
  color:#333;
}
.post-content h2{font-size:1.3rem;font-weight:700;margin:32px 0 12px;color:#111}
.post-content h3{font-size:1.1rem;font-weight:600;margin:24px 0 10px;color:#222}
.post-content h4,.post-content h5,.post-content h6{
  font-size:1rem;font-weight:600;margin:20px 0 8px;color:#333}
.post-content p{margin-bottom:12px}
.post-content ul,.post-content ol{
  margin:12px 0 12px 1.5em;
  list-style:initial;
}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:6px}
.post-content blockquote{
  margin:20px 0;
  padding:12px 20px;
  border-left:3px solid #ddd;
  color:#666;
  font-style:italic;
}
.post-content pre{
  background:#f7f7f7;
  padding:16px;
  overflow-x:auto;
  font-size:0.88rem;
  line-height:1.6;
  margin:16px 0;
}
.post-content code{
  font-family:"Fira Code","Courier New",monospace;
  font-size:0.88em;
  background:#f5f5f5;
  padding:2px 5px;
  border-radius:3px;
}
.post-content pre code{background:none;padding:0;font-size:inherit}
.post-content table{
  width:100%;border-collapse:collapse;margin:16px 0;font-size:0.9rem;
}
.post-content th,.post-content td{
  padding:8px 12px;border:1px solid #e5e5e5;text-align:left;
}
.post-content th{background:#fafafa;font-weight:600}
.post-content img{margin:16px auto}
.post-content figure{margin:20px 0;text-align:center}
.post-content figcaption{font-size:0.82rem;color:#999;margin-top:6px}
.post-content a{color:#333;border-bottom:1px solid #ddd}
.post-content a:hover{color:#000;border-bottom-color:#333;text-decoration:none}
.post-content hr{border:none;border-top:1px solid #eee;margin:28px 0}

/* ============================================================
   文章标签与分类
   ============================================================ */
.post-footer{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid #f0f0f0;
  font-size:0.85rem;
  color:#aaa;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.post-footer a{
  color:#888;
  border-bottom:1px solid #eee;
}
.post-footer a:hover{color:#333;text-decoration:none;border-bottom-color:#999}

/* TitleLink 自定义链接 */
.titlelink-visit{
  text-align:center;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #f0f0f0;
}
.titlelink-visit a{
  display:inline-block;
  padding:8px 24px;
  background:#2563eb;
  color:#fff !important;
  border-radius:6px;
  font-size:0.95rem;
  text-decoration:none !important;
  transition:background .2s;
}
.titlelink-visit a:hover{
  background:#1d4ed8;
}

/* ============================================================
   相关文章
   ============================================================ */
.related-posts{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid #f0f0f0;
}
.related-posts h3{
  font-size:1rem;
  font-weight:600;
  color:#888;
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:0.82rem;
}
.related-posts ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.related-posts li::before{content:"→";color:#ccc;margin-right:6px}
.related-posts a{
  font-size:0.92rem;
  color:#444;
  border-bottom:1px solid transparent;
}
.related-posts a:hover{color:#000;border-bottom-color:#ddd;text-decoration:none}

/* ============================================================
   评论
   ============================================================ */
.comments-area{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid #eee;
}
.comments-title{
  font-size:1rem;
  font-weight:600;
  color:#888;
  margin-bottom:24px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:0.82rem;
}
.comment-list{list-style:none}
.comment-item{
  padding:20px 0;
  border-bottom:1px solid #f5f5f5;
}
.comment-item:last-child{border-bottom:none}
.comment-meta{
  display:flex;
  gap:12px;
  align-items:baseline;
  margin-bottom:8px;
  font-size:0.82rem;
}
.comment-author{font-weight:600;color:#333}
.comment-date{color:#bbb}
.comment-content{font-size:0.92rem;color:#555;line-height:1.7}
.comment-content a{color:#666;border-bottom:1px solid #ddd}
.comment-reply a{
  font-size:0.78rem;
  color:#bbb;
  margin-top:6px;
  display:inline-block;
}
.comment-reply a:hover{color:#666;text-decoration:none}

/* 评论表单 */
.comment-form{margin-top:36px}
.comment-form h3{
  font-size:0.82rem;
  font-weight:600;
  color:#888;
  margin-bottom:20px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.comment-form .form-row{margin-bottom:16px}
.comment-form label{
  display:block;
  font-size:0.82rem;
  color:#999;
  margin-bottom:6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  padding:10px 14px;
  border:1px solid #e5e5e5;
  font-size:0.92rem;
  line-height:1.6;
  color:#333;
  background:#fff;
  transition:border-color .2s;
}
.comment-form input:focus,
.comment-form textarea:focus{
  border-color:#999;
  outline:none;
}
.comment-form textarea{
  min-height:120px;
  resize:vertical;
}
.comment-form .form-row-inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.comment-submit{
  padding:10px 28px;
  background:#333;
  color:#fff;
  font-size:0.9rem;
  cursor:pointer;
  transition:background .2s;
}
.comment-submit:hover{background:#000}

/* ============================================================
   分页
   ============================================================ */
.pagination{
  display:flex;
  justify-content:space-between;
  padding:32px 0 0;
  font-size:0.88rem;
}
.pagination a{
  color:#666;
  border-bottom:1px solid #ddd;
  padding-bottom:2px;
}
.pagination a:hover{color:#000;border-bottom-color:#333;text-decoration:none}

/* ============================================================
   搜索表单
   ============================================================ */
.search-form{
  display:flex;
  align-items:center;
  border:1px solid #e5e5e5;
  overflow:hidden;
  max-width:400px;
}
.search-form input{
  flex:1;
  padding:9px 14px;
  font-size:0.9rem;
  color:#333;
  background:#fff;
}
.search-form input::placeholder{color:#bbb}
.search-form button{
  padding:9px 14px;
  cursor:pointer;
  color:#999;
  flex-shrink:0;
}
.search-form button:hover{color:#333}
.search-form button svg{display:block}

/* ============================================================
   404 / 空状态
   ============================================================ */
.not-found,.empty-state{
  text-align:center;
  padding:80px 20px;
  color:#ccc;
}
.not-found h1,.empty-state p{
  font-size:1rem;
  color:#999;
  margin-bottom:16px;
}
.not-found .big-num{
  font-size:5rem;
  font-weight:700;
  color:#eee;
  line-height:1;
  margin-bottom:16px;
}
.back-home{
  display:inline-block;
  margin-top:20px;
  font-size:0.88rem;
  color:#666;
  border-bottom:1px solid #ddd;
}
.back-home:hover{color:#333;text-decoration:none;border-bottom-color:#333}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  border-top:1px solid #eee;
  padding:28px 0;
  font-size:0.8rem;
  color:#bbb;
  text-align:center;
}
.site-footer a{color:#aaa}
.site-footer a:hover{color:#555;text-decoration:none}
.site-footer p+p{margin-top:6px}

/* ============================================================
   文章前后导航
   ============================================================ */
.post-nav{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid #f0f0f0;
  font-size:0.85rem;
}
.post-nav a{
  color:#666;
  max-width:48%;
  line-height:1.5;
  border-bottom:1px solid #eee;
}
.post-nav a:hover{color:#000;text-decoration:none;border-bottom-color:#999}
.post-nav .post-next{text-align:right;margin-left:auto}

/* ============================================================
   归档 / 分类页标题
   ============================================================ */
.archive-header{
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid #f0f0f0;
}
.archive-header h1{
  font-size:1.4rem;
  font-weight:700;
  color:#111;
  margin-bottom:6px;
}
.archive-header p{
  font-size:0.88rem;
  color:#999;
}

/* ============================================================
   Sitemap 页
   ============================================================ */
.sitemap-list{columns:2;gap:24px;list-style:none;margin-top:20px}
.sitemap-list li{break-inside:avoid;margin-bottom:8px}
.sitemap-list a{font-size:0.9rem;color:#555;border-bottom:1px solid #eee}
.sitemap-list a:hover{color:#000;text-decoration:none;border-bottom-color:#999}

/* ============================================================
   响应式 — 平板 (≥750px)
   ============================================================ */
@media(min-width:750px){
  html{font-size:17px}
  .container{padding:0 32px}
  .post-title{font-size:1.3rem}
  .post-header h1,.post-header h2{font-size:1.8rem}
  .comment-form .form-row-inline{grid-template-columns:1fr 1fr 1fr}
}

/* ============================================================
   响应式 — 桌面 (≥1200px)
   ============================================================ */
@media(min-width:1200px){
  html{font-size:18px}
  .container{max-width:820px}
  .post-header h1,.post-header h2{font-size:2rem}
}

/* ============================================================
   响应式 — 大屏 (≥1920px)
   ============================================================ */
@media(min-width:1920px){
  .container{max-width:900px}
}

/* ============================================================
   移动端汉堡菜单激活态
   ============================================================ */
@media(max-width:600px){
  .nav-toggle{display:flex}
  .site-nav{
    display:none;
    width:100%;
    order:3;
  }
  .site-nav.is-open{display:block}
  .site-nav ul{
    flex-direction:column;
    gap:14px;
    padding:16px 0 8px;
  }
  .post-header h1,.post-header h2{font-size:1.4rem}
  .post-content pre{font-size:0.82rem}
  .sitemap-list{columns:1}
}

/* ============================================================
   打印样式
   ============================================================ */
@media print{
  .site-header,.site-footer,.site-nav,.breadcrumb,.related-posts,
  .comments-area,.pagination,.search-form{display:none}
  .post-content a::after{content:" ("attr(href)")"}
}