/*
 * Frontend CSS for Axannoid Mega Menu
 * This CSS works in conjunction with amm-frontend.js
 * to ensure proper display and transitions of the mega menu.
 * Designed to be generally compatible, optimized for Storefront theme structure.
 */

/* ==========================================================================
   1. Global Menu Container & Top-Level Items
   ========================================================================== */

/* Main navigation menu (adjust selector based on your theme's main menu wrapper) */
/* For Storefront, .main-navigation ul.menu is common. Adapt if your theme uses a different selector. */
.main-navigation ul.menu,
.primary-navigation ul.menu, /* Common alternative */
.site-header ul.site-header-menu { /* Another common Storefront-related selector */
    list-style: none; /* Remove default list bullets */
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox to arrange top-level menu items horizontally */
    flex-wrap: wrap; /* Allow menu items to wrap to the next line if space is limited */
    justify-content: flex-start; /* Align items to the start. Can be 'center', 'space-around', etc. */
}

/* Specific styling for top-level menu items that will trigger a mega menu */
.main-navigation ul.menu > li.amm-mega-menu-trigger,
.primary-navigation ul.menu > li.amm-mega-menu-trigger,
.site-header ul.site-header-menu > li.amm-mega-menu-trigger,
#site-navigation ul.menu > li.amm-mega-menu-trigger {
    position: static; /* Essential for positioning the mega menu dropdown absolutely */
    margin: 0 15px; /* Horizontal spacing between top-level items */
    padding: 10px 0; /* Vertical padding for top-level link */
    /* Add any default link styling inherited from your theme, e.g., color, font-size */
}

/* Ensure the top-level link itself fills its container for better click/hover area */
.amm-mega-menu-trigger > a {
    display: block;
    padding: 5px 0; /* Adjust padding around the text of the top-level link */
    white-space: nowrap; /* Prevent menu item text from wrapping */
}


/* ==========================================================================
   2. Mega Menu Content Wrapper (Hidden State)
   ========================================================================== */

#amm-mega-menu-content-wrapper {
    /* Initial state: Hidden by default */
    display: none; /* JS will toggle this to 'block' to enable transitions */
    opacity: 0;
    visibility: hidden;
    max-height: 0; /* Use max-height for a height transition effect */
    overflow: hidden; /* Hide any content that overflows during transition */
    pointer-events: none; /* Prevent interaction when the menu is hidden */
    position: absolute;

    /* Sizing for desktop */
    width: auto; /* Default auto, JS will set 100vw on active */   
    max-width: 100vw; /* Full viewport width for mega menu */

    /* Styling */
    background: #ffffff; /* White background */
    border: 1px solid #e2e8f0; /* Light border */
    border-top: none; /* No top border to connect seamlessly with menu item */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* Soft shadow for depth */
    border-radius: 0 0 8px 8px; /* Rounded corners only at the bottom */
    padding: 25px; /* Internal padding for the content area */
    box-sizing: border-box; /* Include padding in width/height calculations */
    z-index: 9999; /* Ensure it appears above all other page content */

    /* Transitions for smooth open/close effect */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, max-height 0.4s ease-out; /* Slightly longer height transition */
}

/* ==========================================================================
   3. Mega Menu Content Wrapper (Active State)
   ========================================================================== */

/* Styles when the mega menu is active (JS adds 'amm-active' class to the trigger) */
.amm-mega-menu-trigger.amm-active > #amm-mega-menu-content-wrapper {
    /* display: block, height: auto, width: 100vw, left: 0, transform: none, overflow: visible set by JS */
    opacity: 1;
    visibility: visible;
    max-height: 1000px !important; /* Keep !important here for max-height transition */
    pointer-events: auto; /* Allow mouse interactions (clicks, hovers) within the menu */
}


/* ==========================================================================
   4. Inner Mega Menu Layout (Flexbox Columns)
   ========================================================================== */

