/* Current Menu viewer — shared by brawleypizzaco.com and /menu.
   Uses the page's colour/font tokens (--teal, --red, --gold, --body …). */

/* overlay */
.mv { position: fixed; inset: 0; z-index: 20; background: #032b24; display: flex; flex-direction: column; }
.mv[hidden] { display: none !important; }
.mv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); color: var(--gold); }
.mv-bar span { font-family: var(--body); font-weight: 600; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; }
.mv-x { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: transparent; color: var(--gold); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: system-ui, sans-serif; flex: none; }
.mv-x:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mv-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px 12px calc(20px + env(safe-area-inset-bottom, 0px)); touch-action: pan-x pan-y pinch-zoom; }
.mv-scroll.built { padding-left: 0; padding-right: 0; }
@media (min-width: 600px) { .mv-scroll.built { padding-left: 12px; padding-right: 12px; } }
.mv-msg { color: var(--cream); text-align: center; font-family: var(--body); letter-spacing: .16em; text-transform: uppercase; font-size: 14px; padding: 30px 0; }

/* image menu (used when the event has a menu image instead of a "Menu:" line) */
.mv-img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 10px; background: var(--teal-deep); }
@media (min-width: 900px) {
  .mv-img { width: auto; max-width: 100%; max-height: calc(100vh - 96px); cursor: zoom-in; }
  .mv-img.zoom { width: 100%; max-width: 1100px; max-height: none; cursor: zoom-out; }
}

/* built menu, drawn to match the printed pop-up menu */
.bm-sheet { max-width: 560px; margin: 0 auto; padding: 12px; background: var(--teal); border-radius: 10px; }
.bm-card {
  border-radius: 12px; padding: 22px 16px 16px;
  background:
    linear-gradient(118deg, rgba(249,217,143,.95) 0%, rgba(254,185,63,0) 30%, rgba(249,214,138,.9) 52%, rgba(254,185,63,0) 72%, rgba(249,217,143,.9) 100%),
    var(--gold);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.bm-wordmark { width: 82%; height: auto; display: block; }
.bm-box { width: 100%; margin: 0; min-inline-size: 0; border: 2px solid var(--red); border-radius: 14px; padding: 16px 10px 20px; display: flex; flex-direction: column; gap: 20px; }
.bm-box > legend { margin: 0 auto; padding: 0 12px; font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
.bm-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bm-name { position: relative; background: none; border: 0; padding: 0; color: var(--red); font-family: var(--body); max-width: 100%; cursor: default; }
.bm-name.tap { cursor: pointer; }
.bm-name b { display: block; font-weight: 600; font-size: clamp(22px, 6.8vw, 44px); letter-spacing: .12em; text-transform: uppercase; transform: skewX(-12deg); text-shadow: .06em .06em 0 var(--teal); line-height: 1.05; white-space: nowrap; }
.bm-name.small b { font-size: clamp(17px, 5vw, 32px); }
/* the price hangs off the right of the name, so the name itself stays centred */
.bm-price { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--teal); white-space: nowrap; }
.bm-name.small .bm-price { font-size: 13px; }
.bm-name:focus-visible, .bm-see:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
.bm-see { background: none; border: 0; padding: 0 0 1px; cursor: pointer; font-family: var(--body); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); border-bottom: 1px solid currentColor; opacity: .85; }
.bm-desc { margin: 4px 0 0; font-family: var(--body); font-size: clamp(11px, 3.3vw, 15px); letter-spacing: .13em; text-transform: uppercase; color: var(--red); line-height: 1.35; max-width: 32em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bm-fine { font-family: var(--body); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); line-height: 1.5; margin-top: 2px; }

/* photo pop-up */
.pv { position: fixed; inset: 0; z-index: 30; background: rgba(2,30,25,.82); display: flex; align-items: flex-end; justify-content: center; }
.pv[hidden] { display: none !important; }
.pv-card { width: 100%; max-width: 640px; background: var(--cream); border-radius: 22px 22px 0 0; padding: 14px 0 calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -6px 30px rgba(0,0,0,.35); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.pv-head h3 { margin: 0; min-width: 0; color: var(--red); font-family: var(--body); font-weight: 600; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; transform: skewX(-12deg); text-shadow: .06em .06em 0 var(--teal); }
.pv-head button { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--teal); background: none; color: var(--teal); font-size: 22px; cursor: pointer; font-family: system-ui, sans-serif; }
.pv-stage { position: relative; }
.pv-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scrollbar-width: none; cursor: grab; }
.pv-strip::-webkit-scrollbar { display: none; }
.pv-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.pv-strip img { -webkit-user-drag: none; user-select: none; }
.pv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cream); background: rgba(5,93,71,.85); color: var(--cream); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: system-ui, sans-serif; z-index: 1; }
.pv-arrow:disabled { opacity: .35; cursor: default; }
.pv-arrow.prev { left: 22px; } .pv-arrow.next { right: 22px; }
.pv-arrow:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.pv-strip img { flex: none; width: 86%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 3px solid var(--red); scroll-snap-align: center; background: var(--gold-light); }
.pv-strip.one img { width: 100%; }
.pv-dots { display: flex; justify-content: center; gap: 6px; }
.pv-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(5,93,71,.3); }
.pv-dots span.on { background: var(--teal); }
.pv-desc { margin: 0 16px; font-family: var(--body); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); text-align: center; line-height: 1.4; }
@media (min-width: 700px) { .pv { align-items: center; } .pv-card { border-radius: 22px; } }

/* computers: a bigger menu and photo card */
@media (min-width: 900px) {
  .bm-sheet { max-width: 760px; padding: 16px; }
  .bm-card { padding: 34px 34px 24px; gap: 20px; }
  .bm-wordmark { width: 72%; }
  .bm-box { padding: 22px 24px 26px; gap: 26px; }
  .bm-box > legend { font-size: 19px; }
  .bm-name b { font-size: 52px; }
  .bm-name.small b { font-size: 40px; }
  .bm-price { font-size: 20px; margin-left: 10px; }
  .bm-name.small .bm-price { font-size: 17px; }
  .bm-see { font-size: 13px; }
  .bm-desc { font-size: 17px; }
  .bm-fine { font-size: 12px; }
  .pv-card { max-width: 820px; padding: 18px 0 24px; gap: 12px; }
  .pv-head { padding: 0 22px; }
  .pv-head h3 { font-size: 34px; }
  .pv-strip { padding: 0 22px; gap: 22px; }
  .pv-strip img { width: 100%; }
  .pv-desc { font-size: 15px; }
  .pv-arrow.prev { left: 34px; } .pv-arrow.next { right: 34px; }
}