/* ---- Hamburger button (mobile only) ---- */
.site-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: .5rem .75rem;
  cursor: pointer;
  line-height: 1;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  display: block;
  width: 26px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.site-nav__toggle-icon {
  position: relative;
}
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-nav__toggle-icon::before { top: -8px; }
.site-nav__toggle-icon::after  { top:  8px; }

/* Animate to an "X" when open */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon          { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before  { top: 0; transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after   { top: 0; transform: rotate(-45deg); }

/* ---- Mobile (<768px) ---- */
@media (max-width: 767.98px) {
  .site-nav__toggle { display: inline-block; }

  /* Bootstrap's .collapse hides; .show reveals. Slide-down panel: */
  .site-nav__collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    z-index: 1000;
  }

  .site-nav__list {
    flex-direction: column;
    display: flex;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
  }
  .site-nav__item { width: 100%; }
  .site-nav__link {
    display: block;
    padding: .75rem 1rem;
  }
}