@charset "UTF-8";
/* ==========================================================================
   layout.css — 布局重构层（最后加载）
   ==========================================================================

   为什么需要这个文件？
   ----------------------------------------------------------------------
   父主题 book-rev-lite 大量使用高特异度选择器，例如：
       #slider .slide .book-cover        → 特异度 (1,2,0)
       #latest-reviews-block .article-…  → 特异度 (1,4,0)
   而之前子主题写的是：
       section#slider .book-cover        → 特异度 (1,1,2)
   数值上 0,2,0 > 0,1,2，所以子主题规则被完全压制，
   这就是「改了样式却看不出变化」的真正原因。

   本文件的对策：
   1) 所有选择器统一加 body 前缀 → 特异度整体 +1 个元素位，稳定压过同名规则
   2) 对父主题用内联/强声明写死的属性（float / width / height / display）
      追加 !important —— 这些属性父主题动辄写死，不如此无法覆盖
   3) 只处理「骨架与尺寸」，配色细节仍归 theme.css，职责不混

   内容分块：
   1. 全局容器      2. 顶栏        3. 站头
   4. 分类导航      5. 首页精选    6. 首页书架网格
   7. 列表页复用    8. 文章页      9. 侧边栏
   10. 页脚         11. 响应式
   ========================================================================== */


/* ==========================================================================
   1. 全局容器
   ========================================================================== */

html,
body{
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body .container{
  width: 100%;
  max-width: var(--w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

body #main-content{
  padding-top: 0;
}

/* 父主题给 #main-content 加了顶部留白与背景图，统一压平 */
body #main-content,
body #main-content-inner{
  background: transparent;
}


/* ==========================================================================
   2. 顶栏（深色细条）
   ========================================================================== */

body #top-bar{
  background: #12211C;
  border: 0;
  padding: 0;
  line-height: 1;
}

body #top-bar > .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
}

body #top-bar-menu ul{
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body #top-bar-menu ul li{
  display: inline-block;
  margin: 0;
  float: none;
}

body #top-bar-menu ul li a{
  display: block;
  padding: 7px 11px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .62);
  text-shadow: none;
  text-decoration: none;
  border-radius: 6px;
  transition: color .16s, background .16s;
}

body #top-bar-menu ul li a:hover{
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

/* 顶栏搜索：胶囊输入框 */
body #top-bar .search-form{
  flex: 0 0 auto;
  margin: 0;
}

body #top-bar .search-form form{
  display: flex;
  align-items: center;
  margin: 0;
}

body #top-bar .search-form input[type="text"],
body #top-bar .search-form input[type="search"]{
  width: 200px;
  padding: 6px 13px;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
  outline: none;
  transition: background .16s, border-color .16s;
}

body #top-bar .search-form input[type="text"]::placeholder,
body #top-bar .search-form input[type="search"]::placeholder{
  color: rgba(255, 255, 255, .42);
}

body #top-bar .search-form input[type="text"]:focus,
body #top-bar .search-form input[type="search"]:focus{
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}

body #top-bar .search-form input[type="submit"],
body #top-bar .search-form button{
  margin-left: -34px;
  width: 30px;
  height: 26px;
  padding: 0;
  font-size: 0;
  color: transparent;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   3. 站头
   ========================================================================== */

body #inner-header{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 20px 0 18px;
}

body #inner-header > .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body #site-title{
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

body #site-title a{
  color: var(--ink);
  text-decoration: none;
}

/* 站名左侧的品牌方标：用纯 CSS 画一枚书脊块，替代主题自带的位图图标 */
body #site-title::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  vertical-align: -3px;
  border-radius: 5px;
  background: linear-gradient(150deg, var(--brand-2), var(--brand));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

body #site-description{
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  letter-spacing: .01em;
}

/* 主题自带的广告位横幅：留空时不占位 */
body #inner-header #ad-banner:empty{
  display: none;
}


/* ==========================================================================
   4. 分类导航（胶囊标签）
   ========================================================================== */

body #main-menu{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  position: relative;
  z-index: 20;
}

body #main-menu > .container{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

body #main-menu nav{
  flex: 1 1 auto;
  min-width: 0;
}

body #main-menu nav > ul,
body #main-menu nav ul.menu{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body #main-menu nav ul.menu > li{
  float: none;
  display: block;
  margin: 0;
  padding: 0;
}

