/* ========================================= */
/* MOBILE RESPONSIVE STYLES - ADD TO END OF style.css */
/* Desktop styles remain completely untouched above */
/* MOBILE RESPONSIVE STYLES */
/* Desktop styles remain untouched */
/* ========================================= */

@media (max-width: 768px) {
    
    /* === NAVIGATION === */
    #navbar {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }
    
    .nav-content {
        gap: 1rem;
        justify-content: center;
    }
    
    .nav-content a {
        font-size: 1.6rem;
    }
    
    /* Move theme toggle to its own row */
    .theme-toggle {
        margin-left: 0;
        order: 10; /* Push to end */
    }
    
    /* === HERO SECTION === */
    section#hero {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }
    
    #hero h1 {
        font-size: 3.5rem;
        margin-bottom: 0.5rem;
    }
    
    #hero h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .links {
        gap: 2rem;
        align-items: center;
    }
    
    .links a {
        width: 120px;
        text-align: center;
        font-size: 1rem;
    }

	.mobile-resume-link {
        width: 120px;
        text-align: center;
        font-size: 1rem;
    }
    
    /* === SECTIONS === */
    section {
        padding: 2rem 1rem;
    }
    
    section#about,
    section#projects,
    section#contact {
        padding: 1.5rem 1rem;
    }
    
    /* === CARDS === */
    .card {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }
	
	.card h3 {
        font-size: 1.6rem;
		text-align: center;
		padding-top: 3rem;
    }
    
    .alternate-subtitle {
        font-size: 1.1rem;
    }
    
    /* Remove line breaks in card text for mobile */
    .card p br {
        display: none;
    }
    
    /* === PROJECTS === */
    #projects h2 {
        font-size: 1.8rem;
        margin-bottom: 1.8rem;
		padding-top: 0.8rem;
    }

    .project-grid {
        gap: 1.5rem;
    }
    
    .project-card {
        padding: 1.5rem;
        font-size: 1rem;
    }
    
    .project-card h3 {
        font-size: 1.4rem;
    }
    
    /* Reduce hover lift on mobile for better touch UX */
    .project-card.fade-up-2:hover,
    .project-card.fade-up-3:hover,
    .project-card.fade-up-4:hover,
    .project-card.fade-up-5:hover,
    .project-card.fade-up-6:hover,
    .project-card.fade-up-7:hover {
        transform: translateY(-8px);
    }
    
    /* === CONTACT FORM === */
    .contact-card {
        padding: 1.5rem 1rem;
    }
    
    #contact h2 {
        font-size: 1.8rem;
		padding-bottom: 1rem;
    }
    
    #contact-form input,
    #contact-form textarea {
        padding: 0.8rem;
        font-size: 16px; /* Prevents zoom on iOS */
        max-width: 100%;
    }
    
    #contact-form textarea {
        min-height: 120px;
    }
    
    #contact-form button {
        padding: 0.8rem 1.5rem;
        max-width: 160px;
        font-size: 1rem;
		
    }
    
    /* reCAPTCHA scaling */
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
        margin-bottom: 0.5rem;
    }
    
    /* === ANIMATIONS === */
    /* Reduce animation distances on mobile */
    #hero h1,
    #hero h2,
    #hero .links {
        transform: translateY(50px);
    }
    
    .fade-up-1,
    .fade-up-2,
    .fade-up-3,
    .fade-up-4,
    .fade-up-5,
    .fade-up-6,
    .fade-up-7 {
        transform: translateY(80px);
    }
    
    .slide-in-left-title-1,
    .slide-in-left-title-2,
    .slide-in-left-title-3,
	.slide-in-left-title-4,
    .slide-in-left-body-1,
    .slide-in-left-body-1_2,
    .slide-in-left-body-1_3,
    .slide-in-left-body-2,
    .slide-in-left-body-2_2,
    .slide-in-left-body-3,
    .slide-in-left-body-3_2,
	.slide-in-left-body-3_3,
	.slide-in-left-body-3_4,
    .slide-in-left-body-4 {
        transform: translateX(-100px);
    }
	
	#about {
		scroll-margin-top: 0px;
	}
    
    /* === PARTICLE BACKGROUND === */
    /* Reduce particle count on mobile for performance */
    /* This will need a JS adjustment - see notes below */
}



/* === EXTRA SMALL DEVICES === */
@media (max-width: 480px) {
	
	.theme-toggle input:checked + .slider {
		transform: translateX(16px);
		transform: translateX(30px);
	}
    
    #hero h1 {
        font-size: 3rem;
    }
    
    #hero h2 {
        font-size: 1.8rem;
    }
    
    .nav-content {
        gap: 0.8rem;
    }
    
    .nav-content a {
        font-size: 1rem;
    }
    
    .card {
        padding: 0.5rem;
    }
	
    
    .project-card {
        padding: 1.25rem;
    }
    
    .g-recaptcha {
        transform: scale(0.77);
    }
	
	#about {
	  scroll-margin-top: -30px;
	}

}



