/*
Theme Name: AI Search Hub
Theme URI: https://www.aisearchhub.com/
Author: AI Search Hub
Description: 网盘搜索、BT 资源搜索站的主题。包含首页、博客、落地页三大版式，内置 SEO 结构化数据与广告位挂载点。自带设计令牌层，所有组件通过语义令牌取色，版式只覆写令牌值。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-search-hub
Tags: search, blog, custom-colors, translation-ready
*/

/* ==========================================================================
   0. 设计令牌（语义层）
   --------------------------------------------------------------------------
   规则：令牌「名」全站统一，令牌「值」由版式在自己的作用域里覆写。
        组件只准用语义名（--ink / --accent / --line），不准写死颜色。
        这样同一个 .aib-btn 在首页是红橙、在博客版式自动变橙，不用写两遍。
   ========================================================================== */

:root {
  /* —— 字体 —— */
  /* 站点规则：正文一律微软雅黑打头，不要用别的 */
  --font: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  /* 等宽只给真正的代码用。末位挂雅黑，避免代码块里的中文注释掉到默认字体 */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
          "Microsoft YaHei", "微软雅黑", monospace;

  /* —— 面 —— */
  --bg: #ffffff;          /* 页面底色 */
  --surface: #ffffff;     /* 内容面（卡片、面板） */
  --surface-2: #f5f7f8;   /* 次级面（表头、代码底、凹槽） */

  /* —— 墨（文字）——
     三个层级都要在**白底上过 WCAG AA（4.5:1）**。这是硬指标不是偏好：
     --ink-3 原来取 #8b95a3，白底上只有 3.03:1，站头副标题、时间戳、
     面包屑、页脚全是它，等于全站次要信息都读不清。
     现在是 #696f7a：白面 5.05:1，--surface-2（#f5f7f8）4.70:1。

     上一版是 #6b7280，在白面上 4.83 看着没问题，压 --surface-2 却是
     **4.499:1——卡在门槛下 0.001**。这种值最麻烦：两位小数显示出来是
     "4.50"，看着是过的，实际上没有；而且它悬在一根头发丝上，
     以后动任何一个相邻的浅面色，都可能把它推过线或推得更远，
     没人会发现。次要信息本来就遍布各种浅面（徽标底、表头、代码块），
     这里留出余量，别让全站次要文字吊在门槛上。

     代价是它和 --ink-2 的差距被压小了（原来两级差 1.87 倍，现在 1.17 倍）。
     这是没法两全的：任何能过 AA 的 --ink-3 都必然更靠近 --ink-2。
     好在视觉层次主要靠字号和字重撑，颜色只是辅助。

     ⚠ 它压不住**浅灰页面底**（博客版式的 #e9ecee 上只有 4.21:1），
       站头副标题、面包屑、页脚这些直接压在页面底上的次要文字
       正好就在那一层。那一路不看这个值：.layout-blog 和
       body.aish-scheme-mist 各自把 --ink-3 调深了一档，见那两处。 */
  --ink: #1b2634;         /* 标题、正文主色 */
  --ink-2: #5c6878;       /* 次要文字、摘要 */
  --ink-3: #696f7a;       /* 元信息、时间戳、标签 */

  /* —— 线 —— */
  --line: #e4e8ee;        /* 常规分隔线、卡片描边 */
  --line-2: #d3dadf;      /* 加重分隔线、hover 描边 */

  /* —— 强调 —— */
  --accent: #de3f27;
  --accent-dk: #bf3220;
  --accent-soft: #fdeeeb;

  /* 压在 --accent **实底**上的字色（按钮、当前页码、选中标签）。
     单独给一个令牌，是因为它必须跟着底一起翻面。

     浅色方案里 --accent 是深色，所以这个值是白；但深色方案
     （body.aish-scheme-ink）里 --accent 换成了一组**浅**色——
     不换的话深蓝压深灰底直接看不见。这时候白字压上去只剩
     1.8～2.6:1，按钮上的字基本读不出来。

     所以「白字压强调色」这句话里的"白"不能写死在组件里，
     必须是一个可以被方案覆盖的令牌。全站的实底按钮都取这个值。 */
  --on-accent: #ffffff;

  /* —— 辅助色（用于分类标识、状态）—— */
  --teal: #0e9488;
  --teal-soft: #e6f4f2;
  --steel: #3a5baf;
  --steel-soft: #eaeffa;

  /* —— 形 —— */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* —— 间距刻度（组件用：按钮内边距、卡片间距这类"块与块之间"）—— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;

  /* —— 行距刻度（正文用：标题上下、段落之间这类"阅读节奏"）——
     比 --sp-* 松一档，因为正文的呼吸感要求和界面组件不是一回事：
     组件挤一点显得紧凑，正文挤一点就直接读不下去。

     放在 :root 而不是放在 .layout-read 里，是**必须**的：
     文章页（layout-read）和"页面"（layout-page，比如投稿页、关于我们）
     加载同一份 single.css，而后者身上没有 .layout-read。
     刻度写在 .layout-read 里的话，页面上的 var(--gap-3) 全部求值失败，
     对应的声明会被整条丢掉——不报错，只是间距静默地变成 0。 */
  --gap-1: 8px;  --gap-2: 14px; --gap-3: 22px; --gap-4: 34px;
  --gap-5: 56px; --gap-6: 88px; --gap-7: 128px;

  /* —— 容器 —— */
  --shell: 1200px;        /* 首页 / 落地页内容宽 */
  --shell-wide: 1240px;   /* 博客列表（带侧栏）宽 */
  --side: 320px;          /* 侧栏宽 */

  /* —— 阅读宽 ——
     这一版正文按 16px 排，720px 一行约 45 个汉字。

     45 是什么概念：中文正文的传统舒适区是 25～40 字/行，但那个是
     **印刷**场景——纸上没有滚动条，眼睛的落点是固定的，行太长会串行。
     屏幕上要宽一档，因为读者是靠滚动找位置的，行短了反而要不停地滚。
     国内内容站基本都落在 40～50 字/行（正文栏 640～800px），45 是中间值。

     这个数字**只给 .read-main 用**（max-width），不是"正文栏加内边距"
     凑出来的：.read-prose 自己没有左右内边距，720 就是文字实打实的宽度。
     想让它变窄，改的是这一个令牌，不要去给 .read-prose 加 padding——
     加了之后 h2 左边那条竖线和配图都会跟着往里缩，而它们本该是齐的。

     和 --gap-* 同一个理由放在 :root：文章页（layout-read）和普通页面
     （layout-page）共用 single.css，而页面身上没有 .layout-read。
     放在版式里的话，页面上的 var(--read-measure) 会求值失败，
     连带着用了它的那条声明一起被丢掉。 */
  --read-measure: 720px;

  /* —— 投影（克制使用，只给浮层）—— */
  --shadow-1: 0 1px 2px rgba(27, 38, 52, .04), 0 4px 12px -6px rgba(27, 38, 52, .10);
  --shadow-2: 0 2px 4px rgba(27, 38, 52, .05), 0 14px 32px -12px rgba(27, 38, 52, .16);
}

