/* ============================================
   WIDTH CONSISTENCY FIX FOR ALL SECTIONS
   Ensures hero, footer, FAQ, and contact sections
   have matching widths across all screen sizes
   ============================================ */

/* ============================================
   RESET CONFLICTING STYLES
   Remove different max-widths and padding approaches
   ============================================ */

/* Remove direct max-width from hero-section */
.hero-section {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}

/* Remove direct max-width and padding from footer */
footer,
footer.footer {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove direct max-width from section-card */
.section-card {
    max-width: none !important;
}

/* ============================================
   UNIFIED WIDTH SYSTEM
   All sections use the same width logic
   ============================================ */

/* Create a consistent wrapper for all major sections */
.hero-section,
footer.footer,
.section-card,
.contact-section,
.calculator-box-section {
    max-width: 1440px !important;
    margin: 40px auto !important;
    padding: 40px 48px !important;
    width: calc(100% - 80px) !important;
    box-sizing: border-box !important;
}

/* Special handling for hero to preserve its unique styling */
.hero-section {
    padding: 0 !important; /* Hero has its own internal padding */
    width: calc(100% - 80px) !important;
    height: 600px; /* Preserve hero height */
}

/* Calculator box section alignment - remove padding as it has internal padding in .calculator-box */
.calculator-box-section {
    padding: 0 !important;
    width: calc(100% - 80px) !important;
}

/* Prevent double padding from container inside sections */
.section-card .container,
.contact-section .container,
footer.footer .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* FAQ and Contact sections that use section-card class */
.faq-section.section-card,
.contact-section.section-card {
    /* Already inherits from .section-card above */
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - TABLET (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .hero-section,
    footer.footer,
    .section-card,
    .contact-section,
    .calculator-box-section {
        width: calc(100% - 40px) !important;
        margin: 40px auto !important;
        padding: 40px 32px !important;
    }
    
    .hero-section {
        padding: 0 !important;
        height: 550px;
    }
    
    .calculator-box-section {
        padding: 0 !important;
        width: calc(100% - 40px) !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - MOBILE (480px - 768px)
   ============================================ */
@media (max-width: 768px) {
    .hero-section,
    footer.footer,
    .section-card,
    .contact-section,
    .calculator-box-section {
        width: calc(100% - 32px) !important;
        margin: 30px auto !important;
        padding: 40px 24px !important;
    }
    
    .hero-section {
        padding: 0 !important;
        height: 495px;
    }
    
    .calculator-box-section {
        padding: 0 !important;
        width: calc(100% - 32px) !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - SMALL MOBILE (<480px)
   ============================================ */
@media (max-width: 480px) {
    .hero-section,
    footer.footer,
    .section-card,
    .contact-section,
    .calculator-box-section {
        width: calc(100% - 24px) !important;
        margin: 25px auto !important;
        padding: 32px 16px !important;
    }
    
    .hero-section {
        padding: 0 !important;
        height: 440px;
    }
    
    .calculator-box-section {
        padding: 0 !important;
        width: calc(100% - 24px) !important;
    }
}

/* ============================================
   SPECIAL ADJUSTMENTS
   ============================================ */

/* Slogan and category buttons sections */
.slogan-section,
.category-buttons-section {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
}

@media (max-width: 1024px) {
    .slogan-section,
    .category-buttons-section {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

@media (max-width: 768px) {
    .slogan-section,
    .category-buttons-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 480px) {
    .slogan-section,
    .category-buttons-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Ensure all container divs respect parent padding */
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================
   DEBUG HELPERS
   Uncomment to visualize section boundaries
   ============================================ */
/*
.hero-section {
    border: 2px solid red !important;
}

footer.footer {
    border: 2px solid blue !important;
}

.section-card {
    border: 2px solid green !important;
}

.calculator-box-section {
    border: 2px solid orange !important;
}
*/