/* Mobile hamburger overlay / scroll-lock. Desktop (>=901px) unchanged. */
.nav-overlay {
  display: none;
}

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  body > nav {
    z-index: 1100;
    overflow-x: hidden;
  }
  body > nav:not(.open) {
    overflow: hidden;
  }
  body > nav.open {
    overflow: visible;
    z-index: 1200;
    background: #F7F4EE;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-toggle {
    position: relative;
    z-index: 1210;
  }
  body > nav > ul {
    z-index: 1220;
    background: var(--cream, #F7F4EE);
    box-shadow: none;
  }
  body > nav.open > ul {
    display: flex !important;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    min-height: calc(100dvh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #F7F4EE;
    box-shadow: none;
  }
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 68px;
    z-index: 1150;
    background: rgba(26, 24, 20, 0.55);
  }
  html.nav-open .nav-overlay,
  body.nav-open .nav-overlay {
    display: block;
  }
  html.nav-open,
  body.nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }
  h1 {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

@media (min-width: 901px) {
  .nav-overlay {
    display: none !important;
  }
  html.nav-open,
  body.nav-open {
    overflow: visible !important;
    touch-action: auto;
  }
}