/* Mobile Menu Fix CSS - Minimal intervention for both platforms */

/* Ensure checkbox is hidden but functional on all mobile devices */
@media screen and (max-width: 768px) {
    .menu-toggle-checkbox {
        opacity: 0 !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        overflow: hidden !important;
    }

    .menu-toggle-label {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        touch-action: manipulation !important;
    }
}

/* iOS-specific enhancements */
@supports (-webkit-touch-callout: none) {
    .menu-toggle-label {
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 999999 !important;
    }

    .nav-menu {
        -webkit-overflow-scrolling: touch !important;
        -webkit-transform: translateZ(0) !important;
    }

    /* Force display when checkbox is checked on iOS */
    .menu-toggle-checkbox:checked ~ .nav-menu,
    .nav-menu.ios-show {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: calc(100vh - 120px) !important;
        max-height: calc(100vh - 120px) !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 60px !important;
    }

    /* iOS fallback button */
    #ios-fallback-btn {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
}

/* Android-specific enhancements */
@media screen and (max-width: 768px) {
    /* Ensure Android respects the checkbox state */
    .menu-toggle-checkbox:checked ~ .nav-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Ensure menu is hidden when unchecked */
    .menu-toggle-checkbox:not(:checked) ~ .nav-menu {
        display: none !important;
    }
}

/* Common mobile enhancements */
@media screen and (max-width: 768px) {
    .nav-menu {
        /* Ensure smooth scrolling on all mobile devices */
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Touch-friendly sizes */
    .nav-menu .nav-item,
    .nav-menu button,
    .nav-menu a {
        min-height: 44px !important;
    }

    /* Don't prevent body scroll on iOS - causes issues */
}

/* Fallback class for manual control */
.menu-force-show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}