/**
 * Acucraft Mega-Menu Styles
 *
 * Styles for the custom mega-menu panel switching system.
 * These styles work with the mega-menu.js script.
 *
 * @package Acucraft
 * @since 1.0.0
 * @since 1.1.0 Merged styles from TheGem Theme Options custom CSS
 * @see js/mega-menu.js for the JavaScript functionality
 *
 * Required Classes:
 * - .mm-mega-root     : Container that scopes panel logic
 * - .mm-nav           : Navigation wrapper for hover-enabled area
 * - .mm-panel         : Switchable content panel
 * - .mm-panel-X       : Panel with ID "X" (e.g., .mm-panel-1)
 * - .mm-panel-default : Panel shown when no panel is active
 * - .mm-active        : Applied to the currently active navigation link
 * - .mm-kb            : Applied to body when keyboard navigation is active
 */

/* =============================================================================
   PANEL VISIBILITY + ANIMATION
   Front-end: JS controls which panel is visible.
   Editor: keep ALL panels visible AND keep flex layout intact.
   ============================================================================= */

/**
 * FRONT END ONLY: panels start hidden (JS will show one)
 */
body:not(.elementor-editor-active):not(.elementor-editor-preview) .mm-panel {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: opacity, transform;
}

/**
 * FRONT END ONLY: animate in when JS sets display to non-none
 */
body:not(.elementor-editor-active):not(.elementor-editor-preview) .mm-panel[style*="display:"]:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}

/**
 * EDITOR: show everything and preserve flex-based panel layout
 */
body.elementor-editor-active .mm-panel,
body.elementor-editor-preview .mm-panel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* =============================================================================
   ACTIVE LINK STATE
   ============================================================================= */

/**
 * Style for the currently active navigation link.
 * Applied by JavaScript when a panel is selected.
 */
.mm-nav a.mm-active {
    font-weight: 700;
}

/* =============================================================================
   KEYBOARD FOCUS STYLES
   ============================================================================= */

/**
 * Focus ring styles for keyboard navigation.
 * The .mm-kb class is added to body when user presses Tab.
 */
.mm-kb .mm-nav a:focus,
.mm-kb .mm-mega-root a:focus {
    outline: 2px solid #d9534f;
    outline-offset: 2px;
}

/**
 * Hide focus ring for mouse/touch users.
 */
body:not(.mm-kb) .mm-nav a:focus,
body:not(.mm-kb) .mm-mega-root a:focus {
    outline: none;
}

/* =============================================================================
   ICON LIST (INSIDE PANELS)
   Fixes TheGem nav rule: #primary-menu.no-responsive li > a { display:block; }
   Ensures icon+text align correctly and wrap cleanly.
   ============================================================================= */

#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list .elementor-icon-list-item>a,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list .elementor-icon-list-item>span {
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* Icon container: stable fixed-width column */
#primary-menu.no-responsive .mm-panel .elementor-icon-list-icon {
    width: 1.25em;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    float: none !important;
}

/* Normalize icon glyph rendering */
#primary-menu.no-responsive .mm-panel .elementor-icon-list-icon i,
#primary-menu.no-responsive .mm-panel .elementor-icon-list-icon svg {
    display: block;
    line-height: 1;
}

/* Text wraps under itself, not under icon */
#primary-menu.no-responsive .mm-panel .elementor-icon-list-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Neutralize float/clear interference */
#primary-menu.no-responsive .mm-panel .elementor-icon-list-item a,
#primary-menu.no-responsive .mm-panel .elementor-icon-list-item span {
    float: none !important;
    clear: none !important;
}

/* =============================================================================
   ICON LIST – REMOVE BULLETS / THEME MARKERS
   Removes true list markers and pseudo-element "dots".
   ============================================================================= */

#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list ul,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list ol,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list .elementor-icon-list-items {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list li {
    list-style: none !important;
}

#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list li::marker {
    content: "" !important;
}

/* Remove theme-added pseudo markers (dots, bullets, etc.) */
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list li::before,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list li::after,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list a::before,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list a::after,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list span::before,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list span::after,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list i::before,
#primary-menu.no-responsive .mm-panel .elementor-widget-icon-list i::after {
    content: none !important;
    display: none !important;
}

/* =============================================================================
   GHOST HOVER REGION FIX (CLEAN + EDITOR-SAFE)
   Prevents invisible mega menu content from capturing mouse events.
   ============================================================================= */

/* Front-end only: prevent invisible mega menu content from capturing mouse */
body:not(.elementor-editor-active) .mm-mega-root {
    pointer-events: none !important;
}

/* Front-end only: allow interaction when top-level menu item is open */
body:not(.elementor-editor-active) #primary-menu.no-responsive>li:hover .mm-mega-root,
body:not(.elementor-editor-active) #primary-menu.no-responsive>li:focus-within .mm-mega-root {
    pointer-events: auto !important;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 991px) {
    /* Mobile-specific mega-menu styles can be added here */
}