body #main-menu nav ul.menu > li > a{
  display: block;
  padding: 5px 11px 5px 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background .16s, color .16s, border-color .16s;
}

body #main-menu nav ul.menu > li > a:hover{
  color: var(--brand);
  background: var(--brand-soft);
  border-color: rgba(15, 110, 86, .18);
}

/* 分组色点：1.x 基础 / 2.x 应用 / 3.x 防护 / 4.x 训练 */
body #main-menu nav ul.menu > li > a::before{
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: .55;
}

body #main-menu nav ul.menu > li.cat-g1 > a::before{ background: #0F6E56; opacity: 1; }
body #main-menu nav ul.menu > li.cat-g2 > a::before{ background: #2E7FB8; opacity: 1; }
body #main-menu nav ul.menu > li.cat-g3 > a::before{ background: #D85A30; opacity: 1; }
body #main-menu nav ul.menu > li.cat-g4 > a::before{ background: #7B5CB8; opacity: 1; }

/* 父主题用 JS 注入的原生下拉：桌面隐藏（移动端由抽屉菜单接管） */
body #main-menu select.main-dropdown{
  display: none;
}

body #main-menu #menu-social-icons{
  flex: 0 0 auto;
  float: none;
  border: 0;
  padding: 0;
  margin: 0;
}

body #main-menu #menu-social-icons ul{
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body #main-menu #menu-social-icons a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--ink-3);
  border-radius: 50%;
  background: var(--paper-2);
  transition: background .16s, color .16s;
}

body #main-menu #menu-social-icons a:hover{
  color: var(--brand);
  background: var(--brand-soft);
}


/* ==========================================================================
   5. 首页精选区
   ----------------------------------------------------------------------
   父主题的 #slider 是 Cycle2 轮播，但 master.js 里从未调用 .cycle()，
   所以 12 个 .slide 全部堆叠显示 —— 这就是「一屏一本书」的元凶。
   这里不修 JS，而是把它降级为静态的「精选三本」，视觉更稳、也不依赖脚本。
   ========================================================================== */

body.home #slider,
body.blog #slider,
body.archive #slider{
  height: auto;
  min-height: 0;
  padding: 36px 0 0;
  background: none;
  position: relative;
  overflow: visible;
}

body.home #slider > .container.cycle-slideshow,
body.blog #slider > .container.cycle-slideshow,
body.archive #slider > .container.cycle-slideshow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--w);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  position: static;
  overflow: visible;
}

/* 精选区小标题 */
body.home #slider > .container.cycle-slideshow::before,
body.blog #slider > .container.cycle-slideshow::before{
  content: "精选推荐";
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 2px;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.6;
  color: var(--brand);
}

/* 默认全部隐藏，仅显示由 ptbook.js 打上 .ptb-featured 的前三张。
   ★ 这些 !important 是对付 Cycle2 的：它会把内联
     position:absolute / width:100% / opacity 写到行内样式上，
     行内样式优先级最高，不加 !important 一律无效。
   （functions.php 已 dequeue 该脚本，这里只是双保险） */
body.home #slider .slide,
body.blog #slider .slide,
body.archive #slider .slide{
  display: none !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.home #slider .slide.ptb-featured,
body.blog #slider .slide.ptb-featured,
body.archive #slider .slide.ptb-featured{
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 15px !important;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(18, 33, 28, .04);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

body.home #slider .slide.ptb-featured:hover,
body.blog #slider .slide.ptb-featured:hover{
  transform: translateY(-2px);
  border-color: rgba(15, 110, 86, .26);
  box-shadow: 0 4px 10px rgba(18, 33, 28, .06), 0 14px 30px rgba(18, 33, 28, .07);
}

/* 精选：封面 */
body.home #slider .slide .book-cover,
body.blog #slider .slide .book-cover{
  float: none;
  width: 88px;
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #EFEDE6;
  box-shadow: none;
}

body.home #slider .slide .book-cover img,
body.blog #slider .slide .book-cover img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
}

/* 精选：文字区（清掉父主题的白色卡片与浮动） */
body.home #slider .slide .slide-description,
body.blog #slider .slide .slide-description{
  float: none;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

