/* ==========================================================================
   Beautiful Jekyll 暗色模式补丁（Bootstrap 4 环境移植版）
   参照 LizardByte/beautiful-jekyll-next 的 theme switcher 实现

   通过 _config.yml 的 site-css 加载，位于主题 CSS 之后，可安全覆盖。
   切换机制：theme-init.js 在渲染前给 <html> 打上 data-bs-theme="dark|light"，
   本文件在 html[data-bs-theme="dark"] 作用域下整体换色。
   ========================================================================== */

/* ⌁ DEPLOY-MARKER：改此串 + push 即可验证部署是否生效（页面不可见，仅供拉取
   本文件核查）。检查地址：https://用户名.github.io/仓库名/assets/css/darkmode.css
   （用 *.github.io 源站可绕开 Cloudflare 缓存）。示例值见下，每次发布自改：
   DEPLOY 2026-10-01 v5.11.4.600
   头像→README+真hover+第5节pointer-events */

/* ---- 1. 核心变量覆盖 ----------------------------------------------------
   原版 B J 6.x 的 body / navbar / footer / 链接 / 引用等均引用 :root 中
   的 CSS 变量，在此作用域下整套替换即可全局变色。
   取值与 beautiful-jekyll-next 的默认暗色配色一致。 */
html[data-bs-theme="dark"] {
  color-scheme: dark; /* 让浏览器原生控件、滚动条、表单同步变暗 */

  --page-col:   #1a1a1a;
  --text-col:   #e0e0e0;
  --link-col:   #4d9fff;
  --hover-col:  #66b3ff;
  --navbar-col: #2d2d2d;
  --navbar-text-col:   #e0e0e0;
  --navbar-border-col: #404040;
  --footer-col: #2d2d2d;
  --footer-text-col:   #b0b0b0;
  --footer-link-col:   #e0e0e0;
  --footer-hover-col:  #66b3ff;
  --mid-col:    #a0a0a0;
}

/* ---- 2. 原版写死颜色的组件补丁 ------------------------------------------
   （beautiful-jekyll-next 已将这些组件变量化，原版没有，故手动覆盖） */

