/* ===========================================================================
   Restaurant menu pages ( /menu/{restaurant}/ ) — single-rab_menu.php.
   Brand-aware: --menu-bg / --menu-accent / --menu-ink come from `!` directives
   in the menu source (inline style on .rb-menu); Rabbit tokens are fallback.
   Pure CSS + one tiny scroll-spy script (menu.js).
   =========================================================================== */

.rb-menu{
  --menu-bg:var(--forest);
  --menu-accent:var(--lime);
  --menu-ink:#fff;
  --menu-line:color-mix(in srgb, var(--menu-ink) 25%, transparent);
  background:var(--menu-bg);
  color:var(--menu-ink);
  font-variant-numeric:tabular-nums;
}

/* Loader — brand curtain with the mascot bobbing; lifts like the site loader
   (rbLoaderOut keyframes live in components.css). Brand vars come inline. */
.rb-mloader{
  position:fixed;
  inset:0;
  z-index:55;
  display:grid;
  place-items:center;
  background:var(--menu-bg,var(--forest));
  animation:rbLoaderOut .55s var(--ease) 1.6s forwards;
}
.rb-mloader__core{display:grid;justify-items:center;gap:var(--s-4);}
/* Mascot echoes: copies fan out from behind the center with falling opacity
   (--i = slot, --o = fanned opacity, --oc = collapsed opacity), then draw
   back in. One image URL — the copies cost no extra requests. */
.rb-mloader__fan{display:grid;place-items:center;}
.rb-mloader__echo{
  grid-area:1/1;
  display:block;
  width:auto;
  height:clamp(140px,22vw,200px);
  transform-origin:50% 88%;
  animation:rbMenuFan 2s cubic-bezier(.65,0,.35,1) infinite;
}
.rb-mloader__echo[style*="--i:0"]{filter:drop-shadow(0 12px 22px rgba(0,0,0,.3));}
@keyframes rbMenuFan{
  0%,100%{transform:none;opacity:var(--oc,1);}
  45%,60%{transform:translateX(calc(var(--i) * 36px)) rotate(calc(var(--i) * 9deg));opacity:var(--o,1);}
}
.rb-mloader__name{
  font-family:'Pacifico','Brush Script MT',cursive;
  font-size:clamp(36px,5vw,54px);
  color:var(--menu-accent,var(--lime));
  line-height:1.2;
}
.rb-mloader__dots{display:flex;gap:10px;}
.rb-mloader__dots i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--menu-accent,var(--lime));
  animation:rbMenuDot .9s ease-in-out infinite;
}
.rb-mloader__dots i:nth-child(2){animation-delay:.15s;}
.rb-mloader__dots i:nth-child(3){animation-delay:.3s;}
@keyframes rbMenuDot{
  0%,100%{transform:translateY(0);opacity:.4;}
  40%{transform:translateY(-8px);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .rb-mloader{display:none;}
}

/* Script display face (chapter titles, restaurant name, lockup) */
.rb-menu__name,
.rb-menu__chapter-title,
.rb-menu__lockup-script{
  font-family:'Pacifico', 'Brush Script MT', cursive;
  font-weight:400;
  color:var(--menu-accent);
  line-height:1.15;
}

/* Hero — mascot + script name */
.rb-menu__hero{
  padding:calc(96px + var(--s-8)) var(--s-6) var(--s-8);
  text-align:center;
}
.rb-menu__mascot img{
  display:block;
  margin:0 auto;
  width:auto;
  height:clamp(150px,24vw,220px);
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));
}
.rb-menu__name{font-size:clamp(52px,8vw,88px);margin:var(--s-2) 0 0;}
.rb-menu__strap{color:var(--menu-ink);opacity:.85;font-style:italic;font-size:clamp(15px,2vw,18px);margin:var(--s-6) 0 0;}

/* Sticky category nav — sits under the fixed site nav (~74px, z60) */
.rb-menu__nav{
  position:sticky;
  top:64px;
  z-index:50;
  background:color-mix(in srgb, var(--menu-bg) 92%, black);
  border-block:1px solid var(--menu-line);
}
.rb-menu__nav-track{
  display:flex;
  gap:var(--s-2);
  max-width:1040px;
  margin:0 auto;
  padding:var(--s-3) var(--s-6);
  overflow-x:auto;
  scrollbar-width:none;
}
.rb-menu__nav-track::-webkit-scrollbar{display:none;}
.rb-menu__nav-chip{
  flex:0 0 auto;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--menu-ink);
  text-decoration:none;
  border:1.5px solid var(--menu-line);
  border-radius:var(--r-pill);
  padding:7px 16px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.rb-menu__nav-chip:hover{border-color:var(--menu-accent);color:var(--menu-accent);}
