/* ==========================================================================
   menu.css  -  the swipeable menu (#menu)

   Loaded after style.css and only ever adds to it. style.css is not edited:
   the dish, name, price and description styles (.menu-item, .menu-item-header,
   h4, .menu-price, p, .menu-note, .menu-buckets, .bucket-tag) are the site's
   own and are reused as they are.

   The twelve sections are the existing .menu-content panels, laid in one
   horizontal strip. The browser does the swiping (scroll-snap); menu.js adds
   the tabs, the arrows, mouse drag and the height that follows the card in view.
   Without menu.js the strip still swipes natively, so nothing here depends on it.
   ========================================================================== */

/* ---------- Tabs: twelve of them, so lighter than the old six ---------- */
.menu-tabs {
  position: relative;            /* menu.js centres the active tab in this row */
  gap: 8px;
  margin-bottom: 32px;
}

.menu-tabs .menu-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 18px;
  letter-spacing: 1.5px;
}

@media (max-width: 768px) {
  /* One scrolling row, bled to the screen edge, instead of five wrapped rows. */
  .menu-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 6px;
  }

  .menu-tabs::-webkit-scrollbar {
    display: none;
  }

  .menu-tabs .menu-tab {
    padding: 10px 16px;
  }
}

/* ---------- The strip ---------- */
.menu-carousel {
  position: relative;
}

.menu-strip {
  position: relative;            /* cards' offsetLeft is measured from here */
  display: flex;
  align-items: flex-start;       /* a card keeps its own height; menu.js sizes the strip to the card in view */
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;         /* smooth only when menu.js asks, and never under reduced motion */
  overscroll-behavior-x: contain;
  transition: height 0.35s ease;
}

.menu-strip:focus-visible {
  outline: 2px solid var(--nash-yellow);
  outline-offset: 4px;
  border-radius: 12px;
}

/* The scrollbar goes only once menu.js is running and the arrows exist. */
.menu-carousel.is-ready .menu-strip {
  scrollbar-width: none;
}

.menu-carousel.is-ready .menu-strip::-webkit-scrollbar {
  display: none;
}

/* Mouse drag (fine pointers). Snap is off while the mouse holds the strip. */
@media (hover: hover) and (pointer: fine) {
  .menu-carousel.is-ready .menu-strip {
    cursor: grab;
  }
}

.menu-strip.is-pressing {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.menu-strip.is-dragging {
  scroll-snap-type: none;
}

/* ---------- A card ----------
   The panels keep their .menu-content class (the corpus script finds them by it);
   style.css hides every one that is not .active, so show them all here, and drop
   the old fade, which would replay on every tab. */
.menu-strip > .menu-card {
  display: block;
  animation: none;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 40px 32px 44px;
  border: 1px solid rgba(248, 149, 34, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 34, 48, 0.45) 0%, rgba(14, 21, 28, 0.2) 100%);
}

@media (max-width: 768px) {
  .menu-strip {
    gap: 14px;
  }

  .menu-strip > .menu-card {
    padding: 28px 16px 32px;
  }
}

@media (max-width: 480px) {
  .menu-strip > .menu-card {
    padding: 24px 12px 28px;
  }
}

/* The card's name: Bebas, the site's display face, with a short red rule. */
.menu-card .menu-card-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--nash-yellow);
  margin: 0 0 28px;
}

.menu-card .menu-card-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--nash-red);
}

/* An odd last dish takes the full row instead of leaving a hole (desktop only;
   on a phone the grid is one column already). */
@media (min-width: 769px) {
  .menu-card .menu-grid > .menu-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Dish extras ---------- */
.menu-item p.menu-addon {
  margin-top: 6px;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  color: var(--white);
}

/* A second paragraph under a dish (the margarita's floater line). */
.menu-item p + p {
  margin-top: 4px;
}

/* ---------- Girl Dinner: one priced item, two pick lists ---------- */
.menu-card .menu-item--hero {
  justify-self: center;
  width: 100%;
  max-width: 760px;
  padding: 36px;
}

.menu-card .menu-item--hero .menu-item-header {
  margin-bottom: 4px;
}

.menu-card .menu-item--hero h4 {
  font-size: var(--t-h3);
}

.menu-card .menu-item--hero .menu-price {
  font-size: var(--t-h3);
}

.menu-item .menu-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.menu-item .menu-pick-label {
  flex: 0 0 100%;
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nash-orange);
}

.menu-pick-item {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(166, 44, 42, 0.25);
  border-radius: 30px;
  background: rgba(166, 44, 42, 0.12);
  color: var(--nash-red-light);
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* The commas exist for the text the chatbot reads. On the page the pills are
   the separators. */
.menu-sep {
  display: none;
}

@media (max-width: 480px) {
  .menu-card .menu-item--hero {
    padding: 24px 20px;
  }

  .menu-card .menu-item--hero .menu-price {
    font-size: var(--t-h3);
  }
}

/* ---------- Unpriced lists (beer, seltzers, sides) ----------
   They ride the site's existing .menu-buckets block (.buckets-title and
   .buckets-desc), which the corpus script already reads, and wear the site's
   existing .bucket-tag pill. Only the box is taken off. */
.menu-card .menu-roster {
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  background: none;
  border: 0;
  border-radius: 0;
}

.menu-card .menu-roster + .menu-roster {
  margin-top: 36px;
}

.menu-card .menu-roster .buckets-title:not(.menu-card-title) {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--nash-orange);
}

.menu-card .menu-roster .buckets-desc {
  margin: 0;
}

.menu-card .menu-roster .bucket-tags {
  list-style: none;
  padding: 0;
}

.menu-card .menu-roster .bucket-tag {
  padding: 10px 22px;
  font-size: var(--t-small);
}

/* ---------- Notes at the foot of a card ---------- */
.menu-card .menu-note {
  margin: 28px 0 0;
  font-size: var(--t-eyebrow);
}

.menu-card .menu-note--fine {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--gray-500);
}

/* ---------- Arrows and the status line ---------- */
.menu-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* No script, no arrows: they would do nothing. */
.menu-carousel:not(.is-ready) .menu-controls {
  display: none;
}

.menu-arrow {
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid rgba(248, 149, 34, 0.3);
  border-radius: 3px;
  color: var(--nash-orange);
  cursor: pointer;
  transition: all var(--transition);
}

.menu-arrow:hover {
  background: var(--nash-red);
  border-color: var(--nash-red);
  color: var(--white);
}

.menu-arrow:focus-visible {
  outline: 2px solid var(--nash-yellow);
  outline-offset: 3px;
}

/* aria-disabled, not disabled: a disabled button drops keyboard focus. */
.menu-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.menu-arrow[aria-disabled="true"]:hover {
  background: transparent;
  border-color: rgba(248, 149, 34, 0.3);
  color: var(--nash-orange);
}

.menu-status {
  min-width: 0;
  flex: 0 1 280px;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-300);
}

/* ---------- Reduced motion: no smooth anything ---------- */
@media (prefers-reduced-motion: reduce) {
  .menu-strip {
    scroll-behavior: auto;
    transition: none;
  }

  .menu-tabs {
    scroll-behavior: auto;
  }

  .menu-arrow {
    transition: none;
  }
}