/* Yaletown menu — dark shell experiment */

body.menu-page--yaletown {
  --menu-bg: var(--black);
  --menu-text: rgb(var(--cream-rgb) / 0.94);
  --menu-text-soft: rgb(var(--cream-rgb) / 0.76);
  --menu-text-muted: rgb(var(--cream-rgb) / 0.58);
  --menu-border: rgb(var(--cream-rgb) / 0.2);
  --menu-border-soft: rgb(var(--cream-rgb) / 0.1);
  --menu-surface: rgb(var(--cream-rgb) / 0.04);
  background: var(--menu-bg);
  color: var(--menu-text);
}

body.menu-page--yaletown .skip:focus {
  background: var(--black);
  color: var(--cream);
  outline-color: var(--burgundy);
}

body.menu-page--yaletown .menu-top {
  background: var(--menu-bg);
  border-bottom-color: var(--menu-border);
}

body.menu-page--yaletown .menu-top__kicker {
  color: var(--burgundy);
}

body.menu-page--yaletown .menu-top__note {
  color: var(--menu-text-soft);
}

body.menu-page--yaletown .menu-top__btn {
  color: var(--cream);
  border-color: var(--menu-border);
}

body.menu-page--yaletown .menu-top__btn--fill {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}

body.menu-page--yaletown .menu-top__btn:focus-visible {
  outline-color: var(--cream);
}

body.menu-page--yaletown .menu-top__ill {
  opacity: 0.22;
}

body.menu-page--yaletown .menu-nav__box {
  border-color: var(--menu-border);
  background: var(--menu-surface);
}

body.menu-page--yaletown .menu-nav__title {
  color: var(--cream);
}

body.menu-page--yaletown .menu-nav__box a {
  color: var(--menu-text);
}

body.menu-page--yaletown .menu-nav__box a:hover,
body.menu-page--yaletown .menu-nav__box a:focus-visible {
  background: rgb(var(--burgundy-rgb) / 0.22);
}

body.menu-page--yaletown .menu-nav__box a[aria-current="true"] {
  background: var(--burgundy);
  color: var(--cream);
}

body.menu-page--yaletown .menu-section {
  border-bottom-color: var(--menu-border-soft);
}

body.menu-page--yaletown .menu-h2 {
  color: var(--cream);
}

body.menu-page--yaletown .menu-section-note--lunch-hours {
  color: var(--burgundy);
}

body.menu-page--yaletown .menu-h3 {
  color: var(--burgundy);
}

body.menu-page--yaletown .mi-name {
  color: var(--menu-text);
}

body.menu-page--yaletown .mi-price {
  color: var(--cream);
}

body.menu-page--yaletown .mi-wine-size {
  color: rgb(var(--cream-rgb) / 0.72);
}

body.menu-page--yaletown .mi-desc {
  color: var(--menu-text-soft);
}

body.menu-page--yaletown .mi-drink-item {
  color: var(--menu-text-soft);
}

body.menu-page--yaletown .mi-desc--origin {
  color: rgb(var(--cream-rgb) / 0.68);
}

body.menu-page--yaletown .menu-disclaimer {
  color: var(--menu-text-muted);
}

body.menu-page--yaletown .pax-footer {
  --shell-bg: var(--black);
  --shell-bar: var(--black);
  background: var(--black);
  color: var(--cream);
}

@media (max-width: 900px) {
  body.menu-page--yaletown .menu-nav {
    background: linear-gradient(
      to bottom,
      var(--black) 78%,
      rgb(var(--black-rgb) / 0.96) 92%,
      transparent
    );
  }

  body.menu-page--yaletown .menu-nav__box {
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
  }

  body.menu-page--yaletown .menu-nav__box a {
    border-color: var(--menu-border-soft);
    background: rgb(var(--cream-rgb) / 0.03);
    color: var(--menu-text);
  }

  body.menu-page--yaletown .menu-nav__box a:active {
    background: rgb(var(--burgundy-rgb) / 0.24);
  }
}

@media (max-width: 600px) {
  body.menu-page--yaletown .mi {
    border-bottom-color: var(--menu-border-soft);
  }
}