/*
Theme Name: Twenty Twenty-One Child
Description: Child theme of Twenty Twenty-One
Author: Your Name
Template: twentytwentyone
Version: 1.0.0
*/

/* Import parent theme styles */
@import url("../twentytwentyone/style.css");

/* Custom CSS will be added next */
/* Force dropdown to work */
.dropdown {
    position: relative !important;
    z-index: 9999 !important;
}

.dropdown-content {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: rgba(15, 28, 51, 0.95) !important;
    border: 2px solid rgba(34, 171, 148, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    min-width: 200px !important;
    z-index: 10000 !important;
}

.dropdown:hover .dropdown-content {
    display: block !important;
}

.dropdown-content a {
    display: block !important;
    padding: 10px 20px !important;
    color: #00FFEA !important;
    text-decoration: none !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    transition: background 0.3s ease !important;
}

.dropdown-content a:hover {
    background: rgba(34, 171, 148, 0.2) !important;
}

/* Fix dropdown container overflow */
.dropdown {
    position: relative !important;
    z-index: 9999 !important;
}

.dropdown-content {
    display: none !important;
    position: fixed !important; /* Changed from absolute to fixed */
    top: auto !important;
    right: 20px !important; /* Adjust based on button position */
    background: rgba(15, 28, 51, 0.95) !important;
    border: 2px solid rgba(34, 171, 148, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    min-width: 200px !important;
    z-index: 99999 !important; /* Higher z-index */
    margin-top: 45px !important; /* Adjust to position below button */
}

.dropdown:hover .dropdown-content {
    display: block !important;
}

/* Override any parent container overflow */
.header, .nav-links {
    overflow: visible !important;
}

.dropdown-content a {
    display: block !important;
    padding: 10px 20px !important;
    color: #00FFEA !important;
    text-decoration: none !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    transition: background 0.3s ease !important;
}

.dropdown-content a:hover {
    background: rgba(34, 171, 148, 0.2) !important;
}