/* Menu page hero and anchor navigation */

.menu-hero {
  padding-block: var(--space-8);
  background: var(--color-cream);
}

.menu-hero-grid {
  display: grid;
  gap: var(--space-6);
}

.menu-page-title {
  margin-top: var(--space-4);
  font-size: var(--font-size-display);
  letter-spacing: -0.055em;
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.menu-hero-copy {
  display: grid;
  align-content: end;
  gap: var(--space-5);
}

.menu-anchor-nav {
  display: grid;
  align-items: start;
  justify-items: center;
  border-block: 1px solid var(--color-border);
  background: var(--color-paper);
}

.menu-anchor-list {
  display: flex;
  width: 100%;
  justify-content: center;
}

.menu-anchor-list li {
  min-width: 0;
  flex: 1 1 25%;
}

.menu-anchor-list a {
  display: inline-flex;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-2);
  border-right: 1px solid var(--color-border);
  font-size: clamp(0.68rem, 2.6vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.menu-anchor-list li:first-child a {
  border-left: 1px solid var(--color-border);
}

.menu-anchor-list a:hover {
  text-decoration: none;
}

@media (max-width: 40rem) {
  .menu-anchor-list {
    flex-wrap: wrap;
  }

  .menu-anchor-list li {
    flex-basis: 50%;
  }

  .menu-anchor-list li:nth-child(3) a {
    border-left: 1px solid var(--color-border);
  }

  .menu-anchor-list li:nth-child(n + 3) a {
    border-top: 1px solid var(--color-border);
  }
}

/* Loading and fallback status */

.menu-status-region {
  display: grid;
}

.menu-loading,
.menu-load-warning {
  grid-area: 1 / 1;
  margin-block: var(--space-4);
}

.menu-loading {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-espresso);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.menu-loading[hidden],
.menu-load-warning[hidden] {
  display: none;
}

.menu-loading-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-espresso);
  border-radius: 50%;
  animation: menu-loading-spin 760ms linear infinite;
}

.menu-load-warning {
  padding: var(--space-4);
  border-left: 3px solid var(--color-wine);
  background: var(--color-wine-soft);
  color: var(--color-espresso);
  font-size: var(--font-size-small);
}

@keyframes menu-loading-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-loading-spinner {
    border-color: var(--color-espresso);
    animation: none;
  }
}

/* Menu sections and update-friendly product rows */

.menu-section {
  padding-block: max(var(--space-8), calc(var(--space-9) - var(--space-5)));
}

.menu-section:nth-of-type(even) {
  background: var(--color-cream);
}

.menu-section-header {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.menu-category-flow {
  display: grid;
  gap: var(--space-7);
}

/* The inactive desktop representation stays outside layout and the accessibility tree. */
.menu-category-columns {
  display: none;
}

.menu-category-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-7);
}

.menu-category {
  align-content: start;
}

.menu-category-title {
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-espresso);
  font-family: var(--font-body);
  font-size: var(--font-size-category);
  letter-spacing: -0.025em;
  line-height: 1;
}

.menu-list {
  display: grid;
}

.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.menu-item-name {
  color: var(--color-espresso);
  font-weight: 700;
  line-height: 1.35;
}

.menu-item-price {
  color: var(--color-espresso);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.menu-item-description {
  grid-column: 1;
  color: var(--color-cocoa);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.menu-item--unavailable .menu-item-name {
  color: var(--color-cocoa);
  text-decoration: line-through;
  text-decoration-color: var(--color-wine);
}

.menu-item-availability {
  grid-column: 1 / -1;
  color: var(--color-wine);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.35;
}

.menu-empty-state {
  padding-block: var(--space-5);
  color: var(--color-cocoa);
  font-size: var(--font-size-small);
  font-style: italic;
}

.menu-return {
  display: flex;
  justify-content: center;
  padding-block: clamp(var(--space-3), 1.5vw, var(--space-5));
  border-top: 1px solid var(--color-border);
}