/**
 * Logo Responsive Fix
 * Created: 2025-09-08
 * Purpose: Fix logo squeezing issues on different screen sizes
 */

/* ========================================================================
   LOGO BASE STYLES - Prevent Squeezing
   ======================================================================== */

/* Navbar brand container */
.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
    margin-right: auto !important;
    padding: 0 !important;
    max-width: none !important; /* Remove max-width constraints */
}

/* Logo image base styles */
.navbar-brand img,
.navbar-brand .logo,
.navbar-logo,
img[src*="logo"] {
    height: 45px !important; /* Fixed height */
    width: auto !important; /* Auto width maintains aspect ratio */
    max-width: none !important; /* Remove inline max-width */
    object-fit: contain !important; /* Maintain aspect ratio */
    display: block !important;
}

/* Remove inline styles that cause conflicts */
.navbar-brand img[style*="max-width"],
.navbar-logo[style*="max-width"] {
    max-width: none !important;
}

/* Remove w-100 class that forces 100% width */
.navbar-brand .w-100 {
    width: auto !important;
}

/* ========================================================================
   SCREEN SIZE SPECIFIC FIXES
   ======================================================================== */

/* Extra Large Screens (1200px and up) */
@media (min-width: 1200px) {
    .navbar-brand img {
        height: 50px !important;
        min-width: 100px !important; /* Ensure minimum width */
    }
}

/* Large Screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-brand img {
        height: 45px !important;
        min-width: 90px !important;
    }
}

/* Medium Screens (768px - 991px) - Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-brand img {
        height: 40px !important;
        min-width: 80px !important;
    }
    
    /* Adjust navbar spacing */
    .navbar-nav {
        margin-left: 1rem !important;
    }
}

/* Small Screens (576px - 767px) - Large phones */
@media (min-width: 576px) and (max-width: 767px) {
    .navbar-brand img {
        height: 38px !important;
        min-width: 75px !important;
    }
}

/* Extra Small Screens (< 576px) - Small phones */
@media (max-width: 575px) {
    .navbar-brand img {
        height: 35px !important;
        min-width: 70px !important;
    }
    
    /* Ensure logo doesn't get squeezed on very small screens */
    .navbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ========================================================================
   SPECIFIC SITE LOGO ADJUSTMENTS
   ======================================================================== */

/* DNA Romance logo - wider aspect ratio */
[data-site="dnaromance"] .navbar-brand img,
[data-site="apps"] .navbar-brand img {
    min-width: 110px !important;
}

/* GenePool logo - square aspect ratio */
[data-site="genepool"] .navbar-brand img {
    min-width: 45px !important; /* Square logos need less width */
}

/* DateMetriX logo */
[data-site="datemetrix"] .navbar-brand img {
    min-width: 100px !important;
}

/* WellMatched logo */
[data-site="wellmatched"] .navbar-brand img {
    min-width: 48px !important;
}

/* Gene Recovery logo */
[data-site="generecovery"] .navbar-brand img {
    min-width: 45px !important;
}

/* Heritable Health logo */
[data-site="heritablehealth"] .navbar-brand img {
    min-width: 90px !important;
}

/* ========================================================================
   MOBILE MENU LOGO
   ======================================================================== */

/* Mobile navigation logo */
#navbar-mobile .navbar-brand img,
.navbar-mobile-middle img,
.offcanvas-header img {
    height: 35px !important;
    width: auto !important;
    max-width: none !important;
}

/* ========================================================================
   SIDEBAR AND FOOTER LOGOS
   ======================================================================== */

/* Sidebar logo */
.sidebar-brand img,
.dashboard-sidebar-brand img {
    height: 30px !important;
    width: auto !important;
    max-width: none !important;
}

/* Footer logo */
.footer-logo,
.footer-brand img {
    height: 50px !important;
    width: auto !important;
    max-width: none !important;
}

/* ========================================================================
   SPECIAL CASES
   ======================================================================== */

/* Auth pages logo */
.auth-logo img {
    height: 60px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
}

/* Email template logo */
.email-logo img {
    height: 50px !important;
    width: auto !important;
    max-width: 200px !important;
}

/* ========================================================================
   NAVBAR LAYOUT FIXES
   ======================================================================== */

/* Prevent navbar items from squeezing logo */
.navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}

.navbar > .container,
.navbar > .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Navbar collapse should not affect logo */
.navbar-collapse {
    flex-grow: 0 !important; /* Don't take all available space */
}

/* Mobile toggler position */
.navbar-toggler {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* ========================================================================
   BROWSER-SPECIFIC FIXES
   ======================================================================== */

/* Safari fix for aspect ratio */
@supports (-webkit-appearance: none) {
    .navbar-brand img {
        width: -webkit-fit-content !important;
        width: fit-content !important;
    }
}

/* Firefox fix */
@-moz-document url-prefix() {
    .navbar-brand img {
        width: -moz-fit-content !important;
        width: fit-content !important;
    }
}

/* ========================================================================
   DEBUGGING HELPERS - Uncomment to visualize issues
   ======================================================================== */

/*
.navbar-brand {
    border: 2px solid red !important;
}

.navbar-brand img {
    border: 2px solid blue !important;
}

.navbar {
    border: 2px solid green !important;
}
*/

/* ========================================================================
   PRINT STYLES
   ======================================================================== */

@media print {
    .navbar-brand img {
        height: 30px !important;
        width: auto !important;
    }
}