/* ── Printable menu ─────────────────────────────────────────────────
   Active only when printing (linked with media="print"). Hides the
   entire site and shows only #printMenu, built by js/menu.js from the
   live menu data.

   Theme: cream/parchment background with olive-green and gold accents,
   matching assets/icons/tof-theme.jpeg (a vintage botanical café menu
   reference the user supplied) - bordered category cards, olive price
   chips, and a bottom feature-icon row. The header banner is the
   user-supplied assets/icons/template.png image itself (leaf branches +
   title + tagline + "Menu" badge, all baked into that file).

   The header banner stays a normal in-flow element (top of the
   document only) - a top-anchored position:fixed repeat was tried
   twice (2-column multicol, then a single-column flex stack) and both
   times Chromium's print pagination rendered it past the bottom of
   earlier pages instead of at each page's top, verified via real
   page.pdf() output. The footer is different: position:fixed;
   bottom:0 with NO negative offset repeats correctly on every page
   (verified the same way, across all 3 pages) - the failure above was
   specific to the top-anchored/negative-offset technique, not to
   position:fixed in general. */

@page {
  margin: 14mm 14mm 16mm 14mm;
}

@media print {
  /* Hide every top-level section except the printable menu. display:none
     (not visibility:hidden) so hidden sections collapse to zero height -
     otherwise the page keeps their layout space and prints trailing
     blank pages after the menu. The quick menu isn't printed at all -
     it's captured to a PNG via html2canvas instead (see js/menu.js). */
  body > *:not(#printMenu) { display: none !important; }

  #printMenu {
    display: block;
    font-family: 'Inter', sans-serif;
    color: #33301F;
    background: #F6EEDD;
    padding: 6px 4px;
  }

  .print-menu-header {
    text-align: center;
    margin-bottom: 18px;
  }
  .print-banner {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
  }

  /* One category per row, stacked top to bottom in sheet order. */
  .print-menu-columns {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .print-category {
    break-inside: avoid;
    padding: 8px 14px 12px;
    border: 1.3px solid #A9875A;
    border-radius: 12px;
    background: #FFFDF8;
  }
  .print-cat-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .print-cat-head h2 {
    font-family: 'Playfair Display', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #2C2A1C;
    margin: 0;
    padding: 3px 14px;
    border: 1px solid #A9875A;
    border-radius: 999px;
  }
  .print-cat-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1px solid #A9875A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3F4A2E;
  }

  .print-category ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
  }

  .print-item {
    break-inside: avoid;
    margin-bottom: 8px;
  }
  .print-item-row {
    display: flex;
    align-items: baseline;
  }
  .print-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
    white-space: nowrap;
    color: #2C2A1C;
  }
  .print-item-leader {
    flex: 1;
    border-bottom: 1px dotted #A9875A;
    margin: 0 6px;
    transform: translateY(-3px);
  }
  .print-price-chip {
    flex-shrink: 0;
    background: #3F4A2E;
    color: #F6EEDD;
    font-weight: 700;
    font-size: 0.76rem;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
  }
  .print-item-desc {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.71rem;
    color: #6B664C;
    margin: 2px 0 0;
    line-height: 1.3;
  }
  .item-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    top: -1px;
    color: #3F4A2E;
  }

  .print-feature-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
    margin: 22px 0 10px;
  }
  .print-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 92px;
    text-align: center;
    color: #2C2A1C;
  }
  .print-feature-icon { color: #3F4A2E; }
  .print-feature span:last-child {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .print-final-tagline {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: #2C2A1C;
    margin: 4px 0 14px;
  }

  .print-menu-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.7rem;
    color: #4A4630;
    background: #F6EEDD;
    border-top: 1px solid #A9875A;
    padding-top: 8px;
  }
  .print-menu-footer p { margin: 2px 0; }
  .print-footer-brand { font-weight: 700; color: #2C2A1C; }
}