/* 
 * Matcha Pro: Pure CSS Mega Menu
 * Applies to any top-level menu item with the class "navid-mega-menu"
 */

/* Desktop view (>= 992px) */
@media (min-width: 992px) {
    /* Reset the parent position to static so the absolute child spans the full header */
    .site-header nav,
    .site-header nav .nav-menu,
    .site-header nav .nav-menu > .navid-mega-menu {
        position: static !important;
    }

    /* The main dropdown container */
    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px;
        background: var(--cream);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        
        /* CSS Grid layout for the columns */
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }

    /* Show on hover */
    .site-header nav .nav-menu > .navid-mega-menu:hover > .sub-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    /* Column Headers (2nd level items) */
    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li {
        border-bottom: none;
        padding: 0;
    }

    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li > a {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--charcoal);
        margin-bottom: 16px;
        display: block;
        padding: 0;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
    }

    /* Support for adding images directly in the Navigation Label */
    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: var(--radius-md, 8px);
        margin-bottom: 15px;
        display: block;
    }
    
    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li > a:after {
        display: none !important; /* Hide the dropdown arrow */
    }

    /* Nested Links (3rd level items) */
    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li > .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        display: block;
        box-shadow: none;
        background: transparent;
        padding: 0;
        border: none;
        width: auto;
        transform: none;
    }

    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li > .sub-menu > li {
        border: none;
        padding: 0;
        margin-bottom: 8px;
    }

    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li > .sub-menu > li > a {
        padding: 4px 0;
        font-size: 0.95rem;
        color: var(--taupe);
        transition: color 0.2s;
    }

    .site-header nav .nav-menu > .navid-mega-menu > .sub-menu > li > .sub-menu > li > a:hover {
        color: var(--sage);
        background: transparent;
        padding-left: 5px; /* Slight nudge effect */
    }
}