/* Marvel Padel cafe menu - clean mobile-first layout, v8 */
:root {
  --ink: #071316;
  --ink-soft: #0d1c20;
  --paper: #fdfcf9;
  --text: #10191c;
  --muted: #667074;
  --gold: #d2a64b;
  --gold-light: #efd58e;
  --line: rgba(210, 166, 75, 0.26);
  --page-max: 1180px;
  --radius-image: 34px;
  --radius-sheet: 34px;
  --shadow: 0 28px 80px rgba(0,0,0,.25);
  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 6%, rgba(210,166,75,.08), transparent 28rem),
    radial-gradient(circle at 92% 28%, rgba(86,123,113,.08), transparent 34rem),
    var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 999;
  left: 16px;
  top: 12px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--text);
}
.skip-link:focus { transform: translateY(0); }

.page-header {
  width: min(var(--page-max), calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; width: clamp(145px, 38vw, 230px); }
.brand img { width: 100%; height: auto; }
.page-title { text-align: right; }
.page-title p {
  margin: 0 0 6px;
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.page-title h1 {
  margin: 0;
  font-size: clamp(26px, 7vw, 48px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.045em;
}

/* Liquid-glass category navigation. The menu itself remains solid for legibility. */
.glass-nav {
  position: sticky;
  z-index: 50;
  top: 10px;
  width: min(var(--page-max), calc(100% - 24px));
  margin: 8px auto 0;
  border: 1px solid rgba(239,213,142,.27);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(19,36,40,.82), rgba(4,14,17,.68));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 16px 46px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  overflow: hidden;
}
.glass-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% -40%, rgba(255,255,255,.18), transparent 44%);
}
.glass-nav__track {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}
.glass-nav__track::-webkit-scrollbar { display: none; }
.glass-nav a {
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .025em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.glass-nav a:hover,
.glass-nav a:focus-visible { color: #fff; border-color: rgba(210,166,75,.36); outline: none; }
.glass-nav a.is-active {
  color: #15191a;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.18);
}

.menu-layout {
  width: min(var(--page-max), calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0 clamp(48px, 8vw, 80px);
}
.menu-section {
  scroll-margin-top: 94px;
  margin: 0 0 clamp(88px, 17vw, 156px);
}
.menu-section:last-child { margin-bottom: 0; }
.section-heading {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 24px);
  margin: 0 4px 24px;
}
.section-heading__title {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(9px, 2vw, 14px);
}
.section-mark {
  flex: 0 0 auto;
  width: clamp(30px, 6.4vw, 48px);
  height: auto;
  margin-top: 0;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.2));
}
.section-heading h2 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(40px, 11vw, 80px);
  line-height: .9;
  font-weight: 300;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.section-rule {
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(210,166,75,.7), rgba(210,166,75,0));
}

.section-card { position: relative; }
.section-photo {
  position: relative;
  z-index: 1;
  height: clamp(245px, 66vw, 430px);
  margin: 0;
  border: 2px solid var(--gold);
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #1a2324;
  box-shadow: 0 20px 60px rgba(0,0,0,.23);
}
.section-photo picture, .section-photo img { width: 100%; height: 100%; }
.section-photo img {
  object-fit: cover;
  transform: scale(1.015);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.section-card:hover .section-photo img { transform: scale(1.035); }
.section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08));
}
.section-photo--coffee img { object-position: 55% 54%; }
.section-photo--snacks img { object-position: 76% 52%; }
.section-photo--food img { object-position: 69% 54%; }
.section-photo--tropicana img { object-position: 60% 50%; }
.section-photo--beer-soft-drinks img { object-position: 61% 54%; }
.section-photo--spirits img { object-position: 51% 55%; }
.section-photo--spritz img { object-position: 68% 52%; }

