/* ======================================
   全站毛玻璃 (Glassmorphism)
   参考: https://www.luotian.cyou/post/custom-beautify.html
   通过注入 custom.css 生效: _config.butterfly.yml -> inject.head
   ====================================== */

/* ---------- 明亮模式毛玻璃 ---------- */
#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.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(138, 138, 138, 0.15);
  transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

/* 分页按钮 hover */
#body-wrap #pagination .page-number:not(.current):hover,
#body-wrap #pagination .extend:hover {
  background: #ff7142d2;
  border-color: #ff7142d2;
  color: #fff;
}

/* 导航栏固定时背景半透明 */
#nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- 夜间模式毛玻璃 ---------- */
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.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* ---------- Mermaid 图表透明 ---------- */
#article-container .mermaid,
#article-container .mermaid svg,
.mermaid-wrap {
  background: transparent !important;
  fill: transparent !important;
}

/* ---------- 页脚透明 ---------- */
#footer,
#footer::before {
  background: transparent !important;
}
#footer a,
#footer .copyright {
  color: inherit;
}