/* ==========================================================
   custom.css — 煜的小窝 · Butterfly 主题自定义样式
   参考：luotian.cyou（洛天的小窝）公开配置
   ========================================================== */

/* ----------------------------------------------------------
   1. 全局毛玻璃样式
   ----------------------------------------------------------
   已于 2026-10-02 对齐参考站（luotian.cyou）。

   下面是CDP 实测抓到的参考站真实计算样式（不是推测值）：

   | 属性            | 参考站              | 主题原版默认|
   |-----------------|---------------------|-------------|
   | 亮色背景        | rgba(255,255,255,.85)| .85       |
   | 亮色模糊        | blur(2px)           | blur(2px)   |
   | 亮色边框        | rgba(255,255,255,.85)| .85        |
   | 亮色阴影        | 0 8px 16px -4px rgba(138,138,138,.15) | 同|
   | 夜间背景        | rgba(30,30,30,.6)   | .6          |
   | 夜间边框        | rgba(255,255,255,.08)| .08        |
   | 夜间阴影        | 0 8px 16px -4px rgba(0,0,0,.2) | 同    |

   也就是说：参考站的毛玻璃 = **Butterfly 主题原版默认值，未做任何改动**。

   本文件历史上有过一版"加强对比度"的自定义值（背景 .92/.72、灰边框、
   双重阴影、blur 3/4px），是为了解决"卡片压在鲜艳樱花图上看不出轮廓"。
   现已按用户要求还原为参考站同款，即上面的原版数值。
   背景图较鲜艳时若又觉得糊，正确做法是换一张更暗的背景图，
   而不是偏离参考站去改玻璃参数。
   ---------------------------------------------------------- */

/* 明亮模式 —— 与参考站像素级一致 */
#body-wrap #recent-posts > .recent-post-item,
#body-wrap .recent-post-item,
#body-wrap #aside-content .card-widget,
#body-wrap .layout > div:first-child:not(.recent-posts),
#body-wrap #nav .menus_items .menus_item .menus_item_child,
#body-wrap #pagination .page-number:not(.current),
#body-wrap #pagination .extend,
#page-header #post-info {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px -4px rgba(138, 138, 138, 0.15);
    transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
#body-wrap #pagination .page-number:not(.current):hover,
#body-wrap #pagination .extend:hover {
    background: #ff7142d2;
    border-color: #ff7142d2;
    color: #fff;
}
/* 夜间模式 —— 与参考站像素级一致 */
html[data-theme="dark"] #body-wrap #recent-posts > .recent-post-item,
html[data-theme="dark"] #body-wrap .recent-post-item,
html[data-theme="dark"] #body-wrap #aside-content .card-widget,
html[data-theme="dark"] #body-wrap .layout > div:first-child:not(.recent-posts),
html[data-theme="dark"] #body-wrap #nav .menus_items .menus_item .menus_item_child,
html[data-theme="dark"] #body-wrap #pagination .page-number:not(.current),
html[data-theme="dark"] #body-wrap #pagination .extend,
html[data-theme="dark"] #page-header #post-info {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------
   2. 明亮主题文本颜色
   ---------------------------------------------------------- */
/* 主标题 / 站名（导航栏区域，深色文字才看得清） */
html:not([data-theme="dark"]) #site-title,
html:not([data-theme="dark"]) .site-title,
html:not([data-theme="dark"]) #site-name,
html:not([data-theme="dark"]) #nav #blog-info .site-name,
html:not([data-theme="dark"]) #nav #blog-info a {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* 首页大图上的副标题（含打字机）颜色/投影，
   统一由下方「全屏头图下的文字可读性 —— 按背景图亮度自适应」章节接管，
   此处不再单独设定，避免两处规则打架。
   特别注意：不要用 html:not([data-theme="dark"]) 这类宽泛选择器，
   它会把打字机文字一起染深，历史上踩过这个坑。 */

