/* ===========================
   MOODY FOODY | RESPONSIVE
=========================== */

/* ---- Hamburger (hidden on desktop) ---- */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    background:none;
    border:none;
}

.hamburger span{
    width:26px;
    height:3px;
    background:var(--dark,#2d1b12);
    border-radius:2px;
}

/* ================= TABLETS ================= */
@media (max-width:1024px){

    .hero{
        flex-direction:column;
        text-align:center;
    }

    .about-grid,
    .contact-layout,
    .cart-layout,
    .checkout-layout{
        grid-template-columns:1fr;
    }

    .account-layout{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .stats-strip{
        gap:30px;
        flex-wrap:wrap;
    }
}

/* ================= MOBILE ================= */
@media (max-width:768px){

    section{
        padding:50px 6%;
    }

    .hamburger{
        display:flex;
    }

    .nav-links{
        position:fixed;
        top:0;
        right:-100%;
        width:75%;
        max-width:300px;
        height:100vh;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        padding:100px 30px 30px;
        gap:22px;
        box-shadow:-10px 0 30px rgba(0,0,0,.15);
        transition:.4s;
        z-index:2000;
    }

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

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

    .menu-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .food-grid{
        grid-template-columns:1fr 1fr;
        gap:16px;
        padding:10px 5% 60px;
    }

    .cart-item{
        flex-direction:column;
    }

    .cart-item img{
        width:100%;
        height:160px;
    }

    .form-wrap{
        padding:26px 20px;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .order-summary{
        position:static;
    }

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

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

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

    .toast{
        right:16px;
        left:16px;
        bottom:16px;
        text-align:center;
    }
}

/* ================= SMALL PHONES ================= */
@media (max-width:480px){

    .page-banner h1{
        font-size:30px;
    }

    .food-grid{
        grid-template-columns:1fr;
    }

    .hero-stats{
        flex-wrap:wrap;
        gap:20px;
    }

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