/*
 * components/bottom-nav.css
 *
 * What:  Mobile-only fixed bottom navigation. Five evenly-spaced tabs,
 *        each with a 26 px multi-colour SVG icon and a tiny label.
 *        Active tab is marked by the LABEL turning red — icons keep
 *        their own palette to match the food-delivery reference mockup.
 * Why:   Matches the Zomato / Swiggy / Foodhub mobile-app convention.
 *        Lets users hop between primary destinations from any screen.
 *        Desktop hides this nav (desktop uses the header nav instead).
 * Used:  Loaded by views/_layout.ejs via its own <link> tag.
 */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background-color: #fff;
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* No safe-area padding in a normal mobile browser / web-view: the browser
     * already reserves the space above the system nav bar, so adding it here
     * just leaves an empty gap BELOW the menu (what the user saw). The safe-
     * area is honoured only for an INSTALLED PWA below (display-mode: standalone),
     * where the app draws edge-to-edge and must clear the home indicator. */
    padding-bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
/* Installed PWA only — draw under the system UI, so add the inset back. */
@media (display-mode: standalone) {
    .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0.3rem var(--space-1) 0.25rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 100ms ease;
}

/* Icons are NATIVE EMOJI CHARACTERS (🏠 🔍 🛒 📋 👤 — exactly what the
 * reference mockup uses). We force the OS colour-emoji font so the
 * glyphs render in their native multi-colour form on every platform
 * (iOS, Windows, Android). Sized 24 px so the icon reads cleanly on
 * a phone without crowding the label below it. */
.bottom-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    font-family:
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Noto Color Emoji',
        'Twemoji Mozilla',
        sans-serif;
    /* Lock the emoji to its colour presentation. Some Windows builds
     * accidentally render certain emojis as monochrome text otherwise. */
    font-variant-emoji: emoji;
}

.bottom-nav__label {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
}

/* Cart count badge — sits on the top-right of the 🛒 icon. The icon span is
 * the positioning context. Toggled/updated by /js/ui/cart.js (data-cart-count). */
.bottom-nav__icon { position: relative; }
.bottom-nav__badge {
    position: absolute; top: -5px; left: 100%; margin-left: -12px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    background: var(--color-primary); color: #fff;
    border-radius: 8px; font-size: 0.6rem; font-weight: 800; line-height: 1;
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px #fff;   /* ring so it reads against the icon */
    /* The badge sits inside .bottom-nav__icon, which forces a COLOUR-EMOJI
       font — that renders the digit in its own baked-in colour (black),
       ignoring `color:#fff`. Reset to a normal text font so the count is
       actually white. */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-variant-emoji: text;
}
.bottom-nav__badge[hidden] { display: none; }
.bottom-nav__badge.is-bumping { animation: cart-badge-bump 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Active tab — ONLY the label turns red (matches the reference: the
 * Home icon stays its red-roof / green-door palette, the word "Home"
 * underneath goes red + heavier). */
.bottom-nav__item.is-active {
    color: var(--color-primary);
}
.bottom-nav__item.is-active .bottom-nav__label {
    color: var(--color-primary);
    font-weight: 700;
}

/* Desktop hides the bottom nav — desktop layout uses the header nav. */
@media (min-width: 768px) {
    .bottom-nav { display: none; }
}

/* Reserve scroll-room at the bottom of the page on mobile so the
 * fixed bottom-nav never overlaps the last line of content.
 *
 * History: this padding used to live on .site-footer because the
 * last section visible on mobile was always the footer. Now that
 * the mobile footer is hidden (links moved into the drawer), the
 * clearance has to sit on #app-main instead. We gate it on
 * `.has-bottom-nav` (set on <body> when the user is signed in) so
 * logged-out pages don't carry an unnecessary 76 px void at the end
 * of the feed. */
@media (max-width: 767px) {
    /* The bottom-nav is ALWAYS visible on mobile (no scroll-hide). This
     * reserves scroll-room so the fixed nav never covers the last line of
     * content. (The old "hide the menu while the header is off screen"
     * behaviour + its is-header-hidden JS were removed — the user wants the
     * bottom menu shown at all times, native-app style.) */
    body.has-bottom-nav #app-main { padding-bottom: 52px; }
}
/* Installed PWA — the nav carries the safe-area inset, so reserve it too. */
@media (max-width: 767px) and (display-mode: standalone) {
    body.has-bottom-nav #app-main { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0)); }
}

/* ── Product-detail page: hide the nav ──────────────────────────────
 * The product page carries its own fixed Add-to-cart bar (.pd-bar,
 * product-detail.css) pinned at the bottom. The 5-tab nav (higher
 * z-index) would stack on top of it, so we hide the nav on that page —
 * the Add-to-cart bar is the primary action there. (Desktop already
 * hides the nav via the min-width rule above; this covers mobile.) */
body.view-product .bottom-nav { display: none; }

/* With the nav hidden on the product page, drop its 76px bottom
 * reservation so there's no empty gap below the content — the .pd
 * section already reserves room for its own sticky Add-to-cart bar. */
@media (max-width: 767px) {
    body.view-product.has-bottom-nav #app-main { padding-bottom: 0; }
}