/* Mobile Responsive Fixes for EVERTONE Website */

/* Base mobile optimizations */
@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Fix container widths */
    [data-mesh-id],
    [id^="comp-"] {
        max-width: 100% !important;
    }

    /* Images should not overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix text containers */
    [data-mesh-id] > div,
    [id^="comp-"] > div {
        max-width: 100% !important;
    }

    /* Adjust padding for mobile */
    .container,
    [data-mesh-id*="Container"],
    [id*="container"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix hamburger button position */
    #hamburger-button-container {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 999998 !important;
    }

    /* Ensure hamburger button is visible */
    #hamburger-button-container a {
        background: rgba(0, 0, 0, 0.5) !important;
        padding: 10px !important;
        border-radius: 5px !important;
        display: block !important;
    }

    /* Fix any fixed-width elements */
    [style*="width:"] {
        max-width: 100% !important;
    }

    /* Responsive font sizes */
    h1, .font_0 {
        font-size: 32px !important;
    }

    h2, .font_2 {
        font-size: 28px !important;
    }

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

    p, .font_7, .font_8 {
        font-size: 16px !important;
        line-height: 1.6em !important;
    }

    /* Fix buttons */
    button, .button, [data-testid*="button"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
    }

    /* Fix forms */
    input, textarea, select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    /* Grid layouts should stack on mobile */
    [data-mesh-id*="Grid"],
    .grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Fix video embeds */
    iframe {
        max-width: 100% !important;
    }
}

/* Extra small devices (iPhone SE, small Androids) */
@media (max-width: 375px) {
    h1, .font_0 {
        font-size: 28px !important;
    }

    h2, .font_2 {
        font-size: 24px !important;
    }

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

    p, .font_7, .font_8 {
        font-size: 14px !important;
    }

    /* Tighter padding for small screens */
    .container,
    [data-mesh-id*="Container"],
    [id*="container"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    [data-mesh-id],
    [id^="comp-"] {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Hamburger menu should be smaller in landscape */
    #hamburger-menu-container {
        max-height: 70vh !important;
        padding: 20px !important;
    }

    #hamburger-menu-container a {
        font-size: 18px !important;
        padding: 12px 10px !important;
    }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
    /* Make all interactive elements at least 44x44px (Apple guideline) */
    a, button, [role="button"], input[type="submit"], input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
    }
}

/* Fix specific Wix components that might overflow */
@media (max-width: 768px) {
    /* Wix image containers */
    [data-image-info],
    [data-bg-type="image"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Wix columns */
    [data-mesh-id*="Column"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Wix text boxes */
    [data-mesh-id*="Text"],
    [data-mesh-id*="RichText"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Wix sections */
    [data-mesh-id*="Section"] {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Fix any absolute positioning on mobile */
    [style*="position: absolute"] {
        position: relative !important;
    }
}