/* The Menu page as a booklet (booklet.js): pages that fit the screen, turned by swiping. It only lays
   the pages out, and takes its colours from Makela's look (menu-her.css). */

.menu-card.has-booklet > .menu-head,
.menu-card.has-booklet > .menu-sections,
.menu-card.has-booklet > .menu-kids,
.menu-card.has-booklet > .menu-signoff,
.menu-card.has-booklet > .menu-fineprint { display: none; }

.booklet {
  --bk-ink: var(--hm-navy, var(--navy));
  --bk-gold: var(--hm-gold, var(--gold));
  --bk-quiet: var(--hm-grey, var(--teal));
  --bk-peek: 44px;   /* how far the pages slide to show the next one (the hint, below) */
  position: relative;
  width: 100%;
  min-width: 0;
}
.booklet.bk-spread { --bk-peek: 64px; }

.bk-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
}
.bk-viewport::-webkit-scrollbar { display: none; }
.bk-viewport:focus-visible { outline: 2px solid var(--bk-gold); outline-offset: 4px; }

/* one page at a time: the pages run out to the card's edges and are padded back to the text
   (booklet.js sets the bleed to the card's own padding), so a page being swiped has a margin
   between it and the next */
.booklet:not(.bk-spread) .bk-viewport {
  margin-left: calc(-1 * var(--bk-bleed-l, 0px));
  margin-right: calc(-1 * var(--bk-bleed-r, 0px));
}
.booklet:not(.bk-spread) .bk-viewport:focus-visible { outline-offset: -2px; }
.booklet:not(.bk-spread) .bk-page { padding: 0 var(--bk-bleed-r, 0px) 0 var(--bk-bleed-l, 0px); }

.bk-track { display: flex; }

.bk-page {
  position: relative;
  flex: 0 0 var(--bk-w);
  width: var(--bk-w);
  height: var(--bk-h);
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* a fast swipe turns one page, not three */
  box-sizing: border-box;
}
.bk-inner {
  height: calc(100% - 28px);  /* room for the page number */
  overflow: hidden;
  box-sizing: border-box;
}
/* a little room above the dishes at the top of each page (Peter, 15 Oct, after trying the pages
   centred, which he didn't like); the cover keeps its own centring, below */
.bk-page:not(.bk-cover):not(.bk-toc-page) .bk-inner { padding-top: 16px; }
.bk-folio {
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  margin: 0;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--bk-quiet);
}

/* a phone: the page fills the screen (booklet.js), and the page number goes, since the line under
   the pages already says "Page 3 of 12" */
.bk-full .bk-inner { height: 100%; }
.bk-full .bk-folio { display: none; }

/* two pages open side by side on a wide screen, with a fold between them */
.bk-spread .bk-page { padding: 0 clamp(18px, 2.4vw, 32px); }
.bk-spread .bk-page:nth-child(even) { scroll-snap-align: none; }
.bk-spread .bk-page:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--bk-gold) 45%, transparent); }

/* the sections on a page: the same spacing on every page, however much of it is filled (until
   15 Oct a short page spread its dishes apart, which left the children's menu and the coffees
   looking gappy) */
.bk-inner > .menu-group + .menu-group { margin-top: 14px; }
/* menu.css gives each section up to 40px under it on a wide screen, for the long list; on a page of
   the booklet that came on top of the gap above, so the coffees and the children's menu looked
   gappy on a computer */
.bk-inner .menu-group { margin-bottom: 0; }
.bk-inner .menu-group ul { list-style: none; margin: 0; padding: 0; }
.bk-inner .menu-group .menu-item:last-child { border-bottom: 0; }

/* a section of short dishes, such as the sides or the coffees, in two columns (booklet.js marks
   it .bk-cols): the price beside the name where there's room, under it on a narrow page (a phone,
   .bk-narrow) */
.bk-inner .menu-group ul.bk-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* never wider than the page */
  column-gap: 20px;
}
/* both dishes of a row fill its height, so their dividing lines meet; the words stay at the top */
.bk-inner ul.bk-cols > .menu-item { grid-template-columns: 1fr auto; column-gap: 8px; align-content: start; }
.bk-inner ul.bk-cols .mi-price { text-align: right; margin-top: 0; white-space: normal; }
.bk-narrow .bk-inner ul.bk-cols > .menu-item { grid-template-columns: 1fr; }
.bk-narrow .bk-inner ul.bk-cols .mi-price { text-align: left; margin-top: 2px; }
.bk-inner ul.bk-cols > .menu-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.bk-inner > .menu-kids-head { text-align: center; margin: 0 0 14px; padding-top: 4px; }

