/* ============================================================
   Kona Poké — Menu page. Reuses header, footer, buttons, .wrap,
   .bg-cream, .eyebrow, .em from styles.css.
   ============================================================ */

.menu-page { background: #fff; color: var(--ink); }

/* ---- hero (clears the fixed header) ---- */
.menu-hero {
  padding: clamp(100px, 11vw, 140px) 0 clamp(34px, 5vw, 56px);
  background: linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  text-align: center;
}
.menu-hero h1 {
  font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.02; color: var(--ink);
  font-size: clamp(44px, 7vw, 82px); letter-spacing: -0.01em; margin-top: 4px;
}
.menu-hero h1 .em { font-weight: 600; color: var(--accent); }
.menu-lead { max-width: 680px; margin: 18px auto 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: #45605c; }
.menu-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }

/* ---- category jump nav ---- */
.menu-jump { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 30px; }
.menu-jump a {
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 13px; color: var(--accent);
  background: rgba(0,131,144,0.08); padding: 8px 16px; border-radius: 999px; text-decoration: none; transition: background .15s ease;
}
.menu-jump a:hover { background: rgba(0,131,144,0.16); }

/* ---- sections ---- */
.menu-sec { padding: clamp(40px, 6vw, 72px) 0; scroll-margin-top: 90px; }
.menu-sec-head { max-width: 720px; margin: 0 auto; text-align: center; }
.menu-sec-head h2 { font-family: 'Jost', sans-serif; font-weight: 400; line-height: 1.1; color: var(--ink); font-size: clamp(28px, 4vw, 46px); }
.menu-sec-head h2 .em { font-weight: 600; color: var(--accent); }
.menu-sec-head p { margin-top: 10px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: #62786f; }

/* ---- item list (bowls, tacos, sides, treats) ---- */
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; max-width: 940px; margin: 36px auto 0; }
.menu-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed rgba(0,131,144,0.22); padding-bottom: 6px; }
.menu-item .name { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 18px; color: var(--ink); }
.menu-item .cal { font-size: 12.5px; color: #8a9a93; flex: none; }
.menu-item .desc { margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: #4a625f; }

/* ---- build-your-own / drinks category blocks ---- */
.byo-menu { max-width: 880px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 22px; }
.byo-menu-cat h3 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.byo-menu-cat p { font-size: 15.5px; line-height: 1.65; color: #3a524f; }

/* ---- closing CTA ---- */
.menu-cta { padding: clamp(48px, 7vw, 84px) 0; background: linear-gradient(160deg, #06403F 0%, #074a47 55%, #052e2d 100%); color: #fff; text-align: center; }
.menu-cta h2 { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(28px, 4vw, 44px); color: #fff; }
.menu-cta p { max-width: 620px; margin: 14px auto 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.86); }
.menu-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.menu-cta-actions .btn-outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.menu-cta-actions .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

@media (max-width: 680px) {
  .menu-list { grid-template-columns: 1fr; }
}