/* css-main-menu.css — styles that only matter when one of these sections is on the page:
 * main-menu.
 * Linked from each of them (see the first line of the section file); theme.css
 * holds the common styles. */

.section__head--center { text-align: center; }

/* `top` is a variable because what sits above the rail changes: the sticky
 * header is opt-in from Preferences, so theme.liquid publishes its measured
 * height and this follows it rather than hard-coding a number that is wrong
 * for half the configurations. */
.menu-rail--sticky {
  position: sticky;
  top: var(--stuck-top, 0px);
  z-index: 20;
}

/* Anchors land under the sticky rail without the script's help — this is what
 * makes a no-JS jump land in the right place, and it is also what the smooth
 * scroll uses. */
.menu-section { scroll-margin-top: calc(var(--stuck-top, 0px) + 4rem); }

.menu-rail__search { padding: 0.6rem var(--gutter) 0; }

.menu-rail__search .search-field { max-width: 32rem; margin-inline: auto; }

.menu-rail__search .input { min-height: 2.6rem; }

.menu-rail__search-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.menu-rail__search-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

.menu-rail__search-btn .when-open { display: none; }

.menu-rail__search-btn[aria-expanded="true"] .when-open { display: inline-flex; }

.menu-rail__search-btn[aria-expanded="true"] .when-closed { display: none; }

.menu-rail.is-search-folded:not(.is-search-open) .menu-rail__search { display: none; }

.menu-rail.is-search-open .menu-rail__search { animation: rail-search-in 0.2s var(--ease, ease-out); }

@media (prefers-reduced-motion: reduce) {
  .menu-rail.is-search-open .menu-rail__search { animation: none; }
}
/* The rail is taller by the search row; a jump with the script off still has
 * to land below all of it. */
body:has(.menu-rail__search) .menu-section { scroll-margin-top: calc(var(--stuck-top, 0px) + 7.5rem); }

/* ---- Menu layout + order panel ------------------------------------------- */
/* One column by default; the aside only becomes a column when there is room
 * for it beside the bands without squeezing them. Below that the fixed bottom
 * bar does the job instead, so the panel is hidden rather than stacked — two
 * carts on one screen is one too many. */
.menu-layout__aside { display: none; }

@media (min-width: 64rem) {
  .menu-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20rem;
      gap: clamp(1.5rem, 3vw, 2.5rem);
      align-items: start;
    }
  .menu-layout__aside { display: block; }
}
.order-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  color: var(--accent);
}

.order-card__empty { color: var(--muted); font-size: 0.9rem; }

.order-card__lines {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  /* A long order scrolls inside the card rather than pushing the total and
   * the button off the bottom of a sticky panel, where they cannot be
   * reached. */
  max-height: 40vh;
  overflow-y: auto;
}

.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  font-size: 0.88rem;
}

/* The count: a small − 2 + under the dish's name. */
.order-card .order-line__step { grid-column: 1 / -1; margin: 0; }

/* Small: the panel is narrow and the count is a quiet control, not a button. */
.order-card .stepper--line { border-radius: 7px; }

.order-card .stepper--line .stepper__btn { width: 24px; height: 24px; }

.order-card .stepper--line .stepper__btn svg { width: 10px; height: 10px; }

.order-card .stepper--line .stepper__input { width: 1.75rem; height: 24px; font-size: 0.8rem; }

.order-line__qty { color: var(--muted); }

.order-line__title { min-width: 0; overflow-wrap: anywhere; }

.order-line__price { font-family: var(--font-display); font-weight: 600; }

.order-card__totals { margin: 0 0 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }

.order-card__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }

.order-card__row dt { color: var(--ink-soft); }

.order-card__row dd { margin: 0; color: var(--ink); }

.order-card__row--total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.order-card__note { margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--muted); }

/* ---- Mobile order bar ---------------------------------------------------- */
/* Hidden by default and shown only on phones — see the media query below. The
 * default is "not shown" so a desktop that never reads the query is right. */
.order-bar { display: none; }

