/**
 * RaceForge Isolated Header Styles - V5 (Cleaned Up)
 */

.site-header {
    background: rgba(16, 16, 18, 0.98);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Container padding (default edge padding) */
.site-header .container {
    padding: 0 32px;
}

/* Main header row: vertical padding + flex layout */
.main-header-row { 
    padding: 1.3rem 0; /* vertical only */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* --- LOGO --- */
.logo { 
    font-family: var(--font-mono); 
    font-size: 1.72rem; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none;

    /* Shift logo left ~3/4 inch */
    margin-left: -72px;
}

.logo-prefix { color: var(--text-secondary); opacity: 0.5; }
.logo-r { color: var(--accent-blue); transition: 0.3s; }
.logo-f { color: #fff; transition: 0.3s; }
.logo:hover .logo-r { color: #fff; }
.logo:hover .logo-f { color: var(--accent-blue); }

/* --- NAVIGATION --- */
.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 2.5rem;

    /* Shift driver/login/join right ~3/4 inch */
    margin-right: -72px;
}

.main-nav ul { 
    list-style: none; 
    display: flex; 
    gap: 2.5rem; 
    align-items: center; 
}

/* Nav links */
.main-nav a { 
    font-family: var(--font-mono); 
    font-size: 1.1rem; 
    color: var(--text-secondary); 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.main-nav a:hover, .main-nav a.active { 
    color: var(--accent-blue); 
}


/* --- MOBILE HAMBURGER --- */
.mobile-menu-toggle { 
    display: none; 
    flex-direction: column; 
    gap: 4px; 
    cursor: pointer; 
    padding: 5px; 
}

.mobile-menu-toggle .bar { 
    width: 20px; 
    height: 2px; 
    background: #fff; 
    transition: 0.3s; 
    border-radius: 1px;
}


/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .site-header .container {
        padding: 0 1rem; /* reset container padding on mobile */
    }

    /* Mobile header-actions overlay */
    .header-actions {
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100vh;
        background: rgba(10, 10, 12, 0.98); 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        z-index: 1050; 
        padding: 2rem;
        margin-right: 0; /* reset right shift on mobile */
    }

    body.mobile-menu-open .header-actions { display: flex; }
    body.mobile-menu-open { overflow: hidden; }

    /* Mobile hamburger: absolutely positioned so always visible */
    #mobile-menu-toggle {
        display: flex !important;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        z-index: 1100;
    }

    #mobile-menu-toggle .bar {
        width: 24px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: 0.3s;
    }

    /* Nav and submenu adjustments */
    .main-nav ul { flex-direction: column; gap: 2rem; }
    .main-nav a { font-size: 2.05rem; }

    .nav-dropdown .submenu { 
        position: static; 
        display: block !important; 
        background: transparent; 
        border: none; 
        box-shadow: none; 
        text-align: center; 
    }

    /* Reset logo shift on mobile */
    .logo { margin-left: 0; }
}