/* Dropdown Menu Styles - Based on WWW 2024 */
:root {
            --purple: #6a00ff;
            --dark-grey: #1a1a1a;
            --cyan: #00e5ff;
            --white: #ffffff;
        }
.tab-menu li {
    position: relative;
}

.tab-menu li .dropdown {
    position: absolute;
    top: calc(100% - 2px); /* Overlap by 2px to eliminate gap */
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
    border-radius: 4px;
    /* overflow: hidden; */
}

.tab-menu li:hover .dropdown {
    display: block;
}

.tab-menu .dropdown a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: normal;
    border-radius: 0;
    background-color: white;
    transition: background-color 0.3s;
}
/* .tab-menu .dropdown a:hover {
    background-color: rcolor-mix(in srgb, var(--purple) 20%, transparent);
    transform: none;
    box-shadow: none;
} */

/* Dropdown colors - matching parent tab colors */
.tab-menu li a.tab-about + .dropdown a:hover {
      background-color: rgba(138, 43, 226, 0.2);

}

.tab-menu li a.tab-calls + .dropdown a:hover {
        background-color: rgba(138, 43, 226, 0.2);
}

.tab-menu li a.tab-accepted + .dropdown a:hover {
       background-color: rgba(138, 43, 226, 0.2);
}

.tab-menu li a.tab-program + .dropdown a:hover {
        background-color: rgba(138, 43, 226, 0.2);
}

.tab-menu li a.tab-organization + .dropdown a:hover {
        background-color: rgba(138, 43, 226, 0.2);
}

.tab-menu li a.tab-attending + .dropdown a:hover {
       background-color: rgba(138, 43, 226, 0.2);
}

.tab-menu li a.tab-media + .dropdown a:hover {
       background-color: rgba(138, 43, 226, 0.2);
}

/* Dropdown arrow indicator */
.tab-menu a.has-dropdown::after {
    content: '▼';
    font-size: 10px;
    margin-left: 5px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .tab-menu li .dropdown {
        position: static;
        box-shadow: none;
        background-color: rgba(255,255,255,0.9);
        margin-top: 5px;
        width: 100%;
    }
    
    .tab-menu li:hover .dropdown {
        display: none; /* On mobile, we'll use JavaScript to toggle */
    }
    
    .tab-menu li.active .dropdown {
        display: block;
    }
}

/* Nested Dropdown Styles */
.nested-dropdown {
    position: relative;
}

.nested-dropdown .has-nested-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nested-dropdown .has-nested-dropdown i {
    transition: transform 0.3s ease;
}

.nested-dropdown:hover .has-nested-dropdown i {
    transform: rotate(90deg);
}

.nested-dropdown-content {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1001;
    display: none;
    border-radius: 4px;
    overflow: hidden;
}

/* Fix: Ensure nested dropdown opens on hover */
.nested-dropdown:hover > .nested-dropdown-content {
    display: block !important;
}

.nested-dropdown-content a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: normal;
    border-radius: 0;
    background-color: transparent;
    transition: background-color 0.3s;
}

.nested-dropdown-content a:hover {
    background-color: rgba(226, 127, 203, 0.2); /* Use calls dropdown hover color */
}

/* Mobile Nested Dropdown Styles */
@media (max-width: 768px) {
    .nested-dropdown-content {
        position: static;
        box-shadow: none;
        background-color: rgba(240, 240, 240, 0.9);
        margin-left: 15px;
        width: calc(100% - 15px);
    }

    .nested-dropdown:hover > .nested-dropdown-content {
        display: none; /* On mobile, we'll use JavaScript to toggle */
    }

    .nested-dropdown.active .nested-dropdown-content {
        display: block;
    }
}