/* 专门修复灰色区域问题的CSS文件 */

/* 强制所有可能的元素使用正确的背景色 */
html {
    background-color: #f8f8f8 !important;
    background-image: none !important;
    height: 100% !important;
    overflow-x: hidden !important;
    /* 防止橡皮筋效果 */
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
}

body {
    background-color: #f8f8f8 !important;
    background-image: none !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    /* 防止橡皮筋效果 */
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 首页特殊处理 */
.home-page {
    background-color: #f8f8f8 !important;
    background-image: none !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* 主要容器 */
.home-page main {
    background-color: #f8f8f8 !important;
    background-image: none !important;
    min-height: 100vh !important;
}

/* Hero区域 */
.hero-section {
    background-color: #f8f8f8 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 创建一个全屏的背景保护层 */
.home-page::before {
    content: '' !important;
    position: fixed !important;
    top: -100vh !important;
    left: 0 !important;
    width: 100% !important;
    height: 300vh !important;
    background-color: #f8f8f8 !important;
    background-image: none !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}

/* 额外的保护层 */
.home-page::after {
    content: '' !important;
    position: fixed !important;
    top: -200vh !important;
    left: 0 !important;
    width: 100% !important;
    height: 500vh !important;
    background-color: #f8f8f8 !important;
    background-image: none !important;
    z-index: -9998 !important;
    pointer-events: none !important;
}

/* 移动端特殊处理 */
@media (max-width: 768px) {
    html, body {
        background-color: #f8f8f8 !important;
        background-image: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .home-page {
        background-color: #f8f8f8 !important;
        background-image: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
    }
    
    /* 移动端额外保护 */
    .home-page::before {
        height: 400vh !important;
        top: -150vh !important;
    }
    
    .home-page::after {
        height: 600vh !important;
        top: -250vh !important;
    }
}

/* iOS Safari 特殊处理 */
@supports (-webkit-touch-callout: none) {
    html, body {
        background-color: #f8f8f8 !important;
        background-image: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .home-page {
        background-color: #f8f8f8 !important;
        background-image: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
    }
}

/* 强制重置任何可能的transform */
.home-page .hero-background,
.home-page .hero-content {
    transform: none !important;
}

/* 确保所有容器都有背景 */
.container,
.header-content,
.hero-content,
.featured-readers-section {
    background-color: transparent !important;
}

/* 调试模式 - 可以通过添加debug类来启用 */
.debug-gray-area html {
    background-color: red !important;
}

.debug-gray-area body {
    background-color: blue !important;
}

.debug-gray-area .home-page {
    background-color: green !important;
}

.debug-gray-area .hero-section {
    background-color: yellow !important;
}

.debug-gray-area main {
    background-color: orange !important;
}