/* ============================================================================
   THE MENU — head, sticky bar, four chapters.

   b.html's section 7, plus the two controls b.html did not need. The chapters
   are built by src/app/grid.js into `[data-grid]`, one section per category,
   each on its own saturated field with cream cards standing on it.
   brand.json visualDirection: "Keep menu text on cream reading areas."
   ========================================================================== */

.menu { background: var(--c-reading); }

/* ---- the head ------------------------------------------------------------ */
.menu__head {
  background: var(--c-structure); color: var(--c-reading); text-align: center;
  padding: clamp(48px, 5.6vw, 92px) var(--gutter) clamp(44px, 5vw, 80px);
  position: relative;
}
.menu__title { font-size: var(--t-h-menu); color: var(--c-reading); margin-top: var(--s-3); }
.menu__lead {
  margin-top: var(--s-4); color: rgb(var(--c-base-cream-rgb) / .88);
  max-width: 50ch; margin-inline: auto;
}
/* Jump links, not filters. They take you to a chapter with all 45 still on the
   page; the chips below remove the other three and say so in the URL. */
.menu__jump {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.menu__jump a {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--fs-tag); letter-spacing: var(--tr-wide); text-transform: uppercase;
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 18px; border-radius: var(--r-pill);
  background: rgb(var(--c-base-cream-rgb) / .12); color: var(--c-reading);
  border: 2px solid rgb(var(--c-base-cream-rgb) / .28);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu__jump a:hover { background: var(--c-reading); color: var(--c-structure); border-color: var(--c-base-cream); }

/* ---- the sticky bar: chips, field, count --------------------------------- */
/* One row of screen doing three jobs. On an 844px phone a second sticky row is a
   fifth of the viewport gone, so they share the strip rather than stacking. */
.menu__bar {
  position: sticky; top: var(--nav-h, 64px); z-index: 60;
  background: var(--c-reading);
  border-bottom: 2px solid rgb(var(--c-deep-purple-rgb) / .12);
  box-shadow: 0 6px 18px -12px rgb(var(--c-deep-purple-rgb) / .4);
}
.menu__bar-in {
  max-width: var(--maxw); margin-inline: auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: var(--s-3);
}
.filters {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
  padding-block: 2px;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--fs-tag); letter-spacing: var(--tr-wide); text-transform: uppercase;
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 var(--s-4); border-radius: var(--r-pill); white-space: nowrap; flex: 0 0 auto;
  color: var(--c-structure); background: rgb(var(--c-deep-purple-rgb) / .07);
  border: 2px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter__dot { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--chip-rgb) / 1); flex: 0 0 auto; }
.filter:hover { background: rgb(var(--c-deep-purple-rgb) / .13); }
.filter[aria-pressed="true"] { background: var(--c-structure); color: var(--c-reading); }
.filter[aria-pressed="true"] .filter__dot { box-shadow: 0 0 0 2px rgb(var(--c-base-cream-rgb) / .5); }

.search {
  position: relative; display: flex; align-items: center; flex: 0 1 min(320px, 34vw);
  min-width: 132px;
}
.search__icon {
  position: absolute; left: 12px; width: 18px; height: 18px; pointer-events: none;
  fill: none; stroke: rgb(var(--c-deep-purple-rgb) / .78); stroke-width: 2; stroke-linecap: round;
}
/* 16px is not a taste decision: iOS Safari zooms the whole page when a field
   smaller than 16px takes focus, and a zoomed page under a sticky header is a
   trap. */
.search__input {
  width: 100%; min-height: 44px; padding: 0 var(--s-3) 0 36px;
  font-family: var(--font); font-size: 1rem;
  color: var(--c-structure); background: rgb(var(--c-deep-purple-rgb) / .07);
  border: 2px solid transparent; border-radius: var(--r-pill);
  -webkit-appearance: none; appearance: none;
}
.search__input::placeholder { color: rgb(var(--c-deep-purple-rgb) / .78); }
.search__input:focus { background: var(--c-reading); border-color: var(--c-structure); outline: none; }
.search__input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.search__input::-webkit-search-cancel-button { cursor: pointer; }

.menu__count {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--fs-chip); letter-spacing: var(--tr-wide);
  color: rgb(var(--c-deep-purple-rgb) / .82); white-space: nowrap; flex: 0 0 auto;
}

/* ---- a chapter ----------------------------------------------------------- */
/* Each chapter is one saturated field and the cards are the cream reading areas
   standing on it. `overflow-x: clip` with `overflow-y: visible` is the one
   combination that clips a bleeding cut-out sideways WITHOUT making the section
   a scroll container — which would silently anchor every card's scroll-driven
   reveal to the chapter instead of to the window. See styles/motion.css. */
.ch {
  position: relative;
  padding: clamp(46px, 5.6vw, 92px) 0 clamp(52px, 6.4vw, 104px);
  overflow-x: clip; overflow-y: visible;
}
.ch--helados   { background: var(--c-brand); }
.ch--antojitos { background: var(--c-accent); }
.ch--postres   { background: var(--c-structure); }
.ch--bebidas   { background: var(--c-highlight); }
.ch__head { text-align: center; margin-bottom: clamp(26px, 3.4vw, 50px); }
.ch__title { margin-top: var(--s-4); font-size: var(--t-h-chapter); }
.ch--helados .ch__title, .ch--antojitos .ch__title, .ch--postres .ch__title { color: var(--c-reading); }
.ch--bebidas .ch__title { color: var(--c-structure); }

/* FOUR COLUMNS, NOT FIVE. The four chapters hold 9 / 12 / 16 / 8 products: at
   five across, three of them end on a stranded row (12 -> 5+5+2, 16 -> 5+5+5+1);
   at four across, three of the four fill their rows exactly and only Helados
   leaves an orphan. Four also buys about 70px more card width, which the tall
   products use. */
.grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 22px); align-items: start;
}
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px)  { .grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- nothing found ------------------------------------------------------- */
.menu__empty-wrap { background: var(--c-reading); }
.menu__empty {
  max-width: var(--maxw); margin-inline: auto; padding: clamp(48px, 7vw, 110px) var(--gutter);
  text-align: center;
}
.menu__empty-t {
  font-family: var(--font-display); font-weight: var(--w-display); text-transform: uppercase;
  font-size: var(--t-h-beat); color: var(--c-structure);
}
.menu__empty-h { margin-top: var(--s-3); color: rgb(var(--c-deep-purple-rgb) / .82); }
.menu__empty .btn2 { margin-top: var(--s-5); }