/* ============================================================================
   Menu-all.com — Menu Page only styles.
   Loaded after main.css. Plain CSS using the --ma-* tokens from main.css.
   ========================================================================== */

/* Anchored menu sections must clear the sticky header + category bar. */
.ma-menu-page { scroll-padding-top: 8.5rem; }
.ma-menu-cat { scroll-margin-top: 8.5rem; }

/* Header-TOC anchor targets (added to the global 5.5rem scroll-padding).
   Sections below the category bar must also clear its ~3.6rem height. */
#photos { scroll-margin-top: 0; }
#menu,
#highlights,
#notes,
#fit,
#info,
#faq { scroll-margin-top: 3.5rem; }

/* Sticky horizontal category navigation. */
.ma-catnav {
  position: sticky;
  top: var(--ma-header-h);
  z-index: 30;
  background: rgba(250, 246, 239, 0.92);
  border-top: 1px solid var(--ma-line);
  border-bottom: 1px solid var(--ma-line);
  transition: box-shadow 0.2s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .ma-catnav { background: rgba(250, 246, 239, 0.8); backdrop-filter: blur(8px); }
}
.ma-catnav.is-stuck { box-shadow: 0 10px 24px -20px rgba(33, 27, 21, 0.45); }

.ma-catnav__track {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding: 0.7rem 0; scroll-snap-type: x proximity;
}
.ma-cat-link {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  white-space: nowrap;
  border: 1px solid var(--ma-line); border-radius: 999px;
  background: var(--ma-paper); color: var(--ma-muted);
  padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ma-cat-link:hover { color: var(--ma-ink); border-color: rgba(33, 27, 21, 0.2); }
.ma-cat-link--active,
.ma-cat-link[aria-current="true"] {
  background: var(--ma-ember); border-color: var(--ma-ember); color: #fff;
}

/* Menu item rows with a dotted price leader. */
.ma-dish { display: flex; gap: 1rem; padding: 1rem 0; }
.ma-dish + .ma-dish { border-top: 1px solid var(--ma-line); }
.ma-dish__media {
  flex: 0 0 auto; width: 76px; height: 76px;
  border-radius: 0.7rem; overflow: hidden; background: var(--ma-line);
}
.ma-dish__media img { width: 100%; height: 100%; object-fit: cover; }
.ma-dish__body { flex: 1 1 auto; min-width: 0; }
.ma-dish__head { display: flex; align-items: baseline; gap: 0.5rem; }
.ma-dish__name { font-weight: 600; color: var(--ma-ink); }
.ma-dish__leader {
  flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ma-muted) 45%, transparent);
  transform: translateY(-0.3rem);
}
.ma-dish__price {
  flex: 0 0 auto; font-family: "Sora", system-ui, sans-serif;
  font-weight: 600; color: var(--ma-ink); font-variant-numeric: tabular-nums;
}
.ma-dish__price--none { color: var(--ma-muted); font-weight: 500; font-size: 0.85rem; }
.ma-dish__desc { margin-top: 0.25rem; font-size: 0.9rem; line-height: 1.5; color: var(--ma-muted); }
.ma-dish__tags { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Full-width background band — sets the menu-items block apart from the page. */
.ma-band {
  background: var(--ma-paper);
  border-top: 1px solid var(--ma-line);
  border-bottom: 1px solid var(--ma-line);
}

/* Category heading (H3 under the section H2). */
.ma-menu-cat__title {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700; font-size: 1.375rem; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ma-ink);
}

/* Menu photos mosaic (lead tile + grid). */
.ma-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.ma-photos__item {
  position: relative; overflow: hidden; border-radius: 0.85rem;
  background: var(--ma-line); aspect-ratio: 1 / 1; margin: 0;
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
}
.ma-photos__item:focus-visible { outline: 2px solid var(--ma-ember); outline-offset: 2px; }
.ma-photos__item:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.ma-photos__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.ma-photos__item:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .ma-photos__item img { transition: none; } }
@media (min-width: 768px) {
  .ma-photos { grid-template-columns: repeat(4, 1fr); }
  .ma-photos__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
}

/* Price & availability note — clear, calm, not alarming. */
.ma-note {
  border-left: 3px solid var(--ma-honey);
  background: var(--ma-honeytint);
  border-radius: 0.5rem;
}