/* Responsive CSS for Statco Company Website */
/* Mobile-first approach with progressive enhancement */

/* Browser Compatibility Enhancements */
/* IE11 and older browser support */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10+ specific styles */
    .container {
        display: block;
    }
    
    .header-content {
        display: table;
        width: 100%;
    }
    
    .logo, nav {
        display: table-cell;
        vertical-align: middle;
    }
}

/* Base responsive utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Base Utilities */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* IE8 support */
    -ms-interpolation-mode: bicubic;
    /* Safari optimization */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* IE8 max-width fix */
@media \0screen {
    img {
        width: auto\9;
    }
}

/* Responsive tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* IE support */
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* IE8 table fix */
@media \0screen {
    .table-responsive {
        overflow-x: visible;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* Responsive typography */
h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    hyphens: auto;
}

/* Mobile devices (up to 576px) */
@media (max-width: 575.98px) {
    .container {
        padding: 0 10px;
    }
    
    /* Typography adjustments */
    h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.4;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    /* Navigation adjustments */
    .navbar {
        padding: 0.5rem 0;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Mobile menu improvements */
    nav ul {
        gap: 0.75rem !important;
    }
    
    nav ul > li {
        margin-bottom: 0.5rem !important;
    }
    
    nav a {
        padding: 0.875rem 1.25rem !important;
        margin: 0.375rem 0 !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Button adjustments */
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    /* Form adjustments */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
    }
    
    /* Grid adjustments */
    .row {
        margin: 0 -5px;
    }
    
    .col {
        padding: 0 5px;
        margin-bottom: 1rem;
    }
    
    /* Card adjustments */
    .card {
        margin-bottom: 1rem;
        border-radius: 8px;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Hero section */
    .hero {
        padding: 2rem 0;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    /* Services grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Projects grid */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Footer adjustments */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-section {
        margin-bottom: 2rem;
    }
    
    /* Center phone number in mobile footer */
    .phone-display,
    .phone-number,
    a[href^="tel:"],
    .footer-section p:has(i.fa-phone),
    .contact-info .phone {
        text-align: center !important;
        direction: ltr !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Social media icons responsive styling */
    .footer-section div[style*="margin-top: 1rem"] {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        margin-top: 1rem !important;
    }
    
    .footer-section div[style*="margin-top: 1rem"] a {
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .footer-section div[style*="margin-top: 1rem"] a:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px) !important;
    }
}

/* Small tablets (576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        max-width: 540px;
    }
    
    /* Grid system */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.7rem;
    }
    
    /* Navigation */
    .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    /* Mobile menu for small tablets */
    @media (max-width: 640px) {
        .mobile-menu-toggle {
            display: block !important;
        }
        
        nav ul {
            display: none !important;
            flex-direction: column !important;
        }
        
        nav ul.show {
            display: flex !important;
        }
    }
}

/* Medium tablets (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    /* Grid system */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    /* Typography */
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.9rem;
    }
    
    /* Hero section */
    .hero {
        padding: 3rem 0;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .footer-section {
        flex: 1;
        min-width: 250px;
        margin-bottom: 1rem;
    }
}

/* Large tablets and small desktops (992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    /* Grid system */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    /* Typography */
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2.1rem;
    }
    
    /* Hero section */
    .hero {
        padding: 4rem 0;
    }
}

/* Extra large screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* Grid system */
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
    
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
    
    /* Typography */
    h1 {
        font-size: 2.8rem;
    }
    
    h2 {
        font-size: 2.3rem;
    }
    
    /* Hero section */
    .hero {
        padding: 5rem 0;
    }
}

/* Ultra-wide screens (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* Enhanced spacing for ultra-wide */
    .services-grid {
        gap: 3rem;
    }
    
    .projects-grid {
        gap: 3rem;
    }
}

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }
    
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    
    thead {
        display: table-header-group;
    }
    
    tr, img {
        page-break-inside: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    @page {
        margin: 0.5cm;
    }
    
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
}