/* ============================================
   WWWN Responsive Fix Overrides
   This file MUST be loaded LAST
   Forces responsive behavior on all pages
   ============================================ */

/* Force viewport respect */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Remove ALL fixed widths */
body,
body.page-inner,
html body {
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

#Wrapper,
.layout-full-width #Wrapper,
body #Wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

#Content,
body #Content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
}

/* Container fixes */
.container,
.section_wrapper,
.container-fluid,
#Content .container,
#Content .section_wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Section full width */
.section,
#Content .section,
.mcb-section {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Wrap elements */
.wrap,
.mcb-wrap,
.mcb-wrap-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Row and column system */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

[class*="col-"] {
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
}

/* Images - exclude navigation logos */
img:not(.nav-logo img):not(.nav-brand img) {
    max-width: 100% !important;
    height: auto !important;
}

/* Preserve navigation logo sizes */
.nav-logo img,
.nav-brand img,
.nav-logo,
.main-nav img {
    max-width: none !important;
    width: auto !important;
    height: 55px !important;
}

/* Footer logo */
.footer-logo-sm {
    height: 80px !important;
    width: auto !important;
    max-width: none !important;
}

@media screen and (max-width: 768px) {
    .nav-logo img,
    .nav-brand img,
    .nav-logo,
    .main-nav img {
        height: 45px !important;
    }
    
    .footer-logo-sm {
        height: 60px !important;
    }
}

/* Hide legacy side panel */
#Side_slide,
#body_overlay {
    display: none !important;
}

/* ============================================
   TABLET BREAKPOINT (992px)
   ============================================ */
@media screen and (max-width: 992px) {
    .container,
    .section_wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Stack all medium columns */
    .col-md-1, .col-md-2, .col-md-3, .col-md-4,
    .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Legacy column classes */
    .column,
    .columns,
    .one,
    .one-second,
    .one-third,
    .two-third,
    .one-fourth,
    .two-fourth,
    .three-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one-sixth {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Page hero adjustments */
    .page-hero {
        padding: 140px 0 70px !important;
    }
    
    .page-hero-title {
        font-size: 2rem !important;
    }
    
    /* Officials section */
    .official-card {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .official-card.reversed {
        direction: ltr !important;
    }
    
    .official-image {
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .official-content {
        text-align: center !important;
    }
    
    /* Story and expand sections */
    .story-grid,
    .expand-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .story-image,
    .expand-image {
        max-width: 500px !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media screen and (max-width: 768px) {
    .container,
    .section_wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Page hero */
    .page-hero {
        padding: 120px 0 50px !important;
    }
    
    .page-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .page-hero-desc {
        font-size: 0.95rem !important;
    }
    
    .page-hero-tag {
        font-size: 0.75rem !important;
    }
    
    /* Section padding */
    .section[style*="padding-top:280px"] {
        padding-top: 140px !important;
    }
    
    .section[style*="padding-top:120px"] {
        padding-top: 60px !important;
    }
    
    .section[style*="padding-top:80px"] {
        padding-top: 40px !important;
    }
    
    .section[style*="padding-bottom:120px"] {
        padding-bottom: 60px !important;
    }
    
    .section[style*="padding-bottom:80px"] {
        padding-bottom: 40px !important;
    }
    
    /* Inline padding overrides */
    [style*="padding-left:6%"],
    [style*="padding-left:4%"] {
        padding-left: 15px !important;
    }
    
    [style*="padding-right:6%"],
    [style*="padding-right:4%"] {
        padding-right: 15px !important;
    }
    
    [style*="padding:0 3%"],
    [style*="padding:2@ 3%"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Contact cards */
    .contact-cards-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .contact-cards-section {
        margin-top: -30px !important;
    }
    
    /* Form adjustments */
    .modern-form .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .contact-form-wrapper {
        padding: 25px 15px !important;
    }
    
    /* Typography */
    h1, .h1 {
        font-size: 1.75rem !important;
    }
    
    h2, .h2,
    .section-title {
        font-size: 1.5rem !important;
    }
    
    h3, .h3 {
        font-size: 1.25rem !important;
    }
    
    /* CTA section */
    .cta-content h2 {
        font-size: 1.5rem !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .cta-buttons .btn {
        width: 100% !important;
    }
    
    /* Expand stats */
    .expand-stats {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Officials */
    .official-name {
        font-size: 1.5rem !important;
    }
    
    .official-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Footer */
    .footer-contact-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (576px)
   ============================================ */
@media screen and (max-width: 576px) {
    .container,
    .section_wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Page hero */
    .page-hero {
        padding: 110px 0 40px !important;
    }
    
    .page-hero-title {
        font-size: 1.5rem !important;
    }
    
    /* Section padding */
    .section[style*="padding-top:280px"] {
        padding-top: 120px !important;
    }
    
    /* About grid */
    .about-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Story badge */
    .story-badge {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 15px !important;
        display: inline-block !important;
    }
    
    /* Contact card */
    .contact-card {
        padding: 25px 15px !important;
    }
    
    /* Map */
    .map-wrapper iframe {
        height: 280px !important;
    }
    
    /* Footer */
    .footer-logo-sm {
        height: 60px !important;
    }
    
    .footer-brand-center h4 {
        font-size: 1.1rem !important;
    }
    
    /* Buttons */
    .btn,
    .button,
    .btn-lg {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (400px)
   ============================================ */
@media screen and (max-width: 400px) {
    .page-hero-title {
        font-size: 1.3rem !important;
    }
    
    h2, .h2,
    .section-title {
        font-size: 1.25rem !important;
    }
    
    .official-name {
        font-size: 1.2rem !important;
    }
}