/* =====================================================
   ROLLEN INVESTMENTS - LOGO VISIBILITY FIX
   Correcting logo sizing and visibility issues only
   ===================================================== */

/* ===== NAVIGATION LOGO - SIGNIFICANTLY LARGER ===== */

/* Main navigation logo - much more prominent */
.navbar .logo img,
#logo-img {
    height: 85px !important; /* Increased from 65px to 85px */
    width: auto !important;
    max-width: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state - still clearly visible */
.navbar.scrolled .logo img,
.navbar.scrolled #logo-img {
    height: 70px !important; /* Increased from 52px to 70px */
}

/* Mobile logo - maintain prominence */
@media (max-width: 768px) {
    .navbar .logo img,
    #logo-img {
        height: 70px !important; /* Increased from 55px to 70px */
    }
    
    .navbar.scrolled .logo img,
    .navbar.scrolled #logo-img {
        height: 58px !important;
    }
}

/* ===== HERO LOGO - DRAMATICALLY LARGER ===== */

/* Hero section logo - major brand statement */
.hero-logo {
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo img {
    height: 140px !important; /* Increased from 95px to 140px */
    width: auto !important;
    max-width: 100%;
    filter: brightness(0) invert(1) drop-shadow(0 6px 30px rgba(212, 175, 55, 0.4));
    animation: logoFloat 3s ease-in-out infinite;
}

/* Mobile hero logo */
@media (max-width: 768px) {
    .hero-logo img {
        height: 100px !important; /* Increased from 75px to 100px */
    }
}

@media (max-width: 480px) {
    .hero-logo img {
        height: 85px !important;
    }
}

/* ===== FOOTER LOGO - SIGNIFICANTLY LARGER ===== */

/* Footer logo - clear brand presence */
.footer-logo {
    height: 80px !important; /* Increased from 60px to 80px */
    width: auto !important;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 3px 15px rgba(212, 175, 55, 0.25));
}

.footer-logo:hover {
    filter: drop-shadow(0 6px 25px rgba(212, 175, 55, 0.5));
    transform: scale(1.08);
}

/* Mobile footer logo */
@media (max-width: 768px) {
    .footer-logo {
        height: 65px !important;
    }
}

/* ===== LOGO SHOWCASE - INTERNAL SECTIONS ===== */

/* Logo items in showcase sections - much more visible */
.logo-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

.logo-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.logo-item img {
    height: 110px !important; /* Increased significantly for visibility */
    width: auto !important;
    max-width: 100%;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.1));
    transition: all 0.4s ease;
}

.logo-item:hover img {
    filter: drop-shadow(0 6px 20px rgba(212, 175, 55, 0.45));
    transform: scale(1.12);
}

/* Mobile logo showcase */
@media (max-width: 768px) {
    .logo-item img {
        height: 85px !important;
    }
}

/* ===== ADDITIONAL LOGO INSTANCES ===== */

/* Any other logo references on the site */
img[alt*="ROLLEN INVESTMENTS Logo"],
img[alt="ROLLEN INVESTMENTS"],
img[src*="vOSZYEc0"],
img[src*="8weBZK3g"],
img[src*="B1E9mWSl"],
img[src*="VtnAhrks"],
img[src*="L2RcqhwN"],
img[src*="tDLaUjrm"],
img[src*="0bUevArA"] {
    min-height: 60px !important;
}

/* Ensure logo never becomes too small */
.navbar img[alt*="ROLLEN"],
.footer img[alt*="ROLLEN"],
.hero img[alt*="ROLLEN"] {
    min-height: 60px;
}

/* ===== LOGO SHARPNESS & QUALITY ===== */

/* Ensure logos render sharply */
.logo img,
.hero-logo img,
.footer-logo img,
.logo-item img,
#logo-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== LOGO EMPHASIS & VISIBILITY ===== */

/* Add subtle glow to enhance visibility */
.navbar .logo img {
    filter: drop-shadow(0 2px 8px rgba(77, 109, 184, 0.15));
}

.navbar .logo:hover img {
    filter: drop-shadow(0 4px 12px rgba(77, 109, 184, 0.3));
}

/* Hero logo enhanced visibility */
.hero-logo img {
    filter: brightness(0) invert(1) drop-shadow(0 6px 30px rgba(212, 175, 55, 0.5)) !important;
}

/* ===== RESPONSIVE LOGO SCALING ===== */

/* Tablet adjustments */
@media (max-width: 1024px) {
    .navbar .logo img,
    #logo-img {
        height: 78px !important;
    }
    
    .navbar.scrolled .logo img,
    .navbar.scrolled #logo-img {
        height: 64px !important;
    }
    
    .hero-logo img {
        height: 120px !important;
    }
    
    .footer-logo {
        height: 72px !important;
    }
    
    .logo-item img {
        height: 95px !important;
    }
}

/* Small tablet */
@media (max-width: 768px) {
    .hero-logo img {
        height: 100px !important;
    }
    
    .logo-item img {
        height: 80px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .navbar .logo img,
    #logo-img {
        height: 65px !important;
    }
    
    .navbar.scrolled .logo img,
    .navbar.scrolled #logo-img {
        height: 55px !important;
    }
    
    .hero-logo img {
        height: 80px !important;
    }
    
    .footer-logo {
        height: 58px !important;
    }
    
    .logo-item img {
        height: 70px !important;
    }
}

/* ===== LOGO CONTAINER ADJUSTMENTS ===== */

/* Ensure logo containers don't restrict size */
.navbar .logo,
.hero-logo,
.footer .footer-section:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .logo {
    padding: 0.5rem 0;
}

/* ===== LOGO LINK AREA ===== */

/* Make logo clickable area match the increased size */
.navbar .logo {
    min-height: 90px;
    display: flex;
    align-items: center;
}

/* ===== PREVENT LOGO SHRINKING ===== */

/* Override any conflicting styles that might shrink logos */
.logo img[src],
.hero-logo img[src],
.footer-logo[src],
.logo-item img[src] {
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

/* ===== DEPLOYMENT FIX - ENSURE LOGO ALWAYS LOADS ===== */

/* Force logo display even if image hasn't loaded yet */
.navbar .logo img,
.hero-logo img,
.footer-logo,
#logo-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Prevent logo from being hidden by any parent container */
.navbar .logo,
.hero-logo,
.footer .footer-section:first-child {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
}

/* Ensure logo renders on all browsers */
.logo img,
.hero-logo img,
.footer-logo {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fix for lazy-loaded images */
img[loading="lazy"] {
    display: block !important;
}

/* Ensure logo is always on top of other elements */
.navbar .logo {
    position: relative;
    z-index: 1000 !important;
}

.hero-logo {
    position: relative;
    z-index: 10 !important;
}

/* Production fix: Prevent any opacity animations from hiding logo */
.navbar .logo img,
.hero-logo img,
.footer-logo {
    animation: none !important;
}

/* Ensure logos load with priority */
.logo img,
.hero-logo img,
.footer-logo {
    loading: eager !important;
    decoding: async !important;
}

/* Fix for potential flex/grid issues that might hide logos */
.navbar .container,
.hero-content,
.footer-content {
    display: flex !important;
}

/* Fallback: If image fails to load, show alt text clearly */
img[alt*="ROLLEN INVESTMENTS"] {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-deep-purple, #272147) !important;
    padding: 10px !important;
    display: inline-block !important;
}

/* Critical fix: Prevent any CSS that might set display:none */
.logo,
.logo img,
.hero-logo,
.hero-logo img,
.footer-logo {
    display: block !important;
}

.navbar .logo {
    display: flex !important;
}