/* =======================================================
   全局毛玻璃半透明效果 (Glassmorphism)
   ======================================================= */

/* 1. 让文章列表、文章页、侧边栏、分类标签页的背景变半透明 */
/* 1. 让所有类型的页面背景全部变半透明 */
#recent-posts > .recent-post-item,
.card-widget,
#post,
#page,
#archive,
#tag,
#category,
.layout > div:first-child:not(.recent-posts) {
  background: rgba(255, 255, 255, 0.7) !important; /* 0.7是透明度，可自行修改 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 15px !important;
  border: none !important;
}

/* 2. 让顶部导航栏往下滚的时候也变成半透明 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 3. 让最底部的页脚也变透明，融入背景 */
#footer {
  background: transparent !important;
}

/* 4. 黑夜模式下的半透明颜色适配 (如果你的博客开启了黑夜模式) */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] .card-widget,
[data-theme="dark"] #post,
[data-theme="dark"] #page,
[data-theme="dark"] #archive,
[data-theme="dark"] #tag,
[data-theme="dark"] #category,
[data-theme="dark"] #page-header.nav-fixed #nav {
  /* 黑夜模式下用黑灰色的半透明 */
  background: rgba(30, 30, 30, 0.6) !important;
}
/* =======================================================
   导航栏当前页面高亮 (下边框)
   ======================================================= */
#nav .menus_items .menus_item > a.active {
  /* 底部边框：3px厚度，实线，颜色为主题蓝（你可以自己改颜色） */
  border-bottom: 3px solid #ff7a85 !important;
  /* 让边框和文字稍微拉开一点距离，看起来更透气 */
  padding-bottom: 5px !important;
  /* 可选：让当前页面的文字也变成蓝色，更加醒目 */
  color: #49b1f5 !important;
}

/* 黑夜模式下的适配（如果你启用了黑夜模式） */
[data-theme="dark"] #nav .menus_items .menus_item > a.active {
  border-bottom: 3px solid #ff7242 !important; /* 黑夜模式下变成温暖的橘红色 */
  color: #ff7242 !important;
}

.colorful-particle {
  position: fixed;
  /* 把原来的 10px 改大，比如 15px 或 20px */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  animation: particle-burst 1s ease-out forwards;
}

@keyframes particle-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
}

/* =======================================================
   顶部横幅 (Banner) 毛玻璃效果 (暗色突出标题版)
   ======================================================= */
/* 让整个顶部区域变成深色半透明的毛玻璃，完美突出白色标题 */
#page-header {
  /* rgba(0,0,0)代表纯黑，0.5代表50%的透明度。如果你觉得不够黑，可以把0.5改成0.6或0.7 */
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 去掉主题默认的暗色遮罩，只保留我们自定义的高级毛玻璃 */
#page-header::before {
  background: transparent !important;
}