/**
 * ForgeX Mobile Enhancements
 * Additional mobile-specific improvements for better user experience
 */

/* Touch-friendly interactions */
@media (max-width: 768px) {
    /* Increase touch targets */
    .btn, button, .cta-button, .explore-button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Improve form inputs */
    input, textarea, select {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px 16px;
        border-radius: 8px;
    }
    
    /* Better navigation */
    .navbar-nav a {
        padding: 16px 20px;
        font-size: 18px;
        display: block;
        width: 100%;
    }
    
    /* Improved hero section */
    .hero {
        min-height: 70vh;
        padding: 60px 20px 40px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle, .hero p {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: 2rem;
    }
    
    /* Feature cards mobile optimization */
    .feature-card {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    
    .feature-content h2, .feature-content h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .feature-content p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* Testimonials mobile */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .testimonial-card {
        padding: 1.5rem;
    }
    
    /* Footer mobile improvements */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-section h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .footer-nav a {
        padding: 8px 0;
        font-size: 1rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Reduce padding and margins */
    .tile-wrap {
        padding: 0 1rem;
    }
    
    .hero {
        padding: 40px 15px 30px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle, .hero p {
        font-size: 1rem;
    }
    
    .feature-card {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .feature-content h2, .feature-content h3 {
        font-size: 1.3rem;
    }
    
    .testimonial-card {
        padding: 1rem;
    }
    
    /* Smaller buttons for very small screens */
    .btn, button {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 50vh;
        padding: 30px 20px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle, .hero p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .mobile-nav {
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
    }
    
    .mobile-nav a {
        color: #ffffff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Improved mobile forms */
@media (max-width: 768px) {
    .form-container {
        padding: 1rem;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-control {
        width: 100%;
        font-size: 16px;
        padding: 12px 16px;
        border: 2px solid rgba(192, 255, 107, 0.3);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }
    
    .form-control:focus {
        border-color: #4CAF50;
        outline: none;
        box-shadow: 0 0 0 3px rgba(192, 255, 107, 0.2);
    }
}

/* Mobile-specific animations */
@media (max-width: 768px) {
    .fade-in, .slide-up, .slide-right, .slide-left {
        animation-duration: 0.4s;
    }
    
    /* Reduce motion for better performance on mobile */
    .parallax-scroll {
        transform: none !important;
    }
    
    .floating {
        animation: none;
    }
}

/* Improved mobile navigation */
@media (max-width: 468px) {
    .main-navbar.active {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        z-index: 1000;
        padding: 2rem 1rem;
        overflow-y: auto;
    }
    
    .main-navbar.active .navbar-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .main-navbar.active .navbar-nav a {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1.1rem;
        text-align: center;
    }
    
    .main-navbar.active .navbar-nav a:last-child {
        border-bottom: none;
    }
}

/* Mobile-optimized cards and content */
@media (max-width: 768px) {
    .collaborate-card, .course-card, .mentor-card {
        margin: 1rem 0;
        padding: 1.5rem;
        border-radius: 15px;
    }
    
    .card-header h2, .card-header h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    
    .card-content p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .card-actions {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    
    .card-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* Mobile-specific utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-visible {
        display: block !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-no-padding {
        padding: 0 !important;
    }
    
    .mobile-small-padding {
        padding: 0.5rem !important;
    }
    
    .mobile-medium-padding {
        padding: 1rem !important;
    }
}

/* Improved mobile tables */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 0.5rem;
        white-space: nowrap;
    }
}

/* Mobile-optimized modals */
@media (max-width: 768px) {
    .modal {
        padding: 1rem;
    }
    
    .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 15px;
    }
    
    .modal-header {
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .modal-body {
        padding: 1.5rem 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
}