/* ══════════════════════════════════════════════════════════════════
 * navi-brand.css —— 全站风格统一层（2026-10-12）
 *
 * 【用户定的基准】「以现在**导图工具栏和悬浮按钮**的风格样式为准，对全站页面的风格样式进行统一」。
 *   那套的规格**全部取自 `assets/css/mindmap.css`**（不是我另定的）：
 *     · 主色 `#0354e0`｜hover 亮一档 `#0d63f5`｜深邻居 `#0b3fae`
 *     · 渐变 `linear-gradient(135deg,#0b3fae 0%,#0354e0 50%,#0d63f5 100%)`
 *     · 按钮圆角 `10px`、白字白图标、投影 `0 4px 14px rgba(3,84,224,.34)`
 *     · `#0354e0 × 白 = 6.27:1`（超 WCAG AA 4.5:1 —— 代码注释里已算过）
 *
 * 【为什么单独一个文件】原来主色散在 `article-business.css`（`#2563eb`），而导图那套是 `#0354e0`
 *   ⇒ 站上**并存两个蓝**，正是不一致的根源。这里把"基准色 + 中性灰阶 + 圆角/投影"**收成一处令牌**，
 *   以后任何新页面只用变量 ⇒ 不会再各处不同。
 *
 * 【安全边界】★ 本文件**只改颜色 / 圆角 / 阴影 / 字体**，**不改任何布局尺寸与间距**
 *   ⇒ 出问题时"回退这一个文件"即可，不会动到排版。
 *   加载顺序在 `article-business.css` **之后** ⇒ 同权重时覆盖它。
 * ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── ★ 基准色（与导图工具栏/悬浮按钮逐字一致）── */
    --navi-primary:        #0354e0;
    --navi-primary-hover:  #0d63f5;
    --navi-primary-deep:   #0b3fae;
    --navi-primary-weak:   #e8effd;   /* 淡蓝底：选中态 / 标签底 */
    --navi-on-primary:     #fff;
    --navi-grad:           linear-gradient(135deg, #0b3fae 0%, #0354e0 50%, #0d63f5 100%);
    --navi-shadow-btn:     0 4px 14px rgba(3, 84, 224, .34), 0 1px 4px rgba(0, 0, 0, .18);
    --navi-ring:           0 0 0 3px rgba(3, 84, 224, .14);

    /* ── 中性灰阶（沿用项目既有商务灰，非新创）── */
    --navi-ink:            #0f172a;
    --navi-body:           #1a1a2e;
    --navi-muted:          #64748b;
    --navi-faint:          #94a3b8;
    --navi-line:           #e2e8f0;
    --navi-line-soft:      #cbd5e1;
    --navi-bg:             #f8fafc;

    /* ── 形状 ── */
    --navi-radius:         8px;
    --navi-radius-sm:      6px;
    --navi-radius-btn:     10px;
    --navi-radius-card:    12px;
    --navi-shadow-card:    0 1px 3px rgba(15, 23, 42, .04);

    /* ── 字体（工具栏/悬浮组按钮那套，逐字照抄）── */
    --navi-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    --navi-font-btn:       "SimHei", "黑体", "Heiti SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

    /* ── 图标（内联 SVG，用 `mask` 上色 ⇒ 颜色跟随 currentColor）──
     *   ★ 为什么不用 Zibll 的 sprite：那是父主题的 symbol，换图形要动父主题（升级会被覆盖）。
     *   ★ mask 模式下只看 **alpha** ⇒ SVG 里必须有**实色描边**（这里用 `%23000`），颜色由 `background` 决定。 */
    --navi-ico-search:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21'/%3E%3C/svg%3E");
}

