/* Logo Switching Logic */

.logo-img {
    max-height: 50px;
    width: auto;
    display: none;
}

/* --- DESKTOP --- */

/* Default State (Desktop Light) */
.logo-desktop-light {
    display: block;
}

/* Desktop Dark */
[data-theme="dark"] .has-dark-logo .logo-desktop-light {
    display: none;
}

[data-theme="dark"] .logo-desktop-dark {
    display: block;
}

/* --- MOBILE --- */
@media (max-width: 768px) {

    /* If any mobile logo exists, hide ALL desktop logos */
    .has-mobile-logo .logo-desktop-light,
    .has-mobile-logo .logo-desktop-dark,
    .has-mobile-dark-logo .logo-desktop-light,
    .has-mobile-dark-logo .logo-desktop-dark {
        display: none !important;
    }

    /* Mobile Light (Show by default on mobile if exists) */
    .has-mobile-logo .logo-mobile-light {
        display: block !important;
    }

    /* Mobile Dark Logic */
    /* If we are in dark mode AND have a mobile dark logo... */
    [data-theme="dark"] .has-mobile-dark-logo .logo-mobile-light {
        display: none !important;
    }

    [data-theme="dark"] .logo-mobile-dark {
        display: block !important;
    }

    /* Fallback: If in dark mode but NO mobile dark logo, Mobile Light stays visible (handled by default rule above) */
}