/* =========================================================
   导航与全局杂项：二级子菜单（补充 8）/ 吸顶导航黑字（补充 9）/ 归档卡隐藏（补充 10）/ 页脚备案（补充 12）/ 加载动画（补充 13-16）/ 导航淡入（补充 41）/ 语言下拉（补充 23、26）/ nprogress（补充 24）。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   补充 8：导航二级子菜单
   - 底色与导航栏一致（浅色 rgba(255,255,255,.7) / 深色 rgba(18,18,18,.8)）+ blur(7px) 毛玻璃
   - 选中(hover/active)文字变蓝 #49b1f5 并有颜色过渡动画，底色不变
    特异性必须压过上面那条「导航未滚动时白字」规则（带 #page-header+#nav 两个 ID），
      否则即使都写 !important 也赢不了。
   ========================================================= */
#nav .menus_items .menus_item .menus_item_child,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child {
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px -8px rgba(133, 133, 133, .5) !important;
    margin-top: 14px !important;
}
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child {
    background: rgba(25, 25, 25, 0.9) !important;
    border: none !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, .5) !important;
}
#nav .menus_items .menus_item .menus_item_child:before {
    border-bottom-color: rgba(255, 255, 255, 0.9) !important;
    top: -14px !important;
    height: 26px !important;
}
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child:before {
    border-bottom-color: rgba(25, 25, 25, 0.9) !important;
}
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li a,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li a span,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li a i,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child .site-page {
    background: transparent !important;
    color: #000000 !important;
    text-shadow: none !important;
    transition: color .3s ease !important;
}
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li a,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li a span,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li a i,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child .site-page {
    background: transparent !important;
    color: #e2f1ff !important;
    text-shadow: none !important;
    transition: color .3s ease !important;
}
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li:hover,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li:hover a,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li:hover a span,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li:hover a i,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li.active a,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li.active a span,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item .menus_item_child li.active a i,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li:hover,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li:hover a,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li:hover a span,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li:hover a i,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li.active a,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li.active a span,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item .menus_item_child li.active a i {
    background: transparent !important;
    color: var(--zx-accent) !important;
}

/* =========================================================
   补充 9：滚动后「上滑弹出」的固定导航栏 → 只把文字改成黑色
   （背景保持主题原有：rgba(255,255,255,.7) 半透明白，不动）
   ========================================================= */
html:not([data-theme="dark"]) #page-header.nav-fixed #nav .site-page,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav a,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav span,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav i,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav #blog-info,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav #blog-info .site-name,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav #toggle-menu,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav #search-button > a > i,
html:not([data-theme="dark"]) #page-header.not-top-img #nav .site-page,
html:not([data-theme="dark"]) #page-header.not-top-img #nav a,
html:not([data-theme="dark"]) #page-header.not-top-img #nav span,
html:not([data-theme="dark"]) #page-header.not-top-img #nav i,
html:not([data-theme="dark"]) #page-header.not-top-img #nav .menus_items .menus_item > a > span,
html:not([data-theme="dark"]) #page-header.not-top-img #nav .menus_items .menus_item > a > i,
html:not([data-theme="dark"]) #page-header.not-top-img #nav #blog-info,
html:not([data-theme="dark"]) #page-header.not-top-img #nav #blog-info .site-name {
    color: #000000 !important;
    text-shadow: none !important;
}
/* 悬停保持主题蓝，作为可点反馈
    例外：导航搜索框（.nav-search-box）**悬停不变色**。
   它的"文字"其实是 input 的 placeholder（默认 color: inherit），而外边那层包裹 div 就是
   
   "搜索框悬停时'搜索'两个字不要变色"）。这里用 :not() 把搜索框排除掉；
   下划线（.site-page:not(.child):after）不受影响，悬停反馈仍在。 */
html:not([data-theme="dark"]) #page-header.nav-fixed #nav .site-page:hover:not(.nav-search-box),
html:not([data-theme="dark"]) #page-header.nav-fixed #nav a:hover,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav #blog-info:hover,
html:not([data-theme="dark"]) #page-header.nav-fixed #nav #blog-info .site-name:hover {
    color: var(--zx-accent) !important;
}

