.bcg-header{
  position: sticky;
  top:calc(0px + var(--wp-admin--admin-bar--height, 0px));
  background-color: var(--wp--preset--color--base);
  display:grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  z-index: 1;
}

.bcg-header img,.bcg-header svg{
  height:var(--wp--custom--button-height)
}

.bcg-header figure{margin:0}

#burger-cb{display:none}

#burger{
  justify-self: end;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

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

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

#burger-cb:checked + #burger #top-bun {
  transform: rotate(-45deg);
  /* --wp--custom--button-height/2 centers the top of the bun. Subtract half of its height. */
  margin-top: calc((var(--wp--custom--button-height)/2) - (0.5*var(--wp--custom--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(--wp--custom--button-height)/6);
}

#burger-nav{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--wp--preset--color--base);
    top: -100%; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transform: scale(0);
    display:flex;
    flex-direction: column;
    align-items: center;
    line-height: var(--wp--custom--button-height);
}

.burger-links{
  list-style: none;
  height:100%;
  padding:0;
  margin:0;
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  width:max-content;
}

#burger-nav details ul{
  position: absolute;
  list-style: none;
  background-color: var(--wp--preset--color--base);
  width:100%;
}

#burger-nav details summary::-webkit-details-marker {
  display: none;
}
#burger-nav ::marker {
  content: "";
}

#burger-nav summary {
  cursor: pointer;
  display:flex;
  gap:0.5rem;
  padding:0.5rem;
  background-color: var(--wp--preset--color--primary);
  border-radius: 1rem;
  font-weight: bold;
}

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

.bottom-links a{
    text-decoration: none;
}

.bottom-links {
    list-style: none;
    display:flex;
    gap:1rem;
    margin:0;
    padding:0;
    justify-content: space-evenly;
    width:100%;
}

.urgent{color:var(--wp--preset--color--urgent)}

@media only screen and (min-width:40rem){
  #burger{display:none}
  .bcg-header{
    grid-template-columns: var(--wp--custom--button-height) 1fr;
  }
  #burger-nav{
    transform:none;
    transition: none;
    position: static;
  }
  .burger-links{
    flex-direction: row;
    width:100%;
  }
  #burger-nav summary {
    padding: 0;
    justify-content: center;
    white-space: nowrap;
  }
  #burger-nav summary svg, #burger-nav summary figure {
    display:none
  }
  .burger-links li {
    width:10rem;
  }
  .bottom-links{display:none}
  #burger-nav details ul{
    position: absolute;
    list-style: none;
    background-color: var(--wp--preset--color--primary);
    padding:0;
    border-radius: 0 0 1rem 1rem;
    width:10rem;
    border-top:1px currentColor solid;
    padding:0.5rem;
    box-sizing: border-box;
  }
  #burger-nav details:open summary {
    border-radius: 1rem 1rem 0 0;
  }
}

@media only screen and (min-width:50rem){
  #burger-nav summary svg, #burger-nav summary figure {display:block}
  .burger-links li{width:15rem}
  #burger-nav details ul{width:15rem}
}