/* =============================================================
   Menu page and catering page (English and French).
   The pages are made by tools/build-pages.mjs. Almost everything
   they show comes from styles.css. This file only holds what is new.
   ============================================================= */

/* The phone dock (Call, Book a table) is always there on these pages. */
.pg .dock { transform: none; }

/* The cheddar dot sits under the page you are on. */
.pg .top__nav a[aria-current='page']::after { transform: scale(1); }


/* ---------- menu page ---------- */

.mhead { padding-top: var(--sec-y); }

/* Kitchen and Bar, the same ketchup pills as the switch on the home page. */
.mjump {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.mjump a {
  text-decoration: none;
  font-weight: 620;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--menu-c);
  color: var(--menu-c);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.mjump a:hover { background: var(--menu-c); color: #FFFFFF; }

.msvc {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: var(--top-h);
}
.msvc__h {
  padding-top: 1.1rem;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  line-height: .9;
}
.msvc .chips { margin-top: 1rem; }
.msvc .menu__body { margin-top: clamp(2rem, 4vw, 3rem); }
.msvc .plate { min-height: 0; }
.msvc .group:last-child { padding-bottom: 0; }
.mpage .menu__note { margin-top: clamp(3rem, 6vw, 4.5rem); }


/* ---------- catering page ---------- */

.cpage__acts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .5rem;
}

/* Prices on the left, what happens next on the right. Rows hang from rules. */
.cdetails {
  padding-top: clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 4rem;
}
.cdetails__col:first-child { grid-column: 1 / span 6; }
.cdetails__col:last-child { grid-column: 8 / span 5; }
.cdetails__h {
  font-size: clamp(2.3rem, 4.2vw, 3.9rem);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  line-height: .9;
  margin-bottom: 1.5rem;
}
.cdetails__sub {
  font-size: var(--fs-h3);
  font-weight: 660;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 .75rem;
}
.crow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: .8rem 0;
  border-top: 1px solid var(--line);
}
.crow:first-child { border-top: 1.5px solid var(--ink); }
.crow dt { font-weight: 650; }
.crow dd {
  margin: 0;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cdetails__fine { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-2); }
.cdetails__p { margin-top: 1rem; color: var(--ink-2); max-width: 46ch; }
.cnext li { font-size: var(--fs-body); }
.cdetails .cpage__acts { margin-top: 1.5rem; }

@media (max-width: 1000px) {
  .cdetails__col:first-child, .cdetails__col:last-child { grid-column: 1 / -1; }
}