/**
 * KKeyQik Mega Menu Frontend Styles
 *
 * Dropdown panel, icon/badge rendering, and responsive behavior.
 *
 * @package KKeyQik
 * @since 1.0.3
 */

/* =============================================
   Mega Menu Item — Parent
   ============================================= */

.has-megamenu {
    position: static !important;
}

.has-megamenu.megamenu-position-relative {
    position: relative !important;
}

.has-megamenu>a {
    position: relative;
}

/* =============================================
   Mega Menu Panel
   ============================================= */

.kkeyqik-megamenu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: transparent;
    z-index: 9;
    box-shadow: none;
    border-top: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

/* Default-width panel (inherits container width) */
.megamenu-width-default_width>.kkeyqik-megamenu-panel {
    width: 100%;
    left: 0;
    right: 0;
}

.megamenu-width-default_width.is-megamenu-open>.kkeyqik-megamenu-panel {
    transform: translateY(0);
}

/* Full-width panel */
.megamenu-width-full_width>.kkeyqik-megamenu-panel {
    width: 100vw;
    left: 0; /* Fallback until JS takes over */
    transform: translateY(10px);
}

.megamenu-width-full_width.is-megamenu-open>.kkeyqik-megamenu-panel {
    transform: translateY(0);
}

/* Custom-width panel */
.megamenu-width-custom>.kkeyqik-megamenu-panel {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
}

.megamenu-width-custom.is-megamenu-open>.kkeyqik-megamenu-panel {
    transform: translateX(-50%) translateY(0);
}

/* Relative position */
.megamenu-position-relative>.kkeyqik-megamenu-panel {
    left: 0;
    right: auto;
}

.megamenu-position-relative.megamenu-width-full_width>.kkeyqik-megamenu-panel,
.megamenu-position-relative.megamenu-width-custom>.kkeyqik-megamenu-panel {
    left: 0;
    transform: translateY(10px);
}

.megamenu-position-relative.is-megamenu-open>.kkeyqik-megamenu-panel {
    transform: translateY(0) !important;
}

/* Show panel */
.has-megamenu.is-megamenu-open>.kkeyqik-megamenu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 10;
}

/* Panel inner */
.kkeyqik-megamenu-panel-inner {
    padding: 0;
    width: 100%;
}

/* Ensure Elementor sections inside don't overflow */
.kkeyqik-megamenu-panel .elementor-section-wrap,
.kkeyqik-megamenu-panel .elementor-section {
    margin: 0;
}

/* =============================================
   Icon Styling
   ============================================= */

.kkeyqik-mm-icon {
    margin-right: 6px;
    font-size: 14px;
    vertical-align: middle;
}

/* =============================================
   Badge Styling
   ============================================= */

.kkeyqik-mm-badge {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================
   Mobile Responsive (fallback header only)
   Widget uses its own responsive system via
   data-breakpoint + .is-mobile-mode in nav-menu-widget.css.
   ============================================= */

@media (max-width: 991px) {
    .primary-menu .has-megamenu {
        position: relative !important;
    }

    .primary-menu .kkeyqik-megamenu-panel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100% !important;
        transform: none;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--kkeyqik-primary, #2f6d46);
    }

    .primary-menu .megamenu-width-full_width>.kkeyqik-megamenu-panel,
    .primary-menu .megamenu-width-custom>.kkeyqik-megamenu-panel {
        left: auto;
        transform: none;
    }

    .primary-menu .has-megamenu.is-megamenu-open>.kkeyqik-megamenu-panel {
        transform: none;
    }

    .primary-menu .has-megamenu .kkeyqik-megamenu-panel[data-mobile-submenu="wp_submenu"] {
        display: none !important;
    }
}