/* Custom Mega Menu Widget Styles */

/* Initially hide menu to prevent flash of unstyled content */
.custom-mega-menu {
    position: relative;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

/* Show menu when loaded */
.custom-mega-menu.menu-loaded {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Menu Layout */
.custom-mega-menu.horizontal .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-mega-menu.vertical .menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu Items */
.custom-mega-menu .menu-item {
    position: relative;
    margin: 0;
    padding: 0;
}

.custom-mega-menu .menu-item > a {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Sub Menu */
.custom-mega-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    display: none !important;
}

.custom-mega-menu.menu-loaded .sub-menu {
    display: block !important;
}

.custom-mega-menu .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mega Menu Content - Desktop */
.custom-mega-menu .mega-menu-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    background: #fff;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: none !important;
}

.custom-mega-menu.menu-loaded .mega-menu-content {
    display: block !important;
}

.custom-mega-menu .menu-item.has-mega-menu:hover > .mega-menu-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 9999;
}

/* Mega Menu Width Variations */
.custom-mega-menu .mega-menu-content.mega-fullwidth {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-left: -50vw;
}

.custom-mega-menu .menu-item.has-mega-menu:hover > .mega-menu-content.mega-fullwidth {
    transform: translateX(-50%) translateY(0);
    margin-left: -50vw;
}

.custom-mega-menu .mega-menu-content.mega-custom-width {
    width: var(--mega-width, 300px);
}

/* ============================================
   TABLET & MOBILE MARQUEE (1024px and below)
   ============================================ */
@media (max-width: 1024px) {
    
    /* Make menu container hide overflow */
    .custom-mega-menu {
        overflow: hidden !important;
        width: 100%;
    }
    
    /* Marquee wrapper */
    .custom-mega-menu .marquee-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        will-change: transform;
    }
    
    /* Menu items in marquee */
    .custom-mega-menu .marquee-wrapper .menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Menu items inline */
    .custom-mega-menu .menu-item {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    
    .custom-mega-menu .menu-item > a {
        white-space: nowrap !important;
    }
    
    /* Mega menu hover in mobile/tablet mode */
    .custom-mega-menu .menu-item.has-mega-menu:hover > .mega-menu-content {
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ============================================
   MARQUEE ANIMATION (Applied via JS)
   ============================================ */
.custom-mega-menu.marquee-active .marquee-wrapper {
    animation: marqueeScroll 20s linear infinite;
}

/* Pause marquee on hover */
.custom-mega-menu.marquee-active:hover .marquee-wrapper,
.custom-mega-menu.marquee-active .menu-item:hover {
    animation-play-state: paused;
}

/* Pause marquee when hovering over menu items */
.custom-mega-menu.marquee-active .marquee-wrapper:hover {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}