/* =========================================================
   补充 10：归档页隐藏侧边栏的「归档」卡片
   （归档页是主题内置页、无 md 文件，故用内容区 #archive 定位侧边栏）
   ========================================================= */
#archive ~ .aside-content .card-archives {
    display: none !important;
}

/* =========================================================
   
   ------------------------------------------------------------------
   回形针是主题 beautify 生成的（_config.butterfly.yml：
     title_prefix_icon = f0c6 = fa-paperclip、title_prefix_icon_color = #49b1f5），
   主题 CSS 写死 `.container h1:before … h6:before { color: #49b1f5 }`，连 hover 也是同一个蓝
   —— 即所有级别一个色、hover 还看不出变化。
   配色：静止 = 红 #f47466，悬停 = 蓝（accent 色）；六个级别统一，不做逐级配色。
     
     
   写死色值、不用 CSS 变量：微信内置浏览器等老内核解析变量失败会让整条声明作废。
   ========================================================= */
#content-inner.layout .container h1:before,
#content-inner.layout .container h2:before,
#content-inner.layout .container h3:before,
#content-inner.layout .container h4:before,
#content-inner.layout .container h5:before,
#content-inner.layout .container h6:before {
    color: #f47466;
}

/* 交互态：只有鼠标悬停时变蓝（只认 hover，移开即红）。
   只换颜色，不加光晕/放大/提亮；保留 translateX(4px) —— 主题 hover 时标题文字右移 4px，
   ::before 是 absolute/left:0 不会自己跟，少了这句回形针不跟手。 */
#content-inner.layout .container h1:hover:before,
#content-inner.layout .container h2:hover:before,
#content-inner.layout .container h3:hover:before,
#content-inner.layout .container h4:hover:before,
#content-inner.layout .container h5:hover:before,
#content-inner.layout .container h6:hover:before {
    color: var(--zx-accent);
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

/* =========================================================
   补充 12：页脚备案链接 hover 时出现下划线（默认无下划线）
   ========================================================= */
#footer .icp-link {
    text-decoration: none !important;
}
#footer .icp-link:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* 页脚备案图标：强制正方形，避免 SVG 自带 width/height 属性压掉高度 */
#footer .icp-link img {
    display: inline-block !important;
    object-fit: contain;
}
#footer .icp-link img.icp-icon {
    display: inline-block !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    /* 竖向：由 -7px 下移 3px。原值使图标垂直中心比文字中心高 2.5px，看起来「漂」在文字上方 */
    vertical-align: -10px !important;
    margin-right: 5px !important;
    object-fit: contain !important;
    flex: none !important;
    align-self: center !important;
    /* 水平：右移 2px，让图标与文字贴得更紧、看上去更整齐 */
    position: relative;
    left: 2px;
}

/* 页脚举报/合规提示区块 */
#footer .footer-notice {
    margin-top: 10px;
    line-height: 1.9;
}

/* 页脚字号统一 15px */
#footer {
    font-size: 15px !important;
}

/* 飘带 canvas 不拦截鼠标（右键不弹「将图像另存为」，穿透到页面显示普通菜单） */
canvas {
    pointer-events: none !important;
}

/* =========================================================
   补充 13：加载动画 loading-11（两个 3D 跳动的方块，主题蓝）
   等页面加载完成再显示，避免未加载完时页面「奇怪」
   ========================================================= */
#loading-box .configure-border-1,
#loading-box .configure-border-2 {
    display: none !important;
}
#loading-box .spinner-box {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    perspective: 200px;
    display: block;
}
#loading-box .spinner-box:before,
#loading-box .spinner-box:after {
    position: absolute;
    width: 20px;
    height: 20px;
    content: "";
    animation: loading-11 0.5s infinite alternate;
    background: rgba(0, 0, 0, 0);
}
#loading-box .spinner-box:before {
    left: 0;
}
#loading-box .spinner-box:after {
    right: 0;
    animation-delay: 0.15s;
}
#loading-box .loading-word {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
@keyframes loading-11 {
    0% {
        transform: scale(1) translateY(0) rotateX(0);
        box-shadow: 0 0 #0000;
    }
    to {
        transform: scale(1.2) translateY(-25px) rotateX(45deg);
        background: var(--loading-block);
        box-shadow: 0 25px 40px var(--loading-block);
    }
}

