/* ==========================================================
   TypingTutor.Online
   Mobile Theme Logo Fix v17.0.13
   File: css/mobile-logo-fix.css
========================================================== */

/*
 * The previous <picture> contained two image fallbacks and placed the dark
 * <source> after the first <img>. Browsers therefore selected the light
 * mobile logo even in Dark mode, making "TypingTutor" nearly invisible.
 *
 * Light and dark logos now use separate picture elements. The stable
 * full logo SVGs are scaled responsively on mobile.
 */

.logo {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

.site-logo-picture {
    min-width: 0;
}

.site-logo-picture-light {
    display: block;
}

.site-logo-picture-dark {
    display: none;
}

/* Explicit Dark theme */
html[data-theme="dark"] .site-logo-picture-light {
    display: none !important;
}

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

/* Explicit Light theme */
html[data-theme="light"] .site-logo-picture-light {
    display: block !important;
}

html[data-theme="light"] .site-logo-picture-dark {
    display: none !important;
}

/* System mode follows the device appearance. */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .site-logo-picture-light {
        display: none !important;
    }

    html[data-theme="system"] .site-logo-picture-dark {
        display: block !important;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .site-logo-picture-light {
        display: block !important;
    }

    html[data-theme="system"] .site-logo-picture-dark {
        display: none !important;
    }
}

/* Compatibility with theme managers that expose a resolved theme. */
html[data-resolved-theme="dark"] .site-logo-picture-light {
    display: none !important;
}

html[data-resolved-theme="dark"] .site-logo-picture-dark {
    display: block !important;
}

html[data-resolved-theme="light"] .site-logo-picture-light {
    display: block !important;
}

html[data-resolved-theme="light"] .site-logo-picture-dark {
    display: none !important;
}

@media (max-width: 900px) {
    .logo {
        max-width: 220px;
    }

    .site-logo-image {
        width: min(220px, 100%) !important;
        max-height: 46px !important;
    }
}

@media (max-width: 560px) {
    .logo {
        width: clamp(155px, 38vw, 190px);
        max-width: 190px;
        overflow: visible;
    }

    .site-logo-picture,
    .site-logo-image {
        width: 100% !important;
    }

    .site-logo-image {
        height: auto !important;
        max-height: 42px !important;
        object-fit: contain;
        object-position: left center;
    }
}

@media (max-width: 390px) {
    .logo {
        width: 150px;
        max-width: 150px;
    }

    .site-logo-image {
        max-height: 38px !important;
    }
}