/* 
 * Lite Mode CSS - Phase 13.1
 * Simplified styling for low-bandwidth connections (< 2G)
 */

body.lite-mode {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: serif !important;
    /* Better for reading on old devices */
}

/* Disable gradients and complex backgrounds */
body.lite-mode .ultra-modern-header,
body.lite-mode .sp-hero,
body.lite-mode .footer-wave,
body.lite-mode div[style*="background"],
body.lite-mode section[style*="background"] {
    background: none !important;
    background-image: none !important;
    background-color: #f0f0f0 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
}

/* Hide non-essential images and large SVG decorations */
body.lite-mode img:not(.brand-logo img):not(.article-figure),
body.lite-mode .footer-wave svg,
body.lite-mode .sp-hero-pattern,
body.lite-mode video {
    display: none !important;
}

/* Simplify text and layout */
body.lite-mode h1,
body.lite-mode h2,
body.lite-mode h3 {
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: bold !important;
}

body.lite-mode .card,
body.lite-mode .feature-box,
body.lite-mode .sp-step {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    margin-bottom: 20px;
}

body.lite-mode a {
    text-decoration: underline !important;
    color: #0000EE !important;
}

/* Simplify buttons */
body.lite-mode .btn,
body.lite-mode button {
    background: #ddd !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 2px !important;
    font-weight: bold;
    text-transform: uppercase;
}