/* ==========================================================================
   Menu page — sticky category rail, search, filters, results grid
   ========================================================================== */

.menu-hero {
  padding: clamp(26px, 3.4vw, 46px) 0 clamp(18px, 2.4vw, 28px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.menu-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.menu-hero h1 {
  margin-top: 10px;
}
.menu-hero p {
  margin-top: 10px;
}

/* ---- Sticky toolbar --------------------------------------------------- */

.menu__sticky {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--surface-glass-sticky);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: top var(--t-mid) var(--ease-out);
}
/* The header condenses on scroll; the toolbar follows it up.
   Driven by a root class because `display:contents` breaks sibling selectors. */
.is-scrolled .menu__sticky {
  top: 66px;
}

.menu__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.menu__search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 420px;
}
.menu__search .input {
  height: 46px;
  padding-left: 44px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border-color: transparent;
}
.menu__search .input:focus {
  background: var(--surface);
  border-color: var(--kt-pink);
}
.menu__searchicon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  color: var(--ink-3);
  pointer-events: none;
}
.menu__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--surface);
}
.menu__clear:hover {
  color: var(--ink);
}

.menu__sort {
  height: 46px;
  width: auto;
  min-width: 190px;
  border-radius: var(--r-pill);
  padding-inline: 16px;
  background: var(--surface-3);
  border-color: transparent;
  font-weight: 600;
  font-size: 0.88rem;
  flex: none;
  margin-left: auto;
  cursor: pointer;
}

.menu__catrail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.menu__catrail::-webkit-scrollbar {
  display: none;
}
.menu__catrail .chip {
  flex: none;
}
.menu__catrail .chip img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -6px;
}

.menu__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}
.menu__filters .chip {
  height: 34px;
  font-size: 0.8rem;
  padding: 0 13px;
}
/* Both rows are filled by script after first paint; hold one row of chips
   (chip height + the row's bottom padding) so the menu below never drops. */
[data-menu-cats]:empty {
  min-height: 52px;
}
[data-menu-filters]:empty {
  min-height: 46px;
}

/* ---- Layout ----------------------------------------------------------- */

.menu__layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding-block: clamp(24px, 3vw, 40px);
}

.menu__aside {
  position: sticky;
  top: calc(var(--nav-h) + 150px);
  display: grid;
  gap: 22px;
}
.menu__asideblock h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.menu__jump {
  display: grid;
  gap: 2px;
}
.menu__jump a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: all var(--t-fast) linear;
}
.menu__jump a:hover {
  background: var(--surface-3);
}
.menu__jump a.is-active {
  background: var(--kt-pink-50);
  color: var(--kt-pink);
}
.menu__jump em {
  font-style: normal;
  font-size: 0.76rem;
  color: var(--ink-4);
}

.menu__pricecard {
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--kt-pink-50);
  border: 1px solid var(--kt-pink-100);
}
.menu__pricecard p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.menu__pricecard strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.menu__results {
  min-width: 0;
}
.menu__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 0.86rem;
  color: var(--ink-3);
}
.menu__count strong {
  color: var(--ink);
}

.menu__group + .menu__group {
  margin-top: clamp(34px, 4vw, 54px);
}
.menu__grouphead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.menu__grouphead h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}
.menu__grouphead em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* View toggle: grid ↔ list */
.menu__view {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  flex: none;
}
.menu__view button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  transition: all var(--t-fast) linear;
}
.menu__view button.is-active {
  background: var(--surface);
  color: var(--kt-pink);
  box-shadow: var(--sh-1);
}

.menu__grid.is-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* ==========================================================================
   Mobile: food sooner
   --------------------------------------------------------------------------
   Measured at 375x667 before this block: the hero was 310px and the sticky
   controls 269px, so 579px of a 667px screen was spent before a single dish.
   The first product sat at 820px — 153px below the fold — which means the
   Menu page opened on no food at all.

   Nothing is deleted. The lede still says rice is per scoop and that
   packaging and delivery are added at checkout, because a customer pricing a
   plate needs it. It is simply sized like a caption instead of a headline.
   Desktop is untouched: every rule here is inside the mobile query.
   ========================================================================== */

@media (max-width: 719px) {
  .menu-hero {
    padding: 11px 0 7px;
  }
  .menu-hero__inner {
    align-items: center;
    gap: 10px;
    /* The layout toggle was wrapping onto a line of its own — a whole 44px
       row for two small buttons. Beside the heading it costs nothing. */
    flex-wrap: nowrap;
  }
  /* "The full menu" above a heading that says the same thing, on the page the
     nav already marks as Menu. It is the one line here that carries nothing. */
  .menu-hero .eyebrow {
    display: none;
  }
  .menu-hero h1 {
    margin-top: 0;
    /* display-lg wraps to two tall lines at this width. Sized to sit on one. */
    font-size: 1.12rem;
    line-height: 1.2;
  }
  .menu-hero p.lede {
    margin-top: 3px;
    font-size: 0.78rem;
    line-height: 1.4;
  }
  /* The layout toggle sits beside the heading rather than under it. */
  .menu-hero__inner .section-head__text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .menu-hero .menu__view {
    flex: none;
    align-self: flex-start;
  }

  /* ---- Controls ------------------------------------------------------
     The toolbar's direction is decided in css/responsive.css, which loads
     after this file; only padding is set here. */
  .menu__toolbar {
    padding: 10px 0;
    gap: 8px;
  }
  .menu__catrail {
    padding-bottom: 8px;
  }
  .menu__filters {
    padding-bottom: 8px;
    /* Scrolls sideways like the category rail above it — the project's
       existing pattern for a row of chips that will not fit. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .menu__filters::-webkit-scrollbar {
    display: none;
  }
  .menu__filters .chip {
    flex: none;
  }
  [data-menu-cats]:empty {
    min-height: 48px;
  }
  [data-menu-filters]:empty {
    min-height: 42px;
  }
  .menu__count {
    margin: 6px 0;
    font-size: 0.8rem;
  }
}