/* Tablet Layout (max-width: 1024px) */
@media (max-width: 1024px) {
    .overlay h1 {
        font-size: 4rem;
    }

    .overlay p {
        font-size: 1.6rem;
    }

    .menu-grid {
        margin-left: 5vw;
        margin-right: 5vw;
    }
}

/* Small Tablets and Mobile Landscape (max-width: 900px) */
@media (max-width: 900px) {
    .hero {
        height: 55vh;
    }

    .overlay {
        padding: 1rem;
    }

    .menu-grid {
        margin-left: 20px;
        margin-right: 20px;
        gap: 12px;
    }
}

/* Smartphones Portrait (max-width: 768px) */
@media (max-width: 768px) {
    .hero {
        height: 50vh;
    }

    .overlay h1 {
        font-size: 2.8rem;
        margin-top: 0;
    }

    .overlay p {
        font-size: 1.2rem;
        text-align: center; 
    }

    /* Switch 2-column grid to 1-column stack for perfect thumb targets */
    .menu-grid {
        grid-template-columns: 1fr; 
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 70px; 
        gap: 15px;
    }

    .menu-item {
        padding: 20px 15px; 
    }

    .menu-item h2 {
        font-size: 1.3rem;
    }

    .menu-item p {
        font-size: 0.95rem;
    }

    /* Adjust footer for small screens */
    footer {
        flex-direction: column;
        gap: 12px;
        padding: 8px 15px;
        font-size: 0.8rem;
    }

    .footer-left, 
    .footer-center, 
    .footer-socials {
        justify-content: center;
        flex: unset;
    }

    .logo-footer img {
        height: 2rem;
    }
    
    footer a {
        margin-right: 10px;
    }
}

/* Tiny Screens (max-width: 360px) */
@media (max-width: 360px) {
    .overlay h1 {
        font-size: 2.3rem;
    }
    
    .menu-item h2 {
        font-size: 1.1rem;
    }
}