/* Mobile Responsiveness Fix for Avada Theme */
/* Enhanced mobile styles to ensure proper responsive behavior */

/* Basic Mobile Viewport and Container Fixes */
@media screen and (max-width: 768px) {
    /* Ensure proper viewport handling */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /* Fix container width issues */
    #wrapper,
    #main,
    .fusion-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Fix column layouts on mobile */
    .fusion-columns .fusion-column {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Fix header on mobile */
    .fusion-header {
        width: 100% !important;
        position: relative !important;
    }

    /* Fix navigation menu on mobile */
    .fusion-mobile-menu-icons {
        display: block !important;
    }

    .fusion-mobile-nav-holder {
        width: 100% !important;
        clear: both;
    }

    /* Fix content area */
    #content {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 15px !important;
    }

    /* Fix sidebar on mobile */
    .sidebar,
    #sidebar {
        width: 100% !important;
        float: none !important;
        margin: 20px 0 0 0 !important;
        clear: both;
    }

    /* Fix images and media */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .fusion-imageframe,
    .fusion-image-wrapper {
        max-width: 100% !important;
        text-align: center;
    }

    /* Fix buttons and forms */
    .fusion-button,
    .button,
    input[type="submit"],
    input[type="button"] {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 12px 20px !important;
        box-sizing: border-box;
    }

    /* Fix form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* Fix tables on mobile */
    .fusion-table,
    table {
        width: 100% !important;
        font-size: 14px !important;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }

    /* Fix social media icons */
    .fusion-social-networks {
        text-align: center !important;
        margin: 20px 0 !important;
    }

    .fusion-social-networks li {
        display: inline-block !important;
        margin: 5px !important;
    }

    /* Fix footer on mobile */
    .fusion-footer {
        text-align: center !important;
        padding: 20px 15px !important;
    }

    .fusion-footer .fusion-column {
        margin-bottom: 30px !important;
    }

    /* Fix typography on mobile */
    h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    h4 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    h5 {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    h6 {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    body,
    p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* Tablet-specific fixes */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .fusion-columns .fusion-column {
        margin-bottom: 20px;
    }

    .fusion-header {
        position: relative;
    }

    #content {
        padding: 20px;
    }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
    /* Even tighter spacing for very small screens */
    #wrapper,
    #main,
    .fusion-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #content {
        padding: 10px !important;
    }

    /* Smaller typography for very small screens */
    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    /* Adjust button sizes */
    .fusion-button,
    .button,
    input[type="submit"],
    input[type="button"] {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}

/* Fix for common Avada mobile issues */
@media screen and (max-width: 768px) {
    /* Fix slider height on mobile */
    .fusion-slider-container,
    .tfs-slider,
    .fusion-slider {
        height: auto !important;
        min-height: 200px !important;
    }

    /* Fix portfolio items on mobile */
    .fusion-portfolio-item {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Fix blog posts on mobile */
    .fusion-blog-layout-medium .fusion-post-content,
    .fusion-blog-layout-large .fusion-post-content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Fix testimonial layout */
    .fusion-testimonial {
        text-align: center !important;
    }

    /* Fix pricing table on mobile */
    .fusion-pricing-table .panel {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Fix accordion and toggles */
    .fusion-accordian .panel-title,
    .fusion-toggle .panel-title {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }

    /* Fix tabs on mobile */
    .fusion-tabs .nav-tabs {
        display: block !important;
    }

    .fusion-tabs .nav-tabs li {
        width: 100% !important;
        margin-bottom: 2px !important;
    }

    /* Fix page title bar */
    .fusion-page-title-bar {
        padding: 15px !important;
        text-align: center !important;
    }

    .fusion-page-title-bar h1 {
        font-size: 20px !important;
        margin: 0 !important;
    }

    /* Fix breadcrumbs */
    .fusion-breadcrumbs {
        font-size: 12px !important;
        margin-top: 10px !important;
    }

    /* Hide elements that don't work well on mobile */
    .fusion-hide-on-mobile {
        display: none !important;
    }

    /* Fix any overflow issues */
    body,
    html {
        overflow-x: hidden !important;
    }

    /* Ensure touch targets are large enough */
    a,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Fix for WooCommerce mobile responsiveness */
@media screen and (max-width: 768px) {
    .woocommerce .products .product {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .woocommerce-page .cart-collaterals .cart_totals {
        width: 100% !important;
        margin-top: 20px !important;
    }

    .woocommerce table.shop_table {
        font-size: 12px !important;
    }

    .woocommerce-page .woocommerce-ordering {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Contact form fixes */
@media screen and (max-width: 768px) {
    .wpcf7-form p {
        margin-bottom: 15px !important;
    }

    .wpcf7-form input,
    .wpcf7-form textarea,
    .wpcf7-form select {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .wpcf7-form .wpcf7-submit {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* Google Maps responsive fix */
@media screen and (max-width: 768px) {
    .fusion-google-map,
    .google-map {
        width: 100% !important;
        height: 250px !important;
    }

    .fusion-google-map iframe,
    .google-map iframe {
        width: 100% !important;
        height: 250px !important;
    }
}

/* Video embeds responsive */
@media screen and (max-width: 768px) {
    .fusion-video,
    .video-shortcode,
    iframe[src*="youtube"],
    iframe[src*="vimeo"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}