/* Garo Mega Menu - Frontend Premium Styles */

/* 1. Base positioning for the parent List Item */
/* We force static positioning so the dropdown can span the full width of the header, not just the word */
li.gmm-has-mega-menu {
    position: static !important; 
}

/* 2. Menu Icons */
.gmm-icon {
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.gmm-icon.gmm-svg svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

/* 3. The Mega Menu Wrapper (Hidden by default) */
.gmm-mega-wrapper {
    position: absolute;
    top: 100%; /* Sits exactly below the header */
    left: 0;
    right: 0;
    width: 100%;
    /* You can adjust this max-width to match your site's main container */
    max-width: 1200px; 
    margin: 0 auto;
    z-index: 99999;
    
    /* Animation & Hidden State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Starts slightly lower for a slide-up effect */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Prevents ghost clicking when hidden */
}

/* The Active (Hover/Focus) State triggered by our Vanilla JS */
li.gmm-has-mega-menu.gmm-menu-active .gmm-mega-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* 4. The Inner Container holding the Gutenberg Blocks */
.gmm-mega-inner {
    background: #ffffff;
    border-radius: 4px; /* Strict Luxury Radius Rule */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 32px;
    margin-top: 10px; /* Slight gap between menu link and box */
}

/* 
  5. Gutenberg Reset overrides:
  Ensures standard WP block margins don't break our container padding
*/
.gmm-mega-inner > *:first-child {
    margin-top: 0 !important;
}
.gmm-mega-inner > *:last-child {
    margin-bottom: 0 !important;
}

/* 6. Mobile Fallback - Flows naturally inside Blocksy's Off-Canvas Menu */
@media (max-width: 992px) {
    .gmm-mega-wrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        opacity: 1; 
        visibility: visible;
        transform: none;
        display: none; /* Hidden until the parent menu item is clicked/toggled */
        transition: none; /* Disable slide animation for mobile accordion */
    }
    
    li.gmm-has-mega-menu.gmm-menu-active .gmm-mega-wrapper {
        display: block;
    }

    .gmm-mega-inner {
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 16px 0 0 0; /* Remove side padding so it aligns with mobile menu text */
        background: transparent;
        margin-top: 0;
    }
}