/* ── ① ★★★★ **全站配色/形态总开关**：把 Zibll 的主题变量压到基准色 ──
 *
 * ★★★★ **必须写 `html body`，不能写 `:root`！**（2026-10-12 实测踩过，白费 3 个版本）
 *   原因：Zibll 用主题设置把这些变量**内联输出在 `<body>` 上**（排在所有 `<link>` 之后）：
 *     `<style>body{--theme-color:#00a2e3;--main-radius:0px;--focus-shadow-color:rgba(0,162,227,.4);
 *      --focus-color-opacity1/05/3/6:rgba(0,162,227,…)}</style>`
 *   ⇒ ① **层级**：`body` 是 `:root`(=html) 的**后代** ⇒ 自定义属性"离元素更近的声明胜"
 *        ⇒ 写 `:root` 的值**只管得到 `html` 自己**，对 `body` 及其后代**全部无效**；
 *      ② **顺序**：那条内联 `<style>` 在所有 `<link>` 之后 ⇒ 同特异性下也是 Zibll 赢。
 *   两理由**互相独立、又同向** ⇒ 不是"可能失效"，是**必然失效**。
 *   ★ 用 `html body`（特异性 `0,0,0,2` > Zibll `body` 的 `0,0,0,1`）⇒ **稳赢，且与加载顺序无关**。
 *   ★ 已核查**无漏网**：这些变量在 `zibll/css/main.min.css` 里各**只定义 1 次**（选择器**也是 `body`**）、
 *     无组件级覆盖、双方都**没有 `!important`**。
 *
 * ★★ 为什么这一块是"主干"而不是"补漏"：Zibll 的页面（文章/分类/标签/搜索/归档/评论/侧边栏/404）
 *   **不写任何硬编码色**，全部由 `var(--theme-color)`（7 处）与 `var(--main-radius)`（**83 处**）取色取形
 *   ⇒ **改好这一块 = 那些页面一次性全部对齐**，不必逐页写覆盖规则。
 *
 * ★ `--focus-color-opacity1/05/3/6` 在 Zibll CSS 里**定义 0 次**（完全靠内联给）
 *   ⇒ **只改 `--focus-shadow-color` 是不够的**，这四个必须一起写，否则聚焦淡底还是青蓝。
 * ★★ `--main-radius` = **8px**（2026-10-12 用户"你决定" ⇒ 取 C 档）：它等于本文件的 `--navi-radius`，
 *   也就是站上**用得最多**的那档（工具栏/悬浮按钮 10px、导航按钮 10px、常规 8px、卡片 12px 的中位）
 *   ⇒ 让 Zibll 组件**加入现有语言**，而不是把整站改成另一种新语言。 */
html body {
    --theme-color:           var(--navi-primary);   /* #0354e0 ← 原 Zibll 给的是 #00a2e3（青蓝） */
    --focus-shadow-color:    rgba(3, 84, 224, .35);
    --focus-color-opacity1:  rgba(3, 84, 224, .10);
    --focus-color-opacity05: rgba(3, 84, 224, .05);
    --focus-color-opacity3:  rgba(3, 84, 224, .30);
    --focus-color-opacity6:  rgba(3, 84, 224, .60);
    --main-radius:           var(--navi-radius);    /* 8px ← 原 Zibll 给的是 0px（全直角） */
}

/* ── ② 链接 ── */
a { color: var(--navi-primary); }
a:hover, a:focus { color: var(--navi-primary-hover); }

/* ── ③ 按钮：圆角 + 主色（Zibll 多种按钮写法都覆盖）── */
.btn, .but, button.btn, .zib-widget .btn, input[type="submit"], button[type="submit"] {
    border-radius: var(--navi-radius);
}
.btn-theme, .but.theme, .btn-primary, .btn-theme-color {
    background: var(--navi-primary);
    border-color: var(--navi-primary);
    color: var(--navi-on-primary);
}
.btn-theme:hover, .but.theme:hover, .btn-primary:hover, .btn-theme-color:hover {
    background: var(--navi-primary-hover);
    border-color: var(--navi-primary-hover);
    box-shadow: var(--navi-shadow-btn);
}