/* the cover: the heading in the middle, the contents under it */
.bk-cover .bk-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 3vh, 26px);
}
.bk-cover .menu-head { margin-bottom: 0; }
/* a cover a little too full for its contents (booklet.js): set closer before they move overleaf */
.bk-cover.bk-tight .bk-inner { gap: 8px; }
.bk-cover.bk-tight .bk-hint { margin-bottom: 4px; }
.bk-cover.bk-tight .bk-contents button { min-height: 30px; padding: 4px 2px; }
.bk-toc-page .bk-inner { display: flex; flex-direction: column; justify-content: center; }

.bk-hint {
  margin: 0 0 8px;
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  color: var(--bk-quiet);
}
.bk-hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .bk-hint-touch { display: none; }
  .bk-hint-mouse { display: inline; }
}

.bk-contents ol {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 460px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
}
.bk-contents li.bk-kids { grid-column: 1 / -1; }
.bk-contents button {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 6px;
  min-height: 34px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--bk-gold) 70%, transparent);
  background: none;
  color: var(--bk-ink);
  font: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}
.bk-contents .bk-t { flex: 1; }
.bk-contents .bk-n { color: var(--bk-quiet); font-size: .78rem; }
.bk-contents button:hover .bk-t,
.bk-contents button:focus-visible .bk-t { color: var(--bk-gold); }
.bk-contents li.bk-kids button { justify-content: center; font-weight: 600; }
.bk-contents li.bk-kids .bk-t { flex: none; }

/* the back: sign-off, small print, Book a Table */
.bk-back { margin-top: 22px; text-align: center; }
.bk-back .menu-fineprint { margin-top: 14px; }
.bk-back .enquire-actions { margin-top: 16px; }

/* the controls: previous, where you are, next */
.bk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.bk-where {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--bk-quiet);
}
.bk-btn {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--bk-gold);
  background: transparent;
  color: var(--bk-ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.bk-btn span { margin-top: -3px; }
.bk-btn:hover:not(:disabled) { background: var(--bk-gold); color: var(--bk-ink); }
.bk-btn:disabled { opacity: .3; cursor: default; }
.bk-btn:focus-visible { outline: 2px solid var(--bk-gold); outline-offset: 3px; }

/* the hint that the pages turn (booklet.js, playCue()): the first time the booklet is on screen, a
   gold arrow on the right of the page pulses twice while the pages slide a little to the left and
   back, and the Next button blinks gold with it; then the arrow fades. On a phone it sits near the
   card's edge, in its padding */
.bk-cue {
  position: absolute;
  top: calc(var(--bk-h, 420px) / 2 - 26px);
  right: calc(6px - var(--bk-bleed-r, 0px));
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bk-gold);
  color: var(--bk-ink);
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bk-cue span { margin: -4px 0 0 3px; }
.bk-cueing .bk-cue {
  visibility: visible;
  pointer-events: auto;
  animation: bk-cue-life 3.2s ease forwards, bk-cue-ring 1.1s ease-out .3s 2, bk-cue-pop 1.1s ease-in-out .3s 2;
}
.bk-cueing .bk-track { animation: bk-peek 1.1s ease-in-out .3s 2; }
.bk-cueing .bk-next:not(:disabled) { animation: bk-btn-blink 1.1s ease-out .3s 2; }

@keyframes bk-cue-life {
  0% { opacity: 0; }
  10%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bk-cue-ring {
  0% { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 0 color-mix(in srgb, var(--bk-gold) 75%, transparent); }
  100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .28), 0 0 0 18px color-mix(in srgb, var(--bk-gold) 0%, transparent); }
}
@keyframes bk-cue-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.14); }
}
@keyframes bk-peek {
  0%, 100% { transform: translateX(0); }
  45%, 55% { transform: translateX(calc(-1 * var(--bk-peek))); }
}
@keyframes bk-btn-blink {
  0% { background-color: var(--bk-gold); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bk-gold) 75%, transparent); }
  100% { background-color: transparent; box-shadow: 0 0 0 14px color-mix(in srgb, var(--bk-gold) 0%, transparent); }
}
/* asked for less motion: no slide, no pulse; the arrow only shows a moment and fades */
@media (prefers-reduced-motion: reduce) {
  .bk-cueing .bk-cue { animation: bk-cue-life 3.2s ease forwards; }
  .bk-cueing .bk-track,
  .bk-cueing .bk-next:not(:disabled) { animation: none; }
}

@media print {
  /* paper gets the long list, not the booklet */
  .booklet { display: none; }
  .menu-card.has-booklet > .menu-head,
  .menu-card.has-booklet > .menu-sections,
  .menu-card.has-booklet > .menu-kids,
  .menu-card.has-booklet > .menu-signoff,
  .menu-card.has-booklet > .menu-fineprint { display: revert; }
}