/* =========================================================
   KitchenCleanLab — Blog Template 主题样式
   设计原则(R2R)：CSS 变量控制色板与节奏，改一处全站生效
   ========================================================= */
:root {
  --cl-primary: #2d7d57;        /* 主色：自然绿 */
  --cl-primary-dark: #1f5a3e;   /* 主色深 */
  --cl-primary-soft: #e8f3ec;   /* 主色浅底 */
  --cl-gold: #d9a441;           /* 点缀金 */
  --cl-ink: #263531;            /* 正文墨色 */
  --cl-muted: #6b7c72;          /* 次要文字 */
  --cl-page: #f7f9f8;           /* 页面底 */
  --cl-card: #ffffff;           /* 卡片底 */
  --cl-border: #e3e9e4;         /* 描边 */
  --cl-dark: #153b2b;           /* 深色区块底 */
  --radius-lg: 1rem;
  --radius-md: .6rem;
  --shadow-sm: 0 2px 10px rgba(21,59,43,.06);
  --shadow-md: 0 10px 30px rgba(21,59,43,.10);
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--cl-ink);
  background-color: var(--cl-page);
  line-height: 1.7;
  padding-top: 0;
}

h1, h2, h3, h4, .font-title {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--cl-dark);
}

a { color: var(--cl-primary); transition: color .15s ease; }
a:hover { color: var(--cl-primary-dark); }

.section-pad { padding: 4rem 0; }
.section-pad-sm { padding: 2.5rem 0; }

/* ---------- 区块标题体系：overline + 衬线标题 + accent 斜体 ---------- */
.sec-head { margin-bottom: 2.5rem; }
.sec-head .overline {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-primary);
  font-weight: 700;
  margin-bottom: .5rem;
}
.sec-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0; }
.sec-head .accent { font-style: italic; color: var(--cl-primary); }
.sec-head .sub { color: var(--cl-muted); margin-top: .6rem; margin-bottom: 0; }

/* ---------- 导航 ---------- */
.top-bar {
  background: var(--cl-dark);
  color: #cfe3d8;
  font-size: .8rem;
}
.top-bar a { color: #e7f4ec; text-decoration: none; }
.top-bar a:hover { color: #fff; }

.nav-wrap { position: sticky; top: 0; z-index: 1030; }
.navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cl-border);
  box-shadow: 0 2px 12px rgba(21,59,43,.05);
  padding: .9rem 0;
}
.brand-row { display: flex; align-items: center; gap: .7rem; }
.brand-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.brand-name { font-family: var(--font-title); font-weight: 800; color: var(--cl-dark); font-size: 1.25rem; line-height: 1.1; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-muted); }

