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

/* ===========================================
 * Page width
 * =========================================== */
/* The intro slider's prev/next arrows sit 25px outside a full-width slide, off
   the screen either side, and widened every page past the window. */
.js-page-intro-slider .slick-arrow {
  display: none !important;
}
/* The map bleeds off the right edge on a desktop (margin-right: -115px), which
   scrolled the page sideways by the part that is past the window. */
.section--contact {
  overflow-x: clip;
}

/* The logo link's text is pushed 99999px off to the left (text-indent) to hide it, and WebKit
   counts the link's box, 100,000px wide, in the page's scrollable width wherever the bar is
   in the flow (the gallery page): Safari scrolled sideways there by up to 100,377px. Fixed
   bars are left out of the scrollable width, so the other pages were spared. The focus ring
   is drawn inside the clip. */
.page-logo {
  overflow: hidden;
}
.page-logo a:focus-visible {
  outline-offset: -3px;
}
/* The logo link's box is wider than the logo (its text-indent trick above): 294px for a
   250px image on a desktop, the whole 363px of the bar on a phone, so a click on the bar
   beside the logo followed href="/" and reloaded the page. Only the image takes the click
   now; it still activates the link, which is its ancestor. */
.page-logo a {
  pointer-events: none;
}
.page-logo a img {
  pointer-events: auto;
}

/* ===========================================
 * Contact form width
 * =========================================== */
/* The form sat in a half column with 80px of padding beside the map, 430 to
   538px wide from 1200 to 1440, where 88's form stacks its fields one per row.
   A 7/5 split with less padding gives it 600px and more, so the fields pair. */
@media screen and (min-width: 1199px) {
  .contact-content {
    padding-right: 0;
  }
}
@media screen and (min-width: 1500px) {
  .contact-content {
    padding-right: 60px;
  }
}

/* ===========================================
 * Contact map
 * =========================================== */
/* The map was a 900px iframe in a 120vh box (1080px in a 900px-tall window) beside a
   contact column 725px tall, so it hung 150px past the section and left 305px of empty
   band under the form; stacked, 60 to 100px of margin plus the iframe's inline line gap
   (8px) sat under it. Now the row stretches both columns to the height of the contact
   column and the map ends where the section ends; stacked, it is 500px and flush with
   the next band. Its right edge still bleeds off the page, as on live. The gallery band
   under it has the same dark ground and 100px of its own top padding, which read as the
   map's missing 100px (live hid it under the map's 150px overhang), so the photos start
   at the band's edge. */
.section--contact + .section--gallery {
  padding-top: 0;
}
.map-container {
  margin-bottom: 0;
}
#map-container {
  min-height: 0;
}
.gooogle-map-iframe {
  display: block;
  height: 500px;
}
@media screen and (min-width: 1199px) {
  .section--contact {
    min-height: 0;
    margin-bottom: 0;
  }
  .section--contact .row {
    display: flex;
  }
  .section--contact .row:before,
  .section--contact .row:after {
    display: none;
  }
  .section--contact .map-container,
  #map-container {
    height: 100%;
  }
  .gooogle-map-iframe {
    height: 100%;
    min-height: 560px;
  }
}

/* ===========================================
 * Footer reservation button
 * =========================================== */
/* The button never wraps and carries 40px of padding each side, 237px wide in a footer
   column 135px wide from 990px, and at 990 and 991px, where the container has no margin
   beside it, it ended 5px past the window and scrolled the page sideways. 30px of padding
   keeps it inside the container's gutter until the container is centred. */
