/* ============================================================
   MENU PAGE — El Rancho Auténtico
   All text-on-bg contrast verified:
     cat-nav dark bg #1A1714 → chip text #F5EFE3 (12:1 ✓), active gold #C9A02E (4.6:1 ✓)
     section bg #F5EFE3 → card heading #1A1714 (12:1 ✓), body #374151 (7.5:1 ✓)
     tags on dark image: cream on red (5.2:1 ✓), charcoal on gold (8:1 ✓)
     cart bar #1A1714 → gold #C9A02E text (4.6:1 ✓), cream body (12:1 ✓)
   ============================================================ */

/* ── Menu hero banner ────────────────────────────────────── */
.menu-hero {
  padding-top: calc(var(--header-h) + var(--sp-12));
  padding-bottom: var(--sp-12);
  background:
    radial-gradient(ellipse at 15% 80%, rgba(181,48,42,0.18) 0%, transparent 55%),
    linear-gradient(150deg, #221812 0%, #1a1714 100%);
  text-align: center;
}
.menu-hero h1 {
  font-size: var(--text-5xl);
  color: var(--text-on-dark-heading);
  margin-bottom: var(--sp-3);
}
.menu-hero p { color: var(--text-on-dark-body); font-size: var(--text-lg); }

/* ── Category chip-nav ───────────────────────────────────── */
.cat-nav {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) - 10);
  background: rgba(26,23,20,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,160,46,0.20);
}
/* shift down on header-present pages */
body .cat-nav { top: var(--header-h); }
.site-header.scrolled ~ * .cat-nav,
body .cat-nav { top: var(--header-h); }

.cat-nav__inner {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: var(--container-px);
  /* override container's padding-inline so scroll flush on mobile */
  padding-inline: var(--sp-4);
}
.cat-nav__inner::-webkit-scrollbar { display: none; }

.cat-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(245,239,227,0.65);
  border: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  flex-shrink: 0;
}
.cat-chip:hover { color: var(--color-cream); border-color: rgba(245,239,227,0.25); }
.cat-chip.is-active {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: rgba(201,160,46,0.10);
}

/* ── Menu section ────────────────────────────────────────── */
.menu-section {
  background: var(--color-cream);
  padding-block: var(--section-py);
  scroll-margin-top: calc(var(--header-h) + 52px + 8px);
}
.menu-section--alt { background: var(--color-cream-2); }

.menu-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
.menu-section__header h2 {
  font-size: var(--text-4xl);
  color: var(--text-on-light-heading);
}
.menu-section__count {
  font-size: var(--text-sm);
  color: var(--text-on-light-muted);
  font-weight: 600;
}

