/**
 * Mega Menu Styles
 * 
 * Table of Contents:
 * 1. Dropdown Container
 * 2. Menu Columns
 * 3. Menu Items
 * 4. Responsive Design
 */

/* ============================================================================
   1. Dropdown Container
   ============================================================================ */

.mega-menu-dropdown {
    position: relative;
    background: var(--white);
    color: var(--black);
    box-shadow: 0px 10px 20px #0000004D;
    z-index: 50;
    display: flex;
    width: fit-content;
    min-width: 200px;
    transition: all 0.2s ease;
}

/* ============================================================================
   2. Menu Columns
   ============================================================================ */

/* Column headings */
.mega-menu-dropdown h3 {
    padding: 0 1rem;
    margin-bottom: 1rem;
}

/* Column containers */
.mega-menu-dropdown > div {
    padding: 1rem 0;
    padding-bottom: 1rem;
    width: fit-content;
    min-width: 200px;
    max-width: 400px;
}

/* Secondary and tertiary columns (hidden by default) */
.mega-menu-column-2,
.mega-menu-column-3 {
    display: none;
    border-left: 1px solid var(--primary);
}

.mega-menu-column-2.show,
.mega-menu-column-3.show {
    display: block;
}

/* Column sections */
.mega-menu-dropdown > div > div {
    margin-bottom: 1.5rem;
}

.mega-menu-dropdown > div > div:last-child {
    margin-bottom: 0;
}

/* Menu lists */
.mega-menu-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-dropdown li {
    margin: 0;
}

/* ============================================================================
   3. Menu Items
   ============================================================================ */

.mega-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.mega-menu-item:hover {
    background-color: var(--primary);
    color: var(--white);
    text-decoration: none;
}

/* ============================================================================
   4. Responsive Design
   ============================================================================ */

/* Tablet - 2 columns */
@media (max-width: 1024px) {
    .mega-menu-dropdown {
        min-width: 640px;
    }
    
    .mega-menu-dropdown > div {
        width: 320px;
    }
}

/* Mobile - stacked columns */
@media (max-width: 768px) {
    .mega-menu-dropdown {
        min-width: auto;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .mega-menu-dropdown > div {
        width: 100%;
        border-right: none;
    }
    
    .mega-menu-dropdown > div:last-child {
        border-bottom: none;
    }
}