/* ============================================================
   FONTS
   NOTE: Avoxan and Blixxo Demo are trial/demo font files. They
   block hyphens, slashes, ampersands, parentheses, apostrophes,
   "+" and "|" with a visible "DEMO"/"NO GLYPH" watermark glyph.
   They are used ONLY for fixed template text we control (section
   headers, group titles) that never contains those characters.
   Sheet-driven text (item names, descriptions) uses Archivo
   Narrow, a normal font with no such restriction.
   Replace these two font files with licensed versions when
   available, and this comment/constraint goes away.
   ============================================================ */
@font-face {
  font-family: 'Avoxan';
  src: url('avoxan.otf');
}
@font-face {
  font-family: 'Blixxo';
  src: url('BlixxoDemo-Regular.otf');
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('archivo-narrow-latin-400-normal.woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('archivo-narrow-latin-600-normal.woff2');
  font-weight: 600;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('archivo-narrow-latin-700-normal.woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'Archivo Narrow Italic';
  src: url('ArchivoNarrow-Italic-VariableFont_wght.ttf');
  font-style: italic;
}

.menu-embed-wrap, .menu-embed-wrap * { box-sizing: border-box; }

.menu-embed-wrap {
  font-family: 'Archivo Narrow', sans-serif;
  color: #1a1a1a;
}

/* ---------- on-screen toolbar (hidden when printing) ---------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1a1a1a;
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.toolbar button {
  background: #c81f2c;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.toolbar button:hover { background: #a81a25; }
.statusMsg { opacity: 0.8; font-size: 12px; }

.layout-switcher {
  display: flex;
  gap: 2px;
  background: #333;
  border-radius: 4px;
  padding: 2px;
}
.layout-switcher .layout-btn {
  background: transparent;
  color: #ccc;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
.layout-switcher .layout-btn:hover { background: #444; color: #fff; }
.layout-switcher .layout-btn.active { background: #c81f2c; color: #fff; }

.loading {
  text-align: center;
  padding: 80px 20px;
  font-size: 16px;
  color: #666;
}
.errorMsg {
  text-align: center;
  padding: 40px 20px;
  color: #a81a25;
  font-size: 14px;
  max-width: 500px;
  margin: 0 auto;
}

/* ---------- page ---------- */
.menupage {
  background: #fff;
  width: 8.5in;
  min-height: 11in;
  margin: 24px auto;
  padding: 0.42in 0.45in 0.28in 0.45in;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.pageheader {
  text-align: center;
  margin-bottom: 0.12in;
}
.menupage .pageheader { margin-bottom: 0.28in; }
.menupage .sec-add-ons hr.rule { display: none; }
.menupage .sec-add-ons .sechead h2 { font-size: 11pt; }
.menupage .sec-add-ons p.item.addon,
.menupage .sec-add-ons p.item.addon-note { font-size: 9pt; }
.pageheader .logo {
  height: 0.65in;
}

.columns {
  display: flex;
  flex-direction: row;
  gap: 0.22in;
  align-items: flex-start;
}
.columns .col {
  flex: 1 1 0;
  min-width: 0;
}
.columns.two .col {
  flex: 1 1 50%;
}

.grouptitle {
  font-family: 'Avoxan', serif;
  font-size: 20pt;
  color: #1a1a1a;
  margin: 0 0 0.06in 0;
  letter-spacing: 0.5px;
}
.grouptitle .plussign {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
}

.sechead {
  margin-top: 0.24in;
  margin-bottom: 0.01in;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  overflow: hidden;
}
.grouptitle + .section-block .sechead { margin-top: 0.1in; }
.sechead:first-child { margin-top: 0; }
.sechead h2 {
  font-family: 'Blixxo', sans-serif;
  color: #c81f2c;
  font-size: 13.5pt;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
}
.sechead .subhead {
  font-family: 'Archivo Narrow Italic', sans-serif;
  font-style: italic;
  font-size: 8pt;
  color: #1a1a1a;
  margin-left: 6pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
hr.rule {
  border: none;
  border-top: 1.4pt solid #c81f2c;
  margin: 2pt 0 5pt 0;
}

/* ---------- items: title line, then description + price below ---------- */
p.item {
  margin: 0 0 3.5pt 0;
  font-size: 8.3pt;
  line-height: 1.15;
}
p.item .titleline {
  display: block;
  margin-bottom: 0.5pt;
}
p.item .name {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 10.2pt;
  color: #1a1a1a;
}
p.item .newtag {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  color: #c81f2c;
  font-size: 5.8pt;
  letter-spacing: 0.3px;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}
p.item .tag {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 400;
  font-size: 7.6pt;
  color: #3a3a3a;
  vertical-align: 0.6pt;
}
.gfbadge {
  display: inline-block;
  width: 9pt;
  height: 9pt;
  color: #1a1a1a;
  vertical-align: middle;
  position: relative;
  top: -0.15em;
}
p.item .desc {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 400;
  font-size: 8pt;
  color: #2a2a2a;
  letter-spacing: 0.1px;
}
p.item .price {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 8.3pt;
  color: #1a1a1a;
  white-space: nowrap;
}

.sideitem { margin-bottom: 4pt; }

/* ---------- add-ons mini section ---------- */
.addons-grid { display: block; margin-bottom: 4pt; }
.nowrap-tail { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.15em; }
p.item.addon {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 10.2pt;
  margin: 0 0 3.5pt 0;
  line-height: 1.15;
}
p.item.addon .price { font-family: 'Archivo Narrow', sans-serif; }
p.item.addon-note {
  font-weight: 400;
  font-style: italic;
  color: #3a3a3a;
  font-size: 7.8pt;
}
p.item.addon .desc {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 400;
  font-size: 7.6pt;
  color: #2a2a2a;
}

/* ---------- beer grid ---------- */
.beer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16pt;
  row-gap: 4pt;
}
p.item.beeritem { margin: 0; }
p.item.beeritem .titleline { display: block; }
p.item.beeritem .name { font-size: 10.2pt; }
p.item.beeritem .desc { font-size: 7.5pt; display: block; }

/* ---------- wine items ---------- */
.wineitem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 5pt 0;
  font-size: 8.3pt;
  line-height: 1.15;
  gap: 6pt;
}
.wineitem .wleft { flex: 1 1 auto; }
.wineitem .name {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 10.2pt;
}
.wineitem .region {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 7.5pt;
  color: #3a3a3a;
  margin-left: 3pt;
}
.wineitem .wprice {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 8.3pt;
  white-space: nowrap;
  flex: 0 0 auto;
}
.wineitem .newtag { margin-left: 3pt; }

/* ---------- homemade cello ---------- */
.cellodesc {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 7.4pt;
  color: #2a2a2a;
  letter-spacing: 0.2px;
  margin: 0 0 5pt 0;
}
p.item.cellitem { margin: 0 0 5pt 0; }
.cellopricing {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-size: 8.3pt;
  white-space: nowrap;
  margin-left: 6pt;
}
.cellopricing img.inline-glass { margin: 0 2pt 0 0; }
img.inline-glass { height: 11pt; width: auto; vertical-align: middle; }
img.inline-glass-spritz { height: 14pt; }

/* ---------- kitchen philosophy box ---------- */
.philobox {
  border: 1pt solid #c81f2c;
  border-radius: 4pt;
  padding: 6pt 10pt;
  max-width: 100%;
  margin: 0.16in auto 0 auto;
  text-align: center;
}
.philobox h3 {
  font-family: 'Avoxan', serif;
  font-weight: 400;
  font-size: 10pt;
  margin: 0 0 2pt 0;
}
.philobox p {
  font-family: 'Archivo Narrow Italic', sans-serif;
  font-style: italic;
  font-size: 7.4pt;
  margin: 1pt 0;
  line-height: 1.2;
}

/* ---------- footer / legal ---------- */
.footerband { margin-top: auto; padding-top: 0in; }
.legal { text-align: center; }
.legal p {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 6pt;
  color: #1a1a1a;
  margin: 1pt 0;
  letter-spacing: 0.2px;
}

.menupage.front {
  display: flex;
  flex-direction: column;
  min-height: 10.48in;
}

/* ============================================================
   TAKEOUT LAYOUT — horizontal 8.5x11 trifold (11in wide x 8.5in tall)
   Page 1: Cocktails+Barrel Aged+Cello panel | Cover panel (logo/hours/QR) | blank third
   Page 2: 4-column food menu
   ============================================================ */
.takeout-page {
  background: #fff;
  width: 11in;
  height: 8.5in;
  margin: 24px auto;
  padding: 0.55in 0.3in 0.35in 0.3in;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 0.28in;
}
.takeout-panel {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}
.takeout-panel.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.14in;
}
.takeout-panel.cover .logo {
  height: 0.7in;
  margin-bottom: 0.05in;
}
.takeout-panel.cover .qr-slice {
  height: 0.32in;
  width: 0.32in;
  opacity: 0.85;
  margin-bottom: 0.08in;
}
.takeout-panel.cover .addr {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  font-size: 10.5pt;
  letter-spacing: 0.8px;
  line-height: 1.6;
  color: #2a2a2a;
}
.takeout-panel.cover .phone {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 400;
  font-size: 10pt;
  letter-spacing: 0.5px;
  margin-top: 0.1in;
  color: #3a3a3a;
}
.takeout-panel.cover .hours-block {
  margin-top: 0.18in;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 400;
  font-size: 9.5pt;
  letter-spacing: 0.3px;
  line-height: 1.9;
  color: #3a3a3a;
}
.takeout-panel.cover .hours-day {
  font-weight: 600;
  color: #1a1a1a;
}
.takeout-panel.cover .qr-box {
  margin-top: 0.18in;
  width: 1.15in;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4pt;
}
.takeout-panel.cover .qr-box img {
  width: 1.15in;
  height: 1.15in;
  object-fit: contain;
}
.takeout-panel.cover .qr-box span {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  font-size: 8pt;
  color: #333;
}
.takeout-panel.blank { /* intentionally empty */ }
.takeout-panel.cover .social-handle {
  margin-top: 0.12in;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  font-size: 8.5pt;
  letter-spacing: 0.4px;
  color: #333;
}

/* Panel 1 items reuse .sechead / .item / p.item styles from the standard
   layout, just at a slightly smaller size to fit the narrower panel. */
.takeout-panel .sechead { margin-top: 0.18in; }
.takeout-panel .sechead:first-child { margin-top: 0; }
.takeout-panel p.item { font-size: 7.8pt; }
.takeout-panel p.item .name { font-size: 9.6pt; }
.takeout-panel p.item .desc { font-size: 7.2pt; }

/* 4-column food page (page 2) */
.takeout-food-page {
  background: #fff;
  width: 11in;
  height: 8.5in;
  margin: 24px auto;
  padding: 0.42in 0.3in 0.25in 0.3in;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.takeout-food-columns {
  display: flex;
  flex-direction: row;
  gap: 0.28in;
  flex: 0 1 auto;
}
.takeout-food-columns .col { flex: 1 1 0; width: 0; min-width: 0; }
.takeout-food-columns .sechead { margin-top: 0.16in; }
.takeout-food-columns .sechead:first-child { margin-top: 0; }
.takeout-food-columns p.item { font-size: 7.6pt; margin-bottom: 3pt; }
.takeout-food-columns p.item .name { font-size: 9.4pt; }
.takeout-food-columns p.item .desc { font-size: 7.1pt; }
.takeout-food-columns .philobox { margin-top: 0.12in; }
.takeout-food-columns .sec-add-ons hr.rule { display: none; }
.takeout-food-columns .sec-add-ons .sechead h2 { font-size: 9pt; }
.takeout-food-columns .sec-add-ons p.item.addon,
.takeout-food-columns .sec-add-ons p.item.addon-note { font-size: 7pt; }
.takeout-qr-box {
  margin-top: 0.4in;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2pt;
}
.takeout-qr-box .qr-label {
  font-family: 'Avoxan', serif;
  font-weight: 400;
  font-size: 12pt;
  color: #1a1a1a;
}
.takeout-qr-box .qr-arrow {
  font-size: 13pt;
  color: #1a1a1a;
  line-height: 1;
}
.takeout-qr-box img { width: 0.9in; height: 0.9in; object-fit: contain; margin-top: 2pt; }
.takeout-food-footer {
  margin-top: auto;
  padding-top: 0.15in;
  text-align: center;
}
.takeout-food-footer p {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 6.2pt;
  color: #1a1a1a;
  margin: 1pt 0;
}

/* ============================================================
   LARGE MENU LAYOUT — 17x11 landscape, same structure as the
   standard menu (3-col food, 2-col drinks) with proportionally
   larger type since the wider canvas has more room per column.
   ============================================================ */
.large-page {
  background: #fff;
  width: 17in;
  min-height: 11in;
  margin: 24px auto;
  padding: 0.32in 0.7in 0.5in 0.7in;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  box-sizing: border-box;
}
.large-page.front {
  display: flex;
  flex-direction: column;
  min-height: 9.9in;
}
.large-page .pageheader { margin-bottom: 0.05in; }
.large-page .pageheader .logo { height: 0.65in; }
.large-page .columns { gap: 0.45in; }
.large-page .grouptitle { font-size: 28pt; margin-bottom: 0.06in; }
.large-page .sechead { margin-top: 0.1in; }
.large-page .col > .section-block:first-child .sechead { margin-top: 0; }
.large-page .grouptitle + .section-block .sechead { margin-top: 0.1in; }
.large-page .sechead h2 { font-size: 19pt; }
.large-page .sechead .subhead { font-size: 11pt; }
.menupage .sechead .subhead { font-size: 6.6pt; }
.large-page hr.rule { margin: 1pt 0 4pt 0; border-top-width: 2pt; }
.large-page p.item { font-size: 11pt; margin-bottom: 1pt; }
.large-page p.item .name { font-size: 14pt; }
.large-page p.item .desc { font-size: 11pt; }
.large-page p.item .price { font-size: 11.5pt; }
.large-page p.item .tag { font-size: 10.5pt; }
.large-page p.item .newtag { font-size: 9pt; }
.large-page .gfbadge {
  width: 12pt;
  height: 12pt;
}
.large-page p.item.addon { font-size: 14.5pt; }
.large-page p.item.addon .desc { font-size: 11pt; }
.large-page p.item.addon-note { font-size: 11pt; }
.large-page .wineitem { font-size: 11.5pt; margin-bottom: 4pt; }
.large-page .wineitem .name { font-size: 13.5pt; }
.large-page .wineitem .region { font-size: 10.5pt; }
.large-page .wineitem .wprice { font-size: 11.5pt; }
.large-page .beer-grid { column-gap: 24pt; row-gap: 2pt; }
.large-page p.item.beeritem .name { font-size: 14.5pt; }
.large-page p.item.beeritem .desc { font-size: 11pt; }
.large-page .cellodesc { font-size: 10.5pt; }
.large-page .cellopricing { font-size: 11.5pt; }
.large-page img.inline-glass { height: 15pt; }
.large-page img.inline-glass-spritz { height: 19pt; }
.large-page .philobox { padding: 8pt 14pt; margin-top: 0.16in; }
.large-page .philobox h3 { font-size: 15pt; }
.large-page .philobox p { font-size: 10.5pt; }
.large-page .footerband { padding-top: 0.15in; }
.large-page .legal p { font-size: 7pt; line-height: 1.05; margin: 0.25pt 0; }

/* Pasta Dishes + Add-Ons specifically run tighter than the rest of the
   large menu -- they share a column with Surf N Turf (the longest
   section), so trimming their spacing (not Surf N Turf's own, and not
   any other section's) is what buys back the room needed to fit. */
.large-page .sec-pasta-dishes .sechead,
.large-page .sec-add-ons .sechead { margin-top: 0.03in; }
.large-page .sec-pasta-dishes hr.rule { margin: 0.25pt 0 3pt 0; }
.large-page .sec-add-ons hr.rule { margin: 0.25pt 0 1pt 0; }
.large-page .sec-pasta-dishes p.item { margin-bottom: 0.25pt; }
.large-page .sec-pasta-dishes p.item .desc { font-size: 10.5pt; }

/* Add-Ons reads as a nested sub-section of Pasta Dishes in the reference
   design: no rule under its heading, sits close beneath the last pasta
   item, and its items run as a 2-column grid instead of a stacked list. */
.large-page .sec-add-ons { margin-top: 0.06in; }
.large-page .sec-add-ons .sechead { margin-top: 0.06in; margin-bottom: 0; }
.large-page .sec-add-ons .sechead h2 { font-size: 15pt; }
.large-page .sec-add-ons hr.rule { display: none; }
.large-page .addons-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10pt; row-gap: 0.25pt; margin-top: 2pt; margin-bottom: 0; }
.large-page .sec-add-ons p.item.addon,
.large-page .sec-add-ons p.item.addon-note { margin: 0 0 0pt 0; font-size: 10pt; }
.large-page .sec-add-ons p.item.addon .tag,
.large-page .sec-add-ons p.item.addon .price { font-size: 10pt; }
.large-page .sec-add-ons + .section-block .sechead { margin-top: 0.1in; }

/* ============================================================
   PRINT — force letter size, hide chrome, no shadow/margin
   NOTE: padding is intentionally NOT reset to 0 here. The on-screen
   .menupage padding (set above, in the base rule) is left intact and
   is what creates the printed page's margins — see applyPrintPageSize()
   in menu.js, which sets @page margin to a small safety floor only,
   not the real spacing. This keeps screen and print in sync from a
   single set of numbers instead of two that can drift apart.
   ============================================================ */
@media print {
  html, body { background: #fff; }
  .noprint { display: none !important; }
  .menupage {
    box-shadow: none;
    margin: 0;
    width: auto;
    min-height: 0;
  }
  .menupage.front {
    min-height: 9.9in;
  }
  .menupage + .menupage { page-break-before: always; }
}

/* Takeout print rules only apply while the takeout layout is active,
   so switching layouts also switches the physical page size/orientation
   used when printing. */
body.layout-takeout .takeout-page,
body.layout-takeout .takeout-food-page {
  page-break-after: always;
}
body.layout-takeout .takeout-food-page { page-break-after: auto; }

@media print {
  /* Padding is intentionally left as-authored here too (not reset to 0),
     same reasoning as .menupage above — and it matters more for takeout,
     since its two pages (.takeout-page / .takeout-food-page) have
     different top/bottom padding that a single shared @page margin could
     never represent correctly anyway. */
  body.layout-takeout .takeout-page,
  body.layout-takeout .takeout-food-page {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
}

/* Large-menu print rules (17x11 landscape). Padding intentionally NOT
   reset to 0 here, same reasoning as .menupage above. */
@media print {
  .large-page {
    box-shadow: none;
    margin: 0;
    width: auto;
    min-height: 0;
  }
  .large-page.front {
    min-height: 9.7in;
  }
  .large-page + .large-page { page-break-before: always; }
}

/* ============================================================
   MOBILE — standard 8.5x11 layout collapses to single column,
   fixed inch-based width swapped for fluid width. Only applies
   on screen (print keeps the fixed physical page size).
   ============================================================ */
@media screen and (max-width: 700px) {
  .menupage {
    width: 100%;
    min-height: 0;
    max-width: 100%;
    padding: 20px 16px;
    margin: 0 auto;
    box-shadow: none;
  }
  .menupage .columns {
    flex-direction: column;
    gap: 0.05in;
  }
  .menupage .columns .col { width: 100%; }
  .menupage .pageheader .logo { height: 0.55in; }
  .menupage .grouptitle { font-size: 17pt; }
  .menupage .sechead h2 { font-size: 12pt; }
  .menupage p.item .name { font-size: 10pt; }
  .menupage p.item .desc { font-size: 8.5pt; }
  .menupage p.item .price { font-size: 9pt; }
  .menupage .philobox { max-width: 100%; }
  .toolbar { flex-wrap: wrap; }
}