/* 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. */

/* ===========================================
 * Header bar (components/legacy/header.njk)
 * =========================================== */
/* The bar's wrapper was a set 99px tall, whatever the bar. On a phone that
   is 19px below the 80px 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 100px tall, so the wrapper stopped 31px
   short of its foot, and 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: 80px;
}
@media screen and (min-width: 990px) {
  html {
    scroll-padding-top: 130px;
  }
}

/* ===========================================
 * Phone menu (components/legacy/header.njk, js/nav.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 (nav.js sets aria-expanded). They were the old sprite's three
   heavy 4px 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 (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. Open,
     or under a mouse, its round ground lights a step, as a panel link does
     (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: 11px;
  }
  .page-nav-button[aria-expanded="true"] {
    background-color: #3a3636;
  }
  /* At exactly 989px the old sheet's phone and desktop rules both apply, so
     the 80px phone bar floated 30px down and the panel docked at 80px would
     cover its foot. */
  .page-header {
    margin-top: 0;
  }

  /* The list opens as a panel docked under the 80px bar, full width. The
     bar's wrapper (.page-header--fixed) carries a transform, so it is this
     fixed box's containing block: top 80px is the bar's bottom edge. A list
     taller than the screen scrolls inside the panel. */
  .page-nav__list {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #2D2A2A;
    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: #3a3636;
  }
  .page-nav__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
  /* The page you are on, underlined in the brand blue. */
  .page-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #416cb5;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* 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: #3a3636;
  }
}
@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;
  }
}

/* ===========================================
 * Reviews (index.njk #reviews)
 * =========================================== */
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin: 20px 0 0;
  color: #fff;
  font-size: 1rem;
}
.reviews-summary strong {
  font-size: 1.25rem;
}
.reviews-summary__stars {
  position: relative;
  display: inline-flex;
}
.reviews-summary__row {
  display: inline-flex;
  fill: #6b6767;
}
.reviews-summary__row--fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  fill: #fff;
}
.reviews-summary svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Three cards across on a desktop, two on a tablet, one on a phone. The
   cards past the third carry .hidden until "View More Reviews". */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}
@media screen and (min-width: 640px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 990px) {
  .review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }
}
.review-card {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.review-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-card__author {
  font-weight: 700;
  color: #2D2A2A;
}
.review-card__date {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: #767676;
}
.review-card__stars {
  display: flex;
  gap: 2px;
  margin-top: 6px;
}
.review-card__stars svg {
  width: 16px;
  height: 16px;
  fill: #d5d3d3;
}
.review-card__stars .is-on {
  fill: #416cb5;
}
.review-card__text {
  margin: 14px 0 0;
  line-height: 1.6;
  color: #555;
}
/* The clamp and "Read more" are assets/js/reviews.js's (the template's): it
   shows the button only on a review the clamp actually cuts. */
.line-clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.review-card__toggle {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.875rem;
  font-weight: 700;
  color: #416cb5;
}
.review-card__toggle:hover,
.review-card__toggle:focus-visible {
  color: #35568f;
  text-decoration: underline;
}
.review-card__source {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  text-decoration: none;
}
.review-card__source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 0.875rem;
  color: #767676;
  transition: color 0.2s;
}
.review-card__source:hover .review-card__source-row,
.review-card__source:focus .review-card__source-row {
  color: #2D2A2A;
}
.review-card__source svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.reviews-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
/* The second button on the dark band: outlined, so the filled "View More
   Reviews" leads. */
.button--light,
.button--light:focus {
  color: #fff;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}
.button--light:hover {
  color: #2D2A2A;
  background-color: #fff;
  border-color: #fff;
}

/* ===========================================
 * Contact (index.njk #contact)
 * =========================================== */
/* The old section held the contact form. Without it, the full-screen minimum
   height left a band of bare photo under the address and phone. */
#contact.section--parallax {
  min-height: 0;
}
/* The map under it is an inline iframe, so it sat on a text baseline and
   left 8px of empty line between it and the footer. */
#contact + iframe {
  display: block;
}

/* ===========================================
 * One h1 per page, looking as before
 * =========================================== */
/* Home: intro slides 2 and 3 repeat slide 1's title, so they are divs that
   take the h1 look from .alpha. ".alpha small" outranks .page-intro__pretitle,
   which "h1 small" never did, so the script line gets its own size back. */
.page-intro__title.alpha .page-intro__pretitle {
  font-size: 3.5rem;
}
/* Catering: the page title was an h2. As the page's h1 it keeps the h2 size
   (the two tags differ in nothing else here). The 404's h1 is also a
   .section__title and keeps the h1 size, so the rule has its own class. */
h1.section__title--as-h2 {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  .page-intro__title.alpha .page-intro__pretitle {
    font-size: 2rem;
  }
  h1.section__title--as-h2 {
    font-size: 2.25rem;
  }
}

/* ===========================================
 * Not-found page (404.njk)
 * =========================================== */
/* Its two button rows. They were the old stylesheet's #wrapper, a flex row
   that never wraps: on a phone the three page buttons held the white box at
   499px on a 393px screen, so the page slid sideways. These wrap, with 10px
   between buttons (they touched). */
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}