/**
 * Color Theme Override - White Background for Content Only
 * Navigation and margins keep original blue theme
 */

/* Main content area - white background */
#main {
    background-color: #ffffff !important;
}

/* All text in main content area - black */
#main,
#main p,
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6,
#main li,
#main span,
#main div,
#main strong,
#main b,
#main i,
#main em,
#main td,
#main th {
    color: #000000 !important;
}

/* Form labels - restore weight and style */
#main label {
    color: #1a202c !important;
    /* Slightly softer than pure black */
    font-weight: 700 !important;
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif !important;
}

/* Links in main content */
#main a {
    color: #0066cc !important;
}

#main a:hover {
    color: #004499 !important;
}

/* Input fields in main content */
#main input,
#main select,
#main textarea {
    color: #000000 !important;
    background-color: #f5f5f5 !important;
    border-color: #cccccc !important;
}

/* Sections within main */
#main section {
    background-color: transparent !important;
}

/* Testimonials slider in main content */
#main .testimonials-slider {
    background-color: transparent !important;
}

#main .testimonial-slide p {
    color: #000000 !important;
}

#main .testimonial-author {
    color: #333333 !important;
}

/* Slider controls for white background */
#main .slider-btn {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #000000 !important;
}

#main .slider-btn:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}

#main .dot {
    background: rgba(0, 0, 0, 0.3) !important;
}

#main .dot:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}

#main .dot.active {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}

/* Buttons in main content */
#main button,
#main .button {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-color: #0066cc !important;
}

#main button:hover,
#main .button:hover {
    background-color: #004499 !important;
    border-color: #004499 !important;
}

/* Submit button specifically */
#main #submit_btn {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

#main #submit_btn:hover {
    background-color: #004499 !important;
}

/* Borders and dividers in main */
#main hr {
    border-bottom-color: #cccccc !important;
}

/* Code blocks in main */
#main code {
    background: #f5f5f5 !important;
    border-color: #cccccc !important;
    color: #000000 !important;
}

/* Blockquotes in main */
#main blockquote {
    border-left-color: #cccccc !important;
    color: #333333 !important;
}

/* Pricing section in main */
#main .section-pricing {
    background-color: transparent !important;
}

#main .pricing-item {
    background-color: #f8f8f8 !important;
    color: #000000 !important;
}

#main .pricing-cost {
    color: #0066cc !important;
}

#main .pricing-comment {
    color: #666666 !important;
}

/* Lists in main */
#main ul li,
#main ol li {
    color: #000000 !important;
}

/* --- Large Screen Adjustments (Font Size & Spacing) --- */

/* For ultra-wide screens (above 1680px) */
@media screen and (min-width: 1681px) {

    body,
    input,
    select,
    textarea {
        font-size: 12.5pt !important;
        /* Balanced between previous 11pt and original 17pt */
        line-height: 1.6 !important;
    }

    #main>.main {
        padding: 2.5rem 3.5rem !important;
        /* Reduced horizontal sprawl */
    }

    #header {
        padding: 3.5rem 4rem 1rem 4rem !important;
    }
}

/* For large desktop screens (1281px to 1680px) */
@media screen and (min-width: 1281px) and (max-width: 1680px) {

    body,
    input,
    select,
    textarea {
        font-size: 11.5pt !important;
        /* Balanced between previous 10pt and original 14pt */
        line-height: 1.6 !important;
    }

    #main>.main {
        padding: 2.5rem 3rem !important;
    }
}

/* Proportional heading adjustments for desktop */
@media screen and (min-width: 1281px) {
    #main h1 {
        font-size: 2.1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
    }

    #main h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1.25rem !important;
    }

    #main h3 {
        font-size: 1.4rem !important;
        margin-bottom: 1rem !important;
    }

    /* Global spacing reduction between sections & spotlights */
    section.main {
        margin-bottom: 0.5rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .spotlight {
        margin-bottom: 0.5rem !important;
    }

    /* Target headers inside sections to reduce gap to content */
    #main .main>header.major {
        margin-bottom: 1rem !important;
    }

    .spotlight .image img {
        width: 12rem !important;
    }

    /* Make the content area wider while keeping it balanced */
    #wrapper,
    #nav .nav-container {
        width: 82em !important;
        max-width: 94% !important;
    }

    #main>.main {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .section-pricing {
        width: 90% !important;
    }
}

/* Adjustments for screens under 1280px (Laptops/Tablets) */
@media screen and (max-width: 1280px) {
    #main h1 {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
    }

    #main h2 {
        font-size: 1.5rem !important;
    }
}

/* Fix for anchor links landing too high (covered by fixed header) */
:target::before {
    content: "";
    display: block;
    height: 110px;
    /* Offset for the fixed header */
    margin: -110px 0 0;
}

/* Modern browsers alternative */
[id] {
    scroll-margin-top: 110px;
}