/* --------------------------------------------------------------------------
   版式覆写：博客版式（blog-03）
   底色是浅灰不是纯白、强调色是橙、容器略宽——这是用户明确认可的设计，
   所以只覆写值，不动任何组件代码。
   -------------------------------------------------------------------------- */
.layout-blog {
  --bg: #e9ecee;
  --surface: #ffffff;
  --surface-2: #f2f5f6;

  --ink: #13212c;
  --ink-2: #41525f;
  /* 和 :root 不同，这一版必须给自己挑一个值，不能继承。
     原因只有一个：这一版的**页面底是浅灰 #e9ecee**，而 :root 那个
     --ink-3 是按白面挑的。

     上一版这里写的是 #647280，附了一句「--ink-3 压页面底只有 4.26:1，
     所以要写在这一层上的次要文字一律用 --ink-2，或者让它落在白面里」——
     这条约定**守不住**：站头副标题（.aib-brand-sub）、面包屑（.aib-crumb）、
     页脚导航（.aib-nav--footer）、侧栏分类计数（.aib-cat-count）全都在
     页面底上，而且都由 header.php / footer.php / 侧栏渲染，
     不属于 blog-03 的模板，改版式模板管不到它们。
     一条靠"所有人都记得"维持的规则，迟早会漏。

     所以直接把这个值调到能在自家页面底上站住：4.65:1（白面 5.51:1）。
     这样上面那些组件不用改一行，自动就是对的。 */
  --ink-3: #5e6a78;

  --line: #e2e6e8;
  --line-2: #d3dadf;

  /* 强调色三件套。
     这里要专门说一句 --accent 为什么是 #c94b06 而不是更跳的 #e8590c：
     强调色有两种用法，对明度的要求是**相反**的。

       当描边、当浅底      —— 越亮越好，和背景分得开就行；
       当实底、上面压白字  —— 越深越安全。

     #e8590c 在白底上当文字、或者反过来白字压它，都只有 3.58:1。
     而它承载的恰恰是**搜索按钮**和**当前页码**这两个最常见的东西，
     还有悬停时的链接色。换成 #c94b06 之后是 4.68:1，过 AA。

     代价是这一版的橙比原设计深了半档。这个取舍不能两全：
     同一个色值不可能既"在白底上够亮"，又"深到能托住白字"。
     --accent-dk 相应下移一档作 hover（白字压上去 6.34:1）。 */
  --accent: #c94b06;
  --accent-dk: #a83c04;
  --accent-soft: #fdeee4;

  --radius: 8px;
  --radius-sm: 6px;

  --shell: 1240px;
}

