/* Mobile Fixes for Navigation and Footer */

/* Fix navigation menu overflow on mobile */
@media (max-width: 768px) {
    /* Navigation wrapper should be responsive */
    nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Navigation items should wrap on small screens */
    nav ul {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }
    
    nav ul li {
        flex-shrink: 0;
        font-size: 0.875rem; /* 14px */
    }
    
    nav ul li a {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Alternative: Make nav scrollable horizontally if wrapping isn't desired */
    .nav-horizontal-scroll {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    .nav-horizontal-scroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}

/* Fix footer text merging on mobile */
@media (max-width: 640px) {
    /* Add proper spacing to footer sections */
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer > div {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    /* Footer columns should stack vertically */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Footer text should have proper spacing */
    footer p, footer a, footer li {
        margin-bottom: 0.75rem;
        line-height: 1.6;
    }
    
    /* Footer headings need margin */
    footer h3, footer h4 {
        margin-bottom: 1rem;
        margin-top: 1.5rem;
    }
    
    /* Social icons should have spacing */
    footer .social-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    
    /* Contact info should breathe */
    footer .contact-info > * {
        margin-bottom: 1rem;
    }
    
    /* Copyright text spacing */
    footer .copyright {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* Additional mobile improvements */
@media (max-width: 640px) {
    /* Ensure sections have proper padding on mobile */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Service cards should be full width on mobile */
    .service-cards {
        grid-template-columns: 1fr !important;
    }
    
    /* Testimonial cards should be full width */
    .testimonials {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Service cards 2 columns on tablet */
    .service-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}