/**
 * GLOBAL LOGO SIZE FIX
 * Ensures Mobistar logo is properly sized and visible across all pages
 */

/* ============================================
   MOBILE LOGO - PROPERLY SIZED
   ============================================ */
@media (max-width: 640px) {
    /* Target ALL logos globally */
    img[src*="logo.jpeg"],
    img[src*="logo.png"],
    img[alt*="Logo"],
    img[alt*="logo"],
    img[alt*="Mobistar"],
    nav img[alt*="Logo"],
    header img[alt*="Logo"],
    .logo,
    .logo img {
        height: 48px !important;
        max-height: 48px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* ============================================
   SMALL TABLETS
   ============================================ */
@media (min-width: 641px) and (max-width: 1023px) {
    img[src*="logo"],
    img[alt*="Logo"],
    nav img[alt*="Logo"],
    header img[alt*="Logo"] {
        height: 56px !important;
        max-height: 56px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* ============================================
   DESKTOP - PROMINENT SIZE
   ============================================ */
@media (min-width: 1024px) {
    img[src*="logo"],
    img[alt*="Logo"],
    nav img[alt*="Logo"],
    header img[alt*="Logo"] {
        height: 64px !important;
        max-height: 64px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* ============================================
   FOOTER LOGO - LARGER
   ============================================ */
footer img[src*="logo"],
footer img[alt*="Logo"] {
    height: 64px !important;
    max-height: 80px !important;
    width: auto !important;
}

@media (min-width: 768px) {
    footer img[src*="logo"],
    footer img[alt*="Logo"] {
        height: 80px !important;
        max-height: 80px !important;
    }
}

/* ============================================
   ENSURE LOGO IS ALWAYS VISIBLE
   ============================================ */
img[src*="logo"],
img[alt*="Logo"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}