/* =========================================================
   end9.0：古腾堡「文本 / 版式类」区块专属样式
   ---------------------------------------------------------
   背景：主题原先只给「标签级」元素（p / table / code / pre / img）写过样式，
   没有针对区块（.wp-block-*）做任何区分，于是在后台看起来是不同的区块，
   前台却长得一模一样：

     · 引用 / 引文  → HTML 都是 <blockquote>   → 完全一样
     · 代码 / 预格式化 / 诗句 → HTML 都是 <pre> → 完全一样
     · H1–H6 / 列表 / 分隔符 → 主题零样式       → 浏览器默认观感

   本文件的目标：让这些区块在「日记本」里各自有辨识度，同时不碰
   主题已有的标签级规则（book-skin.css 的 .post-content 段）。

   ── 生效范围 ──────────────────────────────────────────
   仅 #post_box 内的 .post-content / .entry-content（文章页 / 页面页）。
   首页摘要、归档、搜索、小工具区完全不受影响。

   ── 为什么又是一个新文件（不合并进 blocks.css） ────────
   blocks.css 是 end9.0 上一轮已经交付并可能被 CDN 缓存过的路径；
   本文件是全新路径，CDN 必定回源拉取，避免"改了前台不生效"。
   分工：blocks.css 管「交互组件（按钮）」，blocktypo.css 管「文本版式」。

   ── 与 main.css / post.css 的关系 ─────────────────────
   这两个文件是「普通文件名 + ?ver=」，阿里云 ESA CDN 忽略 ?ver=，
   改它们最长 30 天不生效（主题注已记录该坑），所以一律不改。

   ── 选择器写法说明 ────────────────────────────────────
   `#post_box :is(.post-content, .entry-content)` 是
   `#post_box .post-content, #post_box .entry-content` 的简写，
   特异性完全相同（:is() 取其参数中的最高值），不会额外提升优先级。
   ========================================================= */

/* =========================================================
   1. 标题 H1–H6
   主题此前一行都没写，现在是浏览器默认字号字重。
   统一：不首行缩进、标题字体、按层级递减字号 + 各自的装饰。
   ========================================================= */
#post_box :is(.post-content, .entry-content) :is(h1, h2, h3, h4, h5, h6) {
    text-indent: 0;
    font-family: "微软雅黑", Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary);
    /* 段落是 padding 无 margin，标题用 margin 拉开层次 */
    margin: 1.2em 0 0.6em;
}

#post_box :is(.post-content, .entry-content) h1 {
    font-size: 1.6em;
    text-align: center;
    letter-spacing: 0.02em;
    margin: 1.4em 0 0.9em;
    padding-bottom: 0.45em;
    border-bottom: 1px dashed var(--line-primary);
}

#post_box :is(.post-content, .entry-content) h2 {
    font-size: 1.35em;
    color: var(--accent-brown);
    padding-left: 0.62em;
    border-left: 4px solid var(--accent-gold);
}

#post_box :is(.post-content, .entry-content) h3 {
    font-size: 1.18em;
    color: var(--accent-brown);
}

#post_box :is(.post-content, .entry-content) h4 {
    font-size: 1.06em;
    color: var(--text-body);
}

#post_box :is(.post-content, .entry-content) h5 {
    font-size: 1em;
    color: var(--text-secondary);
}

#post_box :is(.post-content, .entry-content) h6 {
    font-size: 0.95em;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

/* =========================================================
   2. 列表 ul / ol
   主题此前零样式，项目符号用浏览器默认。
   改为：金色圆点 / 金色序号，行高与正文节奏对齐。
   ========================================================= */
#post_box :is(.post-content, .entry-content) :is(ul, ol) {
    margin: 0.7em 0;
    padding-left: 2em;
    text-indent: 0;
    list-style: none;
}

#post_box :is(.post-content, .entry-content) li {
    text-indent: 0;
    line-height: 1.95;
    margin: 0.28em 0;
}

#post_box :is(.post-content, .entry-content) ul > li {
    position: relative;
}

#post_box :is(.post-content, .entry-content) ul > li::before {
    content: "";
    position: absolute;
    left: -1.05em;
    top: 0.82em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-gold);
}

#post_box :is(.post-content, .entry-content) ol {
    counter-reset: diary-ol;
}

#post_box :is(.post-content, .entry-content) ol > li {
    position: relative;
    counter-increment: diary-ol;
}

#post_box :is(.post-content, .entry-content) ol > li::before {
    content: counter(diary-ol) ".";
    position: absolute;
    left: -1.7em;
    top: 0;
    color: var(--accent-gold);
    font-weight: 600;
    font-size: 0.95em;
}

