/* 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;
  border-bottom: 3px solid var(--theme-dark-alt);
}
.nav-logo {
  /* margin: 2rem; */
  max-width: 85px;
}

/* MAKE LOGO HIDDEN ON PAGE LOAD */
/* .navbar-band {
  visibility: hidden; 
  opacity: 0;  
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
} */



.primary-header {
  align-items: center;
  justify-content: space-between;
  background-color: #212121d8;

  
  /* border-bottom: 4px solid var(--sv-light); */
  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 */




  backdrop-filter: blur(.42rem);
  background-image: url("low-contrast-linen.png");

}


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

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

.primary-navigation li a {
  font-family: inherit;
  padding: 5px 10px;
  text-decoration: none;

  text-align: center;
  /* border: 4px solid var(--sv-light); */
  /* border-radius: 8px; */
  display: block;
  font-size: 2rem;
  font-family: var(--ff-alt);
}

/* 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: #b98d9e;
}


/* Mobile Navigation styles */
@media (max-width: 75em) {
  .primary-navigation {
      --gap: .5rem;

      position: fixed;
      z-index: 1000;
        /* inset: 0 0 0 30%; */

        top: 0;
        right: 0;
        bottom: 0;
        left: 30%;


      margin: 0 auto;

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

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

      background: #151515cd;
      /* border-left: 4px solid var(--sv-light); */

  }

  .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 {
  
    margin-bottom: 2.5em ;
  }

  @supports (backdrop-filter: blur(.42rem)) {

    .primary-header {

      backdrop-filter: blur(.42rem);
    
  }

      .primary-navigation {

          background-color: #1a1a1aeb;
          backdrop-filter: blur(.42rem);
          height: 100vh;

          background-image: url("low-contrast-linen.png");

        
      }
  
  }



} /* end media query */