/* ── ④ 卡片 / 内容盒：统一圆角 + 描边 + 极浅投影 ── */
.theme-box, .box-body, .zib-widget {
    border-radius: var(--navi-radius-card);
}
.theme-box, .zib-widget {
    border-color: var(--navi-line);
}
.article.main-bg.theme-box.box-body {
    border-radius: var(--navi-radius-card);
    border: 1px solid var(--navi-line);
    box-shadow: var(--navi-shadow-card);
}

/* ── ⑤ 表单控件：圆角 + 聚焦时用基准色描环（与导图那边同源的"蓝色反馈"）── */
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
input[type="password"], input[type="number"], textarea, select {
    border-radius: var(--navi-radius) !important;
    border-color: var(--navi-line) !important;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus,
textarea:focus, select:focus {
    border-color: var(--navi-primary) !important;
    box-shadow: var(--navi-ring) !important;
}

/* ── ⑥ 标签 / 徽章 / 文章标签：小圆角，不做胶囊（与浮钮的"圆角方形"同语言）── */
.tag, .badge, .post-tags a, .article-tags a {
    border-radius: var(--navi-radius-sm);
}

/* ── ⑦ 分页 ── */
.page-numbers, .nav-links a, .pagination a, .pagination span {
    border-radius: var(--navi-radius);
}
.page-numbers.current, .pagination .current {
    background: var(--navi-primary);
    border-color: var(--navi-primary);
    color: var(--navi-on-primary);
}

/* ── ⑧ 标题与正文的字重/墨色（与导图节点、文章页同口径）── */
.zib-widget .widget-title, .sidebar .widget-title {
    font-weight: 700;
    color: var(--navi-ink);
}
.article-content { color: var(--navi-body); line-height: 1.9; }

/* ── ⑨ 评论：卡片化 ── */
.comment-list .comment-body, .comment-body {
    border-radius: var(--navi-radius-card);
}

/* ── ⑩ 列表卡片（/node-units/ 那类）保持既有口径，仅统一圆角与描边 ── */
.posts-item { border-radius: var(--navi-radius-card); }
.posts-item .item-thumbnail img { border-radius: var(--navi-radius) var(--navi-radius) 0 0; }

/* ══════════════════════════════════════════════════════════════════
 * 第二批（2026-10-12）：**顶部导航栏**统一到同一套语言
 *
 * 【结构】抓自线上真实 HTML（`curl https://www.navi888.com/`）：
 *   nav.navbar.navbar-top.center
 *     .navbar-header
 *       .navbar-brand > a.navbar-logo > img
 *       button.navbar-toggle > i.em12.css-icon.i-menu > i
 *       a.main-search-btn.navbar-toggle > svg.icon > use[href="#icon-search"]
 *     .navbar-collapse
 *       .navbar-form.navbar-right > a.but > svg > use[href="#icon-menu_2"]
 *       .navbar-form.navbar-right > ul.list-inline.splitters
 *         > li > a.main-search-btn.btn.nav-search-btn > svg.icon
 *
 * 【本批改什么】只统一**容器的形态**：图标尺寸/颜色、按钮的圆角与 hover 淡蓝底、
 *   并**去掉 Zibll 默认的灰圆底**（截图里铃铛外面那一圈）。
 * 【本批不改什么】**不换图标图形** —— Zibll 的图标是 SVG sprite（`<use href="#icon-*">`），
 *   换图形要替换 symbol 或改用内联 SVG 背景，那是独立一件事（需逐个确认形态），留待下一批。
 * 【安全】规则全部限定在 `nav.navbar` 之内 ⇒ **不溢出到页面其它按钮**。
 * ══════════════════════════════════════════════════════════════════ */

/* 图标本体：统一尺寸与填充（Zibll 用 fill:currentColor ⇒ 改 color 即换色）*/
nav.navbar svg.icon,
nav.navbar .css-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    vertical-align: middle;
}

/* 图标按钮：圆角方形（与悬浮按钮同语言）＋ 去掉默认灰圆底 */
nav.navbar .navbar-toggle,
nav.navbar .main-search-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--navi-radius-btn);
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navi-muted);
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
}