/* =========================================================
   3. 引用 / 引文 / 诗句 —— 三者必须一眼分得清
   ---------------------------------------------------------
   引用 Quote      → <blockquote>           保留主题既有竖线卡片
   引文 Pullquote  → <figure><blockquote>   改为居中 + 上下金线 + 引号
   诗句 Verse      → <pre class="wp-block-verse">   去掉代码块的深色底
   ========================================================= */

/* 3.1 引用（Quote）：沿用 book-skin 的绿色竖线卡片，只修掉内部段落的
       首行缩进与 1em 上下内边距（否则引用里的每段都被强行缩进两格） */
#post_box :is(.post-content, .entry-content) blockquote {
    text-indent: 0;
}

#post_box :is(.post-content, .entry-content) blockquote p {
    text-indent: 0;
    padding: 0.25em 0;
}

#post_box :is(.post-content, .entry-content) blockquote cite {
    display: block;
    margin-top: 0.5em;
    font-size: 0.85em;
    font-style: normal;
    color: var(--text-secondary);
}

#post_box :is(.post-content, .entry-content) blockquote cite::before {
    content: "— ";
}

#post_box :is(.post-content, .entry-content) .wp-block-quote.is-style-large {
    font-size: 1.08em;
    border-left-width: 5px;
}

/* 3.2 引文（Pullquote）：与引用彻底区分 —— 居中、上下金线、大引号 */
#post_box :is(.post-content, .entry-content) .wp-block-pullquote {
    margin: 1.7em 0;
    padding: 1.2em 1.4em;
    background: transparent;
    border-top: 2px solid var(--accent-gold);
    border-bottom: 2px solid var(--accent-gold);
    color: var(--accent-brown);
    text-align: center;
}

#post_box :is(.post-content, .entry-content) .wp-block-pullquote blockquote {
    margin: 0;
    padding: 0;
    border-left: 0;
    background: transparent;
    color: var(--accent-brown);
    font-size: 1.15em;
    line-height: 1.95;
}

#post_box :is(.post-content, .entry-content) .wp-block-pullquote blockquote::before {
    content: "\201C";
    display: block;
    margin-bottom: 0.15em;
    font-size: 2em;
    line-height: 1;
    color: var(--accent-gold);
}

#post_box :is(.post-content, .entry-content) .wp-block-pullquote blockquote p {
    text-indent: 0;
    padding: 0.2em 0;
}

#post_box :is(.post-content, .entry-content) .wp-block-pullquote cite {
    display: block;
    margin-top: 0.6em;
    font-size: 0.85em;
    font-style: normal;
    color: var(--text-secondary);
}

#post_box :is(.post-content, .entry-content) .wp-block-pullquote cite::before {
    content: "";
}

/* 编辑器的「实心底色」变体：给个米色底，避免露出 WP 默认黑底 */
#post_box :is(.post-content, .entry-content) .wp-block-pullquote.is-style-solid-color {
    background: var(--bg-soft);
    border-top-color: var(--accent-brown);
    border-bottom-color: var(--accent-brown);
    border-radius: 10px;
}

#post_box :is(.post-content, .entry-content) .wp-block-pullquote.is-style-solid-color blockquote {
    color: var(--accent-brown);
}

/* 3.3 诗句（Verse）：<pre> 但绝不是代码 —— 去掉深色底、等宽字体，
       换成正文字体 + 左侧虚线，保留原本的换行与空格 */
#post_box :is(.post-content, .entry-content) .wp-block-verse {
    margin: 1.3em 0;
    padding: 0.5em 0 0.5em 1.2em;
    background: transparent;
    border: 0;
    border-left: 2px dashed var(--line-primary);
    border-radius: 0;
    box-shadow: none;
    color: var(--text-body);
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 2.1;
    letter-spacing: 0.02em;
    white-space: pre-wrap;
    overflow: visible;
}

/* =========================================================
   4. 代码 / 预格式化 —— 同样是 <pre>，也要分开
   代码（Code）      → 保留深色代码块（book-skin 既有观感）
   预格式化（Preformatted）→ 米色纸感，表示"纯文本"而非"程序"
   ========================================================= */

/* 4.1 代码：修掉「<pre><code> 被当成行内代码」的既有观感问题
   —— book-skin 的 .post-content code:not([class]) 会给无 class 的 <code>
      套上浅色底 + 边框，在深色代码块里就是一块突兀的浅色方块。 */