body.home #slider .slide .inner-sd,
body.blog #slider .slide .inner-sd{
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
}

body.home #slider .slide .top-sd-head,
body.blog #slider .slide .top-sd-head{
  padding: 0;
  margin: 0;
  border-bottom: 0;
}

body.home #slider .slide .tsh-left,
body.blog #slider .slide .tsh-left{
  float: none;
  max-width: 100%;
}

body.home #slider .slide .sd-title,
body.blog #slider .slide .sd-title{
  margin: 0 0 6px;
  padding: 0;
}

body.home #slider .slide .sd-title a,
body.blog #slider .slide .sd-title a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

body.home #slider .slide .sd-title a:hover,
body.blog #slider .slide .sd-title a:hover{
  color: var(--brand);
}

body.home #slider .slide .sd-body,
body.blog #slider .slide .sd-body{
  height: auto;
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.home #slider .slide .sd-body p,
body.blog #slider .slide .sd-body p{
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
}

body.home #slider .slide .rating,
body.blog #slider .slide .rating{
  display: none;
}

body.home #slider .slide .sd-meta,
body.blog #slider .slide .sd-meta{
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.5;
}

/* 轮播控件全部隐藏 */
body #slider .cycle-pager,
body #slider .cycle-prev,
body #slider .cycle-next{
  display: none;
}


/* ==========================================================================
   6. 首页书架网格
   ----------------------------------------------------------------------
   父主题是「左封面 + 右摘要」的纵向列表，一屏只放得下一本。
   这里改成四列书架，封面统一 3:4，书名两行截断，卡片等高。
   ========================================================================== */

/* 首页不显示侧边栏：让书架占满，内容密度立刻上来 */
body.home #main-sidebar,
body.blog #main-sidebar{
  display: none;
}

/* ★ 必须显式声明为单列块级：
   theme.css 里文章页的两栏 grid 若未限定页面类型，会把书目容器
   挤进 300px 的窄列（表现为卡片全部堆在右侧）。这里兜底一次。 */
body.home #main-content-inner,
body.blog #main-content-inner,
body.archive #main-content-inner,
body.search #main-content-inner{
  display: block;
  grid-template-columns: none;
}

/* 列表容器本身曾是「白色卡片」，改成网格后要去掉，否则整体内缩一圈 */
body.home .article-container.post,
body.blog .article-container.post,
body.archive .article-container.post,
body.search .article-container.post{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* 父主题给容器加了 hover 抬升；网格容器整体抬升会很怪，一并压掉 */
body.home .article-container.post:hover,
body.blog .article-container.post:hover,
body.archive .article-container.post:hover,
body.search .article-container.post:hover{
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

body.home #main-content-inner > .article-container,
body.blog #main-content-inner > .article-container,
body.archive #main-content-inner > .article-container,
body.search #main-content-inner > .article-container{
  float: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 22px;
  align-items: stretch;
  padding-top: 6px;
}

/* 分区小标题 */
body.home #main-content-inner::before,
body.blog #main-content-inner::before{
  content: "全部书目";
  display: block;
  margin: 40px 0 16px;
  padding: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.6;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}

