/* Logo Sizing Fix - Make logos more flexible and responsive */

/* Default logo sizing - constrain height but allow width to be flexible */
#public-header .logo img,
.brand-logo {
    max-height: 60px; /* Reduced from 80px for better proportions */
    max-width: 200px; /* Prevent logos from being too wide */
    width: auto;
    height: auto;
    object-fit: contain; /* Maintain aspect ratio */
}

/* Specific fix for the main header logo */
#public-header .logo {
    height: 70px; /* Reduced from 80px */
    display: flex;
    align-items: center;
    padding: 5px 0; /* Add some padding for better spacing */
}

/* When header is fixed/scrolled */
#public-header-wrap.fixed-animate #public-header .logo {
    height: 50px; /* Reduced from 60px */
}

#public-header-wrap.fixed-animate #public-header .logo img {
    max-height: 40px; /* Reduced from 60px */
    min-width: 40px; /* Reduced from 53px */
}

/* Mobile responsive adjustments */
@media screen and (max-width: 767px) {
    #public-header .logo img,
    .brand-logo {
        max-height: 50px; /* Smaller on mobile */
        max-width: 150px;
    }
    
    #public-header .logo {
        height: 60px;
        margin-right: 4%; /* Reduce margin on mobile */
    }
}

@media screen and (max-width: 595px) {
    #public-header .logo img {
        max-height: 45px; /* Even smaller on very small screens */
        max-width: 120px;
    }
}

/* Ensure logos don't get stretched */
#myLogo,
.brand-logo,
.storeHomeLink {
    display: block;
    width: auto !important;
    height: auto !important;
}

/* Footer logo sizing */
#public-footer .brand-logo {
    max-width: 150px; /* Reduced from 171px */
    max-height: 50px;
    width: auto;
    height: auto;
}

/* Mobile menu logo */
.mobile-menu .logo img {
    max-height: 40px;
    max-width: 120px;
    width: auto;
    height: auto;
}

/* Optional: Add a subtle transition for smooth resizing */
#public-header .logo img {
    transition: all 0.3s ease;
}

/* Alternative approach: Use CSS variables for easy customization */
:root {
    --logo-max-height: 60px;
    --logo-max-width: 200px;
    --logo-mobile-max-height: 45px;
    --logo-mobile-max-width: 120px;
}

/* Then organizations can override these in their whitelabel.css:
:root {
    --logo-max-height: 70px;
    --logo-max-width: 250px;
}
*/