/*
Theme Name: 灯塔导航（BEACON）子主题
Theme URI: https://www.beacon.cn
Description: 灯塔导航（BEACON）子主题，用于对 OneNav 主题进行样式与页面结构的个性化定制。<br />
             官网：https://www.beacon.cn
Template: onenav
Version: 1.0.0
Requires at least: 5.4
Tested up to: 6.5
Requires PHP: 7.2
Author: 灯塔导航
Author URI: https://www.beacon.cn
License: Commercial
License URI: https://www.beacon.cn
*/


/* =========================================================
 * OneNav · Medium 风格中轴阅读模式（文章页）
 * 仅作用于单篇文章：.single-post
 * ======================================================= */

/* ===== A. 外层：卡片不再“顶到边”，而是中轴 + 轻卡片 ===== */
.single-post .io-article-card{
  max-width: 1260px;            /* 外层容器更宽，用于留白与“大图” */
  margin: 0 auto;
  border-radius: 3px;
}

/* 卡片主体：视觉上更像 Medium 的纸面 */
.single-post .io-article-body{
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 36px;           /* 你要求的固定 36px */
  padding-right: 36px;
}

/* ===== B. 中轴：标题/Meta/正文/页脚统一限制在阅读宽度 ===== */
.single-post .io-article-header,
.single-post .io-article-content,
.single-post .io-article-footer{
  max-width: 920px;             /* Medium 常见阅读宽度区间（680-760） */
  margin-left: auto;
  margin-right: auto;
}

/* ===== C. 标题区：更像 Medium 的克制风格 ===== */
.single-post .io-article-title{
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 650;
  margin-bottom: 14px;
}

/* Meta：变成“中轴下的一行细信息” */
.single-post .io-article-meta{
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-size: 13px;
  line-height: 1.6;
}

.single-post .io-article-meta-left,
.single-post .io-article-meta-right{
  gap: 10px;
}

.single-post .io-article-meta a{
  text-decoration: none;
}

.single-post .io-article-meta a:hover{
  color: var(--theme-color, #3b82f6);
}

/* ===== D. 正文排版：Medium 的“舒服”来自行距、段距、字重 ===== */
.single-post .io-article-content{
  font-size: 16px;
  line-height: 1.95;
  color: #111827;
}

.single-post .io-article-content p{
  margin: 18px 0;
}

/* 标题层级：更像杂志排版 */
.single-post .io-article-content h2{
  margin: 50px 0 18px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
}

.single-post .io-article-content h3{
  margin: 40px 0 16px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 650;
}

/* 列表更“干净” */
.single-post .io-article-content ul,
.single-post .io-article-content ol{
  padding-left: 22px;
  margin: 18px 0;
}

.single-post .io-article-content li{
  margin: 8px 0;
}

/* 引用：更像 Medium 的“浅底 + 细边” */
.single-post .io-article-content blockquote{
  margin: 26px 0;
  padding: 14px 18px;
  background: rgba(15,23,42,.04);
  border-left: 3px solid rgba(15,23,42,.22);
  border-radius: 3px;
  color: rgba(15,23,42,.82);
}

/* 代码块：保持深色稳重 */
.single-post .io-article-content pre{
  margin: 26px 0;
  padding: 18px 20px;
  border-radius: 3px;
  overflow-x: auto;
  font-size: 13px;
}

/* ===== E. “大图突破正文宽度”——Medium 感的关键之一 =====
   默认图片在中轴内；加了 .alignwide / .alignfull 时可突破
*/
.single-post .io-article-content img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px auto;
  border-radius: 12px;
}

/* Gutenberg 常见：wide/full（如果你文章里有这些 class，会自动生效） */
.single-post .io-article-content .alignwide,
.single-post .io-article-content figure.alignwide{
  max-width: 980px;
  margin-left: calc(50% - 490px);
  margin-right: calc(50% - 490px);
}

.single-post .io-article-content .alignfull,
.single-post .io-article-content figure.alignfull{
  max-width: 1120px;
  margin-left: calc(50% - 560px);
  margin-right: calc(50% - 560px);
}

/* ===== F. 页脚：中轴分割更“内容型” ===== */
.single-post .io-article-footer{
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* ===== G. 上下篇：保持中轴一致 ===== */
.single-post .io-article-near-nav{
  max-width: 720px;
  margin: 26px auto 0;
}

/* ===== H. 暗黑模式：保持 Medium 的“黑纸质感” ===== */
.io-black-mode .single-post .io-article-card{
  background: #27282a;
}

.io-black-mode .single-post .io-article-title{
  color: rgba(255,255,255,.92);
}

.io-black-mode .single-post .io-article-content{
  color: rgba(255,255,255,.86);
}

.io-black-mode .single-post .io-article-meta{
  border-bottom-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}

.io-black-mode .single-post .io-article-footer{
  border-top-color: rgba(255,255,255,.10);
}

.io-black-mode .single-post .io-article-content blockquote{
  background: rgba(255,255,255,.06);
  border-left-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.82);
}

/* 让上下篇导航：宽度跟文章卡片一致 */
.single-post .near-navigation.io-article-near-nav{
  max-width: 1260px;     /* 如果你卡片是 960，就改成 960 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 36px;    /* 与文章卡片左右固定间距一致 */
  padding-right: 36px;
  box-sizing: border-box;
}

/* 可选：让导航块本身更“卡片化”一点（更精致） */
.single-post .near-navigation.io-article-near-nav{
  border-radius: 3px;
}

/* 暗黑模式下边框更柔和（不改也行） */
.io-black-mode .single-post .near-navigation.io-article-near-nav .border-color{
  border-color: rgba(255,255,255,.10) !important;
}

/* ===== I. 移动端：仍然中轴，但更紧凑 ===== */
@media (max-width: 768px){
  .single-post .io-article-body{
    padding-left: 22px;
    padding-right: 22px;
  }
  .single-post .io-article-header,
  .single-post .io-article-content,
  .single-post .io-article-footer,
  .single-post .io-article-near-nav{
    max-width: 100%;
  }
  .single-post .io-article-title{
    font-size: 22px;
    line-height: 1.3;
  }
  /* wide/full 在手机上不突破，避免横向滚动 */
  .single-post .io-article-content .alignwide,
  .single-post .io-article-content figure.alignwide,
  .single-post .io-article-content .alignfull,
  .single-post .io-article-content figure.alignfull{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}