/* Site additions on top of the old stylesheet (style.css stays as it was). */

/* The fixed bar is 100px tall at every width, so a #section link (and a
   /#section opened from another page) stops below it instead of under it. */
html {
  scroll-padding-top: 100px;
}

/* Text for screen readers and crawlers only (the gallery's h1). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The room collages (private dining pages) are 1085px wide and the sheet only
   fits them to the page up to 1024px, so from 1025px to about 1090px the
   centred picture hung 30px off both edges and the page scrolled sideways. */
.image__pd {
  max-width: 100%;
  height: auto;
}

/* The 404 page's buttons sat in one non-wrapping row, wider than a phone. */
#wrapper {
  flex-wrap: wrap;
}

/* ===========================================
 * Home: the Get in Touch band (index.njk)
 * =========================================== */
/* The photo took 65% and the form column a fixed 600px, which squeezed to
   about 500px at 1440, so the form's fields stacked one per row. The form
   column now takes what the photo leaves, up to 780px, and the 88 form
   (about 616px of room needed) pairs its fields side by side from 1025px up.
   Below that the old sheet already stacks the two full width. */
@media only screen and (min-width: 1025px) {
  #contact .more {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
  #contact .quarter {
    width: auto;
    flex: 0 0 min(780px, 68%);
  }
}

/* ===========================================
 * Header bar and phone menu (components/legacy/header.njk, javascript/nav.js)
 * =========================================== */
/* The old menu button was a label for a hidden checkbox. It is a button now:
   take the browser's button styling off it. */
button.menu-icon {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

.nav-backdrop {
  display: none;
  cursor: pointer;
}

@media only screen and (max-width: 1023px) {
  /* A 44px target, centred in the 100px bar. Three bars that turn into a
     cross while the menu is open (nav.js sets aria-expanded). */
  .nav .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 28px 10px 0 0;
    border-radius: 4px;
    transition: background-color 0.2s;
  }
  .nav .menu-icon:hover,
  .nav .menu-icon[aria-expanded="true"] {
    background-color: #f4f4f4;
  }
  .nav .menu-icon:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }
  .nav-toggle__bars {
    position: relative;
    display: block;
    width: 25px;
    height: 23px;
  }
  .nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-color: #333;
    transition: top 0.2s ease 0.2s, transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle__bars span:nth-child(1) {
    top: 0;
  }
  .nav-toggle__bars span:nth-child(2) {
    top: 10px;
  }
  .nav-toggle__bars span:nth-child(3) {
    top: 20px;
  }
  .menu-icon[aria-expanded="true"] .nav-toggle__bars span {
    transition: top 0.2s ease, transform 0.2s ease 0.2s, opacity 0.2s ease;
  }
  .menu-icon[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
  }
  .menu-icon[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .menu-icon[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
  }

  /* The list opens as a panel docked under the bar, full width. A list taller
     than the screen scrolls inside the panel. The logo hangs 5px below the
     bar; the panel (z-index 11) covers it. */
  .nav .nav__list.menu {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 11;
    clear: none;
    float: none;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
  }
  .nav .nav__list.menu.is-open {
    display: block;
    animation: nav-in 0.2s ease-out;
  }

  .nav .nav__list .nav__list--item {
    border-bottom: 1px solid #ececec;
  }
  /* The rows: full width, 54px tall, label left. The old sheet padded them 5px
     (3px on a short screen) and gave the dropdown's anchor a 3px nudge. */
  .nav .nav__list .nav__list--item > .nav__list--link,
  .nav .nav__list .nav__list--item > .nav__list--link2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 8px 20px;
    top: 0;
  }
  .nav .nav__list .nav__list--link:focus-visible,
  .nav .nav__list .nav__list--link2:focus-visible,
  .nav .nav__list .btn--nav:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -4px;
  }
  /* The page you are on, in the green with a bar at the left edge. */
  .nav .nav__list [aria-current="page"],
  .nav .nav__list .dropbtn[aria-current="true"] {
    color: var(--green);
    box-shadow: inset 4px 0 0 var(--green);
  }

  /* The dropdown is an accordion inside the panel, where the old sheet laid it
     over the rows below it. */
  .nav .nav__list .dd-i {
    top: 0;
    transition: transform 0.2s;
  }
  .nav .nav__list .dropbtn[aria-expanded="true"] .dd-i {
    transform: rotate(180deg);
  }
  .nav .nav__list .dropdown-content {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    box-shadow: none;
    background-color: #f7f7f7;
    border-top: 1px solid #ececec;
  }
  .nav .nav__list .dropdown-content.show {
    display: block;
  }
  .nav .nav__list .dropdown-content .nav__list--link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 20px 10px 36px;
    font-size: 1.25rem;
    border-bottom: 1px solid #ececec;
  }
  .nav .nav__list .dropdown-content li:last-child .nav__list--link {
    border-bottom: 0;
  }

  /* Book a Reservation: a full-width button at the foot of the list. */
  .nav .nav__list .nav__list--item:last-child {
    border-bottom: 0;
    padding: 16px 20px 22px;
  }
  .nav .nav__list .btn--nav {
    display: block;
    min-height: 48px;
    margin: 0;
    padding: 10px 16px;
    font-size: 1.1rem;
    line-height: 1.8;
  }

  /* The page under the open menu: dimmed, and it stops scrolling. The bar
     (z-index 3) stays above the dim. */
  html.nav-open {
    overflow: hidden;
  }
  html.nav-open .nav-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
    animation: nav-fade 0.2s ease-out;
  }
}
/* A phone on its side: shorter rows keep more of the list in view. */
@media only screen and (max-width: 1023px) and (max-height: 520px) {
  .nav .nav__list .nav__list--item > .nav__list--link,
  .nav .nav__list .nav__list--item > .nav__list--link2 {
    min-height: 46px;
  }
}
@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nav-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav .nav__list.menu.is-open,
  html.nav-open .nav-backdrop {
    animation: none;
  }
  .nav .menu-icon,
  .nav-toggle__bars span,
  .menu-icon[aria-expanded="true"] .nav-toggle__bars span,
  .nav .nav__list .dd-i {
    transition: none;
  }
}