/* defaults to mobile-first */
:root {
  --site-header-shadow:  var(--generic-shadow);
  --site-header-bg-color: white;
  --site-header-burger-icon-bg-color: #333;
}

.site-header {
  display: grid;
  grid-template-areas:
     "brand   brand   burger"
     "nav     nav     nav";

  align-items: center;
  padding-block: var(--space-s);
  padding-inline: var(--space-m);

  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;

  background: var(--site-header-bg-color);
  /* box-shadow: var(--site-header-shadow); */
}

.site-header > a {
  grid-area: brand;
  justify-self: start;
  width: fit-content;
}

/* move checkbox off screen to "hide" */ 
.site-header .show {
  display: none;
}

.site-header .burger {
  grid-area: burger;
  cursor: pointer;
  justify-self: end;
  user-select: none;
  /* ↓ increase the clickable region */
  padding: .25rem;
}

.burger > .icon {
  background: var(--site-header-burger-icon-bg-color);
  display: block;
  height: 2px;
  width: 1.025rem;
}

.burger > .icon:before {
  top: .375rem;
}

.burger > .icon:after {
  top: -.375rem;
}

.burger > .icon:before, .burger > .icon:after {
  background-color: var(--site-header-burger-icon-bg-color);
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  transition: all 300ms ease-out;
}

.show:checked ~ .burger .icon {
  background: transparent;
}

.show:checked ~ .burger .icon:before {
  transform: rotate(-45deg);
}

.show:checked ~ .burger .icon:after {
  transform: rotate(45deg);
}

.show:checked ~ .burger .icon:before,
.show:checked ~ .burger .icon:after {
  top: 0;
}

.menu {
  grid-area: nav;
  display: flex;
  flex-direction: column; 

  font-size: var(--size-xs);
  max-height: 0;
  transition-property: padding-top, padding-bottom;
  transition-duration: 250ms;
  transition-timing-function: linear;
  overflow: hidden;
}

.show:checked ~ .menu {
  padding-inline: var(--space-xl);
  padding-block: var(--space-xs);
  max-height: fit-content;
}

.site-header .menu a:hover {
  color: var(--neutral-text-hover);
}

/* fix-me: hack to pull up main closer to header */
/* .site-header + * {
  margin-block-start: -.95rem;
} */

@media (orientation: portrait) {
  .menu > * {
    margin-block-start: var(--flow-space, 1rem);
  }
}

/* hide hambuger when space is avaible to display the menu */
@media (min-width: 800px) {
  .site-header .burger {
    display: none;
  }

  .site-header {
    display: grid;
    grid-template-areas:
       "brand  .  nav  nav";
    justify-items: center;
    align-items: space-between;
  }  

  .menu {
    justify-self: end;
    flex-direction: row;
    gap: var(--space-s);
    max-height: fit-content;
    width: fit-content;
  }

  .menu > * {
    margin-block-start: 0;
  }
}