/* ============================================================= *
 *  Printable menu themes — pure CSS backgrounds (no image files)
 *  Used by print.html and previewed by the admin theme picker.
 * ============================================================= */

.theme {
  --t-bg: #fbf7ee;
  --t-ink: #2a2118;
  --t-muted: #7a6f60;
  --t-accent: #9c6b2f;
  --t-line: rgba(120, 95, 60, .35);
  --t-head: "Georgia", "Times New Roman", serif;
  position: relative;
}

/* Duck Inn logo tiled as an all-over watermark behind the menu — applies to
   every theme. Dark themes invert it (black artwork -> light) so it stays
   visible. The content sits above via z-index. */
.theme::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/img/watermark.png');
  background-repeat: repeat;
  background-size: 150px;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.theme-slate::before,
.theme-noir::before {
  filter: invert(1);
  opacity: 0.09;
}
.theme > * { position: relative; z-index: 1; }

/* Parchment — warm aged paper */
.theme-parchment {
  --t-bg: #f5ecd8; --t-ink: #3a2c1a; --t-muted: #8a7350; --t-accent: #9c6b2f; --t-line: rgba(120,90,40,.4);
  background-color: #f5ecd8;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(180,140,80,.10), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(150,110,60,.10), transparent 45%);
}
/* Linen — clean off-white with subtle weave */
.theme-linen {
  --t-bg: #f7f4ee; --t-ink: #2c2a26; --t-muted: #7c7468; --t-accent: #97734a; --t-line: rgba(60,50,40,.18);
  background-color: #f7f4ee;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px);
}
/* Slate — dark, modern, elegant */
.theme-slate {
  --t-bg: #20262d; --t-ink: #eef1f4; --t-muted: #9fb0bd; --t-accent: #e0a84e; --t-line: rgba(255,255,255,.16);
  background-color: #20262d;
  background-image: radial-gradient(circle at 50% -10%, rgba(255,255,255,.08), transparent 55%);
}
/* Noir — near-black fine dining */
.theme-noir {
  --t-bg: #14110f; --t-ink: #f3ead9; --t-muted: #b09c7e; --t-accent: #c9a227; --t-line: rgba(201,162,39,.35);
  background-color: #14110f;
  background-image: radial-gradient(circle at 50% 0%, rgba(201,162,39,.10), transparent 60%);
  --t-head: "Georgia", serif;
}
/* Vineyard — wine list burgundy */
.theme-vineyard {
  --t-bg: #f3e9e6; --t-ink: #43181b; --t-muted: #8a5b54; --t-accent: #7c1d27; --t-line: rgba(124,29,39,.32);
  background-color: #f3e9e6;
  background-image: radial-gradient(circle at 85% 10%, rgba(124,29,39,.10), transparent 40%);
}
/* Fresh — bright herb-green, casual */
.theme-fresh {
  --t-bg: #f1f6ee; --t-ink: #20301d; --t-muted: #5f7355; --t-accent: #3f7d3a; --t-line: rgba(63,125,58,.3);
  background-color: #f1f6ee;
  background-image: radial-gradient(circle at 15% 85%, rgba(63,125,58,.10), transparent 45%);
}

/* ---- shared printable layout, themed via the vars above ---- */
.sheet {
  color: var(--t-ink);
  font-family: var(--t-head);
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 56px 56px;
}
.sheet .ph { text-align: center; margin-bottom: 8px; }
.sheet .ph .logo { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin: 0 auto 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.sheet .ph h1 { font-size: 42px; letter-spacing: 1px; }
.sheet .ph .tagline { color: var(--t-muted); font-style: italic; margin-top: 4px; }
.sheet .ph .divider { width: 90px; height: 2px; background: var(--t-accent); margin: 16px auto 0; }

.sheet .cat { margin-top: 34px; break-inside: avoid; }
.sheet .cat > h2 {
  font-size: 24px; color: var(--t-accent); text-transform: uppercase; letter-spacing: 2px;
  text-align: center; margin-bottom: 4px;
}
.sheet .cat > .cdesc { text-align: center; color: var(--t-muted); font-style: italic; margin-bottom: 14px; font-size: 14px; }

.sheet .d { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; break-inside: avoid; border-bottom: 1px dotted var(--t-line); }
.sheet .d:last-child { border-bottom: none; }
.sheet .d .dthumb {
  flex: 0 0 70px; width: 70px; height: 70px; object-fit: cover; border-radius: 8px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet .d .dinfo { flex: 1; min-width: 0; }
.sheet .d .dname { font-weight: 700; font-size: 17px; }
.sheet .d .ddesc { color: var(--t-muted); font-size: 13.5px; font-style: italic; font-family: var(--font-body, sans-serif); margin-top: 2px; }
.sheet .d .dprices { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet .d .dprices .pr { font-size: 16px; }
.sheet .d .dprices .pr .lab { color: var(--t-muted); font-size: 12px; font-style: italic; margin-right: 6px; }

.sheet .foot { text-align: center; color: var(--t-muted); font-style: italic; font-size: 13px; margin-top: 40px; }

@media print {
  /* Full-bleed: no page margin so the themed background + watermark reach every
     edge. The running header/footer are fixed (repeat on every page); each
     group starts its own page and reserves room for them via padding, so they
     never overlap. */
  @page { margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .theme { min-height: 100vh; }
  .sheet { max-width: 100%; padding: 0; }
  #menubody { padding: 0 14mm; }

  /* Watermark + theme colour fill EVERY page completely (fixed = repeated on
     each printed page), including empty space on the last page. */
  .theme::before { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; }

  /* Running header (top) and footer (bottom), repeated on every page. */
  .run-head {
    position: fixed; top: 0; left: 0; right: 0; height: 42mm;
    display: flex; flex-direction: column; justify-content: center; padding: 4mm 14mm 0;
  }
  .run-foot {
    position: fixed; bottom: 0; left: 0; right: 0; height: 16mm;
    display: flex; align-items: center; justify-content: center; padding: 0 14mm;
  }
  .run-head .ph { margin: 0; }
  .run-head .ph .logo { width: 78px; height: 78px; margin: 0 auto 3px; }
  .run-head .ph h1 { font-size: 27px; }
  .run-head .ph .tagline { font-size: 12px; margin-top: 1px; }
  .run-head .ph .divider { margin-top: 6px; }
  .run-foot .foot { margin: 0; font-size: 11.5px; }

  /* Each group starts on its own page (the first does not force a blank page)
     and clears the fixed header/footer with top/bottom padding. */
  .sheet .cat {
    break-before: page; break-inside: auto;
    padding-top: 44mm; padding-bottom: 18mm; margin: 0;
  }
  #menubody > .cat:first-child { break-before: avoid; }
}