/**
 * 悼念模式 - 全站灰度 + 提示条
 *
 * 灰度：通过 CSS filter: grayscale() 应用到 body，
 * 排除元素用 filter: none 恢复原色。
 * 提示条：固定在页面顶部或底部的悼念文字横幅。
 */

/* ── 灰度生效态 ──
   不用 body{filter:grayscale()}，因为 filter 会让所有 fixed 后代（侧栏、顶栏）
   相对于 body 定位，导致滚动时侧栏断裂/顶栏错位。
   改用 body::after 全屏 backdrop-filter 层过滤整个视口，fixed 元素仍相对于 viewport。 */
body.hezi-mourning::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1060;
    pointer-events: none;
    backdrop-filter: grayscale(var(--hezi-mourning-pct, 100%));
    -webkit-backdrop-filter: grayscale(var(--hezi-mourning-pct, 100%));
    background: transparent;
}

/* ── 排除元素：提升到灰度层之上，保持原色 ── */
body.hezi-mourning .hezi-mourning-exclude {
    position: relative;
    z-index: 1061 !important;
}

/* ── 提示条 ──
   高度由 --hezi-bar-h 变量统一控制（= padding×2 + font-size×line-height），
   所有 fixed 元素的偏移和 body padding 均引用此变量，确保零缝隙。 */
.hezi-mourning-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1070;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 16px;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    /* 提示条在灰度层之上，无需 filter:none 也保持原色 */
}

.hezi-mourning-bar--top {
    top: 0;
}

.hezi-mourning-bar--bottom {
    bottom: 0;
}

/* 统一高度变量：桌面端 37px（8+14*1.5+8），移动端 30px（6+12*1.5+6）
   注意：body padding-top 不在此处硬编码（不知道子比 header 精确高度），
   由 JS 在 activate() 时动态读取 .header 实际高度 + --hezi-bar-h 后注入。
   此处仅定义提示条自身高度变量，供 header/aside 的 top 引用。 */
body.hezi-mourning-bar-top {
    --hezi-bar-h: 37px;
}

/* 提示条在底部时，为页脚留出空间 */
body.hezi-mourning-bar-bottom {
    --hezi-bar-h: 37px;
    padding-bottom: var(--hezi-bar-h) !important;
}

/* 顶部栏随提示条下移——紧贴提示条底部，无间隙 */
body.hezi-mourning-bar-top .top-navbar,
body.hezi-mourning-bar-top .header {
    top: var(--hezi-bar-h) !important;
}
/* 侧栏同步下移 + 高度收减，播放器不被裁切 */
body.hezi-mourning-bar-top .hezi-aside {
    top: var(--hezi-bar-h) !important;
    height: calc(100vh - var(--hezi-bar-h)) !important;
}
/* 底部提示条时侧栏收减高度 */
body.hezi-mourning-bar-bottom .hezi-aside {
    height: calc(100vh - var(--hezi-bar-h)) !important;
}

/* ── 移动端适配 ── */
@media (max-width: 768px) {
    .hezi-mourning-bar {
        font-size: 12px;
        padding: 6px 12px;
        letter-spacing: 1px;
    }

    /* 移动端提示条高度 = 6+12*1.5+6 = 30px */
    body.hezi-mourning-bar-top {
        --hezi-bar-h: 30px;
    }

    body.hezi-mourning-bar-bottom {
        --hezi-bar-h: 30px;
        padding-bottom: var(--hezi-bar-h) !important;
    }

    body.hezi-mourning-bar-top .top-navbar,
    body.hezi-mourning-bar-top .header {
        top: var(--hezi-bar-h) !important;
    }
    /* 移动端侧栏高度同步收减 */
    body.hezi-mourning-bar-top .hezi-aside {
        top: var(--hezi-bar-h) !important;
        height: calc(100vh - var(--hezi-bar-h)) !important;
    }
    body.hezi-mourning-bar-bottom .hezi-aside {
        height: calc(100vh - var(--hezi-bar-h)) !important;
    }
}