.navbar-nav .nav-link {
  color: var(--cl-ink);
  font-weight: 600;
  font-size: .92rem;
  margin-right: .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap; /* 防止导航项因长名称换行 */
}
/* 导航一行展示：lg 以下折叠为汉堡菜单，lg 及以上禁止换行 */
@media (min-width: 992px) {
  .navbar-nav { flex-wrap: nowrap; }
  .navbar-collapse { flex-basis: auto; }
}
/* 中屏(992–1199)收紧导航间距，保证单行不溢出 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-nav .nav-link {
    font-size: .78rem;
    margin-right: .2rem;
    letter-spacing: .02em;
  }
}
.navbar-nav .nav-link:hover { color: var(--cl-primary); }
.navbar-nav .nav-link.active { color: var(--cl-primary); }

/* ---------- Hero 轮播 ---------- */
.hero { margin-bottom: 0; }
.hero .carousel-item { min-height: 460px; max-height: 560px; }
.hero .carousel-item img { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0; }
.hero .carousel-caption {
  bottom: 0; top: 0;
  display: flex; align-items: center;
  text-align: left;
  padding: 3rem;
}
.hero .slide-inner {
  max-width: 600px;
  background: rgba(21,59,43,.55);
  padding: 1.8rem 2.2rem;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(2px);
}
.hero .slide-inner h5 { color: #fff; font-size: 1.6rem; margin-bottom: .6rem; }
.hero .slide-inner p { color: #e7f4ec; margin-bottom: 1rem; }
.hero .carousel-indicators { margin-bottom: 1.4rem; }
.hero .carousel-indicators [data-bs-target] { width: 32px; height: 4px; border-radius: 2px; }

/* 关于条（首页 hero 下） */
.about-strip {
  background: var(--cl-card);
  border-top: 1px solid var(--cl-border);
  box-shadow: var(--shadow-sm);
}

/* ---------- 通用卡片 ---------- */
.post-card { border: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.post-card .post-thumb { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-thumb img { transform: scale(1.06); }
.post-card .cat-chip {
  position: absolute; top: .9rem; left: .9rem;
  background: var(--cl-primary); color:#fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing:.04em;
  padding:.3rem .7rem; border-radius: 20px; text-decoration: none;
}
.post-card .cat-chip:hover { color:#fff; background: var(--cl-primary-dark); }
.post-card-body { padding: 1.2rem 1.3rem 1.4rem; }
.post-meta { font-size: .8rem; color: var(--cl-muted); margin-bottom: .5rem; }
.post-meta .date::before { content: "·"; margin: 0 .5rem; }
.post-card .card-title { font-size: 1.15rem; margin-bottom: .5rem; }
.post-card .card-title a { color: var(--cl-dark); text-decoration: none; }
.post-card .card-title a:hover { color: var(--cl-primary); }
.post-card .card-text { color: var(--cl-muted); font-size: .92rem; margin-bottom: .9rem; }
.entry-link { font-weight: 700; color: var(--cl-primary); text-decoration: none; font-size: .88rem; }
.entry-link:hover { color: var(--cl-primary-dark); }
.entry-link::after { content: " →"; }

/* 横向文章行（列表页） */
.list-card { display: flex; flex-direction: row; gap: 1.1rem; align-items: stretch; }
.list-card .list-thumb { flex: 0 0 220px; min-height: 150px; overflow: hidden; border-radius: var(--radius-md); background:#eef2ef; }
.list-card .list-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.list-card:hover .list-thumb img { transform: scale(1.05); }
.list-card .list-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.list-card .card-title { font-size: 1.25rem; }
@media (max-width: 768px) { .list-card { flex-direction: column; } .list-card .list-thumb { flex-basis: 180px; } }

/* 标签胶囊 */
.tag-pill {
  display:inline-block;
  background: var(--cl-primary-soft); color: var(--cl-primary-dark);
  font-size:.78rem; font-weight:600;
  padding:.22rem .7rem; margin:.15rem .15rem .15rem 0;
  border-radius:20px; text-decoration:none;
}
.tag-pill:hover { background: var(--cl-primary); color:#fff; }

/* 标签带（首页深色全宽） */
.tag-strip { background: var(--cl-dark); color:#e7f4ec; }
.tag-strip .sec-head h2 { color:#fff; }
.tag-strip .tag-pill { background: rgba(255,255,255,.1); color:#e7f4ec; }
.tag-strip .tag-pill:hover { background: var(--cl-gold); color:#153b2b; }

/* 首页栏目差异化区块通用 */
.cat-block { background:#fff; border-top:1px solid var(--cl-border); }
.cat-block.alt { background: var(--cl-page); }
/* 列高不一致时（大卡 + 多小卡并排），让卡片图片纵向撑满，
   避免卡片被拉伸后底部留出大片空白；图片本身仍以 4:3 为基准高度 */
.cat-block .post-card > .post-thumb { flex: 1 1 auto; }

/* ---------- 文章详情正文 ---------- */
.article-hero { background:#fff; border-bottom:1px solid var(--cl-border); }
.article-body { background:#fff; border:1px solid var(--cl-border); border-radius: var(--radius-lg); padding:2.4rem 2.8rem; box-shadow: var(--shadow-sm); }
.article-body p { font-size:1.02rem; margin-bottom:1.2rem; }
.article-body img, .article-body figure img { max-width:100%; height:auto; border-radius: var(--radius-md); }
.article-body h2 { font-size:1.6rem; margin:2rem 0 1rem; }
.article-body ul, .article-body ol { padding-left:1.3rem; margin-bottom:1.2rem; }
.article-body blockquote { border-left:4px solid var(--cl-primary); background: var(--cl-primary-soft); padding:1rem 1.4rem; border-radius:0 var(--radius-md) var(--radius-md) 0; color:var(--cl-dark); }
.article-body table { width:100%; border-collapse:collapse; margin:1.4rem 0; }
.article-body th, .article-body td { border:1px solid var(--cl-border); padding:.6rem .8rem; }
.article-body thead th { background: var(--cl-primary-soft); }

.prev-next-card .card { border:0; box-shadow:var(--shadow-sm); border-radius: var(--radius-md); transition: transform .2s ease; overflow:hidden; }
.prev-next-card .card:hover { transform: translateY(-3px); }
.prev-next-card .dir { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cl-muted); }
.prev-next-card-link .row { height:100%; }
.prev-next-thumb { overflow:hidden; min-height:118px; }
.prev-next-thumb img { width:100%; height:100%; object-fit:cover; }

/* 侧栏 */
.side-card { background:#fff; border:1px solid var(--cl-border); border-radius: var(--radius-lg); padding:1.3rem 1.4rem; margin-bottom:1.4rem; box-shadow: var(--shadow-sm); }
.side-card h5 { font-family:var(--font-body); font-size:.95rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cl-dark); border-bottom:2px solid var(--cl-primary); display:inline-block; padding-bottom:.3rem; margin-bottom:1rem; }

/* ---------- 页脚 3 列 ---------- */
.footer { background: var(--cl-dark); color:#bcd0c4; }
.footer h6 { color:#fff; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.1rem; }
.footer a { color:#bcd0c4; text-decoration:none; }
.footer a:hover { color:var(--cl-gold); }
.footer ul { list-style:none; padding-left:0; }
.footer ul li { margin-bottom:.5rem; font-size:.92rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#8aa69a; }

/* 面包屑 */
.breadcrumb-wrap { background:#fff; border-bottom:1px solid var(--cl-border); }
.breadcrumb { margin:0; font-size:.9rem; }
.breadcrumb a { color:var(--cl-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--cl-primary); }

/* 分页 */
.pagination .page-link { color:var(--cl-primary); border-color: var(--cl-border); margin:0 .1rem; border-radius:.35rem !important; }
.pagination .page-item.active .page-link { background:var(--cl-primary); border-color:var(--cl-primary); color:#fff; }

/* 通用按钮 */
.btn-brand { background: var(--cl-primary); color:#fff; border:0; padding:.55rem 1.2rem; border-radius:30px; font-weight:600; }
.btn-brand:hover { background: var(--cl-primary-dark); color:#fff; }
.btn-outline-brand { border:2px solid var(--cl-primary); color: var(--cl-primary); background:transparent; border-radius:30px; font-weight:600; padding:.5rem 1.2rem; }
.btn-outline-brand:hover { background:var(--cl-primary); color:#fff; }

/* 页头（栏目/标签/全部/关于） */
.page-hero { background: var(--cl-primary-soft); border-bottom:1px solid var(--cl-border); }
.page-hero h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.page-hero .lead { color: var(--cl-muted); max-width: 720px; }

/* 滚动显现 */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* 回到顶部 */
#backTop {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1060;
  width: 42px; height: 42px; border-radius: 50%; border:0;
  background: var(--cl-primary); color:#fff; font-size:1.2rem; line-height:1;
  box-shadow: var(--shadow-md); display:none;
}
#backTop:hover { background: var(--cl-primary-dark); }
#backTop.show { display:block; }

/* 阅读进度条 */
#readingBar { position: fixed; top:0; left:0; height:3px; width:0; background: var(--cl-gold); z-index:9999; }

/* 订阅带 */
.newsletter { background: var(--cl-primary); color:#fff; }
.newsletter h2 { color:#fff; }
.newsletter .form-control { border-radius:30px; border:0; }
.newsletter .btn { border-radius:30px; }

@media (max-width: 991px) { .navbar-nav { margin-top: .8rem; } }
@media (max-width: 767px) { .hero .carousel-item { min-height: 320px; } .article-body { padding: 1.5rem; } }