/**
 * Header Navigation Fix for SPX Functions
 * Fixes overlapping user icon/username and login/register links
 * when admin bar is removed for non-admin users
 */

/* Fix for Neve theme header when admin bar is removed */
body:not(.admin-bar) .header-main {
    position: relative;
    z-index: 999;
}

/* Ensure proper spacing for header navigation elements */
.header-main .nav-menu-primary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Fix user account area spacing */
.header-main .account-container,
.header-main .user-account,
.header-main .login-register-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    white-space: nowrap;
}

/* Prevent text overlap in user area */
.header-main .user-icon {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.header-main .username {
    margin-left: 0.25rem;
    margin-right: 0.75rem;
}

/* Fix login/register links spacing */
.header-main .login-link,
.header-main .register-link {
    margin: 0 0.25rem;
    padding: 0.25rem 0.5rem;
}

/* Ensure proper header height without admin bar */
body:not(.admin-bar) .site-header {
    top: 0;
}

/* Fix for mobile navigation */
@media (max-width: 768px) {
    .header-main .account-container,
    .header-main .user-account,
    .header-main .login-register-links {
        font-size: 0.875rem;
        gap: 0.25rem;
    }
    
    .header-main .username {
        margin-left: 0.125rem;
        margin-right: 0.5rem;
    }
}

/* Additional fixes for common Neve theme selectors */
.header-main .component-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-main .header-menu-sidebar .menu-item {
    margin: 0 0.25rem;
}

/* Ensure header elements don't overlap */
.header-main .header-top,
.header-main .header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* Fix for any custom user menu */
.header-main .custom-user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.header-main .custom-user-menu .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 0.5rem;
}