/* ============================================================
   Oxford Social — menu page (loaded AFTER css/styles.css)
   Page-scoped classes only; global components live in styles.css.
   js/menu.js keeps --nav-h / --tabs-h up to date for the sticky
   tab strip and the anchor scroll offsets below.
   Everything consumes the contextual -c tokens so it reads
   correctly on the dark default AND inside .theme-light moments.
   ============================================================ */

/* ----- Student Mondays banner — hairline band ----- */
.deal-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.1rem;
  padding: 1.05rem clamp(1.2rem, 5vw, 3rem);
  text-align: center;
  background: var(--bg-alt-c);
  border-bottom: 1px solid var(--line-c);
}
.deal-banner p { font-size: 0.92rem; color: var(--muted-c); }
.deal-banner strong { color: var(--ink-c); font-weight: 500; }

/* ----- Sticky category tab strip (solid dark, under the fixed nav) ----- */
.menu-tabs {
  position: sticky;
  top: var(--nav-h, 76px);
  z-index: 40;
  background: var(--bg-c);
  border-bottom: 1px solid var(--line-c);
}
.menu-tabs__strip {
  position: relative; /* offsetLeft anchor for the auto-centre scroll */
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem);
}
.menu-tabs__strip::-webkit-scrollbar { display: none; }

/* Skeleton tabs shown before the menu arrives */
.menu-tabs__strip .tab.skel { border-radius: 2px; margin: 0.55rem 0.15rem; padding: 0.35rem 1rem; }

/* ----- Menu body ----- */
.menu-section { padding-top: clamp(2.4rem, 6vw, 4rem); }
.menu-wrap { max-width: 800px; margin: 0 auto; }

.menu-cat {
  /* Anchor jumps land clear of the fixed nav + sticky tab strip */
  scroll-margin-top: calc(var(--nav-h, 76px) + var(--tabs-h, 48px) + 16px);
}
.menu-cat + .menu-cat { margin-top: clamp(2.8rem, 7vw, 4.2rem); }
.menu-cat h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  color: var(--ink-c);
}
.menu-cat__note {
  margin-top: 0.55rem;
  color: var(--accent-c);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ----- Items with dotted price leaders ----- */
.menu-list {
  list-style: none;
  margin-top: 1.4rem;
  border-top: 1px solid var(--ink-c); /* editorial top rule, echoes .card */
}
.menu-item {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-c);
}
.menu-item:last-child { border-bottom: 0; }

.menu-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.menu-item__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  min-width: 0;
}
.menu-item__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--ink-c);
}
.menu-item__dots {
  flex: 1 1 1.6rem;
  min-width: 1.6rem;
  border-bottom: 1px dotted var(--line-c);
  transform: translateY(-4px);
}
.menu-item__price {
  white-space: nowrap;
  color: var(--accent-c);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.menu-item__desc {
  margin-top: 0.3rem;
  max-width: 56ch;
  color: var(--muted-c);
  font-size: 0.92rem;
}

/* ----- Tag badge variants (compose with the global outlined .badge) -----
   v4 mono: --ok/--bad are functional feedback only, so dietary/spicy tags
   are quiet outlined mono chips — the label does the work; "Popular"
   (badge--gold, now full-ink outlined) stays the only emphasised chip. */
.menu-tag--veggie,
.menu-tag--vegan {
  color: var(--muted-c);
  border-color: var(--line-c);
  background: transparent;
}
.menu-tag--spicy {
  color: var(--ink-c);
  border-color: var(--line-c);
  background: transparent;
}

/* ----- Error state ----- */
.menu-error {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}
.menu-error__title {
  font-size: 1.9rem;
  margin-bottom: 0.5rem;
  color: var(--ink-c);
}
.menu-error__actions { margin-top: 1.3rem; }

/* ----- Bottom CTA ----- */
.menu-cta__actions { margin-top: 1.8rem; }

/* ----- Small screens ----- */
@media (max-width: 480px) {
  .menu-item__name { font-size: 1.08rem; }
  .menu-item__price { font-size: 0.9rem; }
  .deal-banner p { font-size: 0.85rem; }
}