/* The Menu page in Makela's own design: the look of the printed menu on The West's tables (her
   Canva file of 7 Oct 2026, "The_West_Howya_Editable_Menu_4_Pages"), carried onto the page. Loaded
   after menu.css, on the Menu page only.

   Taken from her PDF, not guessed: Georgia Bold for the names, headings and prices, Georgia Italic
   for the descriptions; her navy, gold, ink, grey and page cream; a gold bar behind each section's
   name. "Howaya" is set in Bukhari Script, a paid font, so the heading is a picture cut from her
   PDF (assets/img/the-west-howaya.png) rather than live text. Georgia isn't on Android; Gelasio,
   drawn to Georgia's measurements, stands in there (loaded with the page's Google Fonts). */

.menu-card {
  --hm-navy: #141f2a;
  --hm-ink: #2b2b27;
  --hm-grey: #5c5e5b;
  --hm-gold: #b28f4e;
  --hm-page: #f6f1e5;
  --hm-serif: Georgia, "Gelasio", "Times New Roman", serif;

  background: var(--hm-page);
  border: 1.5px solid var(--hm-gold);
  border-radius: 4px;
  color: var(--hm-ink);
  font-family: var(--hm-serif);
}

/* the heading: "THE WEST" with "Howaya" across it, as on every page of hers */
.menu-head { max-width: 640px; }
.menu-lockup {
  display: block;
  width: min(440px, 86%);
  height: auto;
  margin: 4px auto 10px;
}
.menu-head .eyebrow { display: none; }   /* the heading says it */
.menu-head h1 {
  font-family: var(--hm-serif);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hm-navy);
  margin: 0 0 8px;
}
.menu-head .lede {
  font-family: var(--hm-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--hm-grey);
}

/* each section's name on a gold bar */
.menu-group h2 {
  font-family: var(--hm-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hm-navy);
  background: var(--hm-gold);
  border: 0;
  padding: .28em .6em .26em;
  margin: 0 0 6px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* the note under a section's name (what the steaks come with) in the dishes' own italic, as a
   description, not a second heading (Peter, 15 Oct) */
.menu-note {
  font-family: var(--hm-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  text-align: center;
  color: var(--hm-grey);
  margin: 0 0 4px;
}

/* the dishes: name in bold capitals, price bold on the right, description in italic below. Set
   close, so the menu takes fewer pages (Peter, with Makela, 15 Oct: "the menu is too long") */
.menu-item {
  padding: 4px 0 5px;
  border-bottom: 0;
}
.mi-name {
  font-family: var(--hm-serif);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hm-ink);
}
.mi-price {
  font-family: var(--hm-serif);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--hm-ink);
  text-align: right;
}
/* a price with portions, "Cup €4.50 · Bowl €7.50", one portion to a line, as on her pages
   (the_west_menu_print_section() wraps each portion in .mi-p and the dot in .mi-sep) */
.mi-p { display: block; white-space: nowrap; }
.mi-sep { display: none; }
.mi-desc {
  font-family: var(--hm-serif);
  font-style: italic;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--hm-grey);
  margin-top: 1px;
}
.mi-extras {
  font-family: var(--hm-serif);
  font-style: italic;
  font-size: .8rem;
  color: var(--hm-grey);
}

/* the children's menu: the same paper, a gold rule above it */
.menu-kids { border-top: 1.5px solid var(--hm-gold); }
.menu-kids-head h2 {
  font-family: var(--hm-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hm-navy);
  background: none;
}
.menu-kids-head .menu-note { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .9rem; }

/* her sign-off, from the foot of every page */
.menu-signoff {
  text-align: center;
  margin: clamp(18px, 2.6vw, 28px) auto 0;
  font-family: var(--hm-serif);
  color: var(--hm-navy);
}
.menu-signoff strong {
  display: block;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.menu-signoff em { display: block; font-size: .82rem; color: var(--hm-grey); margin-top: 2px; }
.menu-fineprint { font-family: var(--hm-serif); font-style: italic; color: var(--hm-grey); border-top-color: rgba(178, 143, 78, .45); }

/* two columns: a section stays whole. A section carried over to the next column would start
   without its gold bar and read as part of the section above it */
@media (min-width: 780px) {
  .menu-group { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

/* Book a Table in her navy and gold, so it doesn't sit gold on gold above the first bar */
.menu-card .btn-primary {
  background: var(--hm-navy);
  border-color: var(--hm-navy);
  color: var(--hm-page);
  font-family: var(--hm-serif);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.menu-card .btn-primary:hover {
  background: var(--hm-gold);
  border-color: var(--hm-gold);
  color: var(--hm-navy);
}

/* the small links on the card, in her colours */
.menu-pdf { color: var(--hm-navy); border-bottom-color: rgba(20, 31, 42, .35); font-family: var(--hm-serif); }
.menu-pdf:hover { color: var(--hm-gold); border-color: var(--hm-gold); }


/* a phone: the heading fits the width, and the price stays on the right of the name, as on her
   pages (style.css drops it under the name below 560px) */
@media (max-width: 560px) {
  .menu-lockup { width: 92%; margin-top: 4px; }
  .menu-item { grid-template-columns: 1fr auto; }
  .mi-price { text-align: right; margin-top: 0; }
}

@media print {
  .menu-card { border: 0; background: #fff; }
  .menu-group h2 { color: var(--hm-navy); }
  .mi-desc, .mi-extras { color: #444; }
}