/* 导航栏菜单、图标 */
html:not([data-theme="dark"]) #nav .site-page,
html:not([data-theme="dark"]) #nav .menus_items .menus_item > a > span,
html:not([data-theme="dark"]) #nav .menus_items .menus_item > a > i,
html:not([data-theme="dark"]) #search-button > a,
html:not([data-theme="dark"]) #search-button > a > span,
html:not([data-theme="dark"]) #search-button > a > i {
    color: #2c3e50 !important;
    text-shadow: none !important;
}
html:not([data-theme="dark"]) #nav .menus_item:hover > a,
html:not([data-theme="dark"]) #nav .menus_item:hover > a > span,
html:not([data-theme="dark"]) #nav .menus_item:hover > a > i {
    color: #49b1f5 !important;
}
/* 底部与 Meta 数据 */
html:not([data-theme="dark"]) #page-header .page-title,
html:not([data-theme="dark"]) #footer,
html:not([data-theme="dark"]) #footer a,
html:not([data-theme="dark"]) #footer div,
html:not([data-theme="dark"]) #footer p,
html:not([data-theme="dark"]) #footer span,
html:not([data-theme="dark"]) #footer .copyright *,
html:not([data-theme="dark"]) #post-info .post-title,
html:not([data-theme="dark"]) #post-info #post-meta,
html:not([data-theme="dark"]) #post-info #post-meta a,
html:not([data-theme="dark"]) #post-info #post-meta .post-meta-separator,
html:not([data-theme="dark"]) #post-info #post-meta i {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* ----------------------------------------------------------
   3. 明亮主题导航栏子菜单颜色
   ---------------------------------------------------------- */
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li:hover,
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li.active {
    background: transparent !important;
}
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li:hover a,
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li:hover a span,
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li.active a,
html:not([data-theme="dark"]) #post-info #post-meta a:hover {
    color: #49b1f5 !important;
}

/* ----------------------------------------------------------
   4. 页头与页脚透明
   ----------------------------------------------------------
   注意：`#footer { background: transparent !important }` 只能清掉元素
   自身的底色，**挡不住 ::before 伪元素**。CDP 实测本站页脚的真凶是
   `#footer::before { content:""; background: rgba(0,0,0,0.3) }`——
   一层30% 黑的黑纱，参考站该伪元素是 `content:none`（不存在）。
   所以必须单独把 ::before 也置为 transparent / content:none。
   ---------------------------------------------------------- */
#footer, #page-header.post-bg, #page-header.page-bg {
    background: transparent !important;
}
#footer::before {
    background-color: transparent !important;
    content: none !important;
}
#page-header.post-bg::before, #page-header.page-bg::before {
    background-color: transparent !important;
}

/* ----------------------------------------------------------
   5. 文章卡片透明
   ---------------------------------------------------------- */
#body-wrap #recent-posts > .recent-post-item .recent-post-info,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::before,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::after,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-title,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-meta-wrap,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------
   6. 文章标题卡片透明（底部浮层定位）
   ---------------------------------------------------------- */
#page-header #post-info {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 20px 40px;
    box-sizing: border-box;
    display: block;
    text-align: left;
    border-radius: 10px;
}
@media screen and (max-width: 768px) {
    #page-header #post-info {
        padding: 15px 20px !important;
        bottom: 20px !important;
    }

    #post-info #post-meta > .meta-firstline > span:not(.post-meta-wordcount),
    #post-info #post-meta > .meta-secondline > span:not(.post-meta-wordcount) {
        display: none !important;
    }

    #post-info #post-meta > .meta-firstline > .post-meta-separator,
    #post-info #post-meta > .meta-secondline > .post-meta-separator {
        display: none !important;
    }

    #post-info .post-title {
        text-align: justify !important;
        text-align-last: left !important;
        display: block;
        margin-bottom: 10px;
    }
}

/* ----------------------------------------------------------
   7. Mermaid 流程图透明
   ---------------------------------------------------------- */
#article-container .mermaid,
#article-container .mermaid svg,
.mermaid-wrap,
#article-container .mermaid svg rect.mermaid-bg,
#article-container .mermaid svg rect:first-child {
    background: transparent !important;
    fill: transparent !important;
}

/* ----------------------------------------------------------
   8. 明亮主题代码块配色
   ---------------------------------------------------------- */