.rb-menu__nav-chip.is-active{
  background:var(--menu-accent);
  border-color:var(--menu-accent);
  color:var(--menu-bg);
}
html{scroll-behavior:smooth;}
.rb-menu__section{scroll-margin-top:140px;}

/* Body */
.rb-menu__body{max-width:1040px;margin:0 auto;padding:var(--s-8) var(--s-6) var(--s-16);}

/* Chapter header — script title + rotated badge + tagline + size labels */
.rb-menu__chapter{margin:var(--s-16) 0 var(--s-8);}
.rb-menu__chapter:first-child{margin-top:var(--s-4);}
.rb-menu__chapter-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;}
.rb-menu__chapter-title{font-size:clamp(44px,6vw,72px);margin:0;}
.rb-menu__badge{
  background:var(--menu-accent);
  color:var(--menu-bg);
  font-weight:800;
  font-size:15px;
  padding:8px 20px;
  border-radius:var(--r-pill);
  transform:rotate(5deg);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.rb-menu__chapter-tag{font-style:italic;opacity:.85;margin:var(--s-2) 0 0;}
.rb-menu__colhead{
  display:flex;
  justify-content:flex-end;
  gap:var(--s-4);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:2px solid var(--menu-accent);
  padding-bottom:var(--s-2);
  margin:var(--s-6) 0 0;
}
.rb-menu__sizenote{opacity:.65;}
.rb-menu__sizeprice{color:var(--menu-accent);}

/* Sections — open two-column, no cards (like the printed menu) */
.rb-menu__sections{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-12);align-items:start;}
/* Section head + items share one grid template so size chips sit exactly
   over their price column. --price-cols comes inline from the template. */
.rb-menu__section-head,
.rb-menu__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) repeat(var(--price-cols,1), 88px);
  gap:var(--s-3);
  align-items:center;
}
.rb-menu__section-head{align-items:end;margin:var(--s-6) 0 var(--s-2);}
.rb-menu__section-title{
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--menu-accent);
  margin:0;
}
.rb-menu__size-chip{
  justify-self:end;
  background:var(--menu-accent);
  color:var(--menu-bg);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  padding:4px 12px;
  border-radius:var(--r-pill);
  transform:rotate(-2deg);
  box-shadow:0 3px 8px rgba(0,0,0,.2);
}
/* Sections with no declared sizes (add-ons) keep the column but no chip. */

.rb-menu__items{list-style:none;margin:0;padding:0;}
.rb-menu__item{
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--menu-line);
}
.rb-menu__item-name{font-weight:700;font-size:17px;}
.rb-menu__price{
  justify-self:end;
  font-size:19px;
  font-weight:800;
  color:var(--menu-accent);
}
.rb-menu__price--na{color:var(--menu-ink);opacity:.25;font-weight:400;}

/* Footer — brand lockup + footnotes */
.rb-menu__foot{margin-top:var(--s-16);text-align:center;}
.rb-menu__lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-4);
  margin-bottom:var(--s-6);
}
.rb-menu__lockup-mascot img{height:110px;width:auto;}
.rb-menu__lockup-text{text-align:left;line-height:1;}
.rb-menu__lockup-caps{
  display:block;
  font-weight:900;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:.02em;
  text-transform:uppercase;
  max-width:5em;
}
.rb-menu__lockup-script{display:block;font-size:clamp(34px,4vw,48px);margin-top:-6px;}
.rb-menu__foot p{opacity:.7;font-size:14px;margin:var(--s-1) 0;}

/* Mobile (site breakpoint: 920px) */
@media (max-width:920px){
  .rb-menu__hero{padding:calc(72px + var(--s-6)) var(--s-4) var(--s-6);}
  .rb-menu__nav{top:58px;}
  .rb-menu__nav-track{padding:var(--s-2) var(--s-4);}
  .rb-menu__body{padding:var(--s-6) var(--s-4) var(--s-12);}
  .rb-menu__sections{grid-template-columns:1fr;gap:0;}
  .rb-menu__section{scroll-margin-top:120px;}
  .rb-menu__item{padding:var(--s-3) 0;}
  .rb-menu__item-name{font-size:16px;}
  .rb-menu__section-head,
  .rb-menu__item{grid-template-columns:minmax(0,1fr) repeat(var(--price-cols,1), 64px);}
  .rb-menu__price{font-size:17px;}
  .rb-menu__size-chip{font-size:11px;padding:3px 9px;}
  .rb-menu__chapter-head{justify-content:center;text-align:center;}
  .rb-menu__chapter-tag{text-align:center;}
}

/* Print — the paper menu, for free */
@media print{
  .rb-menu__nav,.site-header,.site-footer{display:none;}
  .rb-menu__section{break-inside:avoid;}
}