/*
 *  device-toggle.css — 设备切换样式
 *  .mobile-menu / .desktop-menu / .mobile-content / .desktop-content
 *  + 响应式媒体查询
 */

.mobile-menu {
    display: none;
}

.mobile-content {
    display: none;
}

.desktop-menu {
    display: none;
}

@media (max-width: 768px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    body > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    header {
        margin: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    .mobile-menu,
    .header-menu,
    .header-menu-2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    main {
        margin-top: var(--space-6);
    }

    .ks100-nav,
    nav.desktop-nav,
    .desktop-menu,
    header > nav {
        display: none !important;
    }

    .mobile-menu {
        display: block;
        width: 100%;
    }

    .mobile-content {
        display: block;
    }

    .desktop-content {
        display: none;
    }

    /* page-bg-gradient 是 fixed 全屏背景层，移动端须隐藏，否则会盖住正文。
       hex-stage 已在 quick-start.css 的移动端媒体查询中单独控制（显示为顶部装饰带）。 */
    html body .page-bg-gradient {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
}

@media (min-width: 769px) {
    .desktop-menu,
    .ks100-nav {
        display: flex;
    }

    .desktop-content {
        display: block;
    }

    .mobile-content,
    .mobile-menu,
    #popup-menu,
    #menu-overlay {
        display: none !important;
    }
}