/* Mobile-Specific Styles */

/* Base Mobile Styles */
@media (max-width: 767px) {
    /* Improve text readability */
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
    }
    
    /* Navigation */
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(30, 30, 30, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px 20px;
        clip-path: circle(0% at 50% 0);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 10001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-links.active {
        clip-path: circle(150% at 50% 0);
    }
    
    .nav-links li {
        width: 100%;
        text-align: center;
        margin: 10px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }
    
    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
    }
    
    .nav-links li a {
        display: block;
        padding: 15px 20px;
        font-size: 1.1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .nav-links li a:hover,
    .nav-links li a.active {
        background: rgba(255, 60, 60, 0.2);
        transform: translateX(5px);
    }
    
    /* Reduce main header height on mobile */
    header nav {
        padding: 0.5rem 2rem; /* Reduced from 1rem to 0.5rem for shorter height */
    }
    
    /* Hero Section */
    .hero {
        padding: 30px 0 60px;
        margin-top: 100px; /* Increased further to 120px for more space */
        text-align: center;
    }
    
    .hero-content h1.hero-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        margin: 0 auto 25px !important;
        max-width: 100% !important;
    }
    
    /* Buttons */
    button, a, input[type="submit"], .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 20px;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Images */
    .hero-image img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    /* Forms */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on focus in iOS */
    }
    
    /* Footer */
    footer {
        padding: 30px 20px;
        text-align: center;
    }
    
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-section {
        margin-bottom: 30px;
        width: 100% !important;
    }

    /* ✅ Center footer icons */
    .socials {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin: 15px 0 0;
        width: 100%;
    }

    .socials a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
    
    /* News Grid - Force single column layout on mobile */
    .news-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .news-card {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 20px !important;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .hero-content h1.hero-title {
        font-size: 2rem !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    p, li, a, span, div {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}