/**
 * Mietwagen-Ecke Branding 1.2.0
 * Dedicated integration for the Mietwagen-Ecke Modern child style.
 *
 * The child style renders its own .mwe-brand markup rather than phpBB's
 * .site_logo span. This stylesheet turns the existing brand link into the
 * uploaded Mietwagen-Ecke logo while keeping the original href/title intact.
 */

/* Keep compatibility if a prosilver-style .site_logo occurs on a page. */
#site-description .site_logo,
.site-description .site_logo {
    display: inline-block;
    width: clamp(160px, 30vw, 250px);
    height: auto;
    aspect-ratio: 250 / 55;
    max-width: 100%;
    background-image: url("./images/logo-mietwagen-ecke.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    vertical-align: middle;
}

/* Mietwagen Modern header logo. */
#site-description > a.logo.mwe-brand,
.site-description > a.logo.mwe-brand,
.mwe-brand {
    position: relative;
    display: inline-block !important;
    width: 250px !important;
    height: 55px !important;
    min-width: 0 !important;
    max-width: min(250px, 100%) !important;
    flex: 0 0 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    background-image: url("./images/logo-mietwagen-ecke.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* The visible text/letter mark belongs to the child style. Hide it only when
 * the real branding image above is active. Semantic h1/site description stay
 * untouched and therefore remain available to screen readers/search engines. */
#site-description .mwe-brand .mwe-brand-mark,
#site-description .mwe-brand .mwe-brand-copy,
.site-description .mwe-brand .mwe-brand-mark,
.site-description .mwe-brand .mwe-brand-copy {
    display: none !important;
}

/* Tablet: preserve the original image ratio while leaving room for search and
 * account controls. */
@media (max-width: 900px) {
    #site-description > a.logo.mwe-brand,
    .site-description > a.logo.mwe-brand,
    .mwe-brand {
        width: 210px !important;
        height: 46px !important;
        flex-basis: 210px !important;
    }
}

/* Phones. */
@media (max-width: 600px) {
    #site-description > a.logo.mwe-brand,
    .site-description > a.logo.mwe-brand,
    .mwe-brand {
        width: 180px !important;
        height: 40px !important;
        flex-basis: 180px !important;
    }
}

@media (max-width: 420px) {
    #site-description > a.logo.mwe-brand,
    .site-description > a.logo.mwe-brand,
    .mwe-brand {
        width: 160px !important;
        height: 35px !important;
        flex-basis: 160px !important;
    }
}