/* Responsive Enhancements CSS */

/* Mobile-first approach with breakpoints for common device sizes */

/* Small screens (phones, 360px and up) */
@media (max-width: 767px) {
    /* Improve touch target size for better mobile usability */
    a, button, .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Increase font size for readability on small screens */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Adjust spacing for mobile devices */
    section {
        padding: 40px 15px !important;
    }
    
    /* Make images fully responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Adjust hero section for mobile */
    .hero-section {
        min-height: 70vh !important;
        padding-top: 100px !important;
        padding-bottom: 50px !important;
    }
    
    .hero-content {
        text-align: center !important;
        padding: 0 10px !important;
    }
    
    .hero-content h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
    
    /* Adjust form elements for mobile */
    input, textarea, select {
        font-size: 16px !important; /* Prevent zoom on focus in iOS */
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Improve navigation for mobile */
    .mobile-menu {
        z-index: 9999 !important;
        transition: all 0.3s ease !important;
    }
    
    /* Make tables responsive by allowing horizontal scrolling */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hide decorative elements on mobile for better performance */
    .decorative-element, .parallax-bg, .particles-js-canvas-el {
        display: none !important;
    }
    
    /* Improve button size and spacing on mobile */
    .btn {
        font-size: 1rem !important;
        padding: 12px 24px !important;
        margin: 5px 0 !important;
        width: 100%;
        max-width: 300px;
    }
    
    /* Adjust card layouts for mobile */
    .card {
        margin-bottom: 30px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
}

/* Medium screens (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Adjust spacing and font sizes for tablets */
    section {
        padding: 60px 30px !important;
    }
    
    .hero-content h1 {
        font-size: 3rem !important;
    }
    
    /* Improve multi-column layouts for tablets */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    .col-md-6, .col-md-4, .col-md-3 {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 30px !important;
    }
}

/* Large screens (desktops, 1024px and up) - for reference */
@media (min-width: 1024px) {
    /* Keep existing desktop styles but ensure good responsiveness */
    .container {
        max-width: 1200px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* Device-specific optimizations */

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari text size adjust */
    body {
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* Prevent iOS from highlighting elements on tap */
    a, button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    a, button {
        outline: 2px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Improve visibility of focus states for keyboard users */
:focus {
    outline: 3px solid #007bff !important;
    outline-offset: 2px !important;
}

/* Fix for 100vh on mobile browsers */
.full-height {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Ensure proper text wrapping on all devices */
.text-wrap {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Disable hover effects on touch devices to prevent sticky hover states */
@media (hover: none) and (pointer: coarse) {
    a:hover, button:hover {
        transform: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
}

/* Add this class to elements that should only be visible on desktop */
.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }
}

/* Add this class to elements that should only be visible on mobile */
.mobile-only {
    display: block;
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none;
    }
}