.menu-sheet {
  position: relative;
  z-index: 2;
  margin: -34px 0 0;
  padding: clamp(38px, 8vw, 64px) clamp(24px, 6.5vw, 58px) clamp(42px, 9vw, 70px);
  border: 1px solid rgba(210,166,75,.52);
  border-radius: var(--radius-sheet);
  color: var(--text);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.menu-groups {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
}
.menu-group {
  min-width: 0;
  padding: 25px 0;
  border-top: 1px solid rgba(18,33,37,.10);
}
.menu-group:first-child { padding-top: 0; border-top: 0; }
.menu-group:last-child { padding-bottom: 0; }
.menu-group h3 {
  margin: 0 0 12px;
  color: #a97820;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.price-list li {
  display: grid;
  grid-template-columns: minmax(0,1fr) max-content;
  align-items: start;
  gap: 18px;
  font-size: clamp(17px, 4.75vw, 21px);
  line-height: 1.36;
  letter-spacing: -.02em;
}
.item-name { min-width: 0; overflow-wrap: anywhere; }
.item-price {
  padding-top: .02em;
  font-weight: 300;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.menu-group--hero-list .price-list { gap: 8px; }
.menu-group.menu-group--extras {
  margin-top: 26px;
  padding: 22px 20px 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(210,166,75,.09), rgba(210,166,75,.025));
}
.menu-group--extras h3 { margin-bottom: 14px; }
.menu-group--extras .price-list li { font-size: clamp(15px, 4.2vw, 18px); }
.menu-group--spritz .price-list li { font-size: clamp(22px, 6vw, 34px); }
.menu-group.menu-group--offer {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-top: 30px;
  padding: 28px 22px 32px;
  border: 1px solid rgba(239,213,142,.66);
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 92% -20%, rgba(239,213,142,.28), transparent 46%),
    linear-gradient(135deg, #111f22 0%, #071316 68%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 44px rgba(7,19,22,.20);
}
.menu-group--offer::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  right: -92px;
  bottom: -106px;
  border-radius: 50%;
  border: 1px solid rgba(239,213,142,.24);
  box-shadow: 0 0 0 22px rgba(210,166,75,.035), 0 0 0 46px rgba(210,166,75,.025);
}
.offer-copy,
.offer-deal { position: relative; z-index: 1; }
.offer-copy { min-width: 0; }
.offer-title {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 10.5vw, 62px);
  line-height: .82;
  font-family: var(--font-sans);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.075em;
  text-transform: lowercase;
  white-space: nowrap;
}
.offer-drinks {
  margin: 15px 0 0;
  color: var(--gold-light);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.offer-deal {
  min-width: 106px;
  margin: 0;
  padding: 12px 15px 14px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 18px;
  color: #111719;
  background: linear-gradient(145deg, var(--gold-light), var(--gold));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 12px 28px rgba(0,0,0,.24);
  text-align: center;
  transform: rotate(-1.2deg);
}
.offer-deal span {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.offer-deal strong {
  display: block;
  font-size: clamp(27px, 7vw, 38px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.045em;
  white-space: nowrap;
}


@media (min-width: 720px) {
  .page-header { padding-top: 46px; }
  .glass-nav a { padding: 11px 16px; font-size: 13px; }
  .menu-layout { padding-top: 78px; }
  .menu-sheet { margin: -48px 34px 0; }
  .menu-groups { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 44px; }
  .menu-group { padding: 28px 0; break-inside: avoid; }
  .menu-group:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .menu-group--hero-list { grid-column: 1 / -1; }
  .menu-group--hero-list .price-list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 46px; }
  .menu-group--extras, .menu-group--offer { align-self: start; margin-top: 0; }
  .menu-group--spritz { align-self: center; }
  .menu-groups--spritz { grid-template-columns: minmax(0, 1fr); }
  .menu-groups--spritz .menu-group--offer { margin-top: 26px; }
}

@media (min-width: 1040px) {
  .page-header { width: min(var(--page-max), calc(100% - 64px)); }
  .glass-nav { width: min(var(--page-max), calc(100% - 64px)); }
  .menu-layout { width: min(var(--page-max), calc(100% - 64px)); }
  .section-heading { margin-left: 18px; margin-right: 18px; }
  .section-photo { height: 430px; }
  .menu-sheet { margin: -70px 62px 0; }
  .menu-groups:not(.menu-groups--coffee):not(.menu-groups--spritz) { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 48px; }
  .menu-groups:not(.menu-groups--coffee):not(.menu-groups--spritz) .menu-group:nth-child(-n+3) { border-top: 0; padding-top: 0; }
  .menu-groups--coffee { grid-template-columns: 2fr 1fr; align-items: start; }
  .menu-groups--coffee .menu-group--hero-list { grid-column: auto; }
  .menu-groups--coffee .menu-group--hero-list .price-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .menu-groups--spritz { grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr); align-items: center; }
  .menu-groups--spritz .menu-group--offer { margin-top: 0; }
}

/* Stack the Fizz Friday copy and price badge on phone-sized viewports.
   This prevents the italic title from colliding with the badge when iOS uses
   the wider native Avenir glyph metrics. */
@media (max-width: 640px) {
  .menu-group.menu-group--offer {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 26px 22px 24px;
  }
  .offer-copy { width: 100%; }
  .offer-title {
    max-width: 100%;
    font-size: clamp(36px, 11vw, 50px);
    white-space: nowrap;
  }
  .offer-drinks {
    max-width: none;
    margin-top: 14px;
  }
  .offer-deal {
    justify-self: end;
    min-width: 108px;
    margin-top: 0;
  }
}

@media (max-width: 430px) {
  .page-header { width: calc(100% - 32px); padding-top: 28px; }
  .page-title p { display: none; }
  .brand { width: 142px; }
  .glass-nav { width: calc(100% - 16px); border-radius: 19px; }
  .menu-layout { width: calc(100% - 28px); }
  .section-heading { margin-left: 4px; margin-right: 4px; gap: 12px; }
  .section-heading__title { gap: 8px; }
  .section-mark { width: 30px; margin-top: 0; }
  .section-photo { border-radius: 28px; }
  .menu-sheet { border-radius: 30px; }
  .price-list li { gap: 12px; }
  .menu-group.menu-group--offer {
    gap: 18px;
    padding: 24px 18px 22px;
  }
  .offer-title { font-size: clamp(35px, 11vw, 47px); }
  .offer-deal {
    min-width: 100px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-nav { background: rgba(8,23,26,.97); }
}