/* ==========================================================================
   PUPUSAS LOCAS — MENU PAGE (menu.html)
   Loaded after main.css. Mobile-first, same tokens as the rest of the site.
   ========================================================================== */

/* Jump links land below the sticky header + category tabs */
html {
  scroll-padding-top: calc(var(--header-height) + var(--menu-tabs-height) + 16px);
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--header-height-desktop) + var(--menu-tabs-height) + 16px);
  }
}

/* ---------- 01. Page banner: shared, lives in main.css (section 90) ---------- */

/* ---------- 02. Sticky category links (anchors, text only) ---------- */
.menu-tabs {
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-header) - 1);
  padding-top: var(--header-edge-height);
  background-color: var(--menu-tabs-bg);
  backdrop-filter: blur(8px);
  border-block: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-tabs__list {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: 4px;
}

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

.menu-tabs__list li {
  flex-shrink: 0;
}

.menu-tabs__link {
  display: block;
  padding-block: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-700);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.menu-tabs__link:hover {
  color: var(--color-ink);
}

.menu-tabs__link.is-active {
  color: var(--color-orange-dark);
  border-bottom-color: var(--color-orange);
}

@media (min-width: 1024px) {
  .menu-tabs {
    top: var(--header-height-desktop);
  }
}

/* Center the links only when all 10 fit; below this they scroll sideways */
@media (min-width: 1280px) {
  .menu-tabs__list {
    justify-content: center;
    overflow: visible;
  }
}
/* ---------- 03. Category sections ---------- */
.menu-cat {
  --cat-color: var(--color-orange-red);
  --cat-tint: var(--color-orange-light);
  position: relative;
  padding-block: var(--section-padding);
}

.menu-cat--blue  { --cat-color: var(--color-blue);  --cat-tint: var(--color-blue-light); }
.menu-cat--green { --cat-color: var(--color-green); --cat-tint: var(--color-green-light); }
.menu-cat--red   { --cat-color: var(--color-red);   --cat-tint: #FDE4DF; }

.menu-cat--alt {
  background-color: var(--menu-alt-bg);
}

.menu-cat__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

/* Feature photo */
.menu-cat__feature {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--cat-color);
}

.menu-cat__feature img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.menu-cat__feature:hover img {
  transform: scale(1.05) rotate(-1deg);
}

/* Heading */
.menu-cat__head {
  margin-bottom: var(--space-md);
}

.menu-cat__head .section-head__kicker {
  color: var(--cat-color);
}

.menu-cat--blue .menu-cat__head .section-head__kicker {
  color: var(--color-blue-dark);   /* darker shade keeps small text readable */
}

.menu-cat__title {
  font-size: var(--fs-2xl);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.menu-cat__intro {
  margin-top: var(--space-2xs);
  color: var(--color-gray-700);
}

/* ---------- 04. Dish list ---------- */
.menu-item {
  display: grid;
  grid-template-columns: var(--menu-thumb-size) 1fr;
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-md);
  border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
}

.menu-item:last-child {
  border-bottom: 0;
}

.menu-item__thumb {
  width: var(--menu-thumb-size);
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--cat-tint);
  border: 3px solid var(--color-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--cat-color);
}

.menu-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.menu-item:hover .menu-item__thumb img {
  transform: scale(1.15) rotate(-8deg);
}

.menu-item__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: var(--cat-color);
}

.menu-item__name {
  font-size: var(--fs-md);
  line-height: 1.2;
  color: var(--color-charcoal);
}

.menu-item__raw {
  margin-left: 2px;
  color: var(--color-red);
}

/* Dotted leader between the name and the price */
.menu-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: var(--space-2xs);
  padding: 0.2em 0.75em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  background-color: var(--color-yellow);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
}

.menu-item__desc {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
}

.menu-item__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.menu-item__sizes li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.85em;
  font-size: var(--fs-sm);
  background-color: var(--cat-tint);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
}

/* ---------- 05. Pupusa flavors ---------- */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--space-sm);
}

.flavor {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-xs);
  padding: 0.85em 1em;
  background-color: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--cat-color);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.flavor:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--cat-color);
}

