/* ============================================================
   手机端头部导航吸顶（仅作用于 ≤1000px）
   ------------------------------------------------------------
   背景：原主题在 ≤1000px 用 #mobile_header 作为移动端头部，
        但它是普通文档流元素，向下滚动后会被卷走；桌面头部的
        固定逻辑依赖 body.header_fixed 类，移动端并未启用。

   做法：
     1) 把 #mobile_header 固定到视口顶部；
     2) 头部脱离文档流后，用等高占位撑住 .headerFixed，
        避免页面内容整体上移（实测头部高度恒为 62px，
        JS 在图片加载后会写入精确值覆盖兜底值）；
     3) 滚动后加一层淡投影，区分头部与内容。

   注意：
     - z-index 取 9990，低于移动端弹层（.fixed_nav_pop_center
       等为 10010），保证菜单/搜索弹层始终盖住头部；
     - 背景色沿用主题变量 --ThemesHeaderBgColor，
       后台改头部配色时吸顶样式自动跟随；
     - 桌面端（>1000px）完全不受影响。
   ============================================================ */

@media screen and (max-width: 1000px) {

    body #mobile_header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9990;
        background-color: var(--ThemesHeaderBgColor, #ffffff);
        transition: box-shadow .25s ease;
    }

    /* 等高占位，防止吸顶后内容跳动 */
    body #header .headerFixed {
        height: var(--ym-mobile-header-h, 62px);
    }

    /* 滚动后投影 */
    body #mobile_header.ym-scrolled {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    }

    /* 修复移动端二级菜单弹层无法显示：
       主题 CSS 中 .fixed_nav_pop_sub_center { display:none } 在顶层始终生效，
       导致点击一级菜单的下拉按钮后，虽然加了 .active，但弹层仍为 display:none。
       在移动端媒体查询内覆盖 .active 状态为 display:block。 */
    .fixed_nav_pop_sub_center.active {
        display: block;
    }
}