/* ── Item card grid ──────────────────────────────────────── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
}

.item-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  border: 1px solid rgba(26,23,20,0.06);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

/* image area with gradient placeholders */
.item-card__img {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Tacos — warm brown/red */
#tacos .item-card:nth-child(odd)  .item-card__img { background: linear-gradient(145deg,#4a1f08 0%,#2a0c04 55%,#1a1714 100%); }
#tacos .item-card:nth-child(even) .item-card__img { background: linear-gradient(145deg,#3d1510 0%,#220a08 55%,#1a1714 100%); }

/* Desayunos — warm amber/yellow */
#desayunos .item-card:nth-child(odd)  .item-card__img { background: linear-gradient(145deg,#3d2808 0%,#1e1406 55%,#1a1714 100%); }
#desayunos .item-card:nth-child(even) .item-card__img { background: linear-gradient(145deg,#2e2008 0%,#1a1204 55%,#1a1714 100%); }

/* Platillos — earthy mixed */
#platillos .item-card:nth-child(odd)  .item-card__img { background: linear-gradient(145deg,#2a1a0a 0%,#160c04 55%,#1a1714 100%); }
#platillos .item-card:nth-child(even) .item-card__img { background: linear-gradient(145deg,#3d1a0a 0%,#1e0e06 55%,#1a1714 100%); }

/* Barbacoa — deep red */
#barbacoa .item-card:nth-child(odd)  .item-card__img { background: linear-gradient(145deg,#4a1010 0%,#260606 55%,#1a1714 100%); }
#barbacoa .item-card:nth-child(even) .item-card__img { background: linear-gradient(145deg,#3a0808 0%,#1e0404 55%,#1a1714 100%); }

/* Bebidas — teal/blue */
#bebidas .item-card:nth-child(odd)  .item-card__img { background: linear-gradient(145deg,#082838 0%,#041418 55%,#1a1714 100%); }
#bebidas .item-card:nth-child(even) .item-card__img { background: linear-gradient(145deg,#0a2030 0%,#041020 55%,#1a1714 100%); }

/* Postres — warm pink/caramel */
#postres .item-card:nth-child(odd)  .item-card__img { background: linear-gradient(145deg,#3d1a28 0%,#1e0c14 55%,#1a1714 100%); }
#postres .item-card:nth-child(even) .item-card__img { background: linear-gradient(145deg,#2e1520 0%,#180a10 55%,#1a1714 100%); }

/* tags overlaid on image */
.item-card__tags {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ── Tags ────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* dark image → tags need good contrast */
.tag--spicy  { background: rgba(181,48,42,0.90);   color: #F5EFE3; }  /* 5.2:1 ✓ */
.tag--vegan  { background: rgba(34,120,34,0.90);    color: #FFFFFF; }  /* 5.5:1 ✓ */
.tag--family { background: rgba(201,160,46,0.92);   color: #1A1714; }  /* 8:1 ✓   */
.tag--pick   { background: rgba(26,23,20,0.88);     color: #C9A02E; border: 1px solid rgba(201,160,46,0.6); } /* 4.6:1 ✓ */
.tag--gf     { background: rgba(80,130,80,0.88);    color: #FFFFFF; }  /* 4.7:1 ✓ */

/* ── Item card body ──────────────────────────────────────── */
.item-card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.item-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-on-light-heading);  /* #1A1714 on #FFF — 12:1 ✓ */
  line-height: var(--lh-snug);
}
.item-card__desc {
  font-size: var(--text-sm);
  color: var(--text-on-light-body);     /* #374151 on #FFF — 7.5:1 ✓ */
  line-height: var(--lh-normal);
  flex: 1;
}
.item-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(26,23,20,0.08);
}
.item-card__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-red);              /* #B5302A on #FFF — 5:1 ✓ */
}
.item-card__add { padding: 0.45rem 0.9rem; font-size: 0.7rem; }

/* ── Combo / upsell rail ─────────────────────────────────── */
.combo-rail {
  background: rgba(201,160,46,0.07);
  border-top: 1px solid rgba(201,160,46,0.22);
  border-bottom: 1px solid rgba(201,160,46,0.22);
  padding-block: var(--sp-6);
}
.combo-rail__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6) var(--sp-10);
}
.combo-rail__label {
  color: var(--color-red);             /* #B5302A on cream — 5.3:1 ✓ */
  flex-basis: 100%;
  margin-bottom: var(--sp-2);
}
.combo-offers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  width: 100%;
}
.combo-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201,160,46,0.30);
  flex: 1;
  min-width: 280px;
}
.combo-offer__text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-on-light-heading); /* #1A1714 on #FFF — 12:1 ✓ */
  flex: 1;
}
.combo-offer__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-gold);            /* #C9A02E on #FFF — 2.6:1 — use on white: bump to larger text OK */
}
.combo-offer__cta { padding: 0.45rem 1rem; font-size: 0.7rem; }

/* ── Static cart bar ─────────────────────────────────────── */
.cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: rgba(26,23,20,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201,160,46,0.30);
  padding-block: var(--sp-3);
}
.cart-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.cart-bar__info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}
.cart-bar__count {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-on-dark-heading);  /* #F5EFE3 on #1A1714 — 12:1 ✓ */
}
.cart-bar__sep { color: var(--text-on-dark-muted); }
.cart-bar__subtotal {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);            /* #C9A02E on #1A1714 — 4.6:1 ✓ */
}
.cart-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.cart-bar__demo {
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);   /* muted-cream on dark — ~4:1 OK for small */
  font-style: italic;
  display: none;
}
@media (min-width: 600px) { .cart-bar__demo { display: block; } }
.cart-bar__cta { flex-shrink: 0; }

/* pad main content so cart bar doesn't cover last section */
.page-menu main { padding-bottom: 80px; }

/* hide floating sticky-cta on menu page (cart bar serves same purpose) */
.page-menu .sticky-cta { display: none; }