/* 加载方块颜色：浅色黑、深色白（跟随主题） */
:root {
    --loading-block: #000000;
}
html[data-theme="dark"] {
    --loading-block: #ffffff;
}

/* =========================================================
   补充 14：加载动画结束改成渐入淡出（去掉左右展开）
   ========================================================= */
#loading-box {
    transition: opacity .5s ease, visibility 0s .5s;
}
#loading-box.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#loading-box.loaded .loading-left-bg,
#loading-box.loaded .loading-right-bg {
    transform: none !important;
}

/* =========================================================
   补充 15：loading 遮罩改白色（消除深蓝灰偏绿 + 与白页切换的闪屏）
   ========================================================= */
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
    background-color: #ffffff !important;
}
#loading-box .loading-word {
    color: #000000 !important;
}
html[data-theme="dark"] #loading-box .loading-left-bg,
html[data-theme="dark"] #loading-box .loading-right-bg {
    background-color: #0d0d0d !important;
}
html[data-theme="dark"] #loading-box .loading-word {
    color: #ffffff !important;
}

/* =========================================================
   补充 16：页面主体加载完成后淡入
   ------------------------------------------------------------------
   
   
   看到顶部导航条，而且是慢慢浮出来，像「播了个动画」，不像「已经跳过去了」。
   现在头部（含导航条、头图）立即显示，只有正文与页脚做淡入。
   #nav 在 DOM 里是 #page-header 的子节点，所以不能再对 #body-wrap 整体设 opacity
   —— 父元素的 opacity 没法被后代「豁免」，只能把淡入挂到要淡的那两块上。
   ========================================================= */
#body-wrap #content-inner,
#body-wrap #footer {
    opacity: 0;
    transition: opacity .6s ease;
    animation: bodyWrapFadeIn .6s ease 1s forwards;
}
#body-wrap.loaded #content-inner,
#body-wrap.loaded #footer {
    opacity: 1;
    animation: none;
}
@keyframes bodyWrapFadeIn {
    to {
        opacity: 1;
    }
}

/* =========================================================
   补充 41：顶部导航条「点开就显示」，不再等加载完才淡入
   ------------------------------------------------------------------
   
   不像「已经跳过去了」。
   根因在主题侧，不在整页淡入：
     · index.css 里 `#nav { opacity: 0; transition: all .5s }`，靠 `#nav.show { opacity: 1 }` 才显形；
     · `show` 是 main.js 的 refreshFn → initAdjust() 里加的，而 refreshFn 挂在 window.load 之后
       
   修法：直接把基础态的不透明度改成 1（本文件在 index.css 之后加载，同级选择器即可反超）。
    只改不透明度，别动 `transition` —— 主题靠 `transition: all .5s` + nav-visible/nav-fixed
      的 transform 组合做「读文章时上滑滑出导航条」的动画，动了就连那个一起坏。
      `#nav.show` 仍然存在，主题加不加都不影响显示。
   ========================================================= */
#nav {
    opacity: 1;
}

/* ---------- 补充 18：吸顶导航栏 nav-fixed 毛玻璃 ----------
   
   
   0.45 的底色 + 80px 重模糊 = 磨砂感更厚，文字（深色/浅色）压在上面依然清楚。
   深浅色两套一起改，只改一套另一半会「看起来没反应」。 */
/* ---------- 补充 18：吸顶导航栏 nav-fixed ----------
   
     
     
   
        模糊 20px → 80px → none → **60px**。
    三个状态（顶部 / 吸顶 / 上滑）都统一成同一组值，见下面 18b 与 19。 */
