/* Additions on top of the old stylesheet (style.css, kept byte for byte as
   the old site served it). Linked after it from layouts/legacy.njk and
   components/header_legacy.njk. */

/* The intro slider before lite.js has run: its slides are plain blocks, so only the first shows,
 * at the height a slick slide gets once the slider is up (no jump when the script arrives). */
.page-intro-slide:not(.slick-slide) {
  min-height: 100vh;
}
@media screen and (max-width: 767px) and (max-height: 769px) {
  .page-intro-slide:not(.slick-slide) {
    min-height: 500px;
  }
}
.page-intro-slide:not(.slick-slide):not(:first-child) {
  display: none;
}
/* The same for the private-dining photos: three <img> in a row of blocks would stand three
 * photos tall until lite.js has stacked them. */
.js-private-dining-gallery:not(.slick-initialized) > img:not(:first-child) {
  display: none;
}

/* The map's .row (index.njk #google-map) sits in a padding-less container,
   so its -15px side margins pushed it 15px past the right edge and the page
   could be panned sideways. The map itself is unchanged: what is cut is
   off screen. */
.container-fluid {
  overflow-x: hidden;
  overflow-x: clip;
}
/* The map iframe was an inline box, so its section ran 8px taller than the 500px map: a white
   strip (the page ground) between the map and the dark gallery under it. As a block it ends
   where the map does. */
#google-map iframe {
  display: block;
}

/* The 404 page sets three buttons in a row in #wrapper, a flex box that did not wrap: at 393px
   the row ran 22px past the edge. They wrap now (the page's one-button uses are unchanged). */
#wrapper {
  flex-wrap: wrap;
  gap: 6px;
}

/* The homepage menu cards (Brunch, Lunch, ...) grew 10% under the pointer (style.css,
   .menu__item-content:hover). They tint instead: the dark wash over the photo deepens to the
   site's brown, 0.2s, with no movement. Keyboard focus gets the same state; the cards do not
   move, so reduced motion only has the tint's fade to drop. */
.menu__item-content {
  transition: none;
}
.menu__item-content:hover {
  transform: none;
}
.menu__item-content:before {
  transition: background-color 0.2s ease;
}
.menu__item-content:has(.menu__link:focus-visible):before {
  background-color: rgba(61, 36, 17, 0.72);
}
.menu__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}
@media (hover: hover) {
  .menu__item-content:hover:before {
    background-color: rgba(61, 36, 17, 0.72);
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu__item-content:before {
    transition: none;
  }
}

/* ===========================================
 * Header bar (components/legacy/header.njk)
 * =========================================== */
/* The bar's wrapper was a set 99px tall, whatever the bar. On a phone that
   is 16px below the 83px bar, an unseen strip that took the taps meant for
   what lay under it (on /menus/, the top of the menu frame). On a desktop
   the bar floats 30px down and is 110px tall, so the wrapper stopped short
   of its foot, and lite.js, which offsets by the wrapper, scrolled a
   section's top under the bar. Sized by the bar, it is neither. */
.page-header--fixed {
  height: auto;
}
/* The bar used to fade and slide in on load (fadeInDown: 0.2s delay, 1s
   run, held at opacity 0 before it starts). A page whose animations do not
   tick until the first scroll (a background tab, a throttled pane) had no
   bar, no logo and no menu button until then. It is simply there now. */
.page-header--animated {
  animation: none;
}
/* The offset for a /#section opened from another page, set here so it is in
   place before the browser's first scroll to the fragment. lite.js replaces
   it with the measured bar once the page is ready. */
html {
  scroll-padding-top: 85px;
}
@media screen and (min-width: 989px) {
  html {
    scroll-padding-top: 140px;
  }
}

/* ===========================================
 * Phone menu (components/legacy/header.njk, js/lite.js)
 * =========================================== */
.page-nav-button {
  font: inherit;
  line-height: 1;
  transition: background-color 0.2s;
}
/* Three thin bars, the top and bottom turning into a cross while the menu
   is open (lite.js sets aria-expanded). They were the old sprite's three
   heavy slabs, and an X icon swapped in. */
.page-nav-button__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.page-nav-button__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  transition: top 0.2s ease 0.2s, transform 0.2s ease, opacity 0.2s ease;
}
.page-nav-button__bars span:nth-child(1) {
  top: 0;
}
.page-nav-button__bars span:nth-child(2) {
  top: 7px;
}
.page-nav-button__bars span:nth-child(3) {
  top: 14px;
}
/* Open: the outer bars meet in the middle, then turn. */
.page-nav-button[aria-expanded="true"] .page-nav-button__bars span {
  transition: top 0.2s ease, transform 0.2s ease 0.2s, opacity 0.2s ease;
}
.page-nav-button[aria-expanded="true"] .page-nav-button__bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.page-nav-button[aria-expanded="true"] .page-nav-button__bars span:nth-child(2) {
  opacity: 0;
}
.page-nav-button[aria-expanded="true"] .page-nav-button__bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}
.page-nav-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Shown only while the menu is open (lite.js adds it to <body> once). */
.page-nav-backdrop {
  display: none;
  cursor: pointer;
}

