/* Menu page styling: colours taken from the logo's warm sand and deep chocolate. */
:root {
  --sand: #dac2a8;        /* the logo's background: the page sits seamlessly behind it */
  --sand-light: #e8d6c1;
  --cream: #f7eee3;       /* cards */
  --choc: #47210c;        /* the logo's brown */
  --choc-soft: #6b3f25;
  --muted: #7b5a44;
  --sold: #9b8572;
  --radius: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--choc);
  font: 400 16px/1.45 Jost, "Century Gothic", Futura, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header: the logo, with steam rising from the cup's lid ─────────────────── */
.hero { text-align: center; padding: 40px 16px 18px; }
.logo-wrap { position: relative; width: min(320px, 78vw); margin: 0 auto; }
.logo { display: block; width: 100%; height: auto; }
.steam {
  position: absolute; top: -12%; width: 3.6%; height: 17%; border-radius: 10px;
  background: linear-gradient(to top, rgba(71, 33, 12, .32), transparent);
  filter: blur(2.5px); opacity: 0; animation: steam 3.4s ease-in-out infinite;
}
.s1 { left: 44%; }
.s2 { left: 49%; animation-delay: 1.1s; height: 20%; top: -15%; }
.s3 { left: 54%; animation-delay: 2.2s; }
@keyframes steam {
  0% { transform: translateY(14px) scaleX(1) skewX(0); opacity: 0; }
  25% { opacity: .85; }
  60% { transform: translateY(-6px) scaleX(1.5) skewX(12deg); opacity: .45; }
  100% { transform: translateY(-24px) scaleX(2) skewX(-8deg); opacity: 0; }
}
.tagline { margin: 0; color: var(--muted); }
.tagline:empty { display: none; }
.live {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 14px;
  border-radius: 999px; background: rgba(71, 33, 12, .08); color: var(--choc-soft); font-size: .85rem; font-weight: 500;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9a57; box-shadow: 0 0 0 0 rgba(63, 154, 87, .55); animation: pulse 2s infinite; }
.live.offline .dot { background: #c98a1f; animation: none; }
/* Opens the track page: the customer types their table name there. */
.track-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 22px; border-radius: 999px;
  background: var(--choc); color: var(--sand-light); text-decoration: none; font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 8px 18px -12px rgba(71, 33, 12, .8);
}
.track-btn:active { transform: scale(.97); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(63, 154, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 154, 87, 0); } }

/* ── The awning: a chocolate bar with a scalloped edge, like the logo's kiosk ─ */
.chips-bar { position: sticky; top: 0; z-index: 5; background: var(--choc); margin-bottom: 14px; }
.chips-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 14px 0, var(--choc) 12px, transparent 12.5px) 0 0 / 28px 12px repeat-x;
}
.chips {
  max-width: 1100px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 16px; border-radius: 999px; border: 1.5px solid rgba(218, 194, 168, .45);
  color: var(--sand-light); text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.chip.active { background: var(--sand); color: var(--choc); border-color: var(--sand); }

.search-wrap { padding: 10px 16px 0; max-width: 1100px; margin: 0 auto; }
#search {
  width: 100%; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgba(71, 33, 12, .18);
  background: var(--sand-light); color: var(--choc); font: inherit; outline: none;
}
#search::placeholder { color: var(--muted); }
#search:focus { border-color: var(--choc); }

/* ── Menu ───────────────────────────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: 4px 16px 32px; }
.section { padding-top: 26px; }
/* Section titles in the logo's "— SHORE BREW —" style. */
.section h2 {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font: 600 1.15rem/1.2 Jost, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--choc);
}
.section h2::before, .section h2::after { content: ""; height: 2px; background: var(--choc); opacity: .55; }
.section h2::before { width: 28px; flex: none; }
.section h2::after { flex: 1; }
.section h2 small { order: 3; font-weight: 500; font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative; display: flex; flex-direction: column; border: 0; padding: 0; text-align: left;
  background: var(--cream); color: var(--choc); border-radius: var(--radius); overflow: hidden; cursor: pointer;
  font: inherit; box-shadow: 0 10px 22px -16px rgba(71, 33, 12, .55);
  animation: rise .5s both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform .2s;
}
.card:active { transform: scale(.98); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
/* Cards rise in only the first time; later updates (refresh, search) swap in quietly. */
.settled .card { animation: none; }
.photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--sand-light); }

