/**
 * Stokarea - Menu Custom CSS
 * 
 * Estilos personalizados para o menu SeedProd
 * 
 * @package Storageinfra
 * @since 1.6.5
 */

/* ========================================
   VARIÁVEIS
   ======================================== */
:root {
    --stk-orange: #E85A2A;
    --stk-purple: #7B4B9E;
    --stk-dark: #2d2d2d;
    --stk-white: #ffffff;
}

/* ========================================
   DESKTOP - HOVER EFFECTS
   ======================================== */
@media (min-width: 992px) {
    .seedprod-menu-list > .menu-item > a:hover,
    .nav-menu > li > a:hover {
        color: var(--stk-orange) !important;
    }

    .seedprod-menu-list > .menu-item.current-menu-item > a,
    .seedprod-menu-list > .menu-item.current_page_item > a {
        color: var(--stk-orange) !important;
    }

    .seedprod-menu .sub-menu .menu-item a:hover {
        color: var(--stk-orange) !important;
        background-color: rgba(232, 90, 42, 0.08) !important;
    }
}

/* ========================================
   MOBILE - Estilos
   ======================================== */
@media (max-width: 991px) {
    
    /* Garantir que hamburger é clicável */
    .sp-mobile-menu-true .hamburger {
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Garantir visibilidade do hamburger */
    .sp-mobile-menu-true .hamburger .bar {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        margin: 5px auto !important;
        background-color: var(--stk-dark) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Hamburger transformado em X quando activo */
    .sp-mobile-menu-true .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    
    .sp-mobile-menu-true .hamburger.active .bar:nth-child(2) {
        opacity: 0 !important;
    }
    
    .sp-mobile-menu-true .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    
    /* Menu drawer */
    .sp-mobile-menu-true .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: var(--stk-white) !important;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
        transition: right 0.3s ease !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        padding: 20px 0 !important;
    }
    
    .sp-mobile-menu-true .nav-menu.active {
        right: 0 !important;
    }
    
    /* Items do menu */
    .sp-mobile-menu-true .nav-menu .seedprod-menu-list > li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        margin: 0 !important;
    }
    
    .sp-mobile-menu-true .nav-menu .seedprod-menu-list > li > a {
        display: block !important;
        padding: 14px 20px !important;
        color: var(--stk-dark) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    
    .sp-mobile-menu-true .nav-menu .seedprod-menu-list > li > a:hover,
    .sp-mobile-menu-true .nav-menu .seedprod-menu-list > li > a:active {
        background: rgba(232, 90, 42, 0.06) !important;
        color: var(--stk-orange) !important;
    }
    
    /* Sub-menus escondidos por defeito */
    .sp-mobile-menu-true .nav-menu .sub-menu {
        display: none !important;
        background: #f5f5f5 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-left: 4px solid var(--stk-orange) !important;
    }
    
    /* Sub-menus visíveis quando abertos */
    .sp-mobile-menu-true .nav-menu .sub-menu.stk-open {
        display: block !important;
    }
    
    .sp-mobile-menu-true .nav-menu .sub-menu > li > a {
        padding: 12px 20px 12px 28px !important;
        font-size: 14px !important;
        color: #555 !important;
        font-weight: 500 !important;
        display: block !important;
    }
    
    .sp-mobile-menu-true .nav-menu .sub-menu > li > a:hover,
    .sp-mobile-menu-true .nav-menu .sub-menu > li > a:active {
        color: var(--stk-orange) !important;
        background: rgba(232, 90, 42, 0.08) !important;
    }
    
    /* Sub-sub-menus */
    .sp-mobile-menu-true .nav-menu .sub-menu .sub-menu {
        background: #ebebeb !important;
        border-left-color: var(--stk-purple) !important;
    }
    
    .sp-mobile-menu-true .nav-menu .sub-menu .sub-menu > li > a {
        padding-left: 36px !important;
        font-size: 13px !important;
        color: #666 !important;
    }
    
    .sp-mobile-menu-true .nav-menu .sub-menu .sub-menu > li > a:hover {
        color: var(--stk-purple) !important;
    }
    
    /* Overlay quando menu aberto */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;
        transition: background 0.3s ease;
        z-index: 9999;
    }
    
    body:has(.nav-menu.active)::after {
        background: rgba(0, 0, 0, 0.5);
        pointer-events: auto;
    }
}