.bcg-nav{
    background-color: var(--background-secondary);
    padding:calc((var(--header-height) - var(--button-height))*0.5) 1rem;
    padding-left:3px;
    border-radius:2rem;
    width:calc(min(var(--wp--style--global--content-size), 95%));
    margin:0 auto;
    display:grid;
    grid-template-columns:190px 1fr 3rem;
    align-items: center;
    justify-items: end;
    gap:1rem;
      border:10px solid var(--background-primary);
  border-bottom:none

}

/* Hide the Take action button from the menu on the home page since it is prominent near the top of the page already */
.home .bcg-nav > .CTA{visibility: hidden}

#burger-cb{display:none}

#burger{
  position: relative;
  height: var(--button-height);
  z-index: 5;
  cursor: pointer;
}

#burger div{
  position: relative;
  width: var(--button-height);
  height: calc(var(--button-height)/6);
  border-radius: 0.5rem;
  background-color: var(--text-secondary);
  margin-top: calc(var(--button-height)/6);
  transition: all 0.3s ease-in-out;
}

#burger div:first-of-type{margin-top:calc(var(--button-height)/12)}

#burger-cb:checked + #burger #top-bun {
  transform: rotate(-45deg);
  /* --button-height/2 centers the top of the bun. Subtract half of its height. */
  margin-top: calc((var(--button-height)/2) - (0.5*var(--button-height)/6));
}
#burger-cb:checked + #burger #bottom-bun {
  opacity: 0;
  transform: rotate(45deg);
}
#burger-cb:checked + #burger #meat {
  transform: rotate(45deg);
  /* Push it up by its height */
  margin-top: calc(-1*var(--button-height)/6);
}

#burger-nav{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--background-primary);
    top: -100%; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transform: scale(0);
    display:flex;
    justify-content: center;
    align-items: center;
}

#burger-nav ul{
  list-style: none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--button-height);
  width:max-content;
}

#burger-nav li{
  width:100%
}

#burger-cb:checked + #burger + #burger-nav {
  top: 0;
  transform: scale(1);
}