/* Site additions on top of the old stylesheet (style.css stays as it was).
 * Retagged headings keep their look from here, one rule per element. */

/* Home intro slides 2-4 are <div class="page-intro__title alpha">: the .alpha class
 * carries every h1 rule, but `.alpha small` (0,1,1) outranks the pretitle's own size
 * where `h1 small` (0,0,2) never did, so the pretitle size is restated. */
.alpha .page-intro__pretitle {
  font-size: 2.5rem;
}

/* The menu title is an h1 for crawlers and reads as the h2 it was. */
.section__title--as-h2 {
  font-size: 3rem;
}
@media screen and (max-width: 989px) {
  .section__title--as-h2 {
    font-size: 2rem;
  }
}

/* ===========================================
 * Header bar and phone menu (components/legacy/header.njk, js/nav.js)
 * =========================================== */
/* The bar's wrapper was a set 99px tall, whatever the bar: on a desktop the bar
   floats 30px down and is 100px tall, so nav.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 offset for a /#section opened from another page, set here so it is in
   place before the browser's first scroll to the fragment. nav.js replaces
   it with the measured bar once the page is ready. */
html {
  scroll-padding-top: 99px;
}
@media screen and (min-width: 990px) {
  html {
    scroll-padding-top: 130px;
  }
}

.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 (nav.js sets aria-expanded). They were the old sprite's heavy slabs. */
.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;
}
.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 (nav.js adds it to <body> once). */
.page-nav-backdrop {
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 989px) {
  /* A 44px target (it was 40 by 42), centred where the old one sat. */
  .page-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    top: 11px;
  }
  .page-nav-button[aria-expanded="true"] {
    background-color: #3a3a3a;
  }
  /* At exactly 989px the old sheet's phone and desktop rules both apply, so
     the 99px phone bar floated 30px down and the panel docked at 99px would
     cover its foot. */
  .page-header {
    margin-top: 0;
  }

  /* The list opens as a panel docked under the 99px bar, full width. The
     bar's wrapper (.page-header--fixed) carries a transform, so it is this
     fixed box's containing block: top 99px is the bar's bottom edge. A list
     taller than the screen scrolls inside the panel. */
  .page-nav__list {
    position: fixed;
    top: 99px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    padding: 0 0 16px;
    text-align: left;
    max-height: calc(100vh - 99px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #262626;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    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.1);
  }
  .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: #333;
  }
  .page-nav__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
  /* The page you are on, underlined in the brand red. */
  .page-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #D0232B;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  /* Reservations and Order Online: full-width red buttons under the links
     (not the old stacked rows of a button's width). */
  .page-nav__item--cta,
  .page-nav__item--cta + .page-nav__item--cta {
    border-top: 0;
    padding: 12px 24px 0;
  }
  .page-nav__item--cta:not(.page-nav__item--cta + .page-nav__item--cta) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0;
  }
  .page-nav__item--cta .button__page-nav {
    display: block;
    padding: 15px 12px !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    background-color: #D0232B;
  }
  .page-nav__item--cta .button__page-nav:hover,
  .page-nav__item--cta .button__page-nav:focus {
    background-color: #a1181e;
  }
  .page-nav__item--cta .button__page-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* The page under the open menu: dimmed, and it stops scrolling. The bar
     (z-index 50) stays above the dim. */
  html.page-nav-open {
    overflow: hidden;
  }
  html.page-nav-open .page-nav-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 49;
    background-color: rgba(0, 0, 0, 0.55);
    animation: page-nav-fade 0.2s ease-out;
  }
}
@media screen and (max-width: 989px) and (hover: hover) {
  .page-nav-button:hover {
    background-color: #3a3a3a;
  }
}
@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;
  }
}