/* No photo: the bean badge from the logo's cup. */
.badge { aspect-ratio: 4 / 3; width: 100%; display: grid; place-items: center; background: var(--sand-light); }
.badge svg { width: 42%; max-width: 110px; height: auto; }

.info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.name { font-weight: 600; line-height: 1.25; }
.price {
  align-self: flex-start; margin-top: auto; padding: 3px 11px; border-radius: 999px;
  background: var(--choc); color: var(--sand-light); font-weight: 600; font-size: .9rem; letter-spacing: .02em;
}

/* Sold out: still on the menu, clearly not available today. */
.card.sold { cursor: default; color: var(--sold); }
.card.sold .photo, .card.sold .badge { filter: grayscale(1); opacity: .55; }
.card.sold .price { background: transparent; color: var(--sold); text-decoration: line-through; padding-left: 0; }
.ribbon {
  position: absolute; top: 14px; right: -34px; transform: rotate(35deg); padding: 4px 40px;
  background: var(--choc); color: var(--sand-light); font: 600 .7rem Jost, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}

.empty, .error { text-align: center; color: var(--muted); padding: 48px 16px; }
.error button {
  margin-top: 12px; padding: 10px 22px; border-radius: 999px; border: 0; background: var(--choc); color: var(--sand-light);
  font: 600 1rem Jost, sans-serif; letter-spacing: .04em; cursor: pointer;
}

/* Loading */
.skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 26px; }
.skeleton {
  height: 220px; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--sand-light) 40%, var(--cream) 50%, var(--sand-light) 60%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 8px 16px 40px; }
.footer-brand { margin: 0 0 4px; color: var(--choc); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }

/* ── Item sheet ─────────────────────────────────────────────────────────────── */
.sheet {
  width: min(520px, 100%); max-height: 92vh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0;
  background: var(--cream); color: var(--choc); overflow: hidden;
}
@media (min-width: 640px) { .sheet { margin: auto; border-radius: 24px; } }
.sheet::backdrop { background: rgba(40, 18, 6, .55); backdrop-filter: blur(3px); }
.sheet[open] { animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-photo .photo, .sheet-photo .badge { aspect-ratio: 16 / 11; }
.sheet-body { padding: 18px 20px 26px; }
.sheet-body h2 { margin: 0; font: 600 1.5rem/1.2 Jost, sans-serif; }
.sheet-price { margin: 8px 0 0; font-size: 1.25rem; font-weight: 600; color: var(--choc-soft); }
.sheet-note { margin: 6px 0 0; color: var(--muted); }
.sheet-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(71, 33, 12, .75); color: var(--sand-light); font-size: 1.5rem; line-height: 1; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

:root.dark-theme {
  --sand: #281a12;
  --sand-light: #3a271c;
  --cream: #1f140e;
  --choc: #dac2a8;
  --choc-soft: #c4a98a;
  --muted: #a38d7a;
  --sold: #7a6a5d;
  color-scheme: dark;
}

[hidden] { display: none !important; }
/* A cafe without a logo shows its name instead (cafe.js, data-cafe-wordmark). */
.wordmark { display: grid; gap: .25em; justify-items: center; text-align: center; color: var(--choc); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; }
.wordmark small { font-size: .36em; font-weight: 500; letter-spacing: .3em; color: var(--choc-soft, var(--muted)); }
.wordmark small:empty { display: none; }
.wordmark { font-size: clamp(2.2rem, 9vw, 3.4rem); padding: 1rem 0; }