/* 让背景图覆盖整个页面（包括 Footer） */
body {
  /* 取消 body 原有的背景限制 */
  background: none !important;
  min-height: 100vh; /* 确保 body 高度至少为屏幕高度 */
  position: relative; /* 为子元素定位提供基准 */
}

/* 用伪元素创建全屏背景图，覆盖所有内容下方 */
body::before {
  content: "";
  position: fixed; /* 固定背景，滚动时不重复 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/img/background.jpg'); /* 与主题配置的背景图路径一致 */
  background-size: cover; /* 图片自适应屏幕 */
  background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 不重复平铺 */
  z-index: -1; /* 确保在所有内容下方 */
  /* 可选：添加透明度（0-1） */
  opacity: 0.9;
}

/* 清除 Footer 自身的背景色（若有） */
#footer {
  background: transparent !important; /* 让 Footer 背景透明，显示底层背景图 */
}

/* 导航栏深色模式按钮样式 */
#nav-darkmode-toggle {
  background: transparent;
  border: none;
  color: var(--font-color);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 10px;
  margin: 0 5px;
}


/* 移动端适配 */
@media (max-width: 768px) {
  #nav-darkmode-toggle {
    font-size: 0.9rem;
    margin: 0 5px;
  }
}

/* 浅色模式（默认，无 data-theme 属性） */
body {
  background-color: #fff !important;
  color: #333 !important;
  transition: background-color 0.3s, color 0.3s;
}

/* 深色模式（有 data-theme="dark" 属性） */
[data-theme="dark"] body {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

/* 导航栏样式适配 */
#nav {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
[data-theme="dark"] #nav {
  background-color: rgba(18, 18, 18, 0.8) !important;
}

/* 按钮图标切换动画 */
#nav-darkmode-toggle .fa-sun { display: none; } /* 浅色模式隐藏太阳 */
[data-theme="dark"] #nav-darkmode-toggle .fa-moon { display: none; } /* 深色模式隐藏月亮 */
[data-theme="dark"] #nav-darkmode-toggle .fa-sun { display: inline-block; } /* 深色模式显示太阳 */