/* Image Optimization Styles */

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Optimize navbar logo loading only */
.navbar .logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
}

/* Navbar logo optimization */
.navbar .logo img {
    will-change: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Lazy loading placeholder */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Preload critical images */
.critical-image {
    content-visibility: auto;
    contain: layout style paint;
}

/* Optimize for different screen densities - navbar only */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .navbar .logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}

/* Performance hints */
img {
    content-visibility: auto;
    contain: layout;
}

/* Navbar height reduction and logo centering - Maximum specificity */
body nav.navbar,
html body nav.navbar {
    padding: 2px 20px !important;
    align-items: center !important;
    min-height: 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

body nav.navbar .logo,
html body nav.navbar .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

body nav.navbar .logo a,
html body nav.navbar .logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

body nav.navbar .logo img,
body nav.navbar .logo a img,
html body nav.navbar .logo img,
html body nav.navbar .logo a img {
    height: 32px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    object-fit: contain !important;
}

/* Force override for mobile */
@media screen and (max-width: 768px) {
    body nav.navbar,
    html body nav.navbar {
        padding: 1px 15px !important;
        min-height: 26px !important;
    }
    
    body nav.navbar .logo img,
    body nav.navbar .logo a img,
    html body nav.navbar .logo img,
    html body nav.navbar .logo a img {
        height: 28px !important;
    }
}