/* 首页文章列表分隔线 */
html[data-bs-theme="dark"] .post-preview { border-bottom-color: #444; }

/* 行内代码 code */
html[data-bs-theme="dark"] code { color: #ff6b9d; background-color: #2d2d2d; }

/* 代码块：pygments 高亮配色按浅色底设计，整体反色（色调保持）
   注意：代码块中若嵌有图片也会被反色（极少见）；如需精细控制，
   可改为引入一套暗色 pygments 主题并在暗色作用域下加载。 */
html[data-bs-theme="dark"] .highlight pre { filter: invert(1) hue-rotate(180deg); }

/* 表格 */
html[data-bs-theme="dark"] table tr { border-top-color: #444; }
html[data-bs-theme="dark"] table tr:nth-child(2n) { background-color: #2a2a2a; }
html[data-bs-theme="dark"] table tr th,
html[data-bs-theme="dark"] table tr td { border-color: #444; }

/* 提示框（notification boxes） */
html[data-bs-theme="dark"] .box-note    { background-color: #1a2332; border-left-color: #5dade2; }
html[data-bs-theme="dark"] .box-warning { background-color: #3d3420; border-left-color: #f4d03f; }
html[data-bs-theme="dark"] .box-error   { background-color: #3d2020; border-left-color: #e74c3c; }
html[data-bs-theme="dark"] .box-success { background-color: #1a3d2a; border-left-color: #52be80; }

/* jumbotron / 引用块 / 图片说明文字 */
html[data-bs-theme="dark"] .jumbotron { background-color: #2d2d2d; }
html[data-bs-theme="dark"] .blog-post blockquote { border-left-color: #444; }
html[data-bs-theme="dark"] .blog-post .caption { color: #999; }

/* 分页按钮兜底 */
html[data-bs-theme="dark"] .pagination .page-link { color: var(--text-col); }

/* ---- 3. Bootstrap 4 组件补丁 ---------------------------------------------
   Bootstrap 5.3 的组件会原生响应 data-bs-theme，BS4 不会，需手动覆盖。 */

/* 导航栏下拉菜单 */
html[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--navbar-col);
  border-color: var(--navbar-border-col);
}
html[data-bs-theme="dark"] .dropdown-item { color: var(--navbar-text-col); }
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255, 255, 255, .08);
  color: var(--hover-col);
}

/* 移动端汉堡按钮图标（默认深色，暗底不可见，反白处理） */
html[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

/* 搜索浮层输入框（post_search 开启时生效） */
html[data-bs-theme="dark"] #nav-search-input { background: #2d2d2d; color: #e0e0e0; }
html[data-bs-theme="dark"] #nav-search-input:focus {
  background: #3a3a3a;
  box-shadow: 0 0.15rem 1rem rgba(79, 192, 255, .3);
}
html[data-bs-theme="dark"] #nav-search-input::placeholder { color: #8b949e; }
html[data-bs-theme="dark"] #nav-search-exit:hover { color: #fff; }

/* ---- 4. 主题切换按钮基础样式（桌面/手机两处实例通用） ---- */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navbar-text-col);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  align-self: center;
  position: relative;   /* 让 z-index 生效 */
  z-index: 20;          /* 在 navbar 内部也确保开关位于最上，压过任何兄弟覆盖 */
}
.theme-toggle:hover,
.theme-toggle:focus { color: var(--hover-col); outline: none; }

/* SVG 图标显隐（配合 theme-toggle.js v3 的 is-on class） */
.theme-toggle .theme-icon { display: none; }
.theme-toggle .theme-icon.is-on { display: block; }

/* ---- 5. 按钮位置（v5）：display:contents 单按钮方案 ----
   原理：navbar-extra 注入的按钮在 .container-fluid 外层，order 无法跨容器
   排序（v4 电脑端链接组贴左的根因：压掉 ul ml-auto 后 container-fluid 内部
   再无元素制造空隙）。将 container-fluid 设为 display:contents 后，其子元素
   （站名/汉堡/链接组）直接参与 nav 的 flex 排序，按钮与链接组同流。
   手机端菜单展开依赖 nav 的 flex-wrap（BS4 默认 wrap），不受影响。
   兼容性：Chrome 65+/Firefox 37+/Safari 11.1+（2018 年后浏览器均支持）。
   ⚠ 若 nav.html 为 navbar-expand-lg，把 1200 改成 992。⚠ 改后 Ctrl+F5 强刷。 */

/* container-fluid 退出布局流（其横向 padding 丢失，下一行补回） */
.navbar-custom > .container-fluid { display: contents; }
/* 抬升整个固定导航栏层级：B J 的页头大头像在 DOM 中排在 navbar 之后，
   会画在 fixed 导航栏之上并拦截开关点击（顶端可见、下滑消失即为证据）。
   抬高 navbar 的 z-index，让开关整体位于头像之上。 */
.navbar-custom { padding-left: 0.5rem; padding-right: 0.5rem; z-index: 1050; }

/* 修复：导航栏内的小头像（.avatar-container，绝对定位、居中、顶端可见）
   会盖住导航栏中央区域。做法：容器整体保持"点击穿透"(pointer-events:none)，
   仅让可见的头像图片(.avatar-img)重新可点——这样左侧 About me 等链接（位于
   头像圆框之外）依旧可点，而头像本身可链到 README / 关于页等独立目标，
   与左侧 Home 链接不再功能重复（详见 INSTALL.md v5.11）。 */
.navbar-custom .avatar-container { pointer-events: none; }
.navbar-custom .avatar-container .avatar-img { pointer-events: auto; }

/* 视觉顺序：
   手机端 Home ····· ☯ ☰（开关在汉堡左侧、不进菜单，维持原状）；
   桌面端 Home ····· 链接组 ☯（开关移到链接组右侧=导航栏最右边缘，固定贴边不漂）。
   原理：开关位置由 order 控制，不再随链接数量在中间浮动。 */
.theme-toggle {
  order: 1;
  margin-left: auto;     /* 手机端：吸收空隙，把开关+汉堡推到最右 */
  margin-right: 0.35rem; /* 与链接组/汉堡的间距 */
}
.navbar-toggler { order: 2; }
.navbar-collapse { order: 3; }

/* 桌面端：BS4 给 .navbar-collapse 标了 flex-grow:1（占据全部剩余宽度），
   归零 grow + 改用 margin-left:auto 把"链接组+开关"整体推到最右；
   开关 order:4 排在链接组之后 = 导航栏最右边缘，位置固定不再随链接数漂移。
   手机端 collapse 收起时为 display:none，此媒体查询不生效，手机端维持上面规则。 */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-collapse {
    flex-grow: 0;
    margin-left: auto;   /* 把链接组+开关整体推到最右 */
  }
  .theme-toggle {
    order: 4;            /* 排在链接组之后 = 最右 */
    margin-left: 0.35rem;/* 与链接组的间距 */
  }
}

/* ---- 6. 头像 hover 浮起（真·划过头像才反应）----
   第 5 节已让 .avatar-img 恢复 pointer-events:auto（头像链 README，可点击），
   所以现在能对头像直接做真 hover：鼠标划过头像才放大+提亮+投影，
   既美观也暗示"头像可点"。容器仍 pointer-events:none，放大后也不挡左侧链接。
   若想让整个圆形边框(.avatar-img-border)一起浮起，把下方两个选择器里的
   .avatar-img 换成 .avatar-img-border 即可（边框随划过图片触发，同样不挡点击）。 */
.navbar-custom .avatar-container .avatar-img {
  transition: transform 0.2s ease, filter 0.2s ease;
}
.navbar-custom .avatar-container .avatar-img:hover {
  transform: scale(1.08);
  filter: brightness(1.15) drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
}

/* ---- 7. 缩小导航栏链接间距 ----
   原版桌面端每个链接左右内边距 0.9375rem(≈15px)，相邻链接间隔≈30px。
   覆盖为 0.5rem(≈8px) 让链接更紧凑；数值可自行调整（如 0.625rem=10px）。
   最后一个链接的 padding-right:0（原版 last-child 规则，specificity 更高）
   保持不变，链接组最右边缘仍贴齐，开关间距不受影响。
   若 nav.html 为 navbar-expand-lg，把选择器改为 .navbar-expand-lg… 且断点用 992。 */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}