/* ==========================================================================
   Great Garden Buffet: takeout menu page
   --------------------------------------------------------------------------
   The search box, the sticky category bar, the menu sections, the dish rows,
   and the flat list of search results. Only menu.html loads this.

   The menu itself is built by js/menu.js from the data in js/data.js. To
   change a dish or a price, edit data.js, not this file.

   Needs base.css and chrome.css loaded first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Intro and search box, on the dark band
   -------------------------------------------------------------------------- */

.menu-intro p {
  max-width: 38em;
}

.search {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 26rem;
  margin-top: 1.25rem;
}

.search label {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.search input {
  min-height: 48px;
  padding: 0.4em 0.8em;
  border: 2px solid transparent;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.search input:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 22, 31, 0.45);
}


/* --------------------------------------------------------------------------
   Category bar: sticks to the top of the screen while you scroll the menu
   -------------------------------------------------------------------------- */

.menu-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--charcoal);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Scrolls sideways on phones. The native scrollbar is hidden and replaced by
   the red bar below, so it looks the same in every browser. */
.menu-nav {
  display: flex;
  gap: 0.4rem;
  padding-block: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

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

/* Wide enough and the chips wrap onto two rows instead of scrolling. */
@media (min-width: 980px) {
  .menu-nav {
    flex-wrap: wrap;
  }
}

.menu-nav a {
  flex: none;
  padding: 0.35em 0.85em;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.menu-nav a:hover {
  border-color: #fff;
  color: #fff;
}

/* The category you're currently scrolled to. Set by menu.js. */
.menu-nav a.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}


/* --------------------------------------------------------------------------
   Scroll indicator under the category bar
   Built by menu.js, not a real scrollbar. It shows how far along the list you
   are and can be dragged. It hides itself when the chips fit without scrolling.
   -------------------------------------------------------------------------- */

.nav-scroll {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter) 0.5rem;
}

.nav-scroll-track {
  position: relative;
  height: 4px;
  background: var(--charcoal);
  cursor: pointer;
  touch-action: none;     /* so dragging it doesn't scroll the page instead */
}

.nav-scroll-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 1.5rem;      /* stays grabbable on a long list */
  background: var(--red);
}

.nav-scroll-track:active .nav-scroll-thumb {
  background: var(--red-deep);
}


/* --------------------------------------------------------------------------
   Menu sections
   -------------------------------------------------------------------------- */

.menu-body {
  padding-block: 2rem clamp(3rem, 6vw, 4.5rem);
}

/* Two columns of sections on wide screens, like a printed menu. */
@media (min-width: 980px) {
  .menu {
    columns: 2;
    column-gap: 3.5rem;
  }
}

/* --nav-h is measured by menu.js, because the category bar is one row on
   phones and two on wide screens. It's what stops a section heading from
   landing underneath the bar when you tap a category. Don't replace it with
   a fixed number. */
.menu-section {
  margin-bottom: 2.75rem;
  break-inside: avoid;             /* don't split a section across columns */
  scroll-margin-top: calc(var(--nav-h, 4rem) + 0.85rem);
  background: var(--stone);
}

.menu-head h2 {
  margin-bottom: 0.35em;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

/* Red paint stroke behind each section name, like the banners in the printed
   menu. images/brush.svg is 420x80. border-image slices 70px off each end and
   keeps those ends whole, then repeats the 280px middle to fill whatever width
   the text needs. To swap in different artwork, change the "70" to match your
   own end zones and the "2.6em" to set how wide they're drawn. See the README. */
.menu-head h2 span {
  display: inline-block;
  padding: 0.54em 2.05em 0.4em;
  border-style: solid;
  border-width: 0;
  border-image: url("../images/brush.svg") 0 70 fill / 0 2.6em / 0 round;
  font-family: var(--deco);
  font-weight: 400;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* "With rice", "With fried noodles", and so on. */
.menu-note {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--muted);
}

/* The two sections boxed in the printed menu: Combination Platters and
   Chef's Specialties. Set with card: true in data.js. Shares the look of
   .card in base.css. */
.menu-section.is-card {
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
}

.menu-section.is-card .item:last-child {
  border-bottom: 0;
}

.is-card .item {
  border-bottom-color: var(--card-rule);
}


/* --------------------------------------------------------------------------
   Dish rows
   The column count comes from --cols, set per section by menu.js: one price
   column for Appetizers, two for anything sold in Small and Large.
   -------------------------------------------------------------------------- */

.col-labels,
.item {
  display: grid;
  grid-template-columns: 2.5em 1fr repeat(var(--cols), minmax(4.3em, max-content));
  column-gap: 0.4rem;
}

/* the Small / Large headings above each section */
.col-labels {
  padding-bottom: 0.25rem;
  border-bottom: 3px solid var(--ink);
  font-size: 0.85rem;
  color: var(--muted);
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

/* the menu number, kept from the printed menu so phone orders still work */
.item-n {
  font-size: 0.9rem;
  color: var(--muted);
}

/* The dotted leader runs along the last line of the dish name, and the name's
   own background hides the part behind the text. That's why these all inherit
   their background: inside a card the leader has to disappear behind the tint,
   not behind grey. */
.menu-list,
.item,
.item-main,
.item-line {
  background: inherit;
}

.item-line {
  position: relative;
}

.item-line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.4em;
  left: 0;
  border-bottom: 2px dotted #c9c1bc;
}

.item-name {
  position: relative;
  z-index: 1;
  padding-right: 0.45em;
  background: inherit;
  font-weight: 600;
}

/* keeps the count and the chili on the same line as the last word */
.nowrap {
  white-space: nowrap;
}

/* the "(2)" after Roast Pork Egg Roll */
.qty {
  font-weight: 400;
  color: var(--muted);
}

/* the ingredient list under a chef's specialty */
.item-desc {
  max-width: 36em;
  margin: 0.2rem 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--muted);
}

.price {
  justify-self: end;
  text-align: right;
}

/* for "Available" instead of a number */
.price.word {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--red-deep);
}

/* stacked prices with their size labels, used in search results */
.price.sizes {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.price.sizes small {
  font-size: 0.8rem;
  color: var(--muted);
}

/* hot and spicy mark */
.chili {
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  fill: var(--red);
}

.menu-empty {
  padding: 1rem 0 2rem;
  font-size: 1.15rem;
}

.menu-foot {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}


/* --------------------------------------------------------------------------
   Search results
   While searching, the sections and the category bar are hidden and every
   match is listed flat, with the section it belongs to noted on each dish.
   -------------------------------------------------------------------------- */

.results-count {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.results-list {
  max-width: 48rem;
}

/* one price column here, since sizes are labelled inline */
.results-list .item {
  --cols: 1;
  grid-template-columns: 2.5em 1fr minmax(5.5em, max-content);
}

/* the red pill naming the section a dish lives in */
.item-where {
  width: fit-content;
  margin: 0.15rem 0 0;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}


/* --------------------------------------------------------------------------
   Small phones: tighten the columns and drop the dotted leaders
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .col-labels,
  .item {
    grid-template-columns: 2.1em 1fr repeat(var(--cols), minmax(3.7em, max-content));
    column-gap: 0.25rem;
  }

  .item-line::after {
    display: none;
  }
}