@media (max-width: 63.99rem) {
  /* 63.99rem, not 48rem — the same width the side panel appears at.
   *
   * They were 48rem and 64rem, which left a 768–1024px band with the bar
   * already gone and the panel not yet there: a tablet had no way to see the
   * order at all. The two must be complements, so this is written against the
   * panel's breakpoint rather than the phone one. */
  .order-bar {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      /* The home indicator on a modern phone sits over the bottom of the screen;
       * without this the total is under it. */
      padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
      background: var(--accent);
      color: var(--accent-contrast);
      font-family: var(--font-display);
      font-weight: 700;
      box-shadow: 0 -6px 20px -12px rgba(23, 25, 15, 0.5);
    }
  .order-bar:hover { color: var(--accent-contrast); }
  .order-bar__badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      flex: 0 0 auto;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.18);
    }
  .order-bar__count {
      position: absolute;
      top: -0.25rem;
      inset-inline-end: -0.25rem;
      min-width: 1.15rem;
      padding: 0 0.25rem;
      border-radius: var(--radius-pill);
      background: var(--surface);
      color: var(--accent);
      font-size: 0.7rem;
      line-height: 1.15rem;
      text-align: center;
    }
  .order-bar__total { font-size: 1.05rem; }
  .order-bar__go { margin-inline-start: auto; font-size: 0.9rem; opacity: 0.9; }
  /* The product page's bar, so the two read as the same object: floating,
     * rounded, the accent gradient, and the action as a pill on it. */
  .order-bar {
      inset-inline: 0.75rem;
      bottom: calc(0.75rem + env(safe-area-inset-bottom));
      padding: 0.55rem 0.55rem 0.55rem 0.75rem;
      border-radius: 16px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 100%);
      box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent);
    }
  .order-bar__go {
      padding: 0.7rem 1rem;
      border-radius: 10px;
      background: rgb(255 255 255 / 22%);
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
      opacity: 1;
    }
  /* Nothing in the order yet: the primary at half strength, as the product
     * bar is before its choices are made. */
  .order-bar:has(.order-bar__count[hidden]) {
      background: color-mix(in srgb, var(--accent) 50%, var(--surface));
      box-shadow: none;
    }
  /* Room for the bar, so the last dish is not sitting underneath it. */
  #menu-bands { padding-bottom: 6.5rem; }
}
/* ---- Dish grid ----------------------------------------------------------- */
.menu-section + .menu-section { margin-top: clamp(2.5rem, 5vw, 4rem); }

.menu-section__title {
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- Menu view toggle ----------------------------------------------------
 *
 * Grid or list. The grid is the theme's default and sells the food on the
 * photograph; the list fits roughly twice as many dishes on a screen and
 * brings the description back, which is what someone reordering a usual wants.
 */
.menu-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.view-toggle__btn:hover { color: var(--ink); }

.view-toggle__btn.is-active { background: var(--dark); color: var(--on-dark); }

:is(.cart-page, .thanks-page) .order-card__note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); }

@media (min-width: 64rem) {
  /* Menu page, desktop: the "Your order" panel stays in view while the bands
   * scroll. It was position: sticky already, but inside a grid cell only as tall
   * as itself (the layout aligns its items to the start), so it had no room to
   * stick in and scrolled away with the page. Stretching the aside to the row
   * gives it the whole height of the menu to travel down. */
  .menu-layout__aside { align-self: stretch; }
}
/* ---- Menu page head (sections/main-menu, editor: Menu → Page head) ----------------
 * Edge to edge, on its own ground: a colour (white by default, not the page's
 * cream), an image under a darkening overlay, or none. Three heights. Over an
 * image the text turns white unless the editor sets a text colour. */
.menu-page.section { padding-top: 0; }

.menu-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--mh-bg, transparent);
  color: var(--mh-fg, var(--ink));
  border-bottom: 1px solid var(--line);
}

.menu-hero--pad-small { padding-block: clamp(1.25rem, 3vw, 2rem); }

.menu-hero--pad-large { padding-block: clamp(4rem, 9vw, 6.5rem); }

.menu-hero--none { background: transparent; border-bottom: 0; }

.menu-hero--image { background: var(--ink) var(--mh-img, none) center / cover no-repeat; color: var(--mh-fg, #fff); border-bottom: 0; }

.menu-hero--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / var(--mh-overlay, 0.4)); }

.menu-hero .section__head { margin-bottom: 0; }

.menu-hero .section__title { color: inherit; }

.menu-hero__sub { margin: 0.6rem 0 0; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); color: inherit; opacity: 0.85; }

.menu-hero__meta { margin: 0.5rem 0 0; font-size: 0.95rem; color: inherit; opacity: 0.7; }

.section__head--center .menu-hero__sub { max-width: 40rem; margin-inline: auto; }

.menu-hero__search-only { padding-top: 1.5rem; }

/* The rail sits right under the head; the head's own rule is enough. */
.menu-hero + .menu-rail, .menu-hero ~ .menu-rail { border-top: 0; }


/* A search that matches no dish. */
.menu-empty {
  margin: 0;
  padding: 3rem 1rem;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
}

.menu-empty[hidden] { display: none; }