/* ==========================================================
   RaceForge Authentication Component Styles
   - User Dropdown Menu
   - Login/Join Button
   ========================================================== */

/* User Link (The main button, e.g., "// ADAM EDWARD") */
.nav-user-link { 
    font-family: var(--font-mono); 
    font-size: 1.25rem; 
    font-weight: 700; 
    color: #fff; 
    cursor: pointer; 
}

/* Dropdown Container */
.nav-dropdown { 
    position: relative; 
}

/* The Dropdown Box Itself */
.submenu {
    display: none !important; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    background: var(--bg-panel); 
    border: 1px solid var(--border-color);
    min-width: 180px; 
    padding: 0.5rem 0; 
    list-style: none; 
    z-index: 1001; 
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}
.nav-dropdown:hover .submenu { 
    display: block !important; 
}

/* Links inside the dropdown */
.submenu li a { 
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 1.2rem; 
    font-size: 1rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

/* Standard link hover effect */
.submenu li a:hover {
    background-color: rgba(0, 170, 255, 0.1);
    color: var(--text-primary);
}
.submenu li a:hover i {
    color: var(--accent-blue);
}

/* Logout link flashing animation */
.submenu li a[href*="logout"]:hover {
    color: #ff4444;
    animation: flash-warning 1.5s infinite;
}

@keyframes flash-warning {
    0%, 100% {
        background-color: rgba(255, 68, 68, 0.1);
        box-shadow: none;
    }
    50% {
        background-color: rgba(255, 68, 68, 0.2);
        box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    }
}