/* WPP Logo Optimizations and Enhancements */

/* Ensure SVG logos scale properly */
img[src$=".svg"] {
    width: auto;
    height: 100%;
    max-width: 100%;
}

/* Header logo sizing */
#headerLogo {
    height: 48px;
    width: auto;
    max-width: 400px;
}

#headerLogoMobile {
    height: 40px;
    width: auto;
}

/* Quality seal animation enhancement */
img[src*="Seal_Primary"] {
    animation: subtlePulse 4s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Footer logo adjustments for dark background */
footer img[src*="Monogram"] {
    filter: none; /* Remove any inherited filters since we're using white version */
}

/* Watermark pattern for features section */
.watermark-section {
    position: relative;
}

.watermark-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/screenshots/WPP-Logos/Watermark_Tile.svg');
    background-repeat: repeat;
    background-size: 300px 300px;
    background-position: center;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.watermark-section > * {
    position: relative;
    z-index: 1;
}

/* Success modal green monogram */
.success-icon {
    animation: checkmarkPop 0.6s ease-out;
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Loading state with rotating monogram */
.loading-logo {
    animation: logoRotate 2s linear infinite;
}

@keyframes logoRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hover effects for clickable logos */
.logo-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-hover:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 12px rgba(10, 35, 66, 0.15));
}

/* Responsive logo visibility */
@media (max-width: 767px) {
    /* Hide desktop logos on mobile */
    .desktop-logo {
        display: none !important;
    }

    /* Show mobile logos */
    .mobile-logo {
        display: block !important;
    }

    /* Adjust hero seal size on mobile */
    img[src*="Seal_Primary"] {
        height: 48px;
        width: 48px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet optimizations */
    #headerLogo {
        height: 44px;
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    /* Desktop optimizations */
    #headerLogo {
        height: 52px;
        max-width: 450px;
    }

    img[src*="Seal_Primary"] {
        height: 64px;
        width: 64px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* Auto-switch to white logos in dark mode */
    .auto-dark-logo {
        filter: brightness(0) invert(1);
    }
}

/* Print styles */
@media print {
    /* Use black logos for print */
    img[src*="OneColor_White"] {
        display: none;
    }

    .print-logo-black {
        display: block !important;
    }
}

/* Accessibility - High contrast mode */
@media (prefers-contrast: high) {
    img[src$=".svg"] {
        filter: contrast(1.2);
    }
}

/* Performance optimization - Lazy load preparation */
img[data-lazy] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[data-lazy].loaded {
    opacity: 1;
}