/* --- 卡片本体 --- */
body.home .article-container > article,
body.blog .article-container > article,
body.archive .article-container > article,
body.search .article-container > article{
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 33, 28, .04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.home .article-container > article:hover,
body.blog .article-container > article:hover,
body.archive .article-container > article:hover,
body.search .article-container > article:hover{
  transform: translateY(-4px);
  border-color: rgba(15, 110, 86, .26);
  box-shadow: 0 5px 12px rgba(18, 33, 28, .06), 0 18px 40px rgba(18, 33, 28, .08);
}

/* --- 封面区 --- */
body.home .article-container > article > .feat-img,
body.blog .article-container > article > .feat-img,
body.archive .article-container > article > .feat-img,
body.search .article-container > article > .feat-img{
  position: relative;
  float: none;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #F6F4EF 0%, #EBE8E0 100%);
  border-bottom: 1px solid var(--line);
}

body.home .article-container > article > .feat-img > a,
body.blog .article-container > article > .feat-img > a,
body.archive .article-container > article > .feat-img > a,
body.search .article-container > article > .feat-img > a{
  display: block;
  width: 100%;
  height: 100%;
}

body.home .article-container > article > .feat-img img,
body.blog .article-container > article > .feat-img img,
body.archive .article-container > article > .feat-img img,
body.search .article-container > article > .feat-img img{
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: 20px 18px;
  box-sizing: border-box;
  /* 让书封像摊在桌面上，有一层柔和落影 */
  filter: drop-shadow(0 5px 10px rgba(18, 33, 28, .16));
  transition: transform .35s ease;
}

body.home .article-container > article:hover > .feat-img img,
body.blog .article-container > article:hover > .feat-img img,
body.archive .article-container > article:hover > .feat-img img,
body.search .article-container > article:hover > .feat-img img{
  transform: scale(1.04);
}

/* 评论数是 0 的时候没有信息量，直接不显示 */
body.home .article-container > article .comment-count,
body.blog .article-container > article .comment-count,
body.archive .article-container > article .comment-count,
body.search .article-container > article .comment-count{
  display: none;
}

/* --- 文字区 --- */
body.home .article-container > article > .content,
body.blog .article-container > article > .content,
body.archive .article-container > article > .content,
body.search .article-container > article > .content{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  float: none;
  width: 100%;
  min-width: 0;
  padding: 14px 15px 15px;
  background: none;
}

body.home .article-container > article > .content > header,
body.blog .article-container > article > .content > header{
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
}

body.home .article-container > article > .content a.title,
body.blog .article-container > article > .content a.title,
body.archive .article-container > article > .content a.title,
body.search .article-container > article > .content a.title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 43px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

body.home .article-container > article > .content a.title:hover,
body.blog .article-container > article > .content a.title:hover{
  color: var(--brand);
}

/* 摘要段落：内容与书名重复（「书名: xxx 作者: xxx」），卡片里不显示；
   作者/出版社由 ptbook.js 提取后以更紧凑的一行呈现 */
body.home .article-container > article > .content > p,
body.blog .article-container > article > .content > p,
body.archive .article-container > article > .content > p,
body.search .article-container > article > .content > p{
  display: none;
}

/* JS 提取的书目元信息行 */
body .article-container > article .ptb-card-meta{
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- meta 行：分类标签 + 日期 --- */
body.home .article-container > article .meta,
body.blog .article-container > article .meta,
body.archive .article-container > article .meta,
body.search .article-container > article .meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 9px;
  font-size: 11.5px;
  line-height: 1.4;
}

body.home .article-container > article .meta .categ,
body.blog .article-container > article .meta .categ{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

body.home .article-container > article .meta .categ a,
body.blog .article-container > article .meta .categ a,
body.archive .article-container > article .meta .categ a,
body.search .article-container > article .meta .categ a{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--brand);
  text-transform: none;
  text-decoration: none;
  background: var(--brand-soft);
  border-radius: var(--r-pill);
}

/* 父主题在分类之间插了「 , 」文本节点，隐藏掉 */
body.home .article-container > article .meta .categ{
  font-size: 0;
}

body.home .article-container > article .meta .categ a{
  font-size: 11px;
}

body.home .article-container > article .meta .date,
body.blog .article-container > article .meta .date,
body.archive .article-container > article .meta .date,
body.search .article-container > article .meta .date{
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: none;
  white-space: nowrap;
}

/* --- 分页横跨整行 --- */
body.home .article-container > .navigation.pagination,
body.blog .article-container > .navigation.pagination,
body.archive .article-container > .navigation.pagination,
body.search .article-container > .navigation.pagination{
  grid-column: 1 / -1;
  margin: 38px 0 0;
  text-align: center;
}

body .pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

body .pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: .16s;
}

body .pagination .page-numbers:hover{
  color: var(--brand);
  border-color: rgba(15, 110, 86, .34);
  background: var(--brand-soft);
}

body .pagination .page-numbers.current{
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

body .pagination .page-numbers.dots{
  background: transparent;
  border-color: transparent;
}


/* ==========================================================================
   7. 文章页
   ========================================================================== */

body.single #main-content-inner,
body.single #main-content-inner.container{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 44px;
  align-items: start;
  padding-top: 34px;
}

body.single #main-content-inner > .article-container{
  float: none;
  width: auto;
  min-width: 0;
}

body.single #main-sidebar{
  float: none;
  width: auto;
}