/* --------------------------------------------------------------------------
   版式覆写：文章详情版式（blog-02-detail）
   阅读型版式：纯白纸、深墨蓝强调、窄栏。
   -------------------------------------------------------------------------- */
.layout-read {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f5;

  --ink: #101113;
  --ink-2: #24272c;
  /* 这一版是暖中性（--line 是 #e8e8e6，不带蓝），所以 --ink-3 也取暖灰，
     不跟着 :root 用那个偏蓝的墨——一页里两种灰混着用看得出来。

     上一版是 #6f7278，注释里写的是"白底 4.82:1"，那个数没错，
     但**量错了底**：这一版的 --surface-2 是 #f7f7f5，不是纯白，
     而元信息（表头、代码块、图注压在上面的那种块）恰恰就在那一层，
     #6f7278 压上去是 4.496:1——又差 0.004 不过线。

     #6b6e74：页面底 5.11:1，--surface-2 4.77:1，暖灰的调子不变。 */
  --ink-3: #6b6e74;

  --line: #e8e8e6;
  --line-2: #d5d5d2;

  --accent: #1e3a5c;
  --accent-dk: #16293f;
  --accent-soft: #eef2f7;

  --radius: 4px;
  --radius-sm: 3px;

  /* —— 容器 ——
     这一版是两栏：正文 + 右侧广告栏（.aib-layout 的网格，见第 2 节）。
     --shell 是**两栏加起来、再加上容器自己的内边距**的宽度，不是正文宽。

     写成 calc() 而不是写死数字，是因为先定的其实是正文宽（--read-measure，
     一行约 45 个汉字，见 :root），容器是被它推出来的。
     写死数字的话，哪天正文宽调了，容器不会跟——正文栏会凭空宽出或窄掉一截，
     而且两张值分在两个文件里，很难想到它们是一对。

     四项，少一项正文就窄一截：

       正文 720 + 侧栏 320 + 列间距 40 + 容器内边距 24×2 = 1128

     最后那 48px 是最容易漏的一项，而且漏了之后从代码上看不出来：
     全局是 border-box，.aib-shell 的 max-width 把 padding **包含在内**，
     只算前两项的话内容盒剩 1080-48=1032，1fr 拿到 672——
     正文悄悄窄了 48px，一行从 45 个字变成 42 个，谁也不会觉得哪里不对。
     （上面那句"45 变 42"是漏算之后的结果，不是笔误——
      这一项漏过，所以留着当记号。）

     列间距和内边距这里引用的是 --sp-8 / --sp-6，和 .aib-layout 的 gap、
     .aib-shell 的 padding 用的是同一个令牌，不是抄来的数字。

     下面 ≤1200px 那条断点会把 --side 调到 280、gap 调到 --sp-6，
     **故意不改这里**：那两处变小只会让 1fr 变宽松（1128 宽时 1fr 是 776），
     而 .read-main 有 max-width: 720 加 margin-inline: auto 兜着，
     正文被居中放回 720，不会跟着变宽也不会被挤窄。
     所以这一版不需要跟着设断点——设了反而多一处要对齐的东西。 */
  --shell: calc(var(--read-measure) + var(--side) + var(--sp-8) + var(--sp-6) * 2);
}

