/* ===== LAYOUT FIXES - GENERAL AUTHORITY FOR SUPERVISION & INSPECTION ===== */

/* ===== CRITICAL LAYOUT FIXES ===== */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* ===== REMOVE GAPS BETWEEN FIXED NAVBAR AND CONTENT ===== */
main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ===== PAGE HEADERS FULL WIDTH WITH NO GAPS ===== */
.faq-page-header,
.government-banner,
.page-header,
.hero-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* ===== FAQ PAGE HEADER FIXES ===== */
.faq-page-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    padding: 4rem 0 3rem !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

/* ===== ABOUT PAGE BANNER FIXES ===== */
.government-banner {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    padding: 4rem 0 3rem !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

/* ===== CONTAINER SYSTEM OVERRIDE ===== */
.container {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important;
}

.container-fluid {
    max-width: 98% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ===== GRID SYSTEM FIXES ===== */
.row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: 100% !important;
    padding-top: 2rem;
}

[class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ===== CONTENT WIDTH CONTROL ===== */
.main-content,
.content-wrapper {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

.content-narrow {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

.content-wide {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

/* ===== PAGE SPECIFIC LAYOUTS ===== */
/* Home Page */
.home-hero {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home-content {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

/* About Page */
.about-content {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

/* Contact Page */
.contact-content {
    max-width: 95% !important;
    margin: 0 auto !important;
}

.contact-form {
    max-width: 80% !important;
    margin: 0 auto !important;
}

/* FAQ Page */
.faq-content {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

/* News & Announcements */
.news-content,
.announcements-content {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

/* ===== REMOVE MARGINS AND GAPS ===== */
.faq-content .container:first-child {
    margin-top: 0 !important;
    padding-top: 2rem !important;
}

.about-content .container:first-child {
    margin-top: 0 !important;
    padding-top: 2rem !important;
}

/* ===== FINAL GAP ELIMINATION ===== */
.faq-page-header,
.government-banner {
    border-top: none !important;
    outline: none !important;
}

.faq-page-header::before,
.faq-page-header::after,
.government-banner::before,
.government-banner::after {
    content: none !important;
    display: none !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 1200px) {
    .container {
        max-width: 95% !important;
    }

    .content-wide {
        max-width: 95% !important;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px !important;
    }

    .content-wide {
        max-width: 720px !important;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .content-wrapper,
    .content-narrow,
    .content-wide {
        max-width: 100% !important;
        padding: 1.5rem 0 !important;
    }

    .faq-page-header,
    .government-banner {
        padding: 3rem 0 2rem !important;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .faq-page-header,
    .government-banner {
        padding: 2.5rem 0 1.5rem !important;
    }
}

/* ===== FORCE OVERFLOW HIDDEN ===== */
* {
    box-sizing: border-box !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* ===== NAVBAR FIXES ===== */
.navbar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* ===== FOOTER FIXES ===== */
.footer {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* ===== MAIN CONTENT FIXES ===== */
main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ===== UTILITY CLASSES ===== */
.w-100 {
    width: 100% !important;
}

.max-w-100 {
    max-width: 100% !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}