/* Inner container for the columns, using flexbox */
.amm-mega-menu-inner {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap if total width exceeds container */
    gap: 25px; /* Spacing between columns */
    justify-content: flex-start; /* Align columns to the start of the container */
    align-items: flex-start; /* Align items at the top of each column */
    max-width: 66.4989378333em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2.617924em;
    box-sizing: content-box;
}

/* Individual column styling */
.amm-mega-menu-column {
    box-sizing: border-box; /* Include padding/border in column width */
    padding: 0; /* No direct padding on the column itself, content will have padding */
}

/* Column sizing based on the number of configured columns (classes added by PHP) */
/* Using calc() to account for the 'gap' property */
.amm-cols-1 .amm-mega-menu-column { flex-basis: 100%; max-width: 100%; }
.amm-cols-2 .amm-mega-menu-column { flex-basis: calc(50% - 12.5px); max-width: calc(50% - 12.5px); } /* (gap / 2) */
.amm-cols-3 .amm-mega-menu-column { flex-basis: calc(33.333% - 16.666px); max-width: calc(33.333% - 16.666px); } /* (2 * gap / 3) */
.amm-cols-4 .amm-mega-menu-column { flex-basis: calc(25% - 18.75px); max-width: calc(25% - 18.75px); } /* (3 * gap / 4) */
.amm-cols-5 .amm-mega-menu-column { flex-basis: calc(20% - 20px); max-width: calc(20% - 20px); } /* (4 * gap / 5) */
.amm-cols-6 .amm-mega-menu-column { flex-basis: calc(16.666% - 20.833px); max-width: calc(16.666% - 20.833px); } /* (5 * gap / 6) */

/* Ensure images within columns are responsive */
.amm-column-image {
    margin-bottom: 15px; /* Space below image before content */
    text-align: center; /* Center images if they are smaller than column width */
}

.amm-column-image img {
    max-width: 100%; /* Ensure image doesn't overflow its column */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    border-radius: 4px; /* Slightly rounded corners for images */
}

/* Basic styling for content within columns */
.amm-column-content {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333; 
}

/* ==========================================================================
   5. Styling for Shortcode-Generated Menus / Lists within Columns
   ========================================================================== */

/* Style for unordered lists directly within column content */
#amm-mega-menu-content-wrapper .amm-column-content ul.menu {
    position: static; /* Static positioning for normal flow */
    background: transparent; /* Transparent background for lists */
    border: none; /* No border for lists */
    padding-left: 15px; /* Indent list items */
    margin-top: 0; /* No top margin for lists */
    margin-bottom: 15px; /* Space below the list */
    max-width: 66.4989378333em; /* Adjusted max-width to fit within the column */

    display: block !important; /* Ensure the list is block-level */
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li {
    margin-bottom: 5px; /* Spacing between list items */
    display: block !important; /* Ensure the list is block-level */
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li a {
    text-decoration: none; /* Remove underline from links */
    color: #4a5568; /* Dark gray for links */
    display: block; /* Make links block-level for larger click area */
    padding: 3px 0;
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li a:hover,
#amm-mega-menu-content-wrapper .amm-column-content ul.menu li a:focus {
    color: #2b6cb0; /* Darker blue for hover/focus */
    text-decoration: underline; /* Underline on hover/focus */
}

#amm-mega-menu-content-wrapper .amm-column-content ul.menu li a:active {
    color: #2c5282; /* Darker blue for active state */
}

/* Styling for nested lists (sub-menus generated by [axx_menu] shortcode) */
#amm-mega-menu-content-wrapper .amm-column-content ul.menu ul.sub-menu {
    padding-left: 15px; /* Indent nested sub-menus */
    margin-top: 5px; /* Small space above nested sub-menus */
    border-left: 2px solid #e2e8f0; /* Visual separator for nested levels */
    margin-bottom: 0; /* No bottom margin for nested lists */
}

