/* ---------------------------------------------------------------
   Menu pages — print palette.

   Colours sampled directly from the Q3 2026 printed menu PDF so the
   web menu reads as the same document. Site brand tokens are kept
   below for the masthead/footer, which stay dark for continuity with
   the rest of the site.

   Fonts resolve to the site's self-hosted ABC Ginto faces once this
   file sits in the repo.
   --------------------------------------------------------------- */
:root{
  /* print palette, sampled from the menu PDF */
  --paper:#fffbeb;      /* page cream            */
  --panel:#f2ecc9;      /* khaki inset panel     */
  --ink:#1f4e66;        /* deep teal body text   */
  --ink-deep:#26474a;   /* logo teal             */
  --rust:#9c4216;       /* section headings      */
  --brick:#98371e;      /* service bar 1         */
  --gold:#c8ae35;       /* service bar 3         */
  --note:#6b6648;       /* olive small notes     */
  --rule:rgba(31,78,102,.20);
}

/* menu body — override the dark site background */
body.menu-page{background:var(--paper);color:var(--ink)}

/* Clear the fixed nav (70px desktop, 60px mobile) */
.servicebar{margin-top:70px}
@media (max-width:991px){.servicebar{margin-top:60px}}

/* service bar ---------------------------------------------------- */
/* The tri-colour strip across the top of the printed menu. */
.servicebar .wrap{padding:0;max-width:none;display:flex;flex-wrap:wrap}
.servicebar .wrap > div{flex:1 1 260px;display:flex;justify-content:space-between;gap:14px;
  padding:13px 26px;font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--paper)}
.servicebar .wrap > div:nth-child(1){background:var(--brick)}
.servicebar .wrap > div:nth-child(2){background:var(--ink)}
/* Cream on gold is 2.12:1 — fine in print, illegible at 11px on screen.
   The deep teal reaches 4.59:1 and keeps the gold band. */
.servicebar .wrap > div:nth-child(3){background:var(--gold);color:var(--ink-deep)}
.servicebar span:last-child{opacity:.85}

/* hero ----------------------------------------------------------- */
.menu-hero{padding:54px 24px 8px;max-width:1120px;margin:0 auto}
.menu-eyebrow{font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--rust);margin:0 0 10px}
.menu-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:1px;line-height:.95;margin:0 0 18px;color:var(--rust);
  font-size:clamp(2.6rem,8.5vw,4.9rem)}
.menu-intro{max-width:62ch;color:var(--ink);font-size:1rem;margin:0 0 30px}

/* jump nav ------------------------------------------------------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.jump a{display:inline-block;text-decoration:none;border:1px solid var(--rule);
  border-radius:999px;padding:7px 15px;font-family:var(--cond);font-size:11px;
  font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
  transition:color .15s,border-color .15s,background .15s}
.jump a:hover,.jump a:focus-visible{color:var(--paper);
  background:var(--rust);border-color:var(--rust)}

/* sections ------------------------------------------------------- */
.menu-body{padding:34px 24px 80px;max-width:1120px;margin:0 auto}
.menu-section{margin:0 0 56px;scroll-margin-top:24px}
.menu-section-head{padding-bottom:14px;border-bottom:1px solid var(--rule)}
.menu-section-name{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;font-size:clamp(1.45rem,3.2vw,2rem);margin:0;color:var(--rust)}
.menu-section-note,.menu-section-foot{font-family:var(--cond);font-size:11px;
  font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--note);
  margin:9px 0 0}
.menu-section-foot{margin-top:22px}
.menu-list{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px}
.menu-item{break-inside:avoid}
.menu-item-head{display:flex;align-items:baseline;gap:10px}
.menu-item-name{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;font-size:1rem;margin:0;color:var(--ink)}
.menu-item-dots{flex:1 1 auto;height:1px;background:
  repeating-linear-gradient(90deg,var(--rule) 0 3px,transparent 3px 7px);
  transform:translateY(-3px)}
/* Price matches the item name, as it does on the printed menu. */
.menu-price{font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--ink);white-space:nowrap}
.menu-item-desc{margin:6px 0 0;color:var(--ink);opacity:.82;font-size:.9rem;
  line-height:1.5}
.menu-item-addon{margin:6px 0 0;font-family:var(--cond);font-size:10.5px;
  font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--note)}

/* boxed section (bruschetta) ------------------------------------- */
.menu-section.boxed{background:var(--panel);border-radius:18px;
  padding:30px 32px 34px}
.menu-section.boxed .menu-section-head{border-bottom-color:rgba(31,78,102,.16)}

/* callouts ------------------------------------------------------- */
.menu-body .callout{background:var(--panel);border-left:5px solid var(--rust);
  border-radius:14px;padding:24px 28px;margin:0 0 56px;width:100%}
.callout-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;font-size:1.3rem;margin:0;color:var(--rust)}
.callout-line{font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--note);margin:8px 0 0}
.callout-body{margin:10px 0 0;color:var(--ink);font-size:.92rem}
.callout-cta{display:inline-block;margin-top:14px;font-family:var(--cond);
  font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--rust);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px}

/* pdf download link ---------------------------------------------- */
.pdf-link{display:inline-block;margin-top:18px;font-family:var(--cond);font-size:11px;
  font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,246,213,.66)}

@media (max-width:820px){
  .menu-list{grid-template-columns:1fr;gap:24px}
  .menu-hero{padding-top:36px}
  .servicebar .wrap > div{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Printing the web menu should look like the printed menu. */
@media print{
  .nav,.section-footer,.footer-nav,.jump,.pdf-link{display:none}
  body{font-size:11pt}
  .menu-section{break-inside:avoid}
}