html:not([data-theme="dark"]) {
    --hl-bg: #f4f7fa !important;
    --hltools-bg: #e9eef4 !important;
    --hlnumber-bg: #f4f7fa !important;
    --hlnumber-color: #8da4bb !important;
    --hlscrollbar-bg: #dbe6f0 !important;
    --hlexpand-bg: linear-gradient(180deg, rgba(244,247,250,0), rgba(244,247,250,0.9)) !important;
}
html:not([data-theme="dark"]) #article-container .highlight table {
    background-color: #f4f7fa !important;
}
html:not([data-theme="dark"]) .highlight .code .keyword,
html:not([data-theme="dark"]) .highlight .code .built_in,
html:not([data-theme="dark"]) .highlight .code .type {
    color: #005cc5 !important;
}
html:not([data-theme="dark"]) .highlight .code .string {
    color: #22863a !important;
}
html:not([data-theme="dark"]) .highlight .code .comment {
    color: #677886 !important;
    font-style: italic !important;
}
html:not([data-theme="dark"]) .highlight .code .number {
    color: #d130a5 !important;
}
html:not([data-theme="dark"]) .highlight .code .title,
html:not([data-theme="dark"]) .highlight .code .function {
    color: #0077aa !important;
}
html:not([data-theme="dark"]) .highlight .code .meta,
html:not([data-theme="dark"]) .highlight .code .meta-keyword {
    color: #8b3c9b !important;
}
html:not([data-theme="dark"]) .highlight .code .attr,
html:not([data-theme="dark"]) .highlight .code .variable,
html:not([data-theme="dark"]) .highlight .code .params {
    color: #212f3b !important;
}

/* ----------------------------------------------------------
   9. 夜间主题代码块配色
   ---------------------------------------------------------- */
html[data-theme="dark"] {
    --hl-bg: #0b0f19 !important;
    --hltools-bg: #111726 !important;
    --hlnumber-bg: #0b0f19 !important;
    --hlnumber-color: #5c6c7f !important;
    --hlscrollbar-bg: #1e293b !important;
    --hlexpand-bg: linear-gradient(180deg, rgba(11,15,25,0), rgba(11,15,25,0.9)) !important;
}
html[data-theme="dark"] #article-container .highlight table {
    background-color: #0b0f19 !important;
}
html[data-theme="dark"] .highlight .code .keyword,
html[data-theme="dark"] .highlight .code .built_in,
html[data-theme="dark"] .highlight .code .type {
    color: #569cd6 !important;
}
html[data-theme="dark"] .highlight .code .string {
    color: #8fca5c !important;
}
html[data-theme="dark"] .highlight .code .comment {
    color: #5c7080 !important;
    font-style: italic !important;
}
html[data-theme="dark"] .highlight .code .number {
    color: #f07178 !important;
}
html[data-theme="dark"] .highlight .code .title,
html[data-theme="dark"] .highlight .code .function {
    color: #82aaff !important;
}
html[data-theme="dark"] .highlight .code .meta,
html[data-theme="dark"] .highlight .code .meta-keyword {
    color: #c792ea !important;
}
html[data-theme="dark"] .highlight .code .attr,
html[data-theme="dark"] .highlight .code .variable,
html[data-theme="dark"] .highlight .code .params {
    color: #a6bcdc !important;
}

/* ----------------------------------------------------------
   10. 表格样式
   ---------------------------------------------------------- */
/* 表头居中 */
#article-container table th,
#article-container table thead th {
    text-align: center !important;
}

/* 明亮模式 */
html:not([data-theme="dark"]) #article-container table {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
html:not([data-theme="dark"]) #article-container table,
html:not([data-theme="dark"]) #article-container table th,
html:not([data-theme="dark"]) #article-container table td {
    border-color: #919191da !important;
    border-width: 1px !important;
}
html:not([data-theme="dark"]) #article-container table tbody tr:nth-child(even) {
    background-color: rgba(240, 244, 248, 0.5) !important;
}