/* 文章头部 */
body.single .article-container > header{
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

body.single .article-container h1.title,
body.single .article-container h1.entry-title{
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.02em;
  color: var(--ink);
}

body.single .article-container .meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 12.5px;
  color: var(--ink-3);
}

body.single .article-container .meta .categ a{
  display: inline-block;
  padding: 2px 9px;
  font-size: 11.5px;
  color: var(--brand);
  text-decoration: none;
  background: var(--brand-soft);
  border-radius: var(--r-pill);
}

/* 正文阅读区 */
body.single [itemprop="reviewBody"]{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.92;
  color: var(--ink-2);
  max-width: 78ch;
}

body.single [itemprop="reviewBody"] p{
  margin: 0 0 1.15em;
  text-align: justify;
  text-justify: inter-ideograph;
}

body.single [itemprop="reviewBody"] strong,
body.single [itemprop="reviewBody"] b{
  color: var(--ink);
  font-weight: 600;
}

/* 内页扫描图：限高 + 可点击放大，避免竖向拉满好几屏 */
body.single [itemprop="reviewBody"] img{
  display: block;
  max-width: 100%;
  max-height: 580px;
  width: auto;
  height: auto;
  margin: 22px auto;
  object-fit: contain;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--paper-2);
  cursor: zoom-in;
  transition: opacity .2s;
}

body.single [itemprop="reviewBody"] img:hover{
  opacity: .93;
}

/* 上下篇导航 */
body.single .nav-single{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  border: 0;
}

body.single .nav-single a{
  display: block;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: .16s;
}

body.single .nav-single a:hover{
  color: var(--brand);
  border-color: rgba(15, 110, 86, .3);
  background: var(--brand-soft);
}


/* ==========================================================================
   8. 侧边栏
   ========================================================================== */

body #main-sidebar .widget{
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(18, 33, 28, .03);
}

body #main-sidebar .widget > header,
body #main-sidebar .widget h2,
body #main-sidebar .widget h3{
  margin: 0 0 12px;
  padding: 0 0 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}

body #main-sidebar .widget > header h2{
  margin: 0;
  padding: 0;
  border: 0;
}

body #main-sidebar .widget ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

body #main-sidebar .widget ul li{
  margin: 0;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px dashed var(--line);
}

body #main-sidebar .widget ul li:last-child{
  border-bottom: 0;
}

body #main-sidebar .widget a{
  color: var(--ink-2);
  text-decoration: none;
}

body #main-sidebar .widget a:hover{
  color: var(--brand);
}

/* 标签云 */
body #main-sidebar .tagcloud a{
  display: inline-block;
  margin: 0 5px 6px 0;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  transition: .16s;
}

body #main-sidebar .tagcloud a:hover{
  color: var(--brand);
  background: var(--brand-soft);
}

/* 原生 select（分类下拉）美化：去掉系统默认外观，换成自绘箭头 */
body #main-sidebar select,
body #main-sidebar .widget select{
  width: 100%;
  padding: 9px 34px 9px 12px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237C8C85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body #main-sidebar select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, .12);
}

body #main-sidebar .widget form{
  margin: 0;
}


/* ==========================================================================
   9. 页脚
   ========================================================================== */

body #main-footer{
  margin-top: 56px;
  padding: 0;
  background: #12211C;
  color: rgba(255, 255, 255, .58);
}

body #main-footer .upper-footer{
  padding: 40px 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body #main-footer .upper-footer > .container{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

body #main-footer .widget{
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

body #main-footer .widget > header h2,
body #main-footer .widget h2{
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .82);
  border: 0;
}

body #main-footer .widget ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

body #main-footer .widget ul li{
  margin: 0 0 7px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
}

body #main-footer a{
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
}

body #main-footer a:hover{
  color: #fff;
}

body #main-footer .lower-footer{
  padding: 16px 0;
  background: #0D1915;
}

body #main-footer .lower-footer > .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body #main-footer .footer-logo{
  display: none;
}

body #main-footer .copyright-info{
  width: 100%;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .45);
}

body #main-footer .copyright-info p{
  margin: 0;
}


/* ==========================================================================
   10. 图片灯箱（正文图片点击放大）
   ========================================================================== */

.ptb-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(9, 17, 14, .92);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}