nav.navbar .navbar-toggle:hover,
nav.navbar .main-search-btn:hover {
    background: var(--navi-primary-weak);
    border-color: rgba(3, 84, 224, .18);
    color: var(--navi-primary);
}

/* 右侧列表里的搜索按钮（`.btn.nav-search-btn`）—— Zibll 给了它 `.btn` 的底色，这里压平 */
nav.navbar .list-inline.splitters > li > .btn {
    background: transparent !important;
    box-shadow: none !important;
}

/* 导航栏品牌区 logo 高度与按钮对齐（Zibll 默认 36px；与 34px 按钮齐平更整）*/
nav.navbar .navbar-logo img { height: 32px; width: auto; }

/* 导航菜单链接：hover 用品牌淡蓝底 + 主色字（原来是纯文字变色）*/
nav.navbar .navbar-nav > li > a {
    border-radius: var(--navi-radius);
    transition: background .15s, color .15s;
}
nav.navbar .navbar-nav > li > a:hover {
    background: var(--navi-primary-weak);
    color: var(--navi-primary);
}

/* ══════════════════════════════════════════════════════════════════
 * 第三批（2026-10-12 · 1.0.198）：用户验收第二批后提的两件事
 *  ① 「**不需要这两个按钮**」—— 指 `navbar-header` 里 Zibll 自带的
 *     `a.main-search-btn.navbar-toggle`（🔍）与 `button.navbar-toggle`（☰）。
 *  ② 「**最右边已经有了一个文章搜索按钮，把最右边的换图形，换成更细的商务线框**」
 *     ⇒ 换掉 `.nav-search-btn` 里那枚 sprite 放大镜。
 * ══════════════════════════════════════════════════════════════════ */

/* ① 桌面端隐藏 header 里那两个 toggle
 *   ★★★ **只隐藏 ≥992px**：`☰` 是**移动端唯一的菜单入口** —— 窄屏删了手机就打不开菜单。
 *     而桌面端 `.navbar-collapse` 是展开的、顶部菜单直接可见 ⇒ 那两个 toggle 本来就冗余。
 *   ★★ 2026-10-12 **抓线上真实 DOM 核对过**（不是猜的），两点都成立：
 *     ㈠ 两个 toggle 确实都是 `.navbar-header` 的**直接子元素** ⇒ 这里的 `>` 选择器**匹配得到**
 *        （顺序：`.navbar-brand` → `button.navbar-toggle`(☰) → `a.main-search-btn.navbar-toggle`(🔍)）；
 *        ★ 若哪天 Zibll 升级后多包一层，`>` 会**静默失配**（看着像"改了没生效"）⇒ **先把 `>` 去掉再试**。
 *     ㈡ ☰ 的机制是 `data-toggle-class="mobile-navbar-show" data-target="body"` 切 `<body>` 的类，
 *        真正那个菜单是 `<nav class="mobile-navbar visible-xs-block">` —— `visible-xs-block` 在 ≥768px
 *        **本来就不显示** ⇒ 桌面端点它本来就没用 ⇒ **隐藏它零副作用**；而窄屏它是唯一入口，必须留。 */
@media (min-width: 992px) {
    nav.navbar .navbar-header > .navbar-toggle {
        display: none !important;
    }
}

/* ② 最右侧「文章搜索」按钮：换成**细线**商务放大镜
 *   ★ 做法 = 隐藏 Zibll 的 sprite 图标 + 用 `::before` 的 `mask` 画一枚自己的。
 *   ★★ 为什么用 mask 而不是 `background-image`：mask 只看 alpha ⇒ 图形颜色由
 *      `background: currentColor` 决定 ⇒ **hover 时随文字变蓝，不用为 hover 再写一条**。
 *   ★ 线宽取 `1.5`（Zibll 那枚约 2+，视觉上明显更粗）⇒ 即用户说的"更细的商务线框"。 */
nav.navbar .nav-search-btn svg.icon {
    display: none !important;
}
nav.navbar .nav-search-btn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--navi-ico-search) center / contain no-repeat;
    mask: var(--navi-ico-search) center / contain no-repeat;
}