/* mobile.css - responsive overrides and mobile nav */

/* smaller screen typography & layout */
@media (max-width: 768px) {
    .hero-content h1 { 
        font-size: 3rem; 
    }
    
    .about-content { 
        grid-template-columns: 1fr; 
    }
    
    .profile-picture-container { 
        width: 300px; 
        height: 300px; 
        margin: 2rem auto; 
    }
    
    .animated-border { 
        width: 320px; 
        height: 320px; 
    }
    
    .animated-border-2 { 
        width: 340px; 
        height: 340px; 
    }
    
    .profile-picture { 
        width: 280px; 
        height: 280px; 
    }
    
    .profile-fallback { 
        font-size: 5rem; 
    }
    
    .float-icon { 
        font-size: 1.5rem; 
    }
    
    .projects-grid { 
        grid-template-columns: 1fr; 
    }
    
    section { 
        padding: 3rem 5%; 
    }
}

/* small screens: show nav toggle and mobile menu */
@media (max-width: 768px) {
    .nav-toggle { 
        display: inline-flex; 
        z-index: 1100; 
        background: transparent; 
        border: none; 
        width: 48px; 
        height: 48px; 
        align-items: center; 
        justify-content: center; 
        border-radius: 8px; 
        cursor: pointer; 
    }
    
    .nav-toggle .hamburger { 
        display: block; 
        width: 22px; 
        height: 2px; 
        background: var(--light); 
        position: relative; 
        transition: transform 0.25s; 
    }
    
    .nav-toggle .hamburger::before, 
    .nav-toggle .hamburger::after { 
        content: ''; 
        position: absolute; 
        left: 0; 
        width: 22px; 
        height: 2px; 
        background: var(--light); 
        transition: transform 0.25s, top 0.25s, bottom 0.25s; 
    }
    
    .nav-toggle .hamburger::before { 
        top: -7px; 
    }
    
    .nav-toggle .hamburger::after { 
        bottom: -7px; 
    }

    .nav-links {
        position: fixed; 
        top: 72px; 
        right: 16px; 
        background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(10,14,24,0.98));
        border: 1px solid rgba(99,102,241,0.08); 
        padding: 1rem 1.25rem; 
        border-radius: 12px; 
        display: none; 
        flex-direction: column; 
        gap: 12px; 
        box-shadow: 0 18px 60px rgba(2,6,23,0.6);
    }
    
    nav.open .nav-links { 
        display: flex; 
    }
    
    nav.open .hamburger { 
        background: transparent; 
    }
    
    nav.open .hamburger::before { 
        transform: rotate(45deg); 
        top: 0; 
    }
    
    nav.open .hamburger::after { 
        transform: rotate(-45deg); 
        bottom: 0; 
    }

    .about-text .socials { 
        justify-content: center; 
        gap: 10px; 
        margin-top: 1rem; 
    }
    
    .about-text .social-link { 
        width: 44px; 
        height: 44px; 
        padding: 6px; 
    }
    
    .about-text .social-link img { 
        width: 22px; 
        height: 22px; 
    }
}

/* very small screens */
@media (max-width: 600px) {
    .contact-container { 
        padding: 0 0.5rem; 
    }
    
    .socials { 
        gap: 10px; 
    }
    
    .floating-socials { 
        bottom: 10px; 
        right: 10px; 
        gap: 10px; 
    }
    
    .floating-socials img { 
        width: 26px; 
        height: 26px; 
    }
}