/* Header Component */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    padding: var(--space-lg) var(--space-xl);
    background: rgba(10, 14, 39, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    animation: slideDown 0.8s ease 0.3s both;
}

.logo {
    display: inline-block;
    cursor: pointer;
    transition: all var(--transition-base);
}

.logo-image {
    height: 40px;
    width: auto;
    /* Apply cyan color to the SVG */
    filter: brightness(0) saturate(100%) invert(84%) sepia(76%) saturate(3844%) hue-rotate(160deg) brightness(103%) contrast(106%)
            drop-shadow(0 0 10px var(--glow-cyan))
            drop-shadow(0 0 20px var(--glow-cyan))
            drop-shadow(0 0 30px rgba(0, 245, 255, 0.2));
    transition: all var(--transition-base);
}

.logo:hover .logo-image {
    filter: brightness(0) saturate(100%) invert(84%) sepia(76%) saturate(3844%) hue-rotate(160deg) brightness(103%) contrast(106%)
            drop-shadow(0 0 15px var(--glow-cyan-strong))
            drop-shadow(0 0 30px var(--glow-cyan))
            drop-shadow(0 0 45px rgba(0, 245, 255, 0.3));
    transform: scale(1.05);
}

/* Responsive Header */
@media (max-width: 768px) {
    .site-header {
        padding: var(--space-md) var(--space-lg);
    }

    .logo-image {
        height: 32px;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: var(--space-sm) var(--space-md);
    }

    .logo-image {
        height: 28px;
    }
}