/* ═══════════════════════════════════════════════════════════
   🔧 FINAL HEADER BLUE FIX - SIMPLE & EFFECTIVE
   ═══════════════════════════════════════════════════════════ */

/* Force blue header with maximum specificity - COMPACT SIZE */
.top-bar,
header.top-bar,
body .top-bar,
html body .top-bar {
    background: linear-gradient(135deg, #0f2a44 0%, #1a365d 50%, #2c5282 100%) !important;
    color: #ffffff !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 4px 30px rgba(26, 54, 93, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.5rem 0 !important;
    min-height: auto !important;
}

/* Force condensed state to also be blue - COMPACT */
.top-bar.is-condensed,
header.top-bar.is-condensed,
body .top-bar.is-condensed {
    background: linear-gradient(135deg, #0f2a44 0%, #1a365d 50%, #2c5282 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    padding: 0.4rem 0 !important;
}

/* Ensure all header text is white */
.top-bar *,
.top-bar .container *,
.top-bar .header-layout *,
.top-bar .brand *,
.top-bar nav *,
.top-bar .header-left *,
.top-bar .header-right * {
    color: #ffffff !important;
}

/* Brand logo styling */
.top-bar .brand .logo,
.top-bar .logo {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Tagline golden color */
.top-bar .tagline,
.top-bar .brand .tagline {
    color: #d4af37 !important;
    background: none !important;
    -webkit-text-fill-color: #d4af37 !important;
}

/* Navigation links */
.top-bar nav a,
.top-bar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Navigation hover states */
.top-bar nav a:hover,
.top-bar nav a.active,
.top-bar .nav-link:hover,
.top-bar .nav-link.active {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2) !important;
}

/* Language switcher */
.top-bar .language-switcher,
.top-bar .language-dropdown,
.top-bar #language-select {
    background: rgba(44, 82, 130, 0.8) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.top-bar .language-dropdown option,
.top-bar #language-select option {
    background: #2c5282 !important;
    color: #ffffff !important;
}

/* CTA button */
.top-bar .cta-btn,
.top-bar .btn.primary {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
    color: #1a365d !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3), 0 4px 12px rgba(212, 175, 55, 0.2) !important;
}

.top-bar .cta-btn:hover,
.top-bar .btn.primary:hover {
    background: linear-gradient(135deg, #e6c547 0%, #d4af37 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.4), 0 6px 16px rgba(212, 175, 55, 0.3) !important;
}

/* Mobile responsive - COMPACT */
@media (max-width: 768px) {
    .top-bar {
        background: linear-gradient(135deg, #0f2a44 0%, #1a365d 50%, #2c5282 100%) !important;
        padding: 0.4rem 0 !important;
    }
    
    .top-bar .header-layout {
        background: rgba(26, 54, 93, 0.95) !important;
        border-radius: 8px !important;
        padding: 0.6rem !important;
        margin: 0.3rem !important;
        backdrop-filter: blur(20px) !important;
        gap: 0.8rem !important;
    }
    
    .top-bar .logo {
        font-size: 0.9rem !important;
    }
    
    .top-bar .tagline {
        font-size: 0.65rem !important;
    }
    
    .top-bar nav a {
        padding: 0.35rem 0.8rem !important;
        font-size: 0.75rem !important;
    }
    
    .top-bar .cta-btn {
        padding: 0.4rem 1rem !important;
        font-size: 0.75rem !important;
        min-width: 100px !important;
    }
    
    .top-bar .brand-logo {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Override any conflicting styles */
.top-bar {
    background-image: none !important;
    background-color: #1a365d !important;
}

/* Ensure visibility */
.top-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* COMPACT HEADER SIZING */
.top-bar .header-layout {
    gap: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.top-bar .brand {
    gap: 0.2rem !important;
}

.top-bar .logo {
    font-size: 1rem !important;
    line-height: 1.1 !important;
}

.top-bar .tagline {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.top-bar .brand-logo {
    width: 35px !important;
    height: 35px !important;
}

.top-bar .brand-logo img {
    width: 100% !important;
    height: 100% !important;
}

.top-bar nav a {
    padding: 0.4rem 1rem !important;
    font-size: 0.8rem !important;
}

.top-bar .cta-btn {
    padding: 0.5rem 1.2rem !important;
    font-size: 0.8rem !important;
    min-width: 120px !important;
}

.top-bar .language-dropdown {
    padding: 0.4rem 1.5rem 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
    min-width: 90px !important;
}

.top-bar .header-nav {
    margin-top: 0.3rem !important;
}
/* ═
══════════════════════════════════════════════════════════
   🚀 FORCE HEADER VISIBILITY AND BLUE COLOR
   ═══════════════════════════════════════════════════════════ */

/* Make sure header is always visible */
.top-bar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    width: 100% !important;
}

/* Override any JavaScript that might hide the header */
.top-bar.is-hidden {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Force blue background on page load */
body .top-bar,
html body .top-bar {
    background: linear-gradient(135deg, #0f2a44 0%, #1a365d 50%, #2c5282 100%) !important;
}

/* Additional specificity for stubborn styles */
body header.top-bar,
html body header.top-bar {
    background: linear-gradient(135deg, #0f2a44 0%, #1a365d 50%, #2c5282 100%) !important;
    color: #ffffff !important;
}

/* Override any inline styles */
.top-bar[style] {
    background: linear-gradient(135deg, #0f2a44 0%, #1a365d 50%, #2c5282 100%) !important;
}

/* Make sure the header shows immediately */
.top-bar {
    animation: none !important;
    transition: none !important;
}

/* Force show on page load */
.top-bar:not(.is-visible) {
    transform: translateY(0) !important;
    opacity: 1 !important;
}