/**
 * ASI Togo - Contact Page Fix
 * Same layout as homepage - no sidebar, full width
 */

/* ========================================
   HIDE ALL SIDEBAR ELEMENTS
   ======================================== */

body.page-template-default.page #sidebar,
body.page-template-default.page #sidebar-woo,
body[class*="contact"] #sidebar,
body[class*="contact"] #sidebar-woo,
body[class*="contact"] .sidebar,
body[class*="contact"] #secondary,
body[class*="contact"] aside,
body[class*="contact"] .widget-area,
body[class*="contact"] .sidebar-area {
    display: none !important;
    width: 0 !important;
    flex: 0 !important;
    visibility: hidden !important;
}

/* ========================================
   MAIN CONTENT FULL WIDTH (like homepage)
   ======================================== */

body[class*="contact"] #main-content,
body[class*="contact"] #main-content-woo,
body[class*="contact"] .site-main,
body[class*="contact"] .content-area,
body[class*="contact"] #primary,
body[class*="contact"] main,
body[class*="contact"] article {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}

/* ========================================
   ELEMENTOR FULL WIDTH
   ======================================== */

body[class*="contact"] .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1140px !important;
}

body[class*="contact"] .elementor-section-full_width .elementor-container {
    max-width: 100% !important;
}

/* ========================================
   FORCE ORANGE HEADINGS
   ======================================== */

body[class*="contact"] h1,
body[class*="contact"] h2,
body[class*="contact"] h3,
body[class*="contact"] h4,
body[class*="contact"] h5,
body[class*="contact"] h6,
body[class*="contact"] .elementor-heading-title {
    color: #ff6d12 !important;
}

/* ========================================
   ICONS ORANGE
   ======================================== */

body[class*="contact"] i,
body[class*="contact"] .fa,
body[class*="contact"] .fas,
body[class*="contact"] .far,
body[class*="contact"] .elementor-icon,
body[class*="contact"] .elementor-icon i,
body[class*="contact"] .elementor-icon-box-icon i {
    color: #ff6d12 !important;
}

/* ========================================
   BUTTONS ORANGE
   ======================================== */

body[class*="contact"] .wpcf7-submit,
body[class*="contact"] input[type="submit"],
body[class*="contact"] button[type="submit"],
body[class*="contact"] .elementor-button {
    background-color: #ff6d12 !important;
    border-color: #ff6d12 !important;
    color: #fff !important;
}

body[class*="contact"] .wpcf7-submit:hover,
body[class*="contact"] input[type="submit"]:hover {
    background-color: #e65100 !important;
}

/* ========================================
   GOOGLE MAPS STYLING
   ======================================== */

#asi-map-section {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 60px auto !important;
    padding: 0 20px !important;
}

#asi-map {
    width: 100% !important;
    height: 400px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

#asi-map iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    filter: grayscale(100%) !important;
}

#asi-map iframe:hover {
    filter: grayscale(50%) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 991px) {
    #asi-map-section {
        margin: 40px auto !important;
        padding: 0 15px !important;
    }

    #asi-map {
        height: 350px !important;
    }
}

@media (max-width: 768px) {
    #asi-map {
        height: 280px !important;
        border-radius: 10px !important;
    }
}