/* utility classes */
.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


.sr-only {
  display: none;
}

/*  primary header  */
#header {
  z-index: 1000;
  padding: 5px;
  min-height: 95px;
}

.nav-logo {
  /* margin: 2rem; */
  /* max-width: 85px; */
}

.navbar-band {
  font-family: var(--ff-serif);
  text-decoration: none;
  font-size: var(--fs-600);
  padding: 10px 4px;
}



.primary-header {
  align-items: center;
  justify-content: space-between;
  background-color: var(--theme-white);

  /* border-bottom: 4px solid var(--theme-light); */
  backdrop-filter: blur(.42rem);


  box-shadow: 0 4px 2px -2px rgba(68, 40, 10, 0.3),
    /* Top highlight */
    0 -4px 2px -2px rgba(0, 0, 0, 0.6);
  /* Bottom shadow */

}


.mobile-nav-toggle {
  display: none;
}

.primary-navigation {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.primary-navigation li a {
  font-family: inherit;
  padding: 5px 10px 0px 10px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  display: block;
  font-size: 1rem;
  font-family: var(--ff-sans);
}

/* active classes for nav items */
/* update per project, obv */
body.home li.home a,
body.blog li.blog a,
body.blog-post li.blog-post a,
body.shows li.shows a,
body.bio li.bio a,
body.video li.video a,
body.music li.music a {
  color: var(--theme-alt);
  text-decoration: none;
}


/* Mobile Navigation styles */
@media (max-width: 55em) {
  .primary-navigation {
    --gap: .5rem;
    position: fixed;
    z-index: 1000;
    /* inset: 0 0 0 30%; */
    top: 0;
    right: 0;
    bottom: 0;
    left: .168%;

    margin: 0 auto;

    flex-direction: column;
    padding: min(5vh, 5rem) .5em;

    transform: translateX(100%);
    transition: 339ms ease-out;

    background: #efefefcd;
    padding-top: 150px;
    height: 100vh;


  }

  .primary-navigation[data-visible='true'] {
    transform: translateX(0%);
  }




  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 999999;
    width: 3rem;
    height: 3rem;
    border: none;

    background: url(bars.svg);
    background-repeat: no-repeat;

    /* top: 2rem; */
    right: 2rem;
  }

  .mobile-nav-toggle[aria-expanded='true'] {
    background-image: url(times.svg);
    position: fixed;
  }

  .primary-navigation li {

    color: white;

    margin-bottom: 2.5em;
    display: block;
    padding: 1rem 0;
    font-size: 2rem;
  }

  /* @supports (backdrop-filter: blur(.89rem)) {

    .primary-header {

      backdrop-filter: blur(.89rem);

    }

    .primary-navigation {

      background-color: var(--theme-dark);
      backdrop-filter: blur(.89rem);
      height: 100vh;

    }

  } */

} 

/* end media query */