/* ============================================================
   Sticky mobile action bar — Order + Call + Directions.

   Shared by all four public pages (index.html, menu.html, events.html,
   fun-guide.html). index.html used to carry its own inline copy, which
   had silently drifted — it was missing the body padding-bottom below,
   so the fixed bar overlapped index's own footer. The inline copy is
   gone; this file is now the single definition.

   Design tokens (--accent-sun, --ink, --cream, --line, --font-display)
   are declared in each page's own :root block; this file only consumes
   them, so it stays in sync with the page it is loaded into.
   ============================================================ */

.mobile-cta-bar { display: none; }

@media (max-width: 900px) {
  .mobile-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(253, 251, 247, 0.92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 28px -12px rgba(26, 31, 46, 0.18);
  }

  /* Reserve the bar's height so the last section of the page and the
     footer are never trapped underneath it. Fixed value rather than a
     measured one: it keeps CLS at zero (no layout shift once the bar
     paints) at the cost of a few pixels of slack on short viewports. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  .mcb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 6px; border-radius: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.3px; text-decoration: none;
    min-height: 48px;                 /* 48px ≥ the 44px minimum tap target */
  }
  .mobile-cta-bar.is-hidden { display: none; }   /* hidden while the nav drawer is open */

  /* CTA HAND-OFF. The bar now carries Order + Call + Directions, so this is
     where the header's own nav and Order button retire — one place for all
     four pages, at the exact width the bar appears. Previously each page
     dropped its header CTA at its own nav-collapse width (1239px on index,
     1080px on the other three) while the bar only appeared at 900px, which
     left a band with no call to action at all: 901-1239px on index and
     901-1080px on menu/events/fun-guide.

     Descendant selectors (0,2,0) so these win over each page's own
     single-class `.nav-links { display: flex }` / `.nav-cta-btn` rules
     regardless of stylesheet order — this file loads before the inline
     <style> on menu/events/fun-guide. Scoped to .header-inner so the
     identical .btn-primary inside .mobile-drawer is untouched. */
  .header-inner .nav-links,
  .header-inner .nav-cta-btn,
  .header-inner .btn-primary { display: none; }

  .mcb-btn svg { width: 17px; height: 17px; flex: none; }
  .mcb-order { background: var(--accent-sun); color: #fff; box-shadow: 0 6px 16px -6px rgba(255,90,0,0.6); }
  .mcb-call  { background: var(--ink); color: var(--cream); }
  .mcb-directions { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
  .mcb-btn:active { transform: translateY(1px); }
}