/* =========================================================
   Butterfly 主题全局毛玻璃 & 透明美化 (Final Version)
   ========================================================= */

:root {
  --trans-light: rgba(255, 255, 255, 0.5); /* 日间模式透明度 */
  --trans-dark: rgba(25, 25, 25, 0.6);     /* 夜间模式透明度 */
  --border-style: 1px solid rgba(169, 169, 169, 0.5);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* ================= 1. 打通底层透明通道 ================= */
.layout,
#content-inner,
#recent-posts,
.recent-posts,
.recent-post-items {
  background: transparent !important;
}

/* ================= 2. 全局卡片基础美化 ================= */
/* 首页文章卡片 */
#recent-posts .recent-post-item,
.recent-posts .recent-post-item {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  border-radius: 25px !important;
  overflow: hidden !important;
  /* 丢弃 border，使用 inset 内阴影彻底封死亚像素漏色 Bug */
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(169, 169, 169, 0.4) !important;
  
  /* Flexbox 强制拉伸，填满上下边缘 */
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post, div#page, div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

/* ================= 3. 首页文章卡片（图片与缝隙修复） ================= */

/* 文字容器：无限膨胀，挤压一切多余缝隙 */
.recent-post-item .recent-post-info {
  background: transparent !important;
  flex: 1 !important; 

  display: flex !important;
  flex-direction: column !important; /* 让标题、摘要等元素上下垂直排列 */
  justify-content: center !important; /* 核心：垂直方向绝对居中！ */
}

/* 图片外层容器：配合父级拉伸，强制透明 */
.recent-post-item .post_cover {
  align-self: stretch !important; 
  height: 100% !important; 
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* 仅在电脑端限制图片宽度为 45%，防止手机端排版崩塌 */
@media screen and (min-width: 768px) {
  .recent-post-item .post_cover {
    width: 45% !important; 
  }
}

/* A 标签链接层：完全撑开 */
.recent-post-item .post_cover a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 图片本身：完美填充，干掉 SVG 矢量图自带底色 */
.recent-post-item .post_cover img.post-bg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important; 
}

/* 封死左右排版时的中间“三八线”亚像素缝隙 */
.recent-post-item .post_cover.left { margin-right: -1px !important; }
.recent-post-item .post_cover.right { margin-left: -1px !important; margin-right: 0 !important; }

/* ================= 4. 黑夜模式 (Dark Mode) ================= */
/* 修复了之前带有 > 符号导致黑夜模式失效的 Bug */
[data-theme="dark"] #recent-posts .recent-post-item,
[data-theme="dark"] .recent-posts .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark) !important;
}

/* 导航栏黑夜模式 */
[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 页脚页头遮罩透明 */
[data-theme="dark"] #footer::before,
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* ================= 5. 阅读模式 (Read Mode) ================= */
.read-mode #aside-content .card-widget,
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

[data-theme="dark"] .read-mode #aside-content .card-widget,
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}


/* 1. 日间模式：强制使用深色（或主题色），并稍微加粗增加辨识度 */
#aside-content .card-tag-cloud a {
  color: #4e5958 !important; /* 强制变成深灰色，如果喜欢纯黑可以换成 #000 */ 
  text-shadow: 0 1px 2px rgba(138, 146, 145, 0.8); /* 加一圈发光白边，防止被深色壁纸吞噬 */
}

/* 2. 鼠标悬停时的效果（可选，保持一点交互感） */
#aside-content .card-tag-cloud a:hover {
  color: #49b1f5 !important; /* Butterfly 经典的蓝色，你也可以换成自己喜欢的主题色 */
}


/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}