#post_box :is(.post-content, .entry-content) .wp-block-code code,
#post_box :is(.post-content, .entry-content) pre > code {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* 4.2 预格式化：米色纸感，与深色代码块区分 */
#post_box :is(.post-content, .entry-content) .wp-block-preformatted {
    background: var(--bg-soft);
    border: 1px dashed var(--line-primary);
    box-shadow: none;
    color: var(--text-body);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
}

/* =========================================================
   5. 分隔符（Separator / hr）
   主题没写过 hr，现在是浏览器默认的一条 1px 灰线。
   改成虚线，宽度贴齐书页；点线变体保留 WordPress 核心的三点效果。
   ========================================================= */
#post_box :is(.post-content, .entry-content) hr,
#post_box :is(.post-content, .entry-content) .wp-block-separator:not(.is-style-dots) {
    height: 0;
    margin: 1.8em auto;
    border: 0;
    border-top: 1px dashed var(--line-primary);
    background: transparent;
}

#post_box :is(.post-content, .entry-content) .wp-block-separator.is-style-dots {
    border-top: 0;
}

/* =========================================================
   6. 分组（Group）
   此前完全没有样式。给一层极淡的卡片，让它有"被框起来"的语义。
   后台若单独设了背景色，内联样式优先级更高，不会被这里盖掉。
   ========================================================= */
#post_box :is(.post-content, .entry-content) .wp-block-group {
    margin: 1.2em 0;
    padding: 1em 1.2em;
    border: 1px dashed var(--line-secondary);
    border-radius: 10px;
    background: rgba(251, 250, 247, 0.55);
}

/* =========================================================
   7. 分栏（Columns）
   ---------------------------------------------------------
   刻意「只补外边距 + 收一收间距」，不碰 flex 布局本身。
   原因：WordPress 核心对分栏有一套带 !important 的换行规则 ——
     · 默认  flex-wrap: wrap   !important
     · ≥782px flex-wrap: nowrap !important
     · <782px  .wp-block-column { flex-basis: 100% !important }  ← 核心自己就会堆叠
   所以「手机端上下堆叠」核心已经做好了，主题不需要（也不应该）再写
   媒体查询去改 flex-direction —— 写了只会和核心的 !important 打架。
   这里只调整列间距，换行行为完全交回核心。
   ========================================================= */
#post_box :is(.post-content, .entry-content) .wp-block-columns {
    margin: 1.1em 0;
    gap: 20px;
}

#post_box :is(.post-content, .entry-content) .wp-block-column > *:first-child {
    margin-top: 0;
}

/* =========================================================
   8. 嵌入（Embed）—— 视频 / 外站卡片
   ========================================================= */
#post_box :is(.post-content, .entry-content) .wp-block-embed {
    margin: 1.4em 0;
}

#post_box :is(.post-content, .entry-content) .wp-block-embed__wrapper {
    border: 1px solid var(--line-secondary);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
}

/* =========================================================
   9. 媒体和文本（Media & Text）
   ========================================================= */
#post_box :is(.post-content, .entry-content) .wp-block-media-text {
    margin: 1.3em 0;
}

#post_box :is(.post-content, .entry-content) .wp-block-media-text :is(img, video) {
    border-radius: 8px;
}

/* =========================================================
   10. 文件下载（File）
   核心给下载按钮的是深色胶囊；这里改成与按钮区块一致的白字绿底。
   注意：文件名链接（非按钮）保持正文链接的橙色虚下划线，
   只有 .wp-block-file__button 被主题化 —— 选择器带了 3 个类，
   优先级高于 ext-link.css 的 #post_box .post-content a.diary-ext-link，
   因此不会出现"绿底 + 橙色虚线"的冲突。
   ========================================================= */
#post_box :is(.post-content, .entry-content) .wp-block-file {
    margin: 1.2em 0;
}

#post_box :is(.post-content, .entry-content) .wp-block-file .wp-block-file__button {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #099;
    border-radius: 6px;
    background: #099;
    color: #fff;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

#post_box :is(.post-content, .entry-content) .wp-block-file .wp-block-file__button:hover,
#post_box :is(.post-content, .entry-content) .wp-block-file .wp-block-file__button:focus {
    background: #077;
    border-color: #077;
    color: #fff;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* =========================================================
   11. 折叠（Details）
   ========================================================= */
#post_box :is(.post-content, .entry-content) details {
    margin: 1.1em 0;
}

#post_box :is(.post-content, .entry-content) summary {
    padding: 0.35em 0;
    text-indent: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-brown);
}

/* =========================================================
   12. 图注（图片 / 图库 / 表格的说明文字）
   ========================================================= */
#post_box :is(.post-content, .entry-content) figcaption {
    margin-top: 6px;
    text-indent: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}