/* ==========================================================================
   Brooklyn Pizza | Menu page
   Loaded only on /menu/. Tokens come from tokens.css; no magic numbers.
   L14: this page is the menu. Layout serves scanning for a price, nothing else.
   ========================================================================== */

/* ---- Sticky category index ---------------------------------------------
   21 categories is a long scroll on a phone. The chip row is navigation, not
   content, so L14 holds. Sits under the header using --z-raised, which is
   below --z-sticky-nav so it can never cover the header.
   ------------------------------------------------------------------------ */
.bpz-menu-index{position:sticky;top:0;z-index:var(--z-raised);
  background:var(--bpz-grad-warm);border-block:1px solid var(--bpz-line);
  box-shadow:var(--bpz-sh-sm)}
.bpz-menu-index__scroll{display:flex;gap:.5rem;overflow-x:auto;
  padding:.75rem var(--bpz-gut);scrollbar-width:thin;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.bpz-menu-index a{scroll-snap-align:start;flex:0 0 auto;text-decoration:none;
  font-size:.8125rem;font-weight:var(--bpz-fw-bold);white-space:nowrap;
  color:var(--bpz-ink);background:var(--bpz-white);
  border:1px solid var(--bpz-line);border-radius:var(--bpz-r-pill);
  padding:.5rem .9rem;min-height:2.25rem;display:inline-flex;align-items:center;
  transition:background .2s var(--bpz-ease),border-color .2s var(--bpz-ease)}
.bpz-menu-index a:hover{background:var(--bpz-bg-warm);border-color:var(--bpz-ink-faint)}
.bpz-menu-index a:focus-visible{outline:3px solid var(--bpz-yellow);outline-offset:2px}

/* ---- Section ------------------------------------------------------------ */
.bpz-menu-sec{padding-block:clamp(2.5rem,5vw,4rem)}
.bpz-menu-sec + .bpz-menu-sec{border-top:1px solid var(--bpz-line-soft)}
.bpz-menu-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;
  margin-bottom:.35rem}
.bpz-menu-sec h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.025em}
.bpz-menu-sec__count{font-family:var(--bpz-font-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bpz-ink-faint)}
.bpz-menu-sec__note{font-size:.9375rem;color:var(--bpz-ink-faint);
  max-width:60ch;margin-bottom:1.5rem}

/* Anchor targets must clear the sticky index, not hide behind it. */
.bpz-menu-sec[id]{scroll-margin-block-start:4.5rem}

/* ---- Items --------------------------------------------------------------
   A dotted leader between name and price is the one piece of menu convention
   worth keeping: the eye tracks the row instead of losing it across a gap.
   ------------------------------------------------------------------------ */
.bpz-menu-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--bpz-line-soft);border:1px solid var(--bpz-line-soft);
  border-radius:var(--bpz-r-lg);overflow:hidden}
@media (min-width:56em){.bpz-menu-list{grid-template-columns:repeat(2,1fr)}}
.bpz-menu-item{background:var(--bpz-grad-card);padding:1rem 1.25rem}
/* An odd item count leaves a dead cell in the last row, and because the grid
   draws its rules with a 1px gap over a line-coloured background that cell
   reads as an empty box rather than as nothing. Let a lone last row span. */
@media (min-width:56em){
  .bpz-menu-item:last-child:nth-child(odd){grid-column:1 / -1}
}
.bpz-menu-item__row{display:flex;align-items:baseline;gap:.5rem}
.bpz-menu-item__name{font-family:var(--bpz-font-display);font-size:1.0625rem;
  font-weight:var(--bpz-fw-bold);letter-spacing:-.015em;color:var(--bpz-ink)}
.bpz-menu-item__leader{flex:1 1 auto;border-bottom:1px dotted var(--bpz-line);
  transform:translateY(-.25rem);min-width:1.5rem}
.bpz-menu-item__desc{margin-top:.3rem;font-size:.9375rem;line-height:1.5;
  color:var(--bpz-ink-faint);max-width:52ch}
/* Paid extras. Deliberately quieter than the description and a shade smaller:
   it is a price the customer has not agreed to yet, so it should read as a
   footnote to the dish rather than as part of what they are ordering. The
   "Add" label carries the accent so the line scans as an option, not a
   second description. */
.bpz-menu-item__add{margin-top:.25rem;font-size:.875rem;line-height:1.45;
  color:var(--bpz-ink-faint)}
.bpz-menu-item__add span{font-weight:var(--bpz-fw-bold);color:var(--bpz-ink-soft)}

/* ---- Prices -------------------------------------------------------------
   Tabular numerals so columns of prices line up down the page.
   ------------------------------------------------------------------------ */
.bpz-menu-prices{display:flex;flex-wrap:wrap;gap:.35rem .75rem;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.bpz-menu-price{font-size:1rem;font-weight:var(--bpz-fw-bold);color:var(--bpz-ink)}
.bpz-menu-price__label{display:block;font-family:var(--bpz-font-mono);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bpz-ink-faint);font-weight:var(--bpz-fw-med);text-align:right}
.bpz-menu-price__value{display:block;text-align:right}

/* ---- Choice lists (toppings, sub meats) --------------------------------
   Options, not priced dishes. Chips rather than price rows, because there is
   no price to align to and a 29-item list reads faster as a wrap than a column.
   ------------------------------------------------------------------------ */
.bpz-menu-choice{margin-bottom:1.5rem}
.bpz-menu-choice__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;
  margin-bottom:.6rem}
.bpz-menu-choice__label{font-family:var(--bpz-font-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bpz-red);
  font-weight:var(--bpz-fw-bold)}
.bpz-menu-choice__note{font-size:.875rem;color:var(--bpz-ink-faint)}
.bpz-menu-choice__names{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem}
.bpz-menu-choice__names li{background:var(--bpz-white);border:1px solid var(--bpz-line);
  border-radius:var(--bpz-r-pill);padding:.35rem .75rem;font-size:.875rem;
  color:var(--bpz-ink)}

/* ---- Intro -------------------------------------------------------------- */
.bpz-menu-intro{max-width:60ch}
.bpz-menu-intro p + p{margin-top:.9rem}

@media print{
  .bpz-menu-index{display:none}
  .bpz-menu-list{grid-template-columns:repeat(2,1fr)}
}