/**
 * Mobile Fixes for TiendaFruta
 * Mejoras de responsive design y compatibilidad móvil
 */

/* ============================================
   MENÚ MÓVIL - MEJORAS GENERALES
   ============================================ */

/* Asegurar que el menú hamburguesa sea visible en móvil */
@media screen and (max-width: 781px) {
    /* Botón hamburguesa */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 12px;
        background-color: var(--wp--preset--color--accent, #e63946);
        color: #fff !important;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        z-index: 99999;
        min-width: 44px; /* Accesibilidad táctil */
        min-height: 44px;
    }

    /* Menú desplegable móvil */
    .wp-block-navigation__responsive-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 99998;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
    }

    /* Items del menú en móvil */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: 0.5rem;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: 100%;
        margin: 0;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item a {
        display: block;
        padding: 12px 16px;
        color: var(--wp--preset--color--primary, #333);
        text-decoration: none;
        border-bottom: 1px solid #eee;
        min-height: 44px; /* Accesibilidad táctil */
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item a:active {
        background-color: #f5f5f5;
    }

    /* Header adaptado para móvil */
    .header-box-upper {
        padding: 10px !important;
    }

    .general-top-header {
        font-size: 0.8rem;
        text-align: center;
    }

    .general-top-header .wp-block-columns {
        flex-wrap: wrap;
    }

    .general-header-middle {
        padding: 15px 10px !important;
    }

    .general-header-middle .menu-group-top {
        flex-wrap: wrap;
        gap: 10px !important;
    }

    .general-header-bottom {
        padding: 10px !important;
    }

    /* Logo centrado en móvil */
    .middle-center {
        order: 1;
        flex: 1 0 100%;
        text-align: center;
        margin: 10px 0;
    }

    /* Iconos WooCommerce en móvil */
    .middle-right {
        order: 2;
        flex: 1 0 auto;
        justify-content: center;
    }

    .woo-icon {
        flex-wrap: nowrap;
        justify-content: center;
    }

    /* Búsqueda en móvil */
    .search-column {
        flex: 1 0 100% !important;
        margin-top: 10px;
    }

    .search-column .wp-block-search {
        width: 100%;
    }

    .search-column .wp-block-search__input {
        width: 100%;
        font-size: 16px; /* Evita zoom en iOS */
    }
}

/* ============================================
   FORMULARIOS - PREVENIR ZOOM EN iOS
   ============================================ */
@media screen and (max-width: 781px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Evita auto-zoom en iOS */
    }
}

/* ============================================
   MEJORAS DE PERFORMANCE MÓVIL
   ============================================ */
@media screen and (max-width: 781px) {
    /* Optimizar animaciones en móvil */
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }

    /* Mejorar scroll en iOS */
    body {
        -webkit-overflow-scrolling: touch;
    }

    /* Reducir complejidad de sombras en móvil */
    .opening-title {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }

    /* Simplificar bordes redondeados en móvil */
    .general-header-middle,
    .general-header-bottom .menu-group {
        border-radius: 0 !important;
    }
}

/* ============================================
   CORRECCIONES ESPECÍFICAS
   ============================================ */

/* Corregir overflow en móvil */
@media screen and (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        min-width: 0;
    }

    /* Espaciado consistente */
    .wp-block-group {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Botones accesibles en móvil */
    .wp-block-button__link,
    button,
    .wp-element-button {
        min-height: 44px;
        padding: 12px 24px;
    }
}

/* ============================================
   LANDSCAPE MÓVIL (HORIZONTAL)
   ============================================ */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .opening-container {
        height: 400vh; /* Más altura en landscape para mejor experiencia */
    }

    .opening-title {
        font-size: 3rem;
    }
}

/* ============================================
   TABLETS (768px - 1024px)
   ============================================ */
@media screen and (min-width: 782px) and (max-width: 1024px) {
    /* Menú compacto en tablets */
    .header-inner-menu .wp-block-navigation__container {
        gap: 15px !important;
        font-size: 0.9rem;
    }

    /* Logo y navegación en tablets */
    .general-header-middle .menu-group-top {
        flex-wrap: nowrap;
    }
}

/* ============================================
   DISPOSITIVOS MUY PEQUEÑOS (< 375px)
   ============================================ */
@media screen and (max-width: 374px) {
    .opening-title {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .opening-subtitle {
        font-size: 1rem;
    }

    .general-header-middle {
        padding: 10px 5px !important;
    }

    .woo-icon .wp-block-column {
        font-size: 0.75rem;
    }
}