/* MENU — Nabble's animated hamburger + dropdown */
.animated-icon1 {
  width: 22px;
  height: 20px;
  position: relative;
  transition: 0.5s ease-in-out;
}

.animated-icon1 span {
  display: block;
  position: absolute;
  height: 2.5px;
  width: 100%;
  border-radius: 9px;
  left: 0;
  background: var(--colorWhite);
  transition: 0.25s ease-in-out;
}

.animated-icon1 span:nth-child(1) { top: 0; }
.animated-icon1 span:nth-child(2) { top: 9px; }
.animated-icon1 span:nth-child(3) { top: 18px; }

.animated-icon1.open span:nth-child(1) { top: 9px; transform: rotate(135deg); }
.animated-icon1.open span:nth-child(2) { opacity: 0; left: -60px; }
.animated-icon1.open span:nth-child(3) { top: 9px; transform: rotate(-135deg); }

.navbar-collapse {
  position: absolute;
  top: calc(var(--navbar-height) + var(--safe-top));
  left: 0;
  right: 0;
  background: var(--colorNavy);
  z-index: 10002;
  overflow: hidden;
  max-height: 0;
  padding: 0 20px;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.navbar-collapse.show {
  max-height: 500px;
  padding: 12px 20px 20px;
}

.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: 10px 4px;
  color: var(--colorWhite);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-nav li:last-child .nav-link { border-bottom: none; color: #FF8A96; }

/* Logo + page button hide while menu is open, as in Nabble */
body.menu-open #logo,
body.menu-open #button_placeholder,
body.menu-open #avatar { visibility: hidden; }