/* ===================================
   Payhouse Finance Logo Styles - OPTIMIZED FOR MOBILE
   =================================== */

/* Desktop Logo Styles */
.payhouse-logo {
    height: 180px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

/* Logo hover effect */
.navbar-brand:hover .payhouse-logo {
    transform: scale(1.02);
    opacity: 0.9;
}

/* Sticky navbar logo (smaller when scrolling) */
.navbar.sticky .payhouse-logo {
    height: 180px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: height 0.3s ease-in-out;
}

/* Mobile Logo Styles - SIGNIFICANTLY LARGER */
.payhouse-logo-mobile {
    height: 90px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

/* Tablet Responsive (iPad, tablets) */
@media only screen and (max-width: 991px) {
    .payhouse-logo {
        height: 90px;
    }

    .navbar.sticky .payhouse-logo {
        height: 75px;
    }

    /* Increase navbar padding for better logo visibility */
    .navbar {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Mobile Responsive (large phones) - IMPROVED SIZING */
@media only screen and (max-width: 767px) {
    .payhouse-logo {
        height: 110px;  /* Increased from 75px - 47% larger */
    }

    .navbar.sticky .payhouse-logo {
        height: 90px;  /* Increased from 60px */
    }

    .payhouse-logo-mobile {
        height: 90px;  /* Increased from 60px - 50% larger */
    }

    /* Improve navbar spacing on mobile */
    .navbar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 75px;
    }

    .navbar-brand.logo-brand {
        padding: 0.25rem 0;
    }

    /* Improve mobile offcanvas logo visibility */
    .offcanvas-header {
        padding: 1.5rem 1rem;
        min-height: 80px;
    }
}

/* Small Mobile (iPhone SE, small phones) - IMPROVED SIZING */
@media only screen and (max-width: 575px) {
    .payhouse-logo {
        height: 95px;  /* Increased from 65px - 46% larger */
    }

    .navbar.sticky .payhouse-logo {
        height: 80px;  /* Increased from 50px */
    }

    .payhouse-logo-mobile {
        height: 85px;  /* Increased from 55px - 55% larger */
    }

    /* Enhanced navbar for small screens */
    .navbar {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        min-height: 70px;
    }
}

/* Extra Small Mobile (very small screens) - IMPROVED SIZING */
@media only screen and (max-width: 375px) {
    .payhouse-logo {
        height: 85px;  /* Increased from 55px - 55% larger */
    }

    .navbar.sticky .payhouse-logo {
        height: 70px;  /* Increased from 45px */
    }

    .payhouse-logo-mobile {
        height: 80px;  /* Increased from 50px - 60% larger */
    }

    /* Maintain good spacing on very small screens */
    .navbar {
        min-height: 65px;
    }
}

/* High DPI screens (Retina displays) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
    .payhouse-logo,
    .payhouse-logo-mobile {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Logo brand container improvements */
.navbar-brand.logo-brand {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    margin-right: 1rem;
    line-height: 1;
}

/* Ensure logo doesn't break navbar layout */
.navbar-brand.logo-brand img {
    display: block;
    vertical-align: middle;
}

/* Fix navbar alignment when logo is large */
.navbar .container-fluid {
    align-items: center;
}

/* Mobile offcanvas header logo centering */
.offcanvas-header .logo {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

/* Additional mobile logo improvements */
@media only screen and (max-width: 767px) {
    /* Ensure logo is prominent on mobile navbar */
    .navbar-brand.logo-brand {
        flex: 0 0 auto;
        max-width: 60%;
    }

    /* Optimize button placement */
    .navbar-toggler {
        padding: 0.5rem;
        border: none;
        margin-left: auto;
    }

    /* Better spacing in offcanvas menu */
    .offcanvas-header .logo {
        flex: 1;
    }
}

/* Landscape orientation optimization for mobile */
@media only screen and (max-width: 767px) and (orientation: landscape) {
    .payhouse-logo {
        height: 70px;
    }

    .navbar {
        min-height: 60px;
    }
}

/* Print styles - ensure logo displays properly when printing */
@media print {
    .payhouse-logo {
        height: 60px;
        max-height: 60px;
    }
}