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

/* ===========================================
 * Header bar and phone menu (components/legacy/header.njk, js/nav.js)
 * =========================================== */
/* The bar's wrapper was a set 99px tall, whatever the bar: 19px past the 80px
   phone bar, an unseen strip that took the taps meant for what lay under it,
   and on a desktop short of the nav's foot, 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-center--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: 768px) {
  html {
    scroll-padding-top: 130px;
  }
}

.page-nav-center-button {
  font: inherit;
  line-height: 1;
  border: 0;
  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-center-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-center-button[aria-expanded="true"] .page-nav-button__bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.page-nav-center-button[aria-expanded="true"] .page-nav-button__bars span:nth-child(2) {
  opacity: 0;
}
.page-nav-center-button[aria-expanded="true"] .page-nav-button__bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}
.page-nav-center-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: 767px) {
  /* A 44px target (it was 40 by 42), centred in the 80px bar. At exactly
     767px the old sheet hid the button and the list both. */
  .page-nav-center-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-top: 18px;
  }
  .page-nav-center-button[aria-expanded="true"] {
    background-color: #d69c65;
  }

  /* The list opens as a panel docked under the 80px bar, full width. The bar's
     wrapper 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-center__list {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    width: auto;
    text-align: left;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #450f19;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  }
  .page-nav-center__list.is-open {
    display: block;
    animation: page-nav-in 0.2s ease-out;
  }
  /* :first-child and :last-child are listed because the old sheet gives them
     10px of side padding on a phone, which pushed the first link (About) in. */
  .page-nav-center__item,
  .page-nav-center__item:first-child,
  .page-nav-center__item:last-child,
  .page-nav-center__item-right {
    padding: 0;
    float: none;
  }
  .page-nav-center__item:not(:last-child) {
    border-bottom: 0;
  }
  .page-nav-center__item + .page-nav-center__item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .page-nav-center__list .page-nav__link,
  .page-nav-center__list .page-nav__link:hover,
  .page-nav-center__list .page-nav__link:focus {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 18px 24px;
    text-align: left;
    color: #dce0df;
    border-bottom: 0;
    transition: background-color 0.2s;
  }
  .page-nav-center__list .page-nav__link:hover,
  .page-nav-center__list .page-nav__link:focus {
    background-color: #5a1a28;
    color: #faedc8;
  }
  .page-nav-center__list .page-nav__link:focus-visible {
    outline: 2px solid #faedc8;
    outline-offset: -4px;
  }
  /* The page you are on, underlined in the bronze of the button. */
  .page-nav-center__list .page-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #a57548;
    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: 767px) and (hover: hover) {
  .page-nav-center-button:hover {
    background-color: #d69c65;
  }
}
@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-center__list.is-open,
  html.page-nav-open .page-nav-backdrop {
    animation: none;
  }
  .page-nav-center-button,
  .page-nav-button__bars span,
  .page-nav-center-button[aria-expanded="true"] .page-nav-button__bars span {
    transition: none;
  }
}

/* ===========================================
 * 404 (404.njk)
 * =========================================== */
/* The page's links sat in one non-wrapping row, 447px wide on a 393px phone. */
#wrapper__center.event-buttons {
  flex-wrap: wrap;
  gap: 12px;
}

/* ===========================================
 * Home: the map band (index.njk)
 * =========================================== */
/* .container-fluid has no rule in the old stylesheet, so the row inside it kept
   its -15px side margins with nothing to offset them, and the page ran 15px
   past the screen on each side (408px wide on a 393px phone, 1465 at 1440).
   The map is full-bleed: no margin on the row, no gutter on its column. */
.container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}
.container-fluid > .row > .col-12 {
  padding-left: 0;
  padding-right: 0;
}