/* navbar.css - FINAL CODE (Option D) - Guarantees White Bar and Blue Button */

/* Core Header Styles (Minimal Height) */
.site-header {
    background-color: #ffffff;
    color: #333;
    
    /* Minimal Height */
    height: 60px; 
    padding: 10px 0;
    
    border-bottom: 1px solid #e0e0e0; 
    box-shadow: none; 
    
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* --- Brand/Logo Styles --- */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #1a2a6c; /* Logo text color set to your brand blue */
    font-weight: 700;
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

.brand:hover {
    transform: translateY(-1px);
}

.logo-small {
    height: 30px; 
    margin-right: 10px;
}

.brand-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a2a6c;
}

/* --- User & CTA Section Styles --- */
.nav-cta {
    display: flex;
    align-items: center;
    gap: 15px;
}

#user-greeting {
    color: #555; /* Dark grey text on white background */
    font-weight: 500;
}

#user-section { 
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- Button Styles (Rounded Primary) --- */
.btn {
    padding: 10px 20px;
    border-radius: 30px; 
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
}

.btn.primary {
    background: #1a2a6c; /* Solid Primary Blue */
    color: white !important; /* Forces White Text on Blue Button */
    box-shadow: 0 4px 10px rgba(26, 42, 108, 0.2);
}

.btn.primary:hover {
    background: #2b5876;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(26, 42, 108, 0.3);
}

/* Fix ghost button for white navbar background */
.site-header .btn.ghost {
    background: transparent !important;
    color: #1a2a6c !important;  /* Dark blue text */
    border: 2px solid #1a2a6c !important;  /* Dark blue border */
}

.site-header .btn.ghost:hover {
    background: rgba(26, 42, 108, 0.1) !important;
    color: #1a2a6c !important;
}

/* Visibility control via body class */
body:not(.logged-in) #user-section {
    display: none !important;
}

body:not(.logged-in) #login-btn {
    display: inline-flex !important;
}

body.logged-in #user-section {
    display: flex !important;
}

body.logged-in #login-btn {
    display: none !important;
}