/**
 * Logo Styles for Piranha Tool
 * Optimized logo display across all devices
 */

/* Main Header Logo */
.header-logo {
    height: 40px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: all 0.2s ease;
}

.header-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Mobile Logo */
.mobile-logo {
    height: 32px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

/* Footer Logo */
.footer-logo {
    height: 40px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: all 0.2s ease;
}

.footer-logo:hover {
    transform: scale(1.05);
    filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

/* Small Header Logo (for compact views) */
.header-logo-small {
    height: 28px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
}

/* Logo Container */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Responsive Logo Adjustments */
@media (max-width: 640px) {
    .header-logo {
        height: 36px;
        max-width: 100px;
    }
    
    .logo-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-logo {
        height: 32px;
        max-width: 90px;
    }
}

/* Logo Loading States */
.header-logo {
    background-color: #f3f4f6;
    border-radius: 4px;
}

.header-logo[src=""] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40"><rect width="120" height="40" fill="%23f3f4f6"/><text x="60" y="25" text-anchor="middle" fill="%236b7280" font-family="Arial" font-size="12">Logo</text></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .header-logo,
    .mobile-logo,
    .header-logo-small {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    .header-logo,
    .mobile-logo,
    .header-logo-small {
        filter: drop-shadow(0 2px 4px rgba(255,255,255,0.1));
    }
}

/* Logo Animation for Page Load */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-logo {
    animation: logoFadeIn 0.5s ease-out;
}

/* Accessibility */
.header-logo:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print Styles */
@media print {
    .header-logo {
        filter: none;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}