/**
 * ==========================================
 * Mobile & SEO Optimizations
 * Route: Global
 * Purpose: Core Web Vitals & Mobile UX improvements
 * Updated: 2026-01-10 13:00 IST
 * ==========================================
 */

/* Mobile-First Typography - SEO Optimized */
body {
    font-size: 16px !important; /* Minimum recommended for mobile */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile Tap Targets - Accessibility & UX */
button, 
.btn, 
a.btn,
.default-button,
input[type="button"],
input[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 14px !important;
    touch-action: manipulation; /* Better touch performance */
}

/* Ensure all interactive elements are tap-friendly */
a,
.nav-link,
.dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
}

/* Form Elements - Mobile Friendly */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 10px 15px !important;
}

/* Improve Touch Responsiveness */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Mobile Navigation - Better Touch Targets */
.navbar-nav .nav-link {
    min-height: 48px !important;
    padding: 12px 16px !important;
}

/* Footer Mobile Menu - SEO Optimized */
@media (max-width: 767px) {
    .footer-mobile-menu a {
        min-height: 60px !important;
        padding: 15px 10px !important;
    }
    
    /* Ensure body has bottom padding for fixed footer menu */
    body {
        padding-bottom: 70px !important;
    }
}

/* Images - Lazy Loading & Performance */
img {
    height: auto;
    max-width: 100%;
}

img[loading="lazy"] {
    background: #f0f0f0; /* Placeholder while loading */
}

/* Hero Section - Mobile Optimization */
@media (max-width: 991px) {
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

/* Social Links - Better Touch Targets */
.footer-social-links a,
.social-link {
    min-width: 45px !important;
    min-height: 45px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Accessibility - Focus States */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--mainColor, #03045e) !important;
    outline-offset: 2px !important;
}

/* Performance - Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Mobile Tables - Responsive */
@media (max-width: 767px) {
    table {
        font-size: 14px;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Cards - Mobile Optimization */
@media (max-width: 767px) {
    .blog-card,
    .product-card {
        margin-bottom: 20px;
    }
}

/* Better Mobile Menu */
@media (max-width: 991px) {
    .mean-container .mean-nav {
        background: #fff;
    }
    
    .mean-container .mean-nav ul li a {
        min-height: 48px;
        padding: 12px 15px;
        font-size: 16px;
    }
}

/* Loading States - Better UX */
[data-loading="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Skip to Content - Accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--mainColor, #03045e);
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
}

.skip-to-content:focus {
    top: 0;
}

/* Print Styles - SEO */
@media print {
    .navbar,
    .footer,
    .social-share,
    .float {
        display: none !important;
    }
}