/**
 * dark-mode.css
 * 功能：夜间模式样式 + 悬浮按钮组
 * 使用方法：放入子主题 /css/dark-mode.css
 */

/* ═══════════════════════════════════════
   1. 夜间模式：CSS Filter 方案
═══════════════════════════════════════ */

html.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

/* 图片、视频、iframe 二次反转，保持颜色正常 */
html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe,
html.dark-mode canvas,
html.dark-mode svg image {
  filter: invert(1) hue-rotate(180deg);
}

/* 背景图元素：需要二次反转来还原 */
html.dark-mode .post-thumbnail,
html.dark-mode .list-item-thumb,
html.dark-mode [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* ═══════════════════════════════════════
   2. 悬浮按钮组容器
═══════════════════════════════════════ */

.wpt-fab-group {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════════════
   3. 通用按钮样式
═══════════════════════════════════════ */

.wpt-fab-group button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  padding: 0;
  line-height: 1;
}

.wpt-fab-group button:hover {
  transform: scale(1.1);
  background: #555;
}

.wpt-fab-group button:active {
  transform: scale(0.95);
}

/* ── 白天模式下按钮配色 ───────────────── */
html:not(.dark-mode) .wpt-fab-group button {
  background: #222;
  color: #fff;
}

/* ── 夜间模式下按钮配色（因 filter 反色，这里设白色背景） ── */
/* 按钮本身也会被 invert，所以用深色即可显示为浅色 */

/* ═══════════════════════════════════════
   4. 回到顶部按钮：默认隐藏，滚动后显示
═══════════════════════════════════════ */

#wpt-back-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#wpt-back-top.wpt-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   5. SVG 图标尺寸
═══════════════════════════════════════ */

.wpt-fab-group button svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   6. 手机端适配
═══════════════════════════════════════ */

@media (max-width: 768px) {
  .wpt-fab-group {
    right: 16px;
    bottom: 16px;
  }

  .wpt-fab-group button {
    width: 40px;
    height: 40px;
  }
}