/* Mobile Logo Centering Fix */
/* This file specifically addresses logo centering issues ONLY on mobile devices */
/* NEVER affects desktop - only 768px and below */

/* Ensure logo is perfectly centered ONLY on mobile devices */
@media only screen and (max-width: 768px) {
    .navbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center;
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        max-width: calc(100% - 140px) !important;
    }

    .logo img {
        display: block;
        margin: 0 auto;
        max-height: 60px !important; /* Increased from 50px to 60px */
        width: auto;
    }

    .navbar.scrolled .logo img {
        max-height: 50px !important; /* Increased from 40px to 50px */
    }

    .menu-toggle {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1002;
    }

    .quote-button {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1002;
    }
}

@media only screen and (max-width: 576px) {
    .logo {
        max-width: calc(100% - 120px) !important;
    }

    .logo img {
        max-height: 55px !important; /* Increased from 45px to 55px */
    }

    .navbar.scrolled .logo img {
        max-height: 45px !important; /* Increased from 35px to 45px */
    }

    .menu-toggle {
        left: 12px !important;
    }

    .quote-button {
        right: 12px !important;
    }
}

@media only screen and (max-width: 480px) {
    .logo {
        max-width: calc(100% - 100px) !important;
    }

    .logo img {
        max-height: 50px !important; /* Increased from 40px to 50px */
    }

    .navbar.scrolled .logo img {
        max-height: 40px !important; /* Increased from 32px to 40px */
    }

    .menu-toggle {
        left: 10px !important;
    }

    .quote-button {
        right: 10px !important;
    }
}

@media only screen and (max-width: 320px) {
    .logo {
        max-width: calc(100% - 80px) !important;
    }

    .logo img {
        max-height: 45px !important; /* Increased from 35px to 45px */
    }

    .navbar.scrolled .logo img {
        max-height: 35px !important; /* Increased from 28px to 35px */
    }

    .menu-toggle {
        left: 8px !important;
    }

    .quote-button {
        right: 8px !important;
    }

    .cta-button.nav-cta {
        padding: 4px 6px !important;
        font-size: 0.6rem !important;
        min-width: 50px !important;
    }
}

/* IMPORTANT: Reset for desktop to ensure NO interference with original styling */
@media only screen and (min-width: 769px) {
    .navbar .logo {
        position: absolute !important;
        left: 50% !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        z-index: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    
    .navbar .menu-toggle,
    .navbar .quote-button {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
}

@media only screen and (max-width: 768px) {
    .navbar .logo {
        max-width: calc(100% - 140px) !important;
    }

    .navbar .logo img {
        max-height: 50px !important;
    }

    .navbar.scrolled .logo img {
        max-height: 40px !important;
    }

    .navbar .menu-toggle {
        left: 15px !important;
    }

    .navbar .quote-button {
        right: 15px !important;
    }
}

@media only screen and (max-width: 576px) {
    .navbar .logo {
        max-width: calc(100% - 120px) !important;
    }

    .navbar .logo img {
        max-height: 45px !important;
    }

    .navbar.scrolled .logo img {
        max-height: 35px !important;
    }

    .navbar .menu-toggle {
        left: 12px !important;
    }

    .navbar .quote-button {
        right: 12px !important;
    }
}

@media only screen and (max-width: 480px) {
    .navbar .logo {
        max-width: calc(100% - 100px) !important;
    }

    .navbar .logo img {
        max-height: 40px !important;
    }

    .navbar.scrolled .logo img {
        max-height: 32px !important;
    }

    .navbar .menu-toggle {
        left: 10px !important;
    }

    .navbar .quote-button {
        right: 10px !important;
    }
}

/* Additional safety for extremely small screens */
@media only screen and (max-width: 320px) {
    .navbar .logo {
        max-width: calc(100% - 80px) !important;
    }

    .navbar .logo img {
        max-height: 35px !important;
    }

    .navbar.scrolled .logo img {
        max-height: 28px !important;
    }

    .navbar .menu-toggle {
        left: 8px !important;
    }

    .navbar .quote-button {
        right: 8px !important;
    }

    .navbar .cta-button.nav-cta {
        padding: 4px 6px !important;
        font-size: 0.6rem !important;
        min-width: 50px !important;
    }
}