/* ==========================================================================
   1. 基础重置
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* 焦点可见性：键盘用户必须看得见焦点环，但鼠标用户不该被它打扰 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   2. 布局骨架
   ========================================================================== */

.aib-shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* <main> 本身不设宽度、不设内边距——每一段（区块）自己决定要不要套 .aib-shell。
   写死在这里的话，首页那种「整块通栏 + 内部居中的窄容器」的区块
   就得反过来去抵消它。它唯一的职责是给跳转链接一个落点。 */
.aib-main { display: block; }
/* 跳转链接跳过来时给个焦点落点，否则键盘用户点完「跳到主要内容」
   焦点还在原地，下一次 Tab 又回到导航。 */
.aib-main:focus { outline: none; }

/* 带右侧栏的两列布局（博客列表页 / 落地页） */
.aib-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  gap: var(--sp-8);
  align-items: start;
}

/* 主列必须能收缩，否则内嵌的表格会把整个 grid 撑破 */
.aib-layout > * { min-width: 0; }

/* 侧栏是个纵向堆叠的槽，里面一块一块（广告位、分类…）。
   gap 在这里而不是各个块自己写 margin：块的上下间距必须一致，
   否则"广告位和分类之间 20px、分类和自己内部 16px"这种不齐会很明显。 */
.aib-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 侧栏**不做 sticky**。
   看着很诱人（长列表上广告一直可见），但侧栏内容高度不可控——
   广告插件往里塞 3 张竖版海报就超过 700px，一旦高于视口，
   sticky 会把底部卡在屏幕外面，用户怎么滚都看不到，
   而"看不到的那个块"恰好可能是真正赚钱的那个。
   加 max-height + overflow 能绕开，代价是侧栏变成一个嵌套滚动区，
   鼠标停在侧栏上时滚轮滚的是侧栏不是页面——那个更烦人。
   广告位放侧栏第一位（首屏内）已经满足了"首屏可见"这条硬要求，
   sticky 带来的额外曝光不值这个复杂度。 */

@media (max-width: 1200px) {
  .aib-layout { --side: 280px; gap: var(--sp-6); }
}

@media (max-width: 900px) {
  .aib-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .aib-shell { padding: 0 var(--sp-3); }
}

/* ==========================================================================
   3. 共用组件
   —— 只准用语义令牌取色，版式切换时自动跟随
   ========================================================================== */

/* --- 3.1 按钮 -----------------------------------------------------------
   四种视觉层级。type 只管埋点归类，视觉层级一律由 style 决定。
   ---------------------------------------------------------------------- */
.aib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 42px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.aib-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.aib-btn--primary:hover {
  background: var(--accent-dk);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.aib-btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.aib-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.aib-btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.aib-btn--ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-2);
}

