/* Mobile Responsiveness Fixes for UKDS Website */

/* Prevent horizontal scrolling and ensure all elements fit on mobile */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Enhanced container responsive design */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Fix for tables on mobile */
table {
    width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

/* Enhanced mobile breakpoints */
@media (max-width: 768px) {
    /* Container adjustments */
    .container {
        padding: 0 15px;
    }
    
    /* Navigation improvements */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 40px 20px;
        gap: 20px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 1000;
    }
    
    /* Hero section mobile optimization */
    .hero {
        padding: 80px 0 40px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 20px;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Grid layouts mobile optimization */
    .services-grid,
    .features-grid,
    .capabilities-grid,
    .tech-grid,
    .articles-grid,
    .categories-grid,
    .pricing-grid,
    .results-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Card adjustments */
    .service-card,
    .feature-card,
    .capability-card,
    .tech-card,
    .pricing-card {
        padding: 25px 20px;
        margin: 0;
    }
    
    /* Typography adjustments */
    h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    /* Form elements */
    .form-group {
        margin-bottom: 20px;
    }
    
    input, textarea, select {
        width: 100%;
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 6px;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
    
    /* Button improvements */
    .btn {
        width: 100%;
        max-width: 300px;
        padding: 14px 20px;
        font-size: 16px;
        white-space: normal;
        line-height: 1.4;
    }
    
    /* Newsletter form */
    .newsletter-form {
        flex-direction: column;
        gap: 15px;
    }
    
    .newsletter-form .form-group {
        flex-direction: column;
        width: 100%;
    }
    
    /* Stats and metrics */
    .hero-stats,
    .stats-grid {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .stat-item {
        flex: 1;
        padding: 15px;
    }
}

/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .hero {
        padding: 60px 0 30px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    /* Smaller padding for cards */
    .service-card,
    .feature-card,
    .capability-card,
    .tech-card,
    .pricing-card {
        padding: 20px 15px;
    }
    
    /* Adjust button sizes */
    .btn {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    /* Logo adjustments */
    .nav-logo img {
        max-height: 35px;
        width: auto;
    }
    
    /* Section spacing */
    section {
        padding: 40px 0;
    }
    
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 40px 0 30px;
    }
    
    .nav-menu {
        max-height: calc(100vh - 60px);
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-link,
    a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .nav-link:hover {
        transform: none;
    }
}

/* Fix for horizontal scrolling issues */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Specific fixes for elements that commonly cause horizontal overflow */
.hero::before,
.hero::after,
section::before,
section::after {
    max-width: 100%;
    overflow: hidden;
}

/* Fix for wide elements */
.hero-graphic,
.section-graphic {
    max-width: 100%;
    overflow: hidden;
}

/* Enhanced navbar mobile fixes */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 0;
    }
    
    .nav-container {
        padding: 0 15px;
        max-width: 100%;
    }
    
    .nav-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        z-index: 1001;
    }
    
    .bar {
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 3px 0;
        transition: 0.3s;
    }
}

/* Prevent text from breaking layout */
p, div, span, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Ensure content doesn't overflow */
.content,
main,
article {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix for pre and code elements */
pre, code {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
    max-width: 100%;
}

/* Image container fixes */
.image-container,
.hero-image,
.feature-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Flex container fixes */
.flex-container {
    flex-wrap: wrap;
    max-width: 100%;
}

/* Grid container fixes */
.grid-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Table responsiveness */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 100%;
    white-space: nowrap;
}

/* Accessibility improvements for mobile */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid;
    }
    
    .card,
    .service-card,
    .feature-card {
        border: 1px solid;
    }
}