/* assets/css/responsive.css */

/* Tablet and smaller */
@media (max-width: 768px) {
    /* Hide the desktop navigation */
    .magnetic-header nav {
        display: none;
    }

    /* Show the hamburger button */
    .hamburger-btn {
        display: block;
    }

    /* Style the mobile navigation overlay when it's open */
    .nav-open .magnetic-header nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        background-color: var(--color-bg);
    }
    
    /* Style the links inside the mobile menu */
    .nav-open .magnetic-header nav a {
        font-size: 2rem;
        margin: 0;
        color: var(--color-text);
    }
    
    /* Prevent page from scrolling when mobile menu is open */
    .nav-open {
        overflow: hidden;
    }

    /* General responsive styles */
    h1 { font-size: 2.2rem; }
    h2.section-title { font-size: 2rem; }
    section { padding-top: calc(var(--spacing-unit) * 6); padding-bottom: calc(var(--spacing-unit) * 6); }
}

/* Mobile */
@media (max-width: 480px) {
    /* Make the Visual Mixer stack vertically */
    .visual-mixer {
        flex-direction: column;
        gap: 1.5rem;
    }

    .plus-icon, .equals-icon {
        transform: rotate(90deg);
    }

    /* Make footer content stack */
    .footer-content {
        flex-direction: column;
        gap: 0.5rem;
    }
}