/* Estilos ultra-modernos e profissionais para as logomarcas do RANK1NG */
/* Cor base: #3286BF - Design clean e corporativo */

:root {
    --logo-primary-color: #3286BF;
    --logo-secondary-color: #2563EB;
    --logo-shadow-light: rgba(50, 134, 191, 0.1);
    --logo-shadow-medium: rgba(50, 134, 191, 0.2);
    --logo-shadow-dark: rgba(50, 134, 191, 0.3);
}

/* Base styling for all logos */
.rank1ng-logo {
    max-width: 100%;
    height: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 3px var(--logo-shadow-light));
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: transform, filter;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Logo sizes - otimizados para melhor espaçamento */
.rank1ng-logo-main {
    height: 55px;  /* Aumentado de 48px para 55px */
    width: auto;   /* Largura automática baseada na proporção original */
}

/* Logo maior para navbar da landing page */
.rank1ng-logo-landing {
    height: 70px;  /* Aumentado de 60px para 70px */
    width: auto;   /* Largura automática baseada na proporção original */
}

.rank1ng-logo-compact {
    height: 35px;  /* Altura fixa, largura automática para manter proporção */
    width: auto;   /* Largura automática baseada na proporção original */
}

.rank1ng-logo-horizontal {
    height: 40px;  /* Altura fixa, largura automática para manter proporção */
    width: auto;   /* Largura automática baseada na proporção original */
}

.rank1ng-icon {
    width: 32px;
    height: 32px;
}

.rank1ng-favicon {
    width: 16px;
    height: 16px;
}

/* Interactive states - aprimorados para design mais clean */
.rank1ng-logo:hover {
    transform: translateY(-1px) scale(1.02);  /* Reduzido movimento */
    filter: drop-shadow(0 3px 8px var(--logo-shadow-medium)) brightness(1.03) saturate(1.05);  /* Efeito mais sutil */
}

.rank1ng-logo:active {
    transform: translateY(0px) scale(1.00);  /* Mais suave */
    transition: all 0.15s ease;
}

.rank1ng-logo:focus {
    outline: 2px solid var(--logo-primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--logo-shadow-light);
}

/* Theme variants */
.rank1ng-logo-dark {
    filter: brightness(1.4) saturate(1.3) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.rank1ng-logo-light {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
}

/* White logo for dark backgrounds */
.rank1ng-logo-white {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.rank1ng-logo-clean {
    filter: none;
    transition: opacity 0.3s ease;
}

.rank1ng-logo-clean:hover {
    opacity: 0.8;
    transform: none;
}

/* Ultra-clean version - sem sombras ou efeitos */
.rank1ng-logo-ultra-clean {
    filter: none !important;
    transition: opacity 0.2s ease;
}

.rank1ng-logo-ultra-clean:hover {
    opacity: 0.85;
    transform: none !important;
}

.rank1ng-logo-corporate {
    filter: grayscale(20%) contrast(1.1) drop-shadow(0 1px 2px var(--logo-shadow-light));
}

/* Navigation specific */
.rank1ng-logo-nav {
    opacity: 0.95;
    transition: all 0.3s ease;
}

.rank1ng-logo-nav:hover {
    opacity: 1;
    transform: scale(1.02);
}

/* Accessibility */
.rank1ng-logo-accessible {
    filter: contrast(1.2);
    outline: 2px solid transparent;
    border-radius: 4px;
}

.rank1ng-logo-accessible:focus {
    outline: 2px solid var(--logo-primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--logo-shadow-light);
}

/* Loading state */
.rank1ng-logo-loading {
    opacity: 0.6;
    animation: logoLoading 2s ease-in-out infinite;
}

@keyframes logoLoading {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* Print styles */
.rank1ng-logo-print {
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* Responsive breakpoints - otimizados */
@media (max-width: 768px) {
    .rank1ng-logo-main {
        height: 48px;  /* Aumentado ainda mais para mobile */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-landing {
        height: 62px;  /* Aumentado ainda mais para mobile */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-horizontal {
        height: 44px;  /* Aumentado ainda mais para mobile */
        width: auto;   /* Largura automática */
    }
}

@media (max-width: 480px) {
    .rank1ng-logo-main {
        height: 42px;  /* Aumentado ainda mais para mobile pequeno */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-landing {
        height: 54px;  /* Aumentado ainda mais para mobile pequeno */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-horizontal {
        height: 39px;  /* Aumentado ainda mais para mobile pequeno */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-compact {
        height: 35px;  /* Aumentado ainda mais para mobile pequeno */
        width: auto;   /* Largura automática */
    }
}

/* Ultra-small screens */
@media (max-width: 320px) {
    .rank1ng-logo-main {
        height: 35px;  /* Aumentado ainda mais para telas muito pequenas */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-landing {
        height: 44px;  /* Aumentado ainda mais para telas muito pequenas */
        width: auto;   /* Largura automática */
    }
    
    .rank1ng-logo-horizontal {
        height: 33px;  /* Aumentado ainda mais para telas muito pequenas */
        width: auto;   /* Largura automática */
    }
}

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

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rank1ng-logo {
        transition: none;
        animation: none;
    }
    
    .rank1ng-logo:hover {
        transform: none;
    }
    
    .rank1ng-logo-loading {
        animation: none;
        opacity: 0.8;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .rank1ng-logo {
        filter: brightness(1.2) drop-shadow(0 1px 3px rgba(255, 255, 255, 0.1));
    }
}

/* Container helpers */
.rank1ng-logo-container {
    display: inline-block;
    line-height: 0;
}

.rank1ng-logo-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank1ng-logo-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.rank1ng-logo-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}