/* ============================================================
   MENU PAGE STYLES — menu.html
   Built entirely on the existing design tokens and conventions
   from style.css: --color-yellow, --color-red, --color-black-soft,
   --font-heading (Georgia), --font-body, the .btn family, the
   .reveal scroll-animation classes, and the site's existing
   section spacing rhythm (--space-section-y / --space-section-x).

   No new colours, fonts, radii or shadows are introduced.
   Append this file to style.css, or link it after style.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. MENU HERO
   Mirrors the language of .food-categories-heading / .hero-cuisine-bar:
   serif display heading, small uppercase kicker, generous top
   padding to clear the fixed site header.
   ------------------------------------------------------------ */

.menu-hero {
  width: 100%;
  background-color: #000000;
  color: var(--color-white);
  padding: calc(90px + var(--space-section-y)) var(--space-section-x) var(--space-section-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

@media (max-width: 1280px) {
  .menu-hero {
    padding-top: calc(70px + var(--space-section-y));
  }
}

.menu-hero-kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.menu-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--color-white);
}

.menu-hero p {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.7;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.75);
}

/* Thin decorative rule under the hero, echoes the yellow accent
   used on .nav-box borders elsewhere on the site */
.menu-hero-rule {
  width: 64px;
  height: 2px;
  background-color: var(--color-yellow);
  margin-top: 6px;
}

/* ------------------------------------------------------------
   2. CATEGORY NAVIGATION (sticky pill bar)
   Horizontally scrollable on all sizes so it never wraps or
   overflows the viewport, regardless of how many categories
   exist or how long their names are. Generated dynamically —
   this only styles whatever markup is rendered.
   ------------------------------------------------------------ */

.menu-nav-wrap {
  position: sticky;
  top: 90px;
  z-index: 500;
  width: 100%;
  background-color: rgba(7, 7, 7, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}

@media (max-width: 1280px) {
  .menu-nav-wrap {
    top: 70px;
  }
}

.menu-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px var(--space-section-x);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.menu-nav::-webkit-scrollbar {
  display: none;
}

.menu-nav a {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.menu-nav a:hover {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.menu-nav a.active {
  color: var(--color-grey-dark);
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
}

@media (max-width: 480px) {
  .menu-nav {
    gap: 8px;
    padding: 12px 16px;
  }

  .menu-nav a {
    font-size: 0.7rem;
    padding: 8px 14px;
  }
}

/* ------------------------------------------------------------
   3. MENU BODY / CATEGORY SECTIONS
   ------------------------------------------------------------ */

.menu-body {
  width: 100%;
  background-color: var(--color-black-soft);
  color: var(--color-white);
}

.menu-category {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-section-y) var(--space-section-x);
  scroll-margin-top: 150px; /* clears fixed header + sticky nav on anchor jump */
}

@media (max-width: 1280px) {
  .menu-category {
    scroll-margin-top: 128px;
  }
}

.menu-category + .menu-category {
  border-top: 1px solid var(--color-line);
}

.menu-category-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.menu-category-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--color-white);
  line-height: 1.2;
}

.menu-category-header .menu-category-name-cn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------
   4. DISH GRID
   Two columns on desktop so large categories (e.g. the 70+ item
   Szechuan/North East section) stay compact and scannable
   instead of becoming one long single-column scroll. Single
   column on tablet/phone. Grid, not cards — no borders/boxes
   around each dish, just generous spacing and a hairline
   divider, so the page reads as a printed menu rather than a
   product listing.
   ------------------------------------------------------------ */

.menu-item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  row-gap: 0;
}

@media (max-width: 900px) {
  .menu-item-grid {
    grid-template-columns: 1fr;
  }
}

.menu-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  break-inside: avoid;
}

/* Name row: dish name on the left, price on the right, joined by
   a dotted leader line — the classic printed-menu convention.
   Keeps prices in a clean vertical rhythm without a rigid table. */
.menu-item-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.menu-item-name-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.menu-item-name {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-white);
  line-height: 1.35;
}

.menu-item-name-cn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

/* Dotted leader — fills remaining space between name and price */
.menu-item-leader {
  flex: 1 1 auto;
  min-width: 16px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
  transform: translateY(-4px);
}

.menu-item-price {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-yellow);
  white-space: nowrap;
}

.menu-item-description {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  max-width: 46ch;
}

/* ------------------------------------------------------------
   5. MARKERS (spicy / piece count)
   Small inline badges next to the dish name. Never rely on
   colour alone — the spicy marker always carries an icon AND
   an accessible label, not just a red dot.
   ------------------------------------------------------------ */

.menu-item-markers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.menu-marker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  line-height: 1.6;
}

.menu-marker-spicy {
  color: var(--color-red);
  border: 1px solid rgba(243, 35, 40, 0.5);
}

.menu-marker-spicy svg {
  width: 10px;
  height: 10px;
  fill: var(--color-red);
  flex-shrink: 0;
}

.menu-marker-pieces {
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Reserved for the JSON's "available" flag — dishes temporarily
   off menu are dimmed and labelled rather than hidden, in case
   you want to show "currently unavailable" instead of removing
   the row entirely. Unused unless available:false appears. */
.menu-item.is-unavailable {
  opacity: 0.4;
}

.menu-item.is-unavailable .menu-item-price {
  color: rgba(255, 255, 255, 0.4);
}

.menu-marker-unavailable {
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------------
   6. RESPONSIVE — dish grid & type at small sizes
   ------------------------------------------------------------ */

@media (max-width: 480px) {
  .menu-item-row {
    flex-wrap: wrap;
  }

  .menu-item-name-group {
    flex: 1 1 100%;
  }

  .menu-item-leader {
    display: none;
  }

  .menu-item-price {
    margin-left: auto;
  }

  .menu-item-description {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   7. SCROLL-BACK-TO-TOP-OF-MENU CTA (optional footer element)
   Reuses the existing .btn / .btn-outline look exactly.
   ------------------------------------------------------------ */

.menu-footer-cta {
  display: flex;
  justify-content: center;
  padding: var(--space-section-y) var(--space-section-x);
}

/* ------------------------------------------------------------
   8. REDUCED MOTION
   The site already defines .reveal / .reveal-fade etc. globally
   in style.css — menu items should use those existing classes
   directly in markup (e.g. class="menu-item reveal reveal-fade")
   rather than duplicating animation rules here. No new motion
   is introduced by this file, so no additional reduced-motion
   overrides are required beyond the ones already in style.css.
   ------------------------------------------------------------ */