.flavor__name {
  font-weight: var(--fw-black);
}

.menu-cat__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-md);
  padding: 0.6em 1.1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  background-color: var(--cat-tint);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
}

.menu-cat__note .fi {
  color: var(--cat-color);
}

/* ---------- 06. Compact list (sides) ---------- */
.menu-compact {
  display: grid;
  gap: var(--space-xs) var(--space-xl);
}

.menu-compact__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.menu-compact__item .fi {
  color: var(--cat-color);
}

.menu-compact__sizes {
  margin-left: 0.4em;
  font-weight: var(--fw-bold);
  color: var(--color-gray-700);
}

.menu-compact__name {
  font-weight: var(--fw-black);
}

/* ---------- 07. Choice of meat / vegetarian options ---------- */
.menu-options {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.option-box {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: 3px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 var(--cat-color);
}

.option-box__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-md);
  text-transform: uppercase;
}

.option-box__title .fi {
  color: var(--cat-color);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.chips li {
  padding: 0.35em 0.85em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  background-color: var(--cat-tint);
  border-radius: var(--radius-pill);
}

/* ---------- 08. Drinks ---------- */
.menu-drinks {
  color: var(--color-white);
  background:
    radial-gradient(rgba(255, 255, 255, 0.12) 2px, transparent 2.5px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 30% 20%, var(--menu-drinks-bg) 0%, var(--color-blue-dark) 55%, var(--menu-drinks-edge) 100%);
}

.menu-drinks .section-head__kicker {
  color: var(--color-yellow);
}

.menu-drinks .section-head__title {
  color: var(--color-white);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.menu-drinks .menu-cat__intro {
  color: rgba(255, 255, 255, 0.9);
}

.drink-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* 3 + 2 on desktop, last row centered */
  gap: var(--space-xl) var(--space-lg);
  padding-top: var(--space-md);
}

.drink-grid > li {
  flex: 1 1 260px;
  max-width: 360px;
}

.drink-card {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 3px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--color-ink);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.drink-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 12px 12px 0 var(--color-ink);
}

.drink-card__icon {
  position: absolute;
  top: -26px;
  left: var(--space-lg);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 1.4rem;
  color: var(--color-orange-red);
  background-color: var(--color-yellow);
  border: 3px solid var(--color-ink);
  border-radius: 50%;
}

.drink-card__title {
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

.drink-card__sub {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-blue-dark);
}

.drink-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.drink-card__list li {
  padding: 0.3em 0.85em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  background-color: var(--color-blue-light);
  border-radius: var(--radius-pill);
}

/* ---------- 09. Notes + CTA ---------- */
.menu-cta {
  padding-block: var(--section-padding);
}

.menu-warning {
  max-width: 44rem;
  margin: 0 auto var(--space-xl);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--color-gray-700);
}

.menu-warning strong {
  color: var(--color-red);
}

.menu-cta__box {
  padding: clamp(2rem, 1rem + 4vw, 4rem) var(--space-lg);
  color: var(--color-white);
  text-align: center;
  background: var(--favs-bg);
  border: 3px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 10px 10px 0 var(--color-ink);
}

.menu-cta__title {
  font-size: var(--fs-2xl);
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.menu-cta__title span {
  color: var(--color-yellow);
}

.menu-cta__box p {
  margin-block: var(--space-sm) var(--space-lg);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.menu-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* ---------- 10. Tablet & desktop ---------- */
@media (min-width: 768px) {
  .menu-compact {
    grid-template-columns: 1fr 1fr;
  }

  .menu-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  /* Photo on one side, list on the other; alternate sides per category */
  .menu-cat__inner {
    grid-template-columns: minmax(300px, 0.8fr) 1.4fr;
    gap: var(--space-2xl);
  }

  .menu-cat--alt .menu-cat__inner {
    grid-template-columns: 1.4fr minmax(300px, 0.8fr);
  }

  .menu-cat--alt .menu-cat__feature {
    order: 2;
  }

  /* Photo stays in view while scrolling the list */
  .menu-cat__feature {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--menu-tabs-height) + var(--space-lg));
  }

  .menu-cat__feature img {
    aspect-ratio: 640 / 780;
  }
}