/* ============================================================
 * ONENAV 主题 · 首页右侧栏 · 最终裁决样式
 * ------------------------------------------------------------
 * 本文件是右侧栏布局的唯一权威来源，在 nav-unified.css 之后加载，
 * 因此优先级最高。之前侧栏样式分散在 style.css / index-custom.css
 * 至少 9 处（宽度出现过 300 / 310 / 318 / 320 / 332px 五个值，
 * 主栏还写着 calc(100% - 320px) / -322px / -332px / -348px），
 * 互相覆盖，导致每次微调都会牵动整页布局。
 *
 * 侧栏最终行为：与主内容区完全同步滚动（普通文档流）
 *   - 宽度固定为 --onenav-side-w，主栏 flex 自适应（不再写死 calc）
 *   - position:static，不吸顶、不钉住 → 向下滚动时与主栏一起走
 *   - overflow:visible，不产生任何内部滚动容器
 *
 * 【两条不要动】
 * 1) 不要给 .side 加 position:sticky + top
 *    sticky 会把侧栏吸顶钉住，表现为"主内容区向下、侧边栏固定不动"，
 *    两者不同步。用户明确要求侧栏跟随主内容区一起滚动。
 * 2) 不要给 .side 加 max-height / overflow-y:auto
 *    一旦侧栏变成自己的滚动容器，鼠标停在侧栏上滚时滚的是侧栏内部、
 *    整页不动，表现为"侧边栏还是可以上下滑动"。
 *
 * 仅作用于 body.theme-onenav（含首页），不影响其它主题与子页面。
 * ============================================================ */

body.theme-onenav {
    --onenav-header-h: 88px;      /* 与 nav-unified.css 的 header 高度保持一致 */
    --onenav-side-w: 320px;       /* 右侧栏宽度（唯一来源） */
    --onenav-side-gap: 16px;      /* 主栏与侧栏间距 */
}

/* ---------- 桌面端：主栏 + 侧栏（flex，宽度不再写死 calc） ---------- */
@media (min-width: 1101px) {
    body.theme-onenav .onenav-content-wrap > .container.layout-main {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: var(--onenav-side-gap) !important;
        overflow: visible !important;
    }

    /* 主栏：自适应剩余宽度，彻底去掉 calc(100% - NNNpx) 的脆弱算法 */
    body.theme-onenav .container.layout-main .main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        order: 1 !important;
        margin-right: 0 !important;
    }

    /* 侧栏：固定宽度 + 与主栏同步滚动（普通文档流，无吸顶、无内部滚动） */
    body.theme-onenav .container.layout-main .side {
        flex: 0 0 var(--onenav-side-w) !important;
        width: var(--onenav-side-w) !important;
        max-width: var(--onenav-side-w) !important;

        /*
         * 关键：这里必须是 static（普通文档流）。
         *
         * 用户要的效果是"侧栏跟主内容区一样，向下滚动时一起走"，
         * 所以不能用 position:sticky（sticky 会把侧栏吸顶钉住，
         * 造成主栏往下、侧栏不动，两者不同步）。
         *
         * 同时也不能设 max-height / overflow-y：一旦侧栏变成自己的滚动
         * 容器，鼠标停在侧栏上滚时滚的是侧栏内部，整页不动。
         *
         * position:static + overflow:visible = 侧栏完全跟随页面滚动，
         * 与主内容区保持同步，下方内容一样能滚动看到。
         */
        position: static !important;
        top: auto !important;
        align-self: flex-start !important;
        z-index: auto !important;

        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        order: 2 !important;
    }

    /* 侧栏卡片间距 */
    body.theme-onenav .container.layout-main .side > .card {
        margin-bottom: 14px;
    }
}

/* ---------- 平板 / 移动端 ≤1100px：沿用原有单栏堆叠布局，仅做收尾 ---------- */
/*
 * 说明：原主题在 ≤1100px 就是"主栏 + 侧栏各自 100% 单栏堆叠"（index-custom.css:3727 起），
 * 这里不要强行改回双栏——896px 宽度下 288px 侧栏会把主栏压到 122px，
 * 那正是之前调整把整页挤坏的原因之一。
 */
@media (max-width: 1100px) {
    /*
     * 注意选择器必须与 index-custom.css:5229 那条一样带上 .onenav-content-wrap >，
     * 否则它的 flex-wrap: nowrap !important 会因为特异性更高而胜出，
     * 造成"主栏和侧栏都是 100% 宽却被挤在同一行、各占一半"。
     */
    body.theme-onenav .onenav-content-wrap > .container.layout-main,
    body.theme-onenav .container.layout-main {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    body.theme-onenav .container.layout-main .main,
    body.theme-onenav .container.layout-main .side {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding-right: 0 !important;
    }

    /* 单栏下不做吸顶，避免与顶栏 / 抽屉菜单冲突 */
    body.theme-onenav .container.layout-main .side {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ---------- 无障碍：减少动态效果时不做平滑滚动 ---------- */
@media (prefers-reduced-motion: reduce) {
    body.theme-onenav .container.layout-main .side {
        scroll-behavior: auto !important;
    }
}