/* Shared header and contact bar, also used by archived and error pages. */
:root {
  --site-shell-height: 126px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
}

.site-header .brand {
  margin-bottom: 0;
}

.site-header .brand img {
  width: 168px;
}

.site-header .topbar-inner {
  min-height: 38px;
  gap: 0.25rem 0.65rem;
}

.site-header .topbar-fb {
  width: 30px;
  height: 30px;
}

.site-nav > a[aria-current="page"] {
  color: #9a4c00;
}

.site-header .nav-locations-panel {
  max-height: calc(100dvh - var(--site-shell-height) - 30px);
}

body main [id],
.local-page main [id],
.photo-credits-page main [id],
body main {
  scroll-margin-top: calc(var(--site-shell-height) + 20px);
}

@media (min-width: 861px) {
  .footer-links .nav-locations-panel {
    max-height: calc(100dvh - var(--site-shell-height) - 140px);
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 860px) {
  .site-header .site-nav {
    max-height: calc(100dvh - var(--site-shell-height) - 16px);
  }

  .site-header .nav-locations-panel {
    max-height: none;
  }
}

@media (max-width: 760px) {
  :root {
    --site-shell-height: 155px;
  }

  .site-header .topbar-inner {
    padding-block: 0.25rem;
  }

  .site-header .topbar-inner > span {
    flex-basis: 100%;
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .site-header .topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}