/* WSU Navigators - BIGGER LOGOS */

/* Navigation logo - Slightly bigger */
.logo-responsive {
    height: auto;
    max-height: 75px !important; /* A bit bigger as requested */
    width: auto;
    transition: all 0.3s ease;
}

/* Hero logo - Reasonable size */
.hero-logo {
    height: auto;
    max-height: 180px !important; /* Reduced to reasonable size */
    width: auto;
}

/* Footer logo - Bigger. Forces explicit height (not just max-height) because:
   1. brand-theme.css applies `content: url(...)` to #footer-logo which
      substitutes the rendered image and can destabilize height: auto on some
      browsers (notably iOS Safari).
   2. Tailwind utility `.h-NN` on the element wins size duel if not overridden
      at higher specificity; using #footer-logo (specificity 100) + !important
      on height forces the size regardless of any class-level competitor. */
.footer-logo,
#footer-logo {
    height: 96px !important;     /* Default/desktop — forced, not capped */
    max-height: 96px !important;
    width: auto !important;
}

/* Mobile responsive - Reasonable sizes */
@media (max-width: 640px) {
    .logo-responsive {
        max-height: 60px !important; /* Slightly bigger on mobile */
    }
    .hero-logo {
        max-height: 140px !important; /* Reasonable mobile size */
    }
    .footer-logo,
    #footer-logo {
        height: 76px !important;        /* Mobile ≤640px — forced */
        max-height: 76px !important;
    }
}

@media (max-width: 480px) {
    .logo-responsive {
        max-height: 45px !important; /* Smaller for small phones */
    }
    .hero-logo {
        max-height: 120px !important; /* Smaller for small phones */
    }
    .footer-logo,
    #footer-logo {
        height: 58px !important;        /* Small phones ≤480px — forced */
        max-height: 58px !important;
    }
}

/* Tablet sizes */
@media (min-width: 641px) and (max-width: 1024px) {
    .logo-responsive {
        max-height: 55px !important; /* Reasonable tablet size */
    }
    .hero-logo {
        max-height: 160px !important; /* Reasonable tablet size */
    }
}

/* Large screens - Reasonable sizes */
@media (min-width: 1200px) {
    .logo-responsive {
        max-height: 85px !important; /* Slightly bigger on large screens */
    }
    .hero-logo {
        max-height: 200px !important; /* Reasonable large screen size */
    }
    .footer-logo,
    #footer-logo {
        height: 118px !important;       /* Wide desktop ≥1200px — forced */
        max-height: 118px !important;
    }
}

/* Navigation container adjustments for bigger logo */
.navbar .container,
.nav-container {
    height: auto;
    min-height: 80px;
    padding: 1rem 0;
}

@media (max-width: 640px) {
    .navbar .container,
    .nav-container {
        min-height: 70px;
        padding: 0.75rem 0;
    }
}

/* Hover effects for bigger logos */
.logo-hover:hover {
    transform: scale(1.05);
}

/* Ensure logos don't break layout */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero section spacing adjustment for bigger logo */
.hero-content {
    padding-top: 2rem;
}

@media (max-width: 640px) {
    .hero-content {
        padding-top: 1.5rem;
    }
}