/* === LANDSCAPE MOBILE === */
@media (max-width: 768px) and (orientation: landscape) {
    
    section#hero {
        padding-top: 5rem;
        min-height: auto;
    }
    
    #hero h1 {
        font-size: 2rem;
    }
    
    #hero h2 {
        font-size: 1.3rem;
    }

}


/* ========================================= */
/* MOBILE MENU — new below, nothing above touched */
/* ========================================= */

@media (max-width: 768px) {

    /* --- Hide desktop nav links on mobile --- */
    .nav-content a {
        display: none;
    }

    /* --- Navbar layout: hamburger left, toggle right --- */
    .nav-content {
        justify-content: space-between;
        align-items: center;
    }

    /* --- Theme toggle stays right, always visible --- */
    .theme-toggle {
        display: flex;
        margin-left: auto;
        order: 2;
    }

    /* --- Hamburger button --- */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        order: 1;
        flex-shrink: 0;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--text-light);
        border-radius: 2px;
        transition: transform 0.35s ease, opacity 0.35s ease;
        transform-origin: center;
    }

    body.light-mode .hamburger span {
        background-color: var(--text-dark);
    }

    /* --- Hamburger to X animation --- */
    .hamburger.open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* --- Overlay --- */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-overlay.open {
        display: block;
        opacity: 1;
    }

    /* --- Drawer --- */
    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 75%;
        max-width: 300px;
        background: var(--bg-dark);
        z-index: 999;
        display: flex;
        flex-direction: column;
        padding: 6rem 2rem 2rem 2rem;
        gap: 1.8rem;
        transform: translateX(-100%);
        transition: transform 0.35s ease;
    }

    body.light-mode .mobile-drawer {
        background: var(--bg-light);
    }

    .mobile-drawer.open {
        transform: translateX(0);
    }

    /* --- Drawer links --- */
    .mobile-drawer a {
        color: var(--text-light);
        text-decoration: none;
        font-size: 1.6rem;
        font-family: 'Rubik';
        transition: color 0.3s;
        display: block;
        opacity: 1;
        transform: none;
        animation: none;
    }

    body.light-mode .mobile-drawer a {
        color: var(--text-dark);
    }

    .mobile-drawer a:hover {
        color: var(--blue);
    }

    body.light-mode .mobile-drawer a:hover {
        color: var(--pink);
    }

    /* --- Resume pill button inside drawer --- */
    .mobile-drawer a.resume {
        /* border: 2px solid var(--blue); */
        /* padding: 0.4rem 1.2rem; */
        /* border-radius: 30px; */
        /* background: var(--blue); */
        /* color: var(--text-dark); */
		
		/* uncomment & remove other color for pill return */
        /* border: 2px solid var(--blue); */
        /* padding: 0.4rem 1.2rem; */
        /* border-radius: 30px; */
        /* background: var(--blue); */
        /* color: var(--text-dark); */
		
		color: var(--text-light);
        text-align: center;
        width: fit-content;
        transition: all 0.3s;
    }

    .mobile-drawer a.resume:hover {
        background: none;
        color: var(--blue);
    }

    body.light-mode .mobile-drawer a.resume {
        /* border: 2px solid var(--pink); */
        /* background: var(--pink); */
        /* color: var(--text-light); */
        /* border: 2px solid var(--pink); */
        /* background: var(--pink); */
        /* color: var(--text-light); */
    }

    body.light-mode .mobile-drawer a.resume:hover {
        background: none;
        color: var(--pink);
    }
	
	/* hamburger slide in */
	.hamburger {
		opacity: 0;
		transform: translateX(-60px);
		animation: slideInLeft 0.6s ease-out forwards;
		animation-delay: 0.6s;
	}
	
	/* Swap hero link sets on mobile */
	.links {
		display: none;
	}

	.links-mobile {
		display: flex;
		gap: 0.8rem;
		justify-content: center;
		align-items: center;
	}

	.links-mobile a {
		color: var(--text-dark);
		text-decoration: none;
		padding: 0.2rem 0.4rem;
		border: 2px solid var(--blue);
		border-radius: 30px;
		transition: all 0.3s;
		background: var(--blue);
		font-size: 1rem;
		text-align: center;
	}

	.links-mobile a:hover {
		color: var(--blue);
		background: none;
	}

	body.light-mode .links-mobile a {
		border: 2px solid var(--pink);
		background: var(--pink);
		color: var(--text-light);
	}

	body.light-mode .links-mobile a:hover {
		background: none;
		color: var(--pink);
	}
		
	.links-mobile {
		opacity: 0;
		transform: translateY(40px);
	}

	.links-mobile.fade-in-up {
		opacity: 1;
		transform: translateY(0px);
		transition: 
			opacity 0.8s ease 0.6s,
			transform 0.8s ease 0.6s;
	}

}