@media screen and (min-width: 990px) and (max-width: 1198px) {
  .page-footer__button {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* ===========================================
 * Gallery page grid
 * =========================================== */
/* Masonry's fit-width mode writes the grid's width inline, three columns and their gutters:
   994px, in a 990px window at 989 to 992px, which scrolled the page sideways by the
   difference. The figures inside sit within the window, so capping the grid at it loses
   nothing. */
.gallery[data-masonry] {
  max-width: 100%;
}

/* ===========================================
 * Header bar and phone menu (components/legacy/header.njk, js/lite.js)
 * =========================================== */
/* The bar faded in on every page load (fadeInDown, after a 0.2s delay, over 1s, held
   invisible until the delay ended), so moving between pages showed each one without its
   header for up to 1.2s, which read as the page loading without styles. It is there from
   the first paint now. */
.page-header--animated {
  animation: none;
}

/* The bar's wrapper was a set 99px tall, whatever the bar: the bar is 70 to 76px
   (the logo sets it), so lite.js, which offsets by the wrapper, scrolled a
   section's top 23px under the bar's foot. 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. lite.js replaces it
   with the measured bar once the page is ready. */
html {
  scroll-padding-top: 76px;
}

.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 heavy slabs,
   white on the cream button (1.4 to 1); dark green is 11 to 1. */
.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: #0d3311;
  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 (lite.js adds it to <body> once). */
.page-nav-backdrop {
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 989px) {
  /* The gallery page's bar is in the flow, not in the fixed wrapper that
     carries z-index 50, so without this the dimmed page covers it and the
     panel under it. */
  .page-header {
    z-index: 50;
  }

  /* A 44px target (it was 40 by 42), centred in the 76px bar. */
  .page-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    top: 16px;
  }
  .page-nav-button[aria-expanded="true"] {
    background-color: #b37c69;
  }

  /* The list opens as a panel docked under the bar, full width, on the bar's
     own green. The bar's wrapper (.page-header--fixed) carries a transform, so
     it is this fixed box's containing block: top is the bar's bottom edge,
     which lite.js measures into --header-height. A list taller than the
     screen scrolls inside the panel. It was a bare list over the page, white
     type on whatever photo was behind it. */
  .page-nav__list {
    position: fixed;
    top: var(--header-height, 76px);
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    padding: 0 0 12px;
    text-align: left;
    max-height: calc(100vh - var(--header-height, 76px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #0d3311;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    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;
  }
  /* The old sheet pads the first and last item 0 on one side
     (:first-child, :last-child) at (0,2,0), which a flat reset would lose to. */
  .page-nav__item,
  .page-nav__item:first-child,
  .page-nav__item:last-child {
    padding: 0;
    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: rgba(255, 255, 255, 0.08);
  }
  .page-nav__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
  /* The page you are on, underlined in the cream of the button. */
  .page-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #e9d3ac;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* "takeout & delivery" opens its two links in the panel instead of a 100px
     box floating over it: the caret turns, the links indent under the row. */
  .dropdown-toggle {
    position: relative;
    padding-right: 56px !important;
  }
  .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: 24px;
    margin: -2px 0 0;
    transition: transform 0.2s;
  }
  .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
  .dropdown-menu {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.22);
    font-size: 1.25rem;
  }
  .dropdown-menu .dropdown-item {
    margin: 0;
    padding: 15px 24px 15px 44px;
    white-space: normal;
  }
  .dropdown-menu .dropdown-item + .dropdown-item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
  }
  .dropdown-menu .dropdown-item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  /* 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: #b37c69;
  }
}
@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,
  .dropdown-toggle::after {
    transition: none;
  }
}

/* ===========================================
 * Gallery, one column
 * =========================================== */
/* Masonry's fitWidth sets the container's width to its columns, and the figures
   are positioned absolutely, so their 100% is of the container's padding box,
   not of the space inside the 7px padding. The one column ran 7px past the
   screen (sideways scroll, 414px on a 393px phone). The container stays the
   screen's width and a figure is the width inside its padding. */
@media screen and (max-width: 500px) {
  .gallery {
    width: auto !important;
  }
  .gallery .gallery__figure {
    width: calc(100% - 14px) !important;
  }
}

/* The three menu tiles grow to 1.1 on hover. On a phone each tile fills the
   screen less its 15px gutters, so 1.1 reached 3px past the screen edge when
   hovered or tapped and the page scrolled sideways. A 1.06 grow stays inside
   the gutter (5% of 363px is 18px at 1.1, 11px at 1.06). From 767px up the
   tiles sit three across and 1.1 already fits. */
@media screen and (max-width: 766px) {
  .menu__item-content:hover {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
  }
}

/* ===========================================
 * Intro slider before lite.js has run
 * =========================================== */
/* Its slides are plain blocks until the script arrives, 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;
}

/* ===========================================
 * Photo viewer (lite.js, [data-lightbox])
 * =========================================== */
/* One modal <dialog> for the gallery page and the homepage grid: the picture fits the
   screen, previous / next sit at the sides, the counter at the foot. The dim page behind
   is the dialog's own ::backdrop; the page stops scrolling while it is open. */
html.lite-lightbox-open {
  overflow: hidden;
}
.lite-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.lite-lightbox:not([open]) {
  display: none;
}
.lite-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.92);
}
.lite-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 56px 64px;
  box-sizing: border-box;
  touch-action: pan-y;
}
.lite-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.2s ease;
}
.lite-lightbox.is-loading .lite-lightbox__img {
  opacity: 0;
}
.lite-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 400 34px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}
.lite-lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.lite-lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lite-lightbox__btn[hidden] {
  display: none;
}
.lite-lightbox__prev {
  top: 50%;
  left: 8px;
  margin-top: -24px;
}
.lite-lightbox__next {
  top: 50%;
  right: 8px;
  margin-top: -24px;
}
.lite-lightbox__close {
  top: 8px;
  right: 8px;
}
.lite-lightbox__count {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
@media screen and (max-width: 600px) {
  .lite-lightbox__stage {
    padding: 56px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lite-lightbox__img,
  .lite-lightbox__btn {
    transition: none;
  }
}