/* Shared site background shell.
 *
 * 默认（窄屏）：body 整页渐变；.background-gradient 隐藏。
 * 桌面（≥768px）：body 透明 + fixed 视口渐变层。
 *
 * 例外：仅首页（body.home-page）桌面端可在页面 CSS 中关闭渐变、改用纯色（见 index.html）。
 *
 * html 使用 --site-background-fallback 兜底 overscroll（由 JS 从 body 同步 token）。
 */

html.site-fixed-background,
body.site-background-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

html.site-fixed-background {
    background-color: var(--site-background-fallback, #333);
    background-image: none;
}

body.site-background-shell {
    --bs-body-bg: transparent;
    background-color: var(--site-background-underlay, #6f6f6f) !important;
    background-image: var(--site-background-image, var(--primary-gradient, linear-gradient(135deg, #333 0%, #ddd 100%))) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
    position: relative;
}

body.site-background-shell .background-gradient {
    display: none !important;
}

body.site-background-shell > *:not(.background-gradient):not(.nav-toggle):not(.nav-menu):not(.lang-switch):not(#floating-terms-button):not(#modal-container):not(.modal-overlay) {
    position: relative;
    z-index: 1;
}

body.site-background-shell .nav-menu,
body.site-background-shell .modal {
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    height: auto;
}

body.site-background-shell #modal-container {
    position: relative;
    z-index: 1200;
    isolation: isolate;
}

@media (min-width: 768px) {
    body.site-background-shell {
        background-image: none !important;
        background-color: transparent !important;
    }

    body.site-background-shell .background-gradient {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        min-height: 100lvh;
        min-height: -webkit-fill-available;
        z-index: 0;
        pointer-events: none;
        background-color: var(--site-background-underlay, #6f6f6f);
        background-image: var(--site-background-image, var(--primary-gradient, linear-gradient(135deg, #333 0%, #ddd 100%)));
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        isolation: isolate;
        contain: paint;
    }
}