/* Phone / small-tablet layout for every Foodbar page.
   Desktop styles live in each page; everything here applies only at <= 768px.
   Pages opt in with a <body> class: home or checkout-page.
   Menu pages have their own stylesheet, menu.css. */

@media (max-width: 768px) {

    /* ── Home page ─────────────────────────────────────────────────────── */

    body.home .container {
        height: auto;
    }

    /* Row 1: logo + Foodbar. Row 2: Sign In / Cart / Feedback. */
    body.home .navbar {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 12px;
    }

    body.home .logo img {
        height: 40px;
    }

    body.home .website-name {
        position: static;
        transform: none;
        flex: 1;
        text-align: center;
        font-size: 26px;
        padding-right: 40px; /* balance the logo so the name stays centred */
    }

    body.home .menu {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid #f0d0d0;
    }

    body.home .menu li {
        margin: 0 4px;
    }

    body.home .menu a {
        display: inline-block;
        font-size: 15px;
        padding: 6px 10px;
    }

    body.home .account-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    body.home .description {
        height: auto;
        min-height: 170px;
        padding: 22px 16px;
        font-size: 19px;
    }

    /* Food tiles: 3 on top, 3 below, tall and tightly packed. */
    /* The two rows stretch to fill the screen below the banner (min 150px each). */
    body.home .food-options {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, minmax(150px, 1fr));
        align-content: stretch;
        gap: 8px;
        padding: 10px 8px 12px;
    }

    body.home .food-box {
        aspect-ratio: auto;
        border-width: 3px;
        border-radius: 12px;
    }

    body.home .food-box:hover {
        transform: none;
    }

    body.home .food-box-title {
        font-size: 14px;
        padding: 6px 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Menu pages (empanadas, drinks, kababs, salads, sandwiches): see menu.css. */

    /* ── Checkout ──────────────────────────────────────────────────────── */

    body.checkout-page .container {
        padding: 12px;
    }

    body.checkout-page .order-summary,
    body.checkout-page .payment-section,
    body.checkout-page .address-section {
        width: 100%;
    }

    body.checkout-page .order-details {
        font-size: 14px;
        gap: 6px;
    }

    body.checkout-page .order-info {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.checkout-page .payment-section input,
    body.checkout-page .address-section input {
        font-size: 16px;
    }

    body.checkout-page .modal-content {
        width: 85%;
        margin: 40% auto;
    }
}