/**
 * FahimAI Wide Menu for Divi
 * Base styles for mega menu functionality
 */

/* ============================================
   MEGA MENU BASE STYLES
   ============================================ */

/* Parent menu item positioning */
#main-header .et-menu > li.mega-menu {
    position: static !important;
}

/* Main dropdown container */
#main-header .et-menu > li.mega-menu > ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

#main-header .et-menu > li.mega-menu:hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove default Divi dropdown arrows for mega menu */
#main-header .et-menu > li.mega-menu > ul.sub-menu > li > a:after {
    display: none !important;
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */

#main-header .et-menu > li.mega-menu > ul.sub-menu {
    transform-origin: top center;
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   SUBMENU ITEMS STYLING
   ============================================ */

#main-header .et-menu > li.mega-menu > ul.sub-menu > li {
    border-right: 1px solid rgba(0,0,0,0.05);
}

#main-header .et-menu > li.mega-menu > ul.sub-menu > li:last-child {
    border-right: none;
}

/* Category headers (first level in mega menu) */
#main-header .et-menu > li.mega-menu > ul.sub-menu > li > a {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: block;
}

/* Sub-items under each category */
#main-header .et-menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu > li {
    width: 100% !important;
    padding: 0 !important;
}

#main-header .et-menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a {
    transition: all 0.2s ease;
    display: block;
}

#main-header .et-menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a:hover {
    padding-left: 8px !important;
}

/* ============================================
   WIDE DROPDOWN STYLE (Alternative)
   ============================================ */

#main-header .et-menu > li.wide-dropdown > ul.sub-menu {
    min-width: 300px !important;
    padding: 20px !important;
}

#main-header .et-menu > li.wide-dropdown > ul.sub-menu > li {
    padding: 0 !important;
}

#main-header .et-menu > li.wide-dropdown > ul.sub-menu > li > a {
    padding: 12px 15px !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#main-header .et-menu > li.wide-dropdown > ul.sub-menu > li > a:hover {
    background: rgba(0,0,0,0.03);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 980px) {
    /* Reset mega menu on mobile */
    #main-header .et-menu > li.mega-menu > ul.sub-menu {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        position: relative !important;
        display: block !important;
        flex-wrap: nowrap !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    #main-header .et-menu > li.mega-menu > ul.sub-menu > li {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    #main-header .et-menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu {
        padding-left: 20px !important;
    }
}

/* ============================================
   ICON SUPPORT (if using menu icons)
   ============================================ */

#main-header .et-menu > li.mega-menu > ul.sub-menu > li > a .menu-icon {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
}

/* ============================================
   FEATURED ITEM HIGHLIGHT
   ============================================ */

#main-header .et-menu > li.mega-menu > ul.sub-menu > li.featured-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    margin: -10px;
    padding: 20px !important;
}

#main-header .et-menu > li.mega-menu > ul.sub-menu > li.featured-item > a {
    color: #0073aa !important;
}

/* ============================================
   DESCRIPTION TEXT SUPPORT
   ============================================ */

#main-header .et-menu > li.mega-menu .menu-item-description {
    display: block;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    margin-top: 4px;
    line-height: 1.4;
}