/* 纯文字按钮：用于页脚这类不需要视觉重量的位置 */
.aib-btn--link {
  height: auto;
  padding: 0;
  background: none;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.aib-btn--link:hover { color: var(--accent); text-decoration-color: currentColor; }

/* 按钮组：多个按钮并排，窄屏自动换行 */
.aib-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
/* 按钮组前面刚跟了一段正文时用它拉开距离。
   不写 .aib-btns { margin-top } 是因为大多数按钮组是紧接标题的，
   统一加上会让那些地方多出一截说不清来由的空白。 */
.aib-btns--spaced { margin-top: var(--sp-6); }

/* --- 3.2 卡片 ----------------------------------------------------------- */
.aib-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --- 3.2b 素列表 --------------------------------------------------------
   最朴素的「标题 + 时间 + 摘要」。兜底模板用它，搜索结果页也会用。

   刻意不做缩略图、不做网格、不做悬停浮起——那些是版式的活。
   这一套要保证的是「不管站里出了什么状况，内容都还读得到」：
   落地页插件被停用、版式样式没加载、模板掉进兜底……
   这些情况下页面都不该是一堆没有排版的裸文本。
   ---------------------------------------------------------------------- */
.aib-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.aib-list-item { padding: var(--sp-5); }

.aib-list-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.aib-list-title a { color: var(--ink); }
/* 双类名：单类的 .aib-list-title a 是 (0,1,1)，和全局 a:hover 同权重，
   谁后加载谁赢——那种"改了一个文件另一个地方就变色"的 bug 来源。 */
.aib-list-title a:hover { color: var(--accent); }

.aib-list-meta {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--ink-3);
}
.aib-list-meta > * + * { margin-left: var(--sp-3); }

.aib-list-excerpt {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.aib-list-excerpt > * + * { margin-top: var(--sp-2); }
/* 摘要里不该出现超大标题：the_excerpt 一般不带上标题，
   但插件在摘要里塞 <h2> 的情况真实存在过。 */
.aib-list-excerpt h1,
.aib-list-excerpt h2,
.aib-list-excerpt h3 { font-size: 15px; font-weight: 600; }

/* --- 3.3 徽标 / 分类标签 ------------------------------------------------- */
.aib-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  /* 浅强调底上必须用 --accent-dk，不能用 --accent。
     这一条 single.css 的 .read-tags 那里写着，这里原来没照做：
     #de3f27 压在 #fdeeeb 上只有 3.84:1，而橙那一档 4.12:1，都不过。
     换成 --accent-dk 之后朱红 5.04、橙 5.59，五档全部过线。 */
  color: var(--accent-dk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* 用 --ink-2 而不是 --ink-3：这个徽标压在 --surface-2 上，
   而 --ink-3 只保证白面合格（见上面令牌那段）。
   在博客版式的 #f2f5f6 上它只有 4.47:1，差一点点——差一点点和二点
   在合规上没有区别，都是不合格。 */
.aib-badge--muted {
  background: var(--surface-2);
  color: var(--ink-2);
}
/* 推广标识：广告位必须带，且要和正文标签在视觉上区分得开 */
.aib-badge--promo {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  font-weight: 500;
  font-size: 11px;
}

/* --- 3.4 区块标题 ------------------------------------------------------- */
.aib-sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.aib-sec-head > h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.aib-sec-head > .aib-sec-more {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--ink-3);
}
.aib-sec-head > .aib-sec-more:hover { color: var(--accent); }

/* --- 3.5 面包屑 ---------------------------------------------------------
   与 inc/breadcrumbs.php 生成的 BreadcrumbList JSON-LD 同源。
   结构化数据必须对应读者看得见的内容，所以这两者只能由同一份数据渲染。
   ---------------------------------------------------------------------- */
.aib-crumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
  letter-spacing: .06em;
}
.aib-crumb a { color: var(--ink-3); }
.aib-crumb a:hover { color: var(--accent); }
.aib-crumb .aib-crumb-sep { color: var(--line-2); }
.aib-crumb [aria-current] { color: var(--ink-2); }

/* --- 3.6 广告位挂载点 ---------------------------------------------------
   方案 C（混合）：静态导出时这里已有一份兜底内容，JS 加载后拉实时结果替换。
   所以这个容器绝不能是空的——它同时承担容灾职责。
   ---------------------------------------------------------------------- */
.aib-slot { display: block; }
.aib-slot[data-slot-state="loading"] { opacity: .55; }
/* 一条兜底内容都没有（新站还没配广告）：整块不显示。
   藏整个 .aib-slot 而不是里面的内容——标题还留着、下面空着，
   比整块不出现更像"坏了"。JS 拉到结果后把状态改掉，它就回来了。 */
.aib-slot[data-slot-state="empty"] { display: none; }