/* 夜间模式 */
html[data-theme="dark"] #article-container table {
    background-color: rgba(22, 27, 34, 0.5) !important;
}
html[data-theme="dark"] #article-container table,
html[data-theme="dark"] #article-container table th,
html[data-theme="dark"] #article-container table td {
    border-color: #5c6c7f !important;
    border-width: 1px !important;
}
html[data-theme="dark"] #article-container table tbody tr:nth-child(even) {
    background-color: rgba(30, 36, 44, 0.5) !important;
}

/* ----------------------------------------------------------
   11. 排版美化
   ---------------------------------------------------------- */
/* 无顶图页面正文标题居中 */
#body-wrap #page .page-title {
    text-align: center !important;
}

/* 文章排版改为两端对齐 */
#article-container {
    text-align: justify;
}

/* 视频自适应页面尺寸 */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
    display: block;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* =========================================================
   12：背景图日夜切换的过渡缓冲层
   由 /js/background.js 动态创建与驱动：
   新图先铺进该层并淡入，1.5s 后再替换 #web_bg，实现无闪烁过渡
   ========================================================= */
#web_bg_buffer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -998; /* 高于默认 #web_bg (-999) */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
}

/* 初始加载时背景图整体淡入，与参考站一致 */
#web_bg.bg-animation {
    animation: to_show 4s;
}

@keyframes to_show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 夜间模式：在背景图上叠加 70% 黑色遮罩 */
[data-theme=dark] #web_bg:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    content: '';
}

/* =========================================================
   13：首页头图全屏（100vh）适配
   ---------------------------------------------------------
   背景：主题给 .full_page 预设了 background-attachment: fixed，
        而 #web_bg 本身也是 fixed。两层 fixed 叠加时，滚动页面
        会出现「背景钉死在屏幕上、正文在飘」的错位感。
        参考站的做法就是把它改回 scroll，这里对齐处理。
   ========================================================= */

/* 头图背景改为随页面滚动，避免与 #web_bg 的 fixed 冲突 */
#page-header.full_page {
    background-attachment: scroll;
}

/* 用 dvh 覆盖 vh，规避 iOS Safari 地址栏收放导致的 100vh 抖动 */
@supports (height: 100dvh) {
    #page-header.full_page {
        height: 100dvh;
    }
}

/* 站名 + 打字机副标题整体垂直居中：
   主题把它定位在 top: 48%，这里改用 transform 精确居中 */
#page-header.full_page #site-info {
    top: 50%;
    transform: translateY(-50%);
}

/* 下滑箭头沿主题默认的 bottom: 10px，此处不覆盖 */

/* 下滑箭头颜色对齐参考站：半透明白 rgba(255,255,255,.7)
   主题默认 $light-grey = #EEEEEE（不透明），参考站改成了半透明，
   视觉上更轻盈、与背景图融合更好。
   夜间模式（data-theme=dark）下箭头本身也是浅色，同样适用。 */
#page-header.full_page #scroll-down .scroll-down-effects {
    color: rgba(255, 255, 255, .7);
}

/* 移动端降级：小屏用 80vh，避免全屏头图把内容完全挤出首屏，
   同时规避 iOS 地址栏引起的视口高度跳动 */
@media screen and (max-width: 768px) {
    #page-header.full_page {
        height: 80vh;
    }

    @supports (height: 80dvh) {
        #page-header.full_page {
            height: 80dvh;
        }
    }

    #page-header.full_page #site-info {
        top: 45%;
    }
}

/* 下滑箭头：完全沿用主题原版定义（scroll-down-effect / 1.5s / ease /
   translate(0,-16px) + opacity .4→1→.4），此处不做任何覆盖。
   主题 _global/function.styl 已定义：
     .scroll-down-effects { animation: scroll-down-effect 1.5s infinite }
     @keyframes scroll-down-effect {
       0%   { opacity: .4; transform: translate(0, 0) }
       50%  { opacity: 1;  transform: translate(0, -16px) }
       100% { opacity: .4; transform: translate(0, 0) }
     }
   箭头距底距离也保持主题默认 10px（见 _layout/head.styl）。 */

