/* ==================================
   1. 解決背景割裂，實現全屏無縫背景
   ================================== */

/* 強制 Body 使用固定背景圖 */
body {
  /* 請確認這裡的路徑和你的配置文件一致 */
  background: url(/img/blogbg.jpeg) no-repeat center center fixed !important;
  background-size: cover !important;
}

/* 將頂部大圖容器設為透明，讓 Body 背景透出來 */
#page-header {
  background: transparent !important;
}

/* 為了保證頂部文字（標題）清晰，加一層淡淡的黑色遮罩 */
#page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3) !important; /* 0.3代表30%黑度，可自行調整 */
  z-index: -1;
}

/* 消除頂部可能存在的波浪線效果（如果有開啟的話） */
#waves {
  display: none !important;
}


/* ==================================
   2. 實現毛玻璃（Glassmorphism）效果
   ================================== */

/* 首頁文章卡片 */
#recent-posts > .recent-post-item,
/* 側邊欄卡片 */
.aside-content .card-widget,
/* 文章詳情頁、歸檔頁等 */
.layout > div:not(.aside-content) {
  /* 背景顏色：白色，0.7 代表 70% 不透明度 */
  background: rgba(255, 255, 255, 0.7) !important;
  /* 模糊濾鏡：讓背後的圖片模糊 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 邊框圓角優化 */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 暗黑模式適配：背景變黑，保持半透明 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] .aside-content .card-widget,
[data-theme="dark"] .layout > div:not(.aside-content) {
  background: rgba(30, 30, 30, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* 讓固定導航欄也變成毛玻璃 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(6px);
}
[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.6) !important;
}


/* ==================================
   3. 細節優化
   ================================== */

/* 去除頁腳背景，只留文字 */
#footer {
  background: transparent !important;
}
#footer::before {
  background: transparent !important;
}

/* 調整文章標題字體顏色，避免在毛玻璃上太淺（可選） */
#recent-posts > .recent-post-item > .recent-post-info > .article-title {
  font-weight: bold;
}