.aib-slot-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.aib-slot-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- 3.7 分页 ----------------------------------------------------------- */
.aib-pager {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) 0;
  font-variant-numeric: tabular-nums;
}
.aib-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-2);
}
.aib-pager .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.aib-pager .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* dots 不是页码，是「中间还隔着几页」的省略号，但核心给它的类名就是
   page-numbers dots，会被上面那条规则一视同仁地套上边框和白底——
   于是它看上去像一个**按不动的页码**，而旁边"上一页"又能按，
   这个对比会让人以为是坏了。这里只把框去掉。
   颜色不另设，跟着 .page-numbers 的 --ink-2 走：和两边的真数字同色，
   读起来才是"这段是空的"，而不是"这个按钮是灰的"。
   用 border-color: transparent 而不是 border: 0——后者会少掉 2px
   边框高度，这一格就比两边的页码矮一截，除非全站设了 border-box。 */
.aib-pager .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* 窄屏：paginate_links() 在中间页给出的是一长串
   （上一页 1 … 3 4 5 … 12 下一页，mid_size=2 时最多 9 格），
   375px 下按 9×34 + 8×8 的间距算是 370px，比内容宽还宽，会直接溢出。
   flex-wrap 是这里的**兜底**（宁可折成两行也不能横向溢出），
   缩尺寸和去掉省略号是为了让它在大多数情况下根本用不着折行。 */
@media (max-width: 560px) {
  .aib-pager {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-6) 0;
  }
  .aib-pager .page-numbers {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--sp-2);
    font-size: 13.5px;
  }
  .aib-pager .page-numbers.dots { display: none; }
}

/* --- 3.8 侧栏面板 -------------------------------------------------------
   侧栏里的白色面板，以及装在里面的一组「分类 + 计数」。

   **为什么在共用层而不是某个版式的文件里**：同一份侧栏内容
   （template-parts/side.php → aish_side_fallback()）在博客列表页和
   文章页上都会出现，而这两个页面加载的是**不同的版式样式表**
   （blog.css / single.css）。把面板写在 blog.css 里的话，
   文章页上这几个类名一条规则都匹配不到——页面不报错，
   面板只是变成没有内边距、没有背景的一段裸文字。
   共用层保证"哪一版加载了 style.css，面板就是完整的"。

   版式要改的是**观感**而不是结构：博客版式的页面底是浅灰，
   白面板自己就分得开，所以那边只把描边去掉（见 blog.css）。
   ---------------------------------------------------------------------- */

.aib-panel {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.aib-panel-title {
  margin-bottom: var(--sp-4);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
}

.aib-cats {
  display: flex;
  flex-direction: column;
}
.aib-cats > li + li {
  border-top: 1px solid var(--line);
}

.aib-cat-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  font-size: 14px;
  color: var(--ink-2);
}
.aib-cat-link:hover { color: var(--accent); }

/* 计数靠右。tabular-nums 让不同位数的数字占同样宽，
   否则整个列表右边缘会参差不齐。 */
.aib-cat-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 用户往侧栏里拖了小工具之后，模板就不渲染兜底面板了，
   改由 dynamic_sidebar() 输出。它给的容器也是 .aib-panel，
   但里面装的是第三方小工具，结构不受我们控制——
   所以这里只保证标题和间距，不假设里面有什么。 */
.aib-panel .widget-title,
.aib-panel > h2:first-child {
  margin-bottom: var(--sp-4);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.aib-panel ul { list-style: none; }
.aib-panel li + li { margin-top: var(--sp-2); }
.aib-panel a { color: var(--ink-2); }
.aib-panel a:hover { color: var(--accent); }
.aib-panel img { max-width: 100%; height: auto; }

/* ==========================================================================
   4. 无障碍与 WordPress 必备类
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; padding: var(--sp-3) var(--sp-4);
  clip: auto;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 100000;
}

/* 跳转到主内容：键盘用户的第一个可聚焦元素 */
.aib-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.aib-skip:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

.alignleft  { float: left;  margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.aligncenter { margin-left: auto; margin-right: auto; }

.wp-caption-text,
.wp-element-caption {
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  margin-top: var(--sp-2);
}

.sticky .aib-card { border-color: var(--accent); }

/* ==========================================================================
   5. 表格（资费表这类结构，窄屏必须能横向滚动而不是撑破版式）
   ========================================================================== */

.aib-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.aib-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.aib-table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: 0 var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--ink);
}
.aib-table td {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.aib-table td:first-child { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   6. 站头 / 品牌 / 导航
   ========================================================================== */

.aib-logo {
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--accent);        /* 内联 SVG 回退时用 currentColor 取色 */
}

.aib-brand-lock {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}
.aib-brand-lock:hover { color: inherit; }

.aib-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.aib-brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  white-space: nowrap;
}
.aib-brand-sub {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
  line-height: 1.3;
  white-space: nowrap;
}

