/* The Menu page as the WordPress theme builds it (page-menu.php, inc/menu-admin.php): any number
   of sections, a line of extras under a dish, and the children's menu below. Kept apart from
   style.css, which is a straight copy of the static site's; loaded on the Menu page only.

   The static site set three sections in a two-column grid, with Burgers spanning both. With the
   owner choosing the sections, they flow down two columns instead, like a printed menu: a long
   section may carry on at the top of the next column, but a dish is never split, and a heading
   never sits alone at the bottom of a column. */

@media (min-width: 780px) {
  .menu-sections {
    display: block;
    columns: 2;
    column-gap: clamp(36px, 5vw, 64px);
  }
  .menu-group { margin-bottom: clamp(24px, 3vw, 40px); }
  .menu-group h2,
  .menu-group .menu-note { break-after: avoid; -webkit-column-break-after: avoid; }
  .menu-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

/* a dish's extras, e.g. "Add chicken €4.00 · Add prawns €6.00" */
.mi-extras {
  grid-column: 1 / -1;
  margin-top: 3px;
  font-size: .84rem;
  font-style: italic;
  color: var(--teal);
}

/* the children's menu, below the main one */
.menu-kids {
  margin-top: clamp(8px, 1.5vw, 16px);
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 2px solid var(--gold);
}
.menu-kids-head {
  text-align: center;
  margin: 0 auto clamp(14px, 2.2vw, 22px);
}
.menu-kids-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 4px;
}
@media (min-width: 1000px) {
  .menu-kids .menu-sections { columns: 3; }
}
/* the children's menu is short: each of its sections stays whole, one to a column */
@media (min-width: 780px) {
  .menu-kids .menu-group { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

@media print {
  .enquire-actions { display: none; }   /* the Book a Table button does nothing on paper */
  .menu-sections { columns: 2; column-gap: 10mm; }
  .menu-group { margin-bottom: 8pt; }
  .mi-extras { color: #444; font-size: 8.5pt; margin-top: 1pt; }
  .menu-kids { border-top-color: #000; margin-top: 6pt; padding-top: 10pt; break-before: page; }
  .menu-kids-head h2 { color: #000; font-size: 18pt; }
}