/* ---------------------------------------------------------
   全屏头图下的文字可读性 —— 按「背景图亮度」自适应
   ---------------------------------------------------------
   背景：本站首页采用真·全屏头图（100vh），站名 / 打字机副标题
   直接压在背景图中央。经实测三张背景图在文字落点区域的
   感知亮度（0-255）差异极大：

     bkgnd1  樱花上午  181   很亮   → 白字对比度仅约 1.4:1
     bkgnd2  白天下午  191   最亮   → 更差
     bkgnd3  夜间       43   很暗   → 白字约 4.9:1，正常

   注意：bkgnd1 / bkgnd2 同属 light 主题，暗色模式只对应 bkgnd3，
   所以**不能按 light/dark 主题来切**，必须按「当前是哪张图」切。
   为此 background.js 会同步写入 <html data-bg="light|dark">。

   策略：
     - 亮图（light）：白字 + 明显加粗的深色投影，必要时叠一层
       轻微暗化，让文字从亮粉/白水面里"浮"出来。
     - 暗图（dark） ：沿用主题默认的浅色 + 弱投影即可，不过度增强。
   --------------------------------------------------------- */

/* ===== 亮色背景（bkgnd1 / bkgnd2）===== */

/* 站名：白色 + 双层深色投影，压住亮背景 */
html[data-bg="light"] #page-header.full_page #site-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75),
                 0 2px 10px rgba(0, 0, 0, .65),
                 0 0 24px rgba(0, 0, 0, .45) !important;
}

/* 打字机副标题：同站名一致 */
html[data-bg="light"] #page-header.full_page #site-subtitle,
html[data-bg="light"] #page-header.full_page #subtitle {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75),
                 0 2px 10px rgba(0, 0, 0, .65),
                 0 0 24px rgba(0, 0, 0, .45) !important;
}

/* 亮背景下导航栏同样加强 */
/* ⚠️ 注意：这里刻意**不包含**站名（.site-name）与搜索（#search-button）。
   原因：导航栏常驻于页面顶部，其背后是接近纯白的天空/水面区域
   （实测亮度 235 / 232），深灰字 #2c3e50 压上去对比度约 7.2~7.4:1，
   本身就足够清晰，**不需要任何投影**。
   若强行加投影（尤其是深黑投影），会与深灰字色叠加，在亮背景上
   把字"晕"糊 —— 而且导航栏是全局元素，翻页时会跟随，加投影会导致
   "首页糊、其他页清晰"的不一致。
   因此导航栏文字统一走第 2 节的「深灰 + 无投影」，保持全站一致。 */
html[data-bg="light"] #page-header.full_page #nav #toggle-menu {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85),
                 0 0 8px rgba(0, 0, 0, .5) !important;
}

/* 亮背景下滑箭头：白色 + 深色投影（与方案 A 一致） */
html[data-bg="light"] #page-header.full_page #scroll-down .scroll-down-effects {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8),
                 0 0 3px rgba(0, 0, 0, .55),
                 0 1px 2px rgba(0, 0, 0, .6) !important;
}

/* ===== 暗色背景（bkgnd3）===== */
/* 夜间背景本身够暗，白字已清晰，只给与主题一致的轻投影，
   避免过度加粗投影显得脏 */

html[data-bg="dark"] #page-header.full_page #site-title,
html[data-bg="dark"] #page-header.full_page #site-subtitle,
html[data-bg="dark"] #page-header.full_page #subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .45),
                 0 0 2px rgba(0, 0, 0, .3) !important;
}

html[data-bg="dark"] #page-header.full_page #scroll-down .scroll-down-effects {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important;
}

/* 下拉菜单展开时是浅色底，任何背景都要还原深色文字、去掉投影 */
#page-header.full_page #nav .menus_item_child,
#page-header.full_page #nav .menus_item_child a {
    text-shadow: none !important;
}

/* 下滑箭头的可见度增强，统一由上面 html[data-bg="light"] / html[data-bg="dark"]
   两组带 !important 的规则负责。
   站点背景由 source/js/background.js 写入 <html data-bg="light|dark">，
   所以这里不需要再写一份无前缀的裸规则（写了也会被 !important 覆盖）。 */