/* =========================================================
   MENU
   ========================================================= */

/* ---------- Shared menu type ---------- */
.menu-band-title,
.menu-section-title,
.menu-item-title,
.menu-flip-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  margin: 0;
}
.menu-section-title {
  font-size: 50px;
  line-height: 1.1;
  color: var(--white);
  text-align: center;
}
.menu-item-title {
  font-size: 26px;
  line-height: 1.1;
  color: var(--white);
  text-align: center;
  margin-bottom: 15px;
}

/* Sections with the dark diagonal pattern over the colour */
.menu-pattern-section {
  position: relative;
  overflow: hidden;
}
.menu-pattern-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/menu/bg-pattern-1.svg") center center / cover no-repeat;
  filter: brightness(0%);
  opacity: .3;
  pointer-events: none;
}
.menu-pattern-section > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Flip boxes (push up on hover) ---------- */
.menu-flip {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: default;
}
.menu-flip-front,
.menu-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all .6s ease-in-out;
}
.menu-flip-front {
  text-align: center;
  transform: none;
}
.menu-flip-front img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.menu-flip-back {
  padding: 50px;
  text-align: center;
  transform: translateY(100%);
}
.menu-flip:hover .menu-flip-front,
.menu-flip:focus-within .menu-flip-front { transform: translateY(-100%); }
.menu-flip:hover .menu-flip-back,
.menu-flip:focus-within .menu-flip-back { transform: none; }

.menu-flip-text {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--primary);
}

/* ---------- Hero + sauce carousel ---------- */
.menu-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
}
/* Background layer moves up while scrolling (height set in main.js) */
.menu-hero-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary);
  transition: transform 1s cubic-bezier(0, .33, .07, 1.03);
  will-change: transform;
}
.menu-hero-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/menu/bg-pattern-3.svg") center center / cover no-repeat;
}
.menu-hero-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Hero heading – tilted heavy italic, set in type so the wording can change */
.menu-hero-heading {
  margin: 100px 0;
  font-family: var(--font-heading);
  font-size: 118px;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -2px;
  color: var(--white);
}
.menu-hero-heading span {
  display: block;
  font-size: 66%;
}

.menu-sauces {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  background-image: linear-gradient(180deg, rgba(225, 46, 30, 0) 50%, rgba(48, 5, 6, .54) 100%);
}
.menu-sauces-track {
  display: flex;
  gap: 10px;
  will-change: transform;
}
.menu-sauce-slide { flex: 0 0 auto; }

.menu-flip-sauce { height: 180px; }
.menu-flip-sauce .menu-flip-front,
.menu-flip-sauce .menu-flip-back {
  background: var(--flip-bg);
  padding: 30px;
}
.menu-flip-sauce .menu-flip-front img { width: var(--flip-img); }
.menu-flip-sauce .menu-flip-back { text-align: left; }
.menu-flip-title {
  font-size: 21px;
  line-height: 1;
  margin-bottom: 5px;
  color: var(--flip-title);
}
.menu-flip-sauce .menu-flip-text {
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  line-height: 23px;
  color: var(--flip-text);
}

/* Location tiles – same flip design, store name on the front, order link on the back */
.menu-flip-location .menu-flip-front {
  align-items: center;
  gap: 6px;
  color: var(--flip-title);
}
.menu-location-pin {
  font-size: 40px;
  line-height: 1;
}
.menu-location-name {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.05;
}
.menu-location-cta {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .85;
}
.menu-flip-location .menu-flip-back { padding: 16px 20px; }
.menu-flip-location .menu-flip-title { font-size: 17px; }
.menu-flip-location .menu-flip-text {
  font-size: 14px;
  line-height: 1.3;
}
.menu-flip-location .menu-flip-text a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.menu-location-btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  color: var(--flip-bg);
  background: var(--flip-title);
  text-decoration: none;
  transition: transform .2s;
}
.menu-location-btn:hover,
.menu-location-btn:focus-visible {
  color: var(--flip-bg);
  transform: translateY(-2px);
}

/* ---------- Bands ---------- */
.menu-band {
  background: var(--primary);
  border-top: 15px solid var(--secondary);
  border-bottom: 15px solid var(--secondary);
  padding: 20px 0;
}
.menu-band-title {
  font-size: 32px;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
}

/* ---------- Kebabs ---------- */
.menu-mains { margin: 60px 0 70px; }
.menu-mains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  align-items: end; /* photos line up even when a name wraps */
}
.menu-mains .menu-item-title { color: var(--primary); }
.menu-flip-main { aspect-ratio: 1 / 1; }
/* Store photos vary in shape – fill the square */
.menu-flip-main .menu-flip-front img,
.menu-flip-signature .menu-flip-front img { height: 100%; object-fit: cover; }

/* ---------- Signature boxes ---------- */
.menu-signature {
  background: var(--primary);
  padding: 70px 0;
}
.menu-signature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: end;
  margin-top: 50px;
}
.menu-flip-signature { aspect-ratio: 1 / 1; }
/* Cut-out tray PNGs – show the whole tray instead of cropping */
.menu-flip-signature .menu-flip-front img { object-fit: contain; }
.menu-flip-signature .menu-flip-back { padding: 30px;}
.menu-flip-signature .menu-flip-text { color: var(--white); }

/* ---------- Buttons ---------- */
.menu-cta {
  background: var(--primary);
  border-top: 15px solid var(--secondary);
  padding: 40px 0;
}
.menu-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.menu-btn-white {
  background: var(--white);
  color: var(--primary);
}
.menu-btn-white:hover,
.menu-btn-white:focus-visible { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .menu-flip-front,
  .menu-flip-back { transition: none; }
  .menu-hero-layer { transform: none !important; transition: none; }
}