html:not([data-theme="dark"]) #page-header.nav-fixed #nav,
#page-header.nav-fixed #nav {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    box-shadow: 0 5px 16px -5px rgba(133, 133, 133, 0.4) !important;
}
html[data-theme="dark"] #page-header.nav-fixed #nav {
    background: rgba(25, 25, 25, 0.45) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    box-shadow: 0 5px 16px -5px rgba(0, 0, 0, 0.4) !important;
}
html:not([data-theme="dark"]) #page-header.nav-fixed #nav .menus_items .menus_item .menus_item_child {
    background: rgba(255, 255, 255, 0.98) !important;
    border: none !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 32px -8px rgba(133, 133, 133, 0.5) !important;
}
html[data-theme="dark"] #page-header.nav-fixed #nav .menus_items .menus_item .menus_item_child {
    background: rgba(25, 25, 25, 0.98) !important;
    border: none !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- 补充 19：nav-visible（上滑弹出）状态的导航栏 ----------
   
   注意这一条比「补充 18」更具体（多了 .nav-visible），上滑态实际走的是**这一条**，
   改透明度/模糊必须两处一起改，否则只改一处看不出效果。 */
#page-header.nav-visible:not(.fixed) #nav,
html:not([data-theme="dark"]) #page-header.nav-visible #nav {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
html[data-theme="dark"] #page-header.nav-visible #nav {
    background: rgba(25, 25, 25, 0.45) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}

/* ---------- 补充 18b：未吸顶态也统一到同一组值 ----------
   顶部（`#page-header` 无 nav-fixed）时，导航条背景是**主题**给的 `rgba(255,255,255,.8)`
   （不在本文件里），所以单独在这儿拉平到 0.45 + blur(30px)，跟吸顶/上滑态口径一致。
    用 `:not(.nav-fixed)` 限定，否则会盖掉上面两条吸顶态。 */
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav {
    background: rgba(25, 25, 25, 0.45) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
#page-header.nav-visible:not(.fixed) #nav .menus_items .menus_item .menus_item_child,
html:not([data-theme="dark"]) #page-header.nav-visible #nav .menus_items .menus_item .menus_item_child {
    background: rgba(255, 255, 255, 0.98) !important;
    border: none !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
html[data-theme="dark"] #page-header.nav-visible #nav .menus_items .menus_item .menus_item_child {
    background: rgba(25, 25, 25, 0.98) !important;
    border: none !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* =========================================================
   补充 23：导航栏「语言」下拉菜单（简体 / 繁體）
   - 菜单结构由 /js/lang-switch.js 动态插入，复刻主题的子菜单标记
     （span.site-page.group + ul.menus_item_child > li > a.site-page.child），
     因此自动继承本文件里已有的二级菜单毛玻璃样式与各状态配色，
     侧栏（移动端）的点开展开也被主题的事件委托自动接管
   - #translateLink 是主题 tw_cn.js 依赖的按钮（translatePage() 会写它的
     textContent，节点必须存在），已搬进本菜单并隐藏，不再出现在右下角悬浮栏
   - 当前语言高亮：桌面端由已有的 li.active 规则给出 #49b1f5，
     这里补侧栏（移动端）的配色，并给两者加粗
   ========================================================= */
#nav .nav-lang-item > #translateLink,
#sidebar-menus .nav-lang-item > #translateLink {
    display: none !important;
}

html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item.nav-lang-item .menus_item_child li.active > a,
html[data-theme="dark"] #page-header #nav .menus_items .menus_item.nav-lang-item .menus_item_child li.active > a,
#sidebar-menus .nav-lang-item .menus_item_child li.active > a {
    font-weight: 600;
}

#sidebar-menus .nav-lang-item .menus_item_child li.active > a,
#sidebar-menus .nav-lang-item .menus_item_child li.active > a > span {
    color: var(--zx-accent) !important;
}

/* =========================================================
   补充 24：顶部加载进度条（nprogress）
   - 库与 start() 由 _config.butterfly.yml 的 inject.head 引入并启动
   - 这里覆盖 nprogress 自带配色为主题色，2px 高，隐藏右上角转圈 spinner
     
   ========================================================= */
#nprogress .bar {
    background: var(--zx-accent) !important;
    height: 2px !important;
    box-shadow: none !important;
}
#nprogress .peg {
    box-shadow: 0 0 10px var(--zx-accent), 0 0 5px var(--zx-accent) !important;
}
#nprogress .spinner {
    display: none !important;
}