@charset "UTF-8";
/* ==========================================================================
   K Kitchen Catering Ltd: the menu page only.
   Loaded after main.css. It adds the course-band layout a full menu needs,
   which the home page's three-across preview did not, and nothing else that
   the design system already provides. Every value here is a system token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. One contrast lift
   --------------------------------------------------------------------------
   main.css sets .dish__gu on the dark grounds to 62% paper. Over --red-700
   that measures 4.46:1, a hair under the 4.5:1 AA floor for text at
   --fs-small, and this page sets a Gujarati name beside almost every dish on
   a red ground. 74% reads the same as secondary and measures 5.75:1.
   Worth lifting in main.css itself; done here so as not to edit it.
   -------------------------------------------------------------------------- */
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .dish__gu {
  color: color-mix(in srgb, var(--paper) 74%, transparent);
}

/* --------------------------------------------------------------------------
   2. Dish lines: a name and its Gujarati as one wrapping run
   --------------------------------------------------------------------------
   .dishes li is a flex row, so a bare name and a sibling span would be two
   items and a wrapped line would fall back under the diamond. One wrapper
   keeps the run together and indents its continuation past the bullet.
   -------------------------------------------------------------------------- */
.dish { display: block; }
.dish__gu { margin-inline-start: 0.2rem; white-space: nowrap; }
/* main.css tucks the note under the rule; the list needs air beneath it. */
.course__note + .dishes { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   3. The index: jump straight to a course on a long page
   -------------------------------------------------------------------------- */
.menu-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.7rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 260ms var(--ease), background-color 260ms var(--ease);
}
.menu-index a:hover {
  border-color: var(--rule-strong);
  background: color-mix(in srgb, var(--gold-500) 12%, transparent);
}
.menu-index__gu {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-900);
}

/* --------------------------------------------------------------------------
   4. Course bands: courses and tipped-in plates, alternating down the page
   -------------------------------------------------------------------------- */
.menu-band {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  align-items: start;
}
@media (min-width: 62em) {
  .menu-band {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  }
  /* Text, plate / plate, text. The reading order stays as authored. */
  .menu-band--zig > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .menu-band--zig > *:nth-child(2) { grid-column: 2; grid-row: 1; }
  .menu-band--zig > *:nth-child(3) { grid-column: 2; grid-row: 2; }
  .menu-band--zig > *:nth-child(4) { grid-column: 1; grid-row: 2; }
  /* A short course set against a tall plate reads as composed, not stranded. */
  .menu-band--zig > .course-stack { align-self: center; }
}

.course-stack > .course + .course { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }

/* Anchor targets clear the sticky head, as html{scroll-padding-top} does. */
.course { scroll-margin-top: 5.5rem; }

/* A plate tipped onto the card, held to a width that sits beside the type. */
.menu-fig { margin: 0; }
.menu-fig .tipped { max-width: 25rem; margin-inline: auto; }
@media (min-width: 62em) {
  .menu-fig--tilt-l .tipped { transform: rotate(-1.1deg); }
  .menu-fig--tilt-r .tipped { transform: rotate(1.1deg); }
}

/* --------------------------------------------------------------------------
   5. The honest notes, set apart by a foil rule rather than a box
   -------------------------------------------------------------------------- */
.menu-note {
  border-inline-start: 2px solid var(--rule-strong);
  padding-inline-start: var(--s-5);
  padding-block: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 58ch;
}
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .menu-note {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

/* --------------------------------------------------------------------------
   6. Print: a menu is a thing people print and take to a family meeting
   --------------------------------------------------------------------------
   main.css flattens the coloured grounds to white but does not reach
   .on-red-deep, and the light-on-dark text colours would survive onto white.
   -------------------------------------------------------------------------- */
@media print {
  .menu-index,
  .menu-fig,
  .page-head::after { display: none !important; }

  .on-red-deep { background: #fff !important; color: #000 !important; }

  .menu-band { display: block; }
  .course { break-inside: avoid; margin-bottom: var(--s-6); }
  .course-stack > .course + .course { margin-top: var(--s-6); }

  .eyebrow,
  :is(.on-red, .on-red-deep, .on-green, .page-head) .lead,
  :is(.on-red, .on-red-deep, .on-green) .menu-note { color: #000 !important; }

  .course__gu, .dish__gu, .course__note,
  :is(.on-red, .on-red-deep, .on-green, .page-head) .course__gu,
  :is(.on-red, .on-red-deep, .on-green) .dish__gu,
  :is(.on-red, .on-red-deep, .on-green) .course__note { color: #444 !important; }
}