.ptb-lightbox.is-open{
  opacity: 1;
  visibility: visible;
}

.ptb-lightbox img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.ptb-lightbox-close{
  position: absolute;
  top: 20px;
  right: 22px;
  width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: .16s;
}

.ptb-lightbox-close:hover{
  color: #fff;
  background: rgba(255, 255, 255, .2);
}


/* ==========================================================================
   11. 响应式
   ========================================================================== */

@media (max-width: 1180px){
  body.home #main-content-inner > .article-container,
  body.blog #main-content-inner > .article-container,
  body.archive #main-content-inner > .article-container{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 18px;
  }
}

@media (max-width: 1024px){
  body.single #main-content-inner,
  body.single #main-content-inner.container{
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body #main-footer .upper-footer > .container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){

  /* ---- 书目网格降到两列 ---- */
  body.home #main-content-inner > .article-container,
  body.blog #main-content-inner > .article-container,
  body.archive #main-content-inner > .article-container,
  body.search #main-content-inner > .article-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 15px;
  }

  /* ---- 窄屏收起精选区：首屏直接进入书目 ---- */
  body.home #slider,
  body.blog #slider,
  body.archive #slider{
    display: none !important;
  }

  /* ---- 关键：把头部两个区块强制归位 ----
     实测 superfish（父主题的下拉菜单脚本）会给 ul 加 sf-js-enabled 并
     写入定位样式，连带把 #main-header / #main-menu 整体推到视口外
     （left ≈ 视口宽度，导致页面横向滚动、导航看不见）。 */
  body #main-header,
  body #main-menu{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  body #main-menu nav ul ul,
  body #main-menu nav ul.sf-js-enabled{
    position: static !important;
    left: auto !important;
    float: none !important;
    visibility: visible !important;
  }

  /* ---- 分类导航：退回块级流，继续用胶囊标签换行 ----
     父主题的菜单结构是 nav > ul > div > ul.menu，
     中间那层 div 若不放开宽度，内层菜单会被压成 0 宽而整体消失。 */
  body #main-header,
  body #main-menu,
  body #main-menu > .container,
  body #main-menu nav{
    min-width: 0;
    max-width: 100%;
  }

  body #main-menu,
  body #main-menu > .container{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body #main-menu > .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body #main-menu #menu-social-icons{
    display: none !important;
  }

  body #main-menu nav,
  body #main-menu nav > ul,
  body #main-menu nav > ul > div{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #main-menu nav ul.menu{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #main-menu nav ul.menu > li{
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  body #main-menu nav ul.menu > li > a{
    font-size: 11.5px !important;
    padding: 4px 9px 4px 8px !important;
  }

  body #main-menu select.main-dropdown{
    display: none !important;
  }

  /* ---- 文章页 ---- */
  body.single .article-container h1.title,
  body.single .article-container h1.entry-title{
    font-size: 22px;
  }

  body.single [itemprop="reviewBody"]{
    font-size: 15.5px;
    line-height: 1.85;
  }

  body #top-bar .search-form input[type="text"],
  body #top-bar .search-form input[type="search"]{
    width: 140px;
  }
}

@media (max-width: 600px){
  body .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  body.home #slider > .container.cycle-slideshow,
  body.blog #slider > .container.cycle-slideshow{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 26px;
  }

  body.home #main-content-inner > .article-container,
  body.blog #main-content-inner > .article-container,
  body.archive #main-content-inner > .article-container,
  body.search #main-content-inner > .article-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 11px;
  }

  body.home .article-container > article > .feat-img img,
  body.blog .article-container > article > .feat-img img{
    padding: 12px 10px;
  }

  body.home .article-container > article > .content,
  body.blog .article-container > article > .content{
    padding: 10px 11px 12px;
  }

  body.home .article-container > article > .content a.title,
  body.blog .article-container > article > .content a.title{
    font-size: 13px;
    line-height: 1.45;
    min-height: 38px;
  }

  body .article-container > article .ptb-card-meta{
    display: none;
  }

  body #inner-header{
    padding: 14px 0 12px;
  }

  body #site-title{
    font-size: 18px;
  }

  body #top-bar .search-form{
    display: none;
  }

  body #main-footer .upper-footer > .container{
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  body.single .nav-single{
    grid-template-columns: minmax(0, 1fr);
  }
}