/* Navbar Responsive Fix for Netlify Deployment */
/* This file addresses navigation responsiveness issues that occur on Netlify deployment */

/* Enhanced responsive behavior for navbar */
@media only screen and (max-width: 1024px) {
    .navbar {
        padding: 20px 3%;
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .navbar.scrolled {
        padding: 15px 3%;
        min-height: 60px;
    }

    /* Ensure logo stays centered with enough space for side elements */
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 200px); /* Ensure space for menu toggle and quote button */
        text-align: center;
    }

    .logo img {
        max-height: 55px;
        width: auto;
        max-width: 100%;
    }

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

    /* Menu toggle positioning */
    .menu-toggle {
        left: 20px;
        z-index: 1003;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Quote button positioning */
    .quote-button {
        right: 20px;
        z-index: 1003;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .cta-button.nav-cta {
        padding: 8px 16px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 768px) {
    .navbar {
        padding: 15px 2%;
        min-height: 65px;
    }

    .navbar.scrolled {
        padding: 12px 2%;
        min-height: 55px;
    }

    /* Adjust logo size for smaller screens */
    .logo {
        max-width: calc(100% - 160px); /* Less space needed on mobile */
    }

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

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

    /* Tighter positioning for mobile */
    .menu-toggle {
        left: 15px;
        width: 20px;
        height: 15px;
    }

    .menu-toggle span {
        width: 20px;
        height: 2px;
    }

    .quote-button {
        right: 15px;
    }

    .cta-button.nav-cta {
        padding: 6px 12px;
        font-size: 0.75rem;
        min-width: 70px;
        text-align: center;
    }
}

@media only screen and (max-width: 640px) {
    .navbar {
        padding: 12px 1.5%;
        min-height: 60px;
    }

    .navbar.scrolled {
        padding: 10px 1.5%;
        min-height: 50px;
    }

    /* Further adjustments for very small screens */
    .logo {
        max-width: calc(100% - 140px);
    }

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

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

    .menu-toggle {
        left: 12px;
    }

    .quote-button {
        right: 12px;
    }

    .cta-button.nav-cta {
        padding: 5px 10px;
        font-size: 0.7rem;
        min-width: 65px;
    }
}

@media only screen and (max-width: 480px) {
    .navbar {
        padding: 10px 1%;
        min-height: 55px;
    }

    .navbar.scrolled {
        padding: 8px 1%;
        min-height: 45px;
    }

    /* Ultra-compact for very small screens */
    .logo {
        max-width: calc(100% - 120px);
    }

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

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

    .menu-toggle {
        left: 10px;
        width: 18px;
        height: 13px;
    }

    .menu-toggle span {
        width: 18px;
        height: 1.5px;
    }

    .quote-button {
        right: 10px;
    }

    .cta-button.nav-cta {
        padding: 4px 8px;
        font-size: 0.65rem;
        min-width: 60px;
    }
}

/* Additional safety for very wide screens with low height (landscape tablets) */
@media only screen and (max-height: 600px) and (orientation: landscape) {
    .navbar {
        padding: 8px 3%;
        min-height: 50px;
    }

    .navbar.scrolled {
        padding: 6px 3%;
        min-height: 40px;
    }

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

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

    .cta-button.nav-cta {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
}

/* Ensure elements don't overlap on any screen size */
.navbar * {
    box-sizing: border-box;
}

/* Flexbox fallback for older browsers */
.navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/* Prevent content shift on zoom */
.navbar,
.logo,
.menu-toggle,
.quote-button {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Additional Netlify-specific fixes */
/* These address the slight zoom differences between local and deployed versions */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Target the problematic range where Netlify zoom might cause issues */
    .navbar {
        padding: 20px 4%; /* Slightly more padding */
    }

    .logo {
        max-width: calc(100% - 220px); /* More conservative space allocation */
    }

    .menu-toggle {
        left: 25px; /* Slightly more space from edge */
    }

    .quote-button {
        right: 25px; /* Slightly more space from edge */
    }

    .cta-button.nav-cta {
        padding: 9px 18px; /* Slightly larger for better touch targets */
        font-size: 0.85rem;
    }
}

/* JavaScript helper classes */
.navbar-emergency-responsive {
    padding: 8px 2% !important;
}

.navbar-emergency-responsive .logo {
    max-width: calc(100% - 100px) !important;
}

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

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

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

/* Device-specific classes for JavaScript */
.mobile-navbar {
    min-height: 55px;
}

.tablet-navbar {
    min-height: 65px;
}

.desktop-navbar {
    min-height: 75px;
}

/* Force hardware acceleration for smoother performance */
.navbar,
.navbar .logo,
.navbar .menu-toggle,
.navbar .quote-button {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}