/* Menu page — a printed-menu card: centred, framed, no prices. Colors, type,
   and spacing come from ../tokens.css. */

body { padding: var(--space-5) var(--space-3) var(--space-8); }

/* Outer white card with a hairline border, and a thin terracotta frame
   inset inside it — the "printed menu" look. */
.menu-card {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-2);
  background: var(--color-card);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}
.menu-card-inner {
  border: 1px solid var(--color-terracotta);
  border-radius: calc(var(--radius-sm) / 2);
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
@media (min-width: 600px) {
  body { padding-top: var(--space-8); }
  .menu-card-inner { padding: var(--space-8) var(--space-8); }
}

.menu-head { display: flex; flex-direction: column; align-items: center; --logo-by-gap: var(--logo-by-gap-centered); }

/* Small spaced capitals: the theme line, group headings, and labels. */
.menu-theme, .menu-group-title, .chef-label, .chef-addons-label, .menu-dates dt {
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.menu-theme {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-terracotta-dark);
  margin-bottom: var(--space-3);
}

.menu-head h1 {
  font-size: var(--text-2xl);
  line-height: 1;
  margin: 0;
  color: var(--color-terracotta);
}
/* Font and size come from the shared .logo-by rule (tokens.css). */
.menu-head .logo-by {
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}
.menu-intro {
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 0 var(--space-6);
}

/* The two dates, side by side between two rules. */
.menu-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}
.menu-dates div { padding: var(--space-3) var(--space-2); }
/* Two cells to a row; a row's second cell gets a divider, every row after
   the first a rule above it. */
.menu-dates div:nth-child(even) { border-left: var(--border-hairline); }
.menu-dates div:nth-child(n+3) { border-top: var(--border-hairline); }
/* A cell left alone on the last row (Location, when ordering has a cell
   above it) takes the full width. */
.menu-dates div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-dates dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink-soft);
}
.menu-dates dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-size: var(--text-lg);
}

/* A group heading sits between two short rules: ——— VEG ——— */
.menu-group { margin-top: var(--space-8); }
.menu-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--color-terracotta-dark);
  margin-bottom: var(--space-5);
}
.menu-group-title::before, .menu-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.items { display: flex; flex-direction: column; gap: var(--space-5); }
.item-name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-size: var(--text-lg);
  line-height: 1.2;
  margin: 0;
}
.item-description {
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 340px;
  margin: var(--space-1) auto 0;
}
.item-description:empty { display: none; }
.item-note {
  font-size: var(--text-xs);
  color: var(--color-terracotta-dark);
  margin: var(--space-1) 0 0;
}
.item-note:empty { display: none; }

/* Chef's recommendation: a tinted box at the end. */
.chef {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  background: var(--color-cream);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}
.chef-label {
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--color-terracotta-dark);
}
.chef-description {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin: var(--space-2) 0 var(--space-4);
}
.chef-description:empty { display: none; }
.chef-main {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--color-terracotta);
  margin: 0;
}
.chef-includes {
  font-size: var(--text-base);
  line-height: 1.8;
  margin: var(--space-2) 0 var(--space-5);
}
.chef-includes span { display: block; }
.chef-includes:empty { display: none; }
.chef-addons-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}
/* Add-ons as two neat columns: what it is | the dish. */
.chef-addons {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  margin: 0;
  font-size: var(--text-sm);
}
.chef-addons dt { font-weight: 700; text-align: right; }
.chef-addons dd { margin: 0; text-align: left; }

/* The quiet "follow for updates" row at the very end of the card:
   Instagram and the RSS feed, as the shared round .icon-button (tokens.css). */
.menu-follow {
  margin: var(--space-6) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.menu-follow p { margin: 0; }
.menu-follow-links { display: flex; gap: var(--space-3); }
.menu-follow-links .icon-button { color: var(--color-terracotta-dark); }

/* "Order now", shown only while orders are live (script.js). */
.order-cta {
  display: block;
  width: 100%;
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-cream);
  background: var(--color-terracotta-dark);
  border-radius: var(--radius-sm);
}
.order-cta:hover { opacity: 0.9; }
.order-cta:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }