/*
Theme Name: Konte Child
Description: Child theme for Konte
Template: konte
Version: 1.0.0
Text Domain: konte-child
*/

/* ========================================
   OCULTAR MENÚ FULLSCREEN PERMANENTEMENTE
   ======================================== */
#hamburger-fullscreen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========================================
   ESTILOS PARA MENÚ MÓVIL EN DESKTOP
   ======================================== */

/* ========================================
   CORREGIR MENÚ MÓVIL PARA DESKTOP
   ======================================== */

/* ANULAR LA REGLA DEL TEMA PADRE QUE OCULTA EL MENÚ EN DESKTOP */
@media (min-width: 1200px) {
    .mobile-menu-panel {
        display: block !important;
    }
}

/* Resetear estilos del offscreen-panel del tema padre */
#mobile-menu.offscreen-panel,
#mobile-menu.mobile-menu-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform 0.3s ease-in-out !important;
}

/* Estado cerrado del menú */
#mobile-menu:not(.open):not(.active) {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Estado abierto del menú */
#mobile-menu.open,
#mobile-menu.active,
#mobile-menu.open.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 0 !important;
}

/* Estilos específicos para desktop */
@media (min-width: 768px) {
    #mobile-menu.offscreen-panel,
    #mobile-menu.mobile-menu-panel {
        width: 400px !important; /* Ancho fijo para desktop */
        right: auto !important;
        left: 0 !important;
    }
    
    /* Estado cerrado en desktop */
    #mobile-menu:not(.open):not(.active) {
        left: -400px !important;
        transform: translateX(0) !important;
    }
    
    /* Estado abierto en desktop */
    #mobile-menu.open,
    #mobile-menu.active,
    #mobile-menu.open.active {
        left: 0 !important;
        transform: translateX(0) !important;
    }
}

/* Forzar que el panel interno sea visible */
#mobile-menu .panel {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    overflow-y: auto !important;
}

/* Overlay oscuro */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

/* Mostrar overlay cuando el menú está abierto */
body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}

/* Prevenir scroll del body cuando el menú está abierto */
body.mobile-menu-open {
    overflow: hidden !important;
}

/* ========================================
   AJUSTES RESPONSIVOS
   ======================================== */

/* Desktop y tablets */
@media (min-width: 768px) {
    #mobile-menu {
        width: 400px; /* Ancho fijo para desktop */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Contenido del menú móvil en desktop */
    #mobile-menu .mobile-menu-content {
        padding: 20px;
        height: 100vh;
        overflow-y: auto;
    }
    
    /* Botón de cerrar */
    #mobile-menu .button-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        z-index: 10;
        color: #333;
        line-height: 1;
        padding: 5px;
    }
    
    #mobile-menu .button-close:hover {
        color: #000;
    }
}

/* Móviles - mantener comportamiento original */
@media (max-width: 767px) {
    #mobile-menu {
        width: 100%;
    }
}

/* ========================================
   MEJORAS VISUALES DEL MENÚ MÓVIL
   ======================================== */

/* Estilos para el contenido del menú */
#mobile-menu .mobile-navigation {
    padding-top: 60px; /* Espacio para el botón de cerrar */
}

#mobile-menu .mobile-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-menu .mobile-navigation li {
    border-bottom: 1px solid #f0f0f0;
}

#mobile-menu .mobile-navigation a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

#mobile-menu .mobile-navigation a:hover {
    background-color: #f8f8f8;
    color: #000;
}

/* Sub-menús */
#mobile-menu .mobile-navigation .sub-menu {
    background-color: #f8f8f8;
    display: none;
}

#mobile-menu .mobile-navigation .sub-menu a {
    padding-left: 40px;
    font-weight: normal;
    color: #666;
}

#mobile-menu .mobile-navigation .menu-item-has-children > a::after {
    content: '+';
    float: right;
    font-weight: bold;
    transition: transform 0.2s ease;
}

#mobile-menu .mobile-navigation .menu-item-has-children.active > a::after {
    transform: rotate(45deg);
}

#mobile-menu .mobile-navigation .menu-item-has-children.active .sub-menu {
    display: block;
}

/* ========================================
   COMPATIBILIDAD CON ELEMENTOR
   ======================================== */

/* Asegurar que el menú esté por encima de elementos de Elementor */
.elementor-location-header {
    z-index: 999 !important;
}

#mobile-menu {
    z-index: 999999 !important;
}

/* ========================================
   ANIMACIONES SUAVES
   ======================================== */

#mobile-menu * {
    transition: all 0.2s ease;
}

/* Entrada del menú con animación */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

#mobile-menu.open {
    animation: slideInLeft 0.3s ease-out;
}

/* ========================================
   FIX PARA POSIBLES CONFLICTOS
   ======================================== */

/* Resetear estilos que puedan interferir */
#mobile-menu {
    box-sizing: border-box !important;
    font-family: inherit;
}

#mobile-menu * {
    box-sizing: border-box;
}

/* Asegurar visibilidad en todos los contextos */
.konte-child-mobile-menu-enabled #mobile-menu {
    display: block !important;
}

/* ========================================
   MODO OSCURO (OPCIONAL)
   ======================================== */

/* Si el tema tiene modo oscuro, aplicar estilos apropiados */
@media (prefers-color-scheme: dark) {
    #mobile-menu {
        background: #1a1a1a;
        color: #fff;
    }
    
    #mobile-menu .mobile-navigation a {
        color: #fff;
    }
    
    #mobile-menu .mobile-navigation a:hover {
        background-color: #2a2a2a;
    }
    
    #mobile-menu .mobile-navigation .sub-menu {
        background-color: #2a2a2a;
    }
    
    #mobile-menu .mobile-navigation .sub-menu a {
        color: #ccc;
    }
    
    #mobile-menu .button-close {
        color: #fff;
    }
}