.aib-masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.aib-masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 64px;
}
.aib-masthead-tools { margin-left: auto; }

/* 首页的站头是「功能条」，不是品牌条——品牌标识在这一页的中部
   （见 front-page.php 的 hero）。所以这里比常规站头矮一档、
   也不画底线：hero 自己有一条底线，两条线隔着一屏顶部会显得碎。
   矮一档还顺带把首屏的纵向预算让给了搜索区和广告位，
   而广告位必须落在首屏内是硬要求。 */
.aib-masthead--bare {
  height: 52px;
  border-bottom: 0;
}
.aib-masthead--bare .aib-masthead-inner { height: 52px; }

.aib-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: 14px;
  color: var(--ink-2);
}
.aib-nav a { color: var(--ink-2); }
.aib-nav a:hover { color: var(--accent); }
.aib-nav .current-menu-item > a,
.aib-nav .current_page_item > a { color: var(--accent); font-weight: 600; }

.aib-nav--footer {
  font-size: 13.5px;
  color: var(--ink-3);
  gap: var(--sp-4);
}
.aib-nav--footer a { color: var(--ink-3); }

@media (max-width: 900px) {
  .aib-masthead-inner {
    height: auto;
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    flex-wrap: wrap;
  }
  .aib-nav--primary {
    order: 3;
    width: 100%;
    gap: var(--sp-4);
    font-size: 13.5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .aib-nav--primary a { white-space: nowrap; padding: var(--sp-2) 0; }
  .aib-masthead-tools { flex: 1; min-width: 0; }
  .aib-brand-sub { display: none; }
}

/* ==========================================================================
   7. 搜索框
   ========================================================================== */

.aib-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.aib-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.aib-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
  /* 去掉浏览器自带的清除叉，用我们自己的，样式才统一 */
  -webkit-appearance: none;
  appearance: none;
}
.aib-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.aib-search input::placeholder { color: var(--ink-3); }

.aib-search-submit {
  flex: none;
  height: 44px;
  padding: 0 var(--sp-5);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
  transition: background-color .16s ease;
}
.aib-search-submit:hover { background: var(--accent-dk); }

.aib-search-clear {
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
}
.aib-search-clear:hover { background: var(--surface-2); color: var(--ink); }

/* 站头里的紧凑版：不占满整行 */
.aib-search--compact { width: 220px; }
.aib-search--compact input[type="search"] { height: 36px; font-size: 13.5px; }
.aib-search--compact .aib-search-submit { height: 36px; padding: 0 var(--sp-4); font-size: 13.5px; }

/* --- 三种搜索（内容 / 网盘 / 磁力）-------------------------------------
   三个按钮**同时可见**，不是一个需要点按切换的 tab。
   外层 .aib-search--multi 把基础版的行内 flex 让出来：
   输入框归 .aib-search-bar，按钮组另起一行。
   ---------------------------------------------------------------------- */
.aib-search--multi {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
}
/* 基础版把 focus-within 的焦点环画在外层容器上，多类型版要还回去，
   否则会出现两个叠在一起的焦点环。 */
.aib-search--multi:focus-within { box-shadow: none; }

.aib-search-bar {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.aib-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.aib-search-bar input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--sp-4);
  border: 0;
  background: transparent;
  font-size: 15.5px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.aib-search-bar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.aib-search-bar input::placeholder { color: var(--ink-3); }

.aib-search-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.aib-search-type {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  transition: border-color .16s ease, background-color .16s ease;
}
.aib-search-type:hover { border-color: var(--line-2); background: var(--surface-2); }

