/**
 * APC WooCommerce Dynamic Nested Menu Layout CSS
 *
 * Provides base structural dropdown and multi-level flyout hierarchy rules
 * for the dynamic menu tree injection architecture.
 *
 * @package    APC_Woo_Dynamic_Menu
 * @subpackage APC_Woo_Dynamic_Menu/public/css
 * @author     Anil Parkhe Creations
 */

/* ==========================================================================
   1. Root Dropdown Parent Container
   ========================================================================== */
.menu-item.apc-dynamic-catalog {
    position: relative;
}

/* Ensure the top-level anchor indicating a drop trigger shows a natural pointer */
.menu-item.apc-dynamic-catalog > a {
    cursor: pointer;
}

/* ==========================================================================
   2. Level 1 Dropdown List Layout (Categories)
   ========================================================================== */
.menu-item.apc-dynamic-catalog ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    display: none; /* Hidden by default */
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Display first level child items cleanly as stacked block blocks */
.menu-item.apc-dynamic-catalog ul.sub-menu li {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.menu-item.apc-dynamic-catalog ul.sub-menu li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
}

/* Trigger visibility of the first drop level on parent hover focus states */
.menu-item.apc-dynamic-catalog:hover > ul.sub-menu {
    display: block;
}

/* ==========================================================================
   3. Level 2+ Flyout Menus Layout (Sub-categories & Products)
   ========================================================================== */
.menu-item.apc-dynamic-catalog ul.sub-menu ul.sub-menu {
    position: absolute;
    top: 0;
    left: 100%; /* Push flyouts directly to the right edge of the current panel */
    margin-top: -5px;
    display: none;
}

/* Hide deeper sub-menus if we are hovering elsewhere inside higher container trees */
.menu-item.apc-dynamic-catalog ul.sub-menu li:hover > ul.sub-menu {
    display: block;
}

/* Smooth visual indicator arrow helper classes for items containing children nodes */
.menu-item.apc-dynamic-catalog li.menu-item-has-children > a::after {
    content: "\25B8"; /* Unicode sleek right-pointing triangle symbol */
    float: right;
    margin-left: 10px;
    font-size: 11px;
    opacity: 0.7;
}

/* Fix floating clearing issues across mixed layout grids integrations inside themes */
.menu-item.apc-dynamic-catalog ul.sub-menu::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   4. Mobile/Responsive Adaptations Framework Safeties
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* If theme supports standard responsive breaks, un-float flyout stacks to avoid clipping */
    .menu-item.apc-dynamic-catalog ul.sub-menu,
    .menu-item.apc-dynamic-catalog ul.sub-menu ul.sub-menu {
        position: relative;
        top: 0;
        left: 0 !important;
        width: 100% !important;
        min-width: 100%;
        box-shadow: none;
        padding-left: 15px; /* Create an indentation offset effect cleanly */
        margin-top: 0;
    }
    
    /* Reveal list objects uniformly when parent block items get clicked on mobile viewport taps */
    .menu-item.apc-dynamic-catalog:hover > ul.sub-menu,
    .menu-item.apc-dynamic-catalog ul.sub-menu li:hover > ul.sub-menu {
        display: block;
    }
}