/* Real PNG Logo Styling with Website Colors */
.logo-png,
.hero-logo-png,
.sidebar-logo {
    /* Apply cyan filter to match website accent color */
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(48%) 
        sepia(96%) 
        saturate(2618%) 
        hue-rotate(158deg) 
        brightness(104%) 
        contrast(101%)
        drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
    
    transition: all 0.3s ease;
}

/* Navigation logo hover effect */
.nav-logo:hover .logo-png {
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(76%) 
        sepia(93%) 
        saturate(434%) 
        hue-rotate(158deg) 
        brightness(104%) 
        contrast(101%)
        drop-shadow(0 0 15px rgba(0, 255, 136, 0.5));
    
    transform: scale(1.05);
}

/* Hero logo with animated glow */
.hero-logo-png {
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(48%) 
        sepia(96%) 
        saturate(2618%) 
        hue-rotate(158deg) 
        brightness(104%) 
        contrast(101%)
        drop-shadow(0 0 20px rgba(0, 212, 255, 0.4));
    
    animation: realLogoGlow 3s ease-in-out infinite alternate;
}

@keyframes realLogoGlow {
    0% {
        filter: 
            brightness(0) 
            saturate(100%) 
            invert(48%) 
            sepia(96%) 
            saturate(2618%) 
            hue-rotate(158deg) 
            brightness(104%) 
            contrast(101%)
            drop-shadow(0 0 20px rgba(0, 212, 255, 0.4));
    }
    100% {
        filter: 
            brightness(0) 
            saturate(100%) 
            invert(76%) 
            sepia(93%) 
            saturate(434%) 
            hue-rotate(158deg) 
            brightness(104%) 
            contrast(101%)
            drop-shadow(0 0 30px rgba(0, 255, 136, 0.7));
    }
}

/* Admin sidebar logo */
.sidebar-logo {
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(48%) 
        sepia(96%) 
        saturate(2618%) 
        hue-rotate(158deg) 
        brightness(104%) 
        contrast(101%)
        drop-shadow(0 0 5px rgba(0, 212, 255, 0.3));
}

/* Enhanced glitch effect for real logo */
.logo-png.glitch-effect {
    position: relative;
}

.logo-png.glitch-effect::before,
.logo-png.glitch-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('logo-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-png.glitch-effect:hover::before,
.logo-png.glitch-effect:hover::after {
    opacity: 0.7;
}

.logo-png.glitch-effect::before {
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(12%) 
        sepia(100%) 
        saturate(7463%) 
        hue-rotate(2deg) 
        brightness(113%) 
        contrast(115%);
    animation: glitchRed 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.logo-png.glitch-effect::after {
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(76%) 
        sepia(93%) 
        saturate(434%) 
        hue-rotate(158deg) 
        brightness(104%) 
        contrast(101%);
    animation: glitchCyan 0.3s infinite reverse;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitchRed {
    0%, 90%, 100% { transform: translate(0); }
    10% { transform: translate(-2px, -2px); }
    20% { transform: translate(2px, 2px); }
}

@keyframes glitchCyan {
    0%, 90%, 100% { transform: translate(0); }
    10% { transform: translate(2px, 2px); }
    20% { transform: translate(-2px, -2px); }
}

/* Clean logo container with tighter spacing */
.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs); /* Much smaller gap - was var(--space-sm) */
}

/* Larger logo sizes to match original design */
.logo-png {
    height: 50px !important; /* Increased from 40px */
    width: auto;
}

/* Hero logo sizing */
.hero-logo-png {
    height: 140px !important; /* Increased from 120px */
    width: auto;
}

/* Responsive logo adjustments */
@media (max-width: 768px) {
    .logo-png {
        height: 42px !important; /* Bigger on mobile too */
        width: auto;
    }
    
    .hero-logo-png {
        height: 100px !important;
        width: auto;
    }
    
    .nav-logo {
        gap: calc(var(--space-xs) * 0.8); /* Even tighter on mobile */
    }
}