/* 激活态不改文字颜色，只换底色和描边。
   改文字色看起来更"选中"，但强调色在浅底上的对比度随版式漂——
   博客版式的 --accent-dk 在自己的 --accent-soft 上只有 4.1:1，
   够不上 AA。用底色区分则任何版式都稳。 */
.aib-search-type.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.aib-search-type-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
/* 副标题用 --ink-2 而不是 --ink-3：
   --ink-3 在白底上只有 3.0:1，压到 --accent-soft 上只剩 2.7:1，
   而这是 12px 小字，AA 要求 4.5:1。--ink-2 两种底都过。 */
.aib-search-type-hint {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* 窄屏：三个并排会把副标题挤成两三个字一行，不如竖着排。 */
@media (max-width: 640px) {
  .aib-search-types { flex-direction: column; }
  .aib-search-type { flex: 1 1 100%; }
}

@media (max-width: 768px) {
  .aib-search--compact { width: 100%; }
}

/* --- 热点词 ------------------------------------------------------------- */
.aib-hotwords {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  font-size: 13.5px;
}
.aib-hotwords-title {
  color: var(--ink-3);
  flex: none;
}
.aib-hotword {
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.aib-hotword:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ==========================================================================
   8. 广告位
   ========================================================================== */

/* .aib-slot 本身和 .aib-slot-title 在 3.6 节，这里只补挂载点内部。
   别在这儿再写一遍 .aib-slot{display:block}——同一份声明两处写，
   将来改一处漏一处，而且看不出哪份是权威的。 */
.aib-slot-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.aib-ad {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.aib-ad:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
  color: inherit;
}

.aib-ad-img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-2);
}

/* logo 形态没配图时的首字母方块。
   尺寸、圆角、底色三项和 .aib-ad-img 完全一致，是为了让同一个列表里
   「配了图的」和「没配图的」卡片高度一样——否则两行广告的标题会差 0，
   而图片加载完的那一刻还会再跳一下。

   --ink-2 压 --surface-2 是 4.9:1（白面 5.6:1），过 AA。 */
.aib-ad-initial {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

/* --- 投放形态 -----------------------------------------------------------
   三种形态共用 .aib-ad 的骨架（图标 + 标题 + 描述 + 推广标），
   只在这个基础上改排布。形态由投放后台的 type 字段决定。

   三种都必须有实际规则。只发类名不写规则的话，后台选了「海报」
   投出来的还是文字卡——而这件事在后台完全看不出来，
   只有在前台看才发现，那时候投放已经跑了一段时间了。
   ---------------------------------------------------------------------- */

/* text：没有图，省掉为图标留的横向空间 */
.aib-ad--text { padding: var(--sp-3) var(--sp-4); }

/* logo：单行内容（品牌名 + 一句话），图标跟着居中才不显得吊在半空。
   基线的 align-items: flex-start 是给两行的文字卡准备的。 */
.aib-ad--logo { align-items: center; }

/* poster：图在上、文在下。整块仍然是一个 <a>，所以点击区域不变 */
.aib-ad--poster { flex-direction: column; align-items: stretch; }
.aib-ad--poster .aib-ad-img {
  width: 100%;
  height: auto;
  /* 固定比例而不是固定高度：不同尺寸的海报裁出来高度一致，
     同一行里的卡片底部才对得齐，也不会因为图没加载完而抖一下。 */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
}

.aib-ad-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.aib-ad-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.aib-ad-desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}

.aib-ad .aib-badge--promo {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
}

/* ==========================================================================
   9. 站脚
   ========================================================================== */

.aib-footer {
  margin-top: var(--sp-10);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.aib-footer-inner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.aib-footer-brand { flex: 1 1 260px; }
.aib-footer-tagline {
  margin-top: var(--sp-3);
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 34em;
}
.aib-footer-nav { flex: none; }
.aib-footer-meta {
  flex: 1 1 100%;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-3);
}
.aib-footer-icp a { color: var(--ink-3); }
.aib-footer-icp a:hover { color: var(--accent); }

@media (max-width: 768px) {
  .aib-footer-inner { flex-direction: column; gap: var(--sp-5); }
  .aib-footer-meta { flex-direction: column; }
}