/* 
===============================
Table of Contents:
1. Responsive Variables
2. General Responsive Styles
3. Header & Navigation
4. Home Section
5. Projects Section
6. Skills Section
7. Resume Section
8. Blog Section
9. Contact Section
10. Footer
===============================
*/

/* 1. Responsive Variables */
:root {
    --mobile-padding: 1rem;
    --tablet-padding: 2rem;
}

/* 2. General Responsive Styles */
@media (max-width: 1200px) {
    .container {
        padding: 0 var(--tablet-padding);
    }

    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 14px;
    }

    .section {
        padding: var(--spacing-xl) 0;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .hero-text h1 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 var(--mobile-padding);
        text-align: center;
    }

    h1 {
        font-size: 2.8rem;
        text-align: center;
    }

    h2 {
        font-size: 2.2rem;
        text-align: center;
    }

    h3 {
        font-size: 1.8rem;
        text-align: center;
    }

    .section {
        padding: var(--spacing-lg) 0;
    }

    .section-header {
        margin-bottom: var(--spacing-lg);
        text-align: center;
    }

    .hero-text, .bio, .social-icons {
        text-align: center;
    }

    /* Hide custom cursor on mobile */
    .cursor-dot,
    .cursor-outline {
        display: none;
    }
}

/* 3. Header & Navigation */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: var(--dark-bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-lg);
        transition: right 0.3s ease;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
        z-index: var(--z-fixed);
    }

    .light-theme .nav-links {
        background-color: var(--darker-bg);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li a {
        font-size: var(--fs-md);
    }

    .hamburger {
        display: flex;
        z-index: calc(var(--z-fixed) + 1);
    }
}

/* 4. Home Section */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }

    .profile-image {
        margin: 0 auto;
    }

    .social-icons {
        justify-content: center;
    }

    .hero-text h1 {
        font-size: 3rem;
    }
}

@media (max-width: 576px) {
    .hero-text h1 {
        font-size: 2.5rem;
    }

    .subtitle {
        height: 60px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .typing-text, .typing-cursor {
        font-size: var(--fs-sm);
    }

    .profile-image {
        max-width: 250px;
    }
}

/* 5. Projects Section */
@media (max-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 576px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        max-width: 100%;
    }
}

/* 6. Skills Section */
@media (max-width: 992px) {
    .skills-container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .skills-left,
    .skills-right {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .circular-skills {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-skills {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 7. Resume Section */
@media (max-width: 768px) {
    .resume-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }

    .resume-icon {
        margin-bottom: var(--spacing-sm);
    }
}

/* 8. Blog Section */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 576px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* 9. Contact Section */
@media (max-width: 992px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-info {
        width: 100%;
    }

    .contact-form-container {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

/* 10. Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .footer-links ul {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }
}

/* Mobile Menu Button */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}