/* ============================================
   MEGA MENU IMPLEMENTATION FOR SALESNEXUS
   ONLY APPLIES TO "PRODUCTS" DROPDOWN (menu-item-142)
   3-COLUMN GRID LAYOUT
   ============================================ */

/* Target ONLY the Products dropdown (#menu-item-142) */
#menu-item-142 .sub-menu {
    /* Reset and position */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) !important;

    /* Styling */
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 20px !important;
    margin-top: 8px !important;
    border: 1px solid #e6ecf3 !important;
    z-index: 9999 !important;

    /* 3-COLUMN GRID LAYOUT */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 20px !important;
    min-width: 750px !important;
    max-width: 850px !important;
    width: auto !important;
}

/* Show mega-menu on hover */
#menu-item-142:hover .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Column positioning for specific items */
#menu-item-292555 { grid-column: 1; grid-row: 1; } /* CRM Software */
#menu-item-292557 { grid-column: 1; grid-row: 2; } /* Marketing Automation */
#menu-item-292556 { grid-column: 2; grid-row: 1; } /* Email Marketing */
#menu-item-292559 { grid-column: 2; grid-row: 2; } /* Nexi AI */
#menu-item-292558 { grid-column: 3; grid-row: 1; } /* Sales CRM - moved to column 3 */

/* Style each pillar page item */
#menu-item-142 .sub-menu > li {
    background: white !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Main pillar page links */
#menu-item-142 .sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    color: #142033 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}

#menu-item-142 .sub-menu > li > a:hover {
    background: #f6f9fc !important;
    color: #246db5 !important;
}

/* Icons for each pillar page */
#menu-item-292555 > a::before { content: '🎯'; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #246db5, #0e4f8c); color: white; border-radius: 6px; flex-shrink: 0; }
#menu-item-292556 > a::before { content: '✉️'; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #246db5, #0e4f8c); color: white; border-radius: 6px; flex-shrink: 0; }
#menu-item-292557 > a::before { content: '📧'; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #246db5, #0e4f8c); color: white; border-radius: 6px; flex-shrink: 0; }
#menu-item-292558 > a::before { content: '💼'; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #246db5, #0e4f8c); color: white; border-radius: 6px; flex-shrink: 0; }
#menu-item-292559 > a::before { content: '🤖'; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #246db5, #0e4f8c); color: white; border-radius: 6px; flex-shrink: 0; }

/* Badges for "Updated" and "New" */
#menu-item-292555 > a::after {
    content: 'Updated';
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #E85124, #ff6b3d);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

#menu-item-292559 > a::after {
    content: 'New';
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #E85124, #ff6b3d);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

/* Add dropdown arrow to Products link */
#menu-item-142 > a::after {
    content: '▼';
    font-size: 10px;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

#menu-item-142:hover > a::after {
    transform: rotate(180deg);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet & Mobile: Disable grid, use vertical stack */
@media (max-width: 1024px) {
    #menu-item-142 .sub-menu {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        min-width: auto !important;
        max-width: 100% !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        right: 20px !important;
        transform: translateX(0) translateY(-10px) !important;
    }

    #menu-item-142:hover .sub-menu {
        transform: translateX(0) translateY(0) !important;
    }

    #menu-item-142 .sub-menu > li {
        width: 100% !important;
    }

    #menu-item-292555,
    #menu-item-292556,
    #menu-item-292557,
    #menu-item-292558,
    #menu-item-292559 {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* Mobile Portrait: 320px - 480px */
@media (max-width: 480px) {
    #menu-item-142 .sub-menu > li > a {
        font-size: 14px !important;
        padding: 12px 10px !important;
    }

    #menu-item-292555 > a::before,
    #menu-item-292556 > a::before,
    #menu-item-292557 > a::before,
    #menu-item-292558 > a::before,
    #menu-item-292559 > a::before {
        font-size: 16px !important;
        width: 24px !important;
        height: 24px !important;
    }

    #menu-item-292555 > a::after,
    #menu-item-292559 > a::after {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
}

/* Mobile Landscape: 568px - 812px */
@media (min-width: 481px) and (max-width: 812px) and (orientation: landscape) {
    #menu-item-142 .sub-menu {
        gap: 12px !important;
    }

    #menu-item-142 .sub-menu > li {
        padding: 8px !important;
    }

    #menu-item-142 .sub-menu > li > a {
        padding: 8px 10px !important;
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
}

/* Ensure no impact on other dropdowns */
#menu-item-161 .sub-menu,
#menu-item-156 .sub-menu {
    /* Keep existing dropdown styles for other menus */
    display: block !important;
    grid-template-columns: none !important;
}