/* Optional: Style for headings within columns */
.amm-column-content h1,
.amm-column-content h2,
.amm-column-content h3,
.amm-column-content h4,
.amm-column-content h5,
.amm-column-content h6 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #1e293b;
    font-size: 1.1em; /* Adjust as needed */
}

/* ==========================================================================
   6. Mobile Responsiveness (Breakpoint at 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Stack top-level menu items vertically on mobile */
    .main-navigation ul.menu,
    .primary-navigation ul.menu,
    .site-header ul.site-header-menu {
        flex-direction: column;
        width: 100%; /* Ensure the main menu takes full width */
    }

    /* Adjust trigger item styling for mobile */
    .main-navigation ul.menu > li.amm-mega-menu-trigger,
    .primary-navigation ul.menu > li.amm-mega-menu-trigger,
    .site-header ul.site-header-menu > li.amm-mega-menu-trigger {
        margin: 0; /* Remove horizontal spacing */
        width: 100%; /* Make each trigger take full width */
        padding: 0; /* Remove vertical padding from the li itself */
    }

    /* Make trigger links block-level for tap target and add internal padding */
    .amm-mega-menu-trigger > a {
        padding: 15px 20px; /* Ample padding for mobile tap target */
        position: relative;
        /* Optional: Add a visual indicator for expandable menu items, e.g., an arrow */
        /* For example:
        &::after {
            content: '\25BC'; // Down arrow
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%) rotate(0deg);
            transition: transform 0.3s ease;
        }
        &.amm-active > a::after {
            transform: translateY(-50%) rotate(180deg); // Up arrow
        }
        */
    }

    /* Mega menu content wrapper changes for mobile */
    #amm-mega-menu-content-wrapper {
        position: static; /* Place within the normal document flow on mobile */
        /* width, max-width, min-width, left, transform will be set by JS on active */
        box-shadow: none; /* Remove shadow on mobile */
        border: none; /* Remove border */
        border-radius: 0; /* Remove rounded corners */
        padding: 0; /* Start with no padding in the hidden state, will be added when active */
        background: #f8fafc; /* Lighter background for dropdown on mobile */
        overflow: hidden; /* Important for max-height transition */

        /* Mobile specific hidden state transitions (slightly longer for max-height) */
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out, max-height 0.4s ease-out;
    }

    /* Mobile active state for mega menu content */
    .amm-mega-menu-trigger.amm-active > #amm-mega-menu-content-wrapper {
        /* display: block, height: auto, width: 100vw, left: 0, transform: none, overflow: visible set by JS */
        opacity: 1;
        visibility: visible;
        max-height: 1500px !important; /* Sufficiently large height for mobile content */
        padding: 15px; /* Add padding when active on mobile */
    }

    /* Stack columns vertically on mobile */
    .amm-mega-menu-inner {
        flex-direction: column;
        gap: 15px; /* Spacing between stacked columns */
        align-items: flex-start; 
    }

    /* Each column takes full width on mobile */
    .amm-mega-menu-column {
        flex-basis: 100% !important; /* Ensure full width, !important to override calc() */
        max-width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Light separator between columns */
        padding-bottom: 15px; /* Space above separator */
    }

    /* Remove border/padding from the last column on mobile */
    .amm-mega-menu-column:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Adjust padding for embedded menus in mobile columns if needed */
    .amm-column-content .sub-menu {
        padding-left: 10px; /* Slightly less indentation for sub-menus on mobile */
    }
}

/* ==========================================================================
   7. Fallback / Basic Styling for wp_page_menu (if used as fallback)
   ========================================================================== */
/* If `wp_page_menu` is used as a fallback for theme locations not using mega menu */
.main-navigation .menu-pages,
.primary-navigation .menu-pages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Adjust if needed to match top menu layout */
}

.main-navigation .menu-pages li,
.primary-navigation .menu-pages li {
    margin: 0 15px;
}