.bcg-header{
  background-color:var(--wp--preset--color--primary);
  display:grid;
  grid-template-columns:var(--wp--custom--button-height) 1fr;
  padding:var(--wp--custom--spacing) 0.5rem;
  border-radius:0 0 1rem 1rem;
  box-shadow:var(--wp--preset--color--base) 0 1px 2px 1px;
}

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

.bcg-header figure{margin:0}

.home .bcg-header a[rel='home']{visibility:hidden}

#top-menu summary::marker{content:""}
/* Webkit... */
#top-menu details summary{list-style:none}
#top-menu details summary::-webkit-details-marker{display:none}
/* ...Webkit */

#top-menu ul{
  list-style:none;
  padding:0;
  margin:0;
}

#top-menu>ul{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

#top-menu summary{
  height:var(--wp--custom--button-height);
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius:1rem 1rem 0 0;
}

#top-menu summary svg{
  fill:currentColor;
  flex:0 0 var(--wp--custom--button-height);
  transition:none;
}

#top-menu summary div{
  white-space:nowrap;
  height:1.2rem; /* needs a fixed height to be able to position the spacer correctly */
  display:flex;
  justify-content:center;
  position:absolute;
  top:calc(var(--wp--custom--button-height) + var(--wp--custom--spacing));
  z-index:1;
  transform:scaleY(0);
  transform-origin:top;
  transition:none;
}

#top-menu summary div span{
  background-color:var(--wp--preset--color--base);
  border-radius:.5rem .5rem 0 0;
  padding:0 0.3rem;
}

.submenu{
  position:absolute;
  background-color:var(--wp--preset--color--primary);
  border-radius:0 0 1rem 1rem;
  left:0;
  right:0;
  border-bottom:1px var(--wp--preset--color--base) solid;
  line-height:var(--wp--custom--button-height);
  transform:scaleY(0);
  transform-origin:top;
}

.submenu .spacer{
  height:1.2rem; /* Same hieght as #top-menu summary div */
  border-bottom:1px var(--wp--preset--color--base) solid;
}

#top-menu .submenu>ul{padding-left:0.5rem}

#top-menu details[open] svg{
  fill:var(--wp--preset--color--base);
  transition:fill 0.2s ease-in;
}
#top-menu details[open] .submenu{
  transform:scaleY(1);
  /* transition for the submenu needs to be here rather than in .submenu{}
  ** otherwise firefox does the transition only at the first opening. */
  transition:transform 0.2s ease-in;
}
#top-menu details[open] summary div{
  transition:transform 0.2s ease-in;
  transform:scaleY(1);
}

/* Required for js progressive enhancement. */
.submenu.isclosed{transform:scaleY(0)}
.submenu.isopen{transform:scaleY(1)}

.bcg-header:has(details[open]){border-radius:0}

@media only screen and (min-width:56rem){
  #top-menu>ul{
    --menu-entry-width:13rem;
    grid-template-columns:repeat(4,var(--menu-entry-width));
    justify-content:space-around;
  }
  #top-menu summary svg{display:none}
  #top-menu summary div{
    position:static;
    cursor:pointer;
    font-family:var(--wp--preset--font-family--links);
    font-weight:bold;
    text-align:center;
    transform:none;
    height:100%;
    align-items:center;
  }
  #top-menu summary div span{
    background:none;
    min-width:auto;
  }
  #top-menu details[open] summary{background:none}
  #top-menu .submenu>ul{padding-left:0}
  .submenu{
    left:auto;
    right:auto;
    padding:0 0.5rem 0.5rem 0.5rem;
    display:flex;
    justify-content:center;
    width:calc(var(--menu-entry-width) - (2 * 0.5rem));
  }
  .submenu .spacer{display:none}
  .submenu li{text-align: center;}
  .bcg-header:has(details[open]){border-radius:0 0 1rem 1rem}
}