/* The old sheet's phone rules end at 988px and its desktop rules start at
   989px (the button is hidden, the list is a row), so this block ends at
   988px too. */
@media screen and (max-width: 988px) {
  /* A 44px target (it was 40 by 42), centred on the bar whatever its height
     (the logo shrinks at 650 and 450px, so the bar is not one height). Its
     containing block is .row, which spans the bar's content box. It keeps
     the filled orange of the old button; open, or under a mouse, it takes
     the old hover gold (not on hover alone on a phone, where it would stay
     lit after a tap). */
  .page-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .page-nav-button[aria-expanded="true"] {
    background-color: #c7914c;
  }

  /* The list opens as a panel docked under the bar, full width. The bar's
     wrapper (.page-header--fixed) carries a transform, so it is this fixed
     box's containing block: 100% down is the bar's bottom edge, whatever
     height the bar has. A list taller than the screen scrolls inside the
     panel. */
  .page-nav__list {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    max-height: calc(100vh - var(--header-height, 83px));
    max-height: calc(100dvh - var(--header-height, 83px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #3d2411;
    border-top: 1px solid #ff6600;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  }
  .page-nav__list.is-open {
    display: block;
    animation: page-nav-in 0.2s ease-out;
  }
  .page-nav__item {
    border-top: 0;
  }
  .page-nav__item + .page-nav__item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .page-nav__link,
  .page-nav__link:hover,
  .page-nav__link:focus {
    padding: 18px 24px;
    color: #fff;
    border-bottom: 0;
    transition: background-color 0.2s;
  }
  .page-nav__link:hover,
  .page-nav__link:focus {
    background-color: #55341a;
  }
  .page-nav__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
  /* The call to action stays the filled orange button, set in from the
     panel's edges. */
  .page-nav__item > .button {
    display: block;
    margin: 14px 24px;
    padding: 14px 10px;
  }
  /* The page you are on, underlined in the site's orange. */
  .page-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #ff6600;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* The page under the open menu: dimmed, and it stops scrolling. Both the
     dim and the bar rise above 88's sticky order footer (z-index 99999)
     while the menu is open, so the footer is dimmed with the page and
     cannot cover the panel. 88's popups (2147483000+) stay above. */
  html.page-nav-open {
    overflow: hidden;
  }
  html.page-nav-open .page-header--fixed {
    z-index: 100001;
  }
  /* 88's sticky order footer is not dimmed under the menu, it is hidden. */
  html.page-nav-open [data-88-footer] {
    display: none;
  }
  html.page-nav-open .page-nav-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.55);
    animation: page-nav-fade 0.2s ease-out;
  }
}
@media screen and (max-width: 988px) and (hover: hover) {
  .page-nav-button:hover {
    background-color: #c7914c;
  }
}
@keyframes page-nav-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes page-nav-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-nav__list.is-open,
  html.page-nav-open .page-nav-backdrop {
    animation: none;
  }
  .page-nav-button,
  .page-nav-button__bars span,
  .page-nav-button[aria-expanded="true"] .page-nav-button__bars span {
    transition: none;
  }
}

/* ---------- Page headings ----------
   One h1 per page: the homepage keeps it on the first slide (slides 2 and 3 repeat the same
   words as h2), and the party and fulfillment pages promote their first heading. style.css
   sizes h1 at 4rem and h2 at 3rem from 768px (both 2.25rem below), so each heading keeps the
   size it had as its old tag. */
@media screen and (min-width: 768px) {
  h2.page-intro__title {
    font-size: 64px;
    font-size: 4rem;
  }
  h1.section__title,
  h1.section__title--invert {
    font-size: 48px;
    font-size: 3rem;
  }
}