/*
Module Name= Dynamic Nav
Updated= 26.01.30 */

/*
=Nav Container
============================================= */
nav {
 position: fixed;
 top: 0; bottom: 0; left: -25rem;

 overflow-y: scroll;
 scrollbar-width: none;

 width: 25rem;
 transition: 
  background-color 500ms ease,
  left 500ms ease,
  width 500ms ease; /* mobile view */
}

input#hamburger:checked ~ nav {
 background-color: rgb(250 248 246/ 0.9);
 left: 0;
}

@media (max-width: 574.98px) {
 input#hamburger:checked ~ nav {
  width: 100vw;
 }
}

/*
=Nav Links
============================================= */
nav a {
 color: transparent;
 text-transform: uppercase;
 /* font-size: 72.5%; */
 font-size: 0.975rem;
 /* font-weight: 375; */
 /* font-weight: 400; */
 font-weight: 425;
 /* font-weight: 450; */
 letter-spacing: 0.125rem;
 display: block;
 border-bottom: 0.1rem solid transparent;
 margin: 0 2rem;
 padding: 0.7rem 0;
 transition: 
  color 500ms ease,
  border-bottom-color 500ms ease,
  padding-left 150ms ease-in,
  border-top-color 500ms ease;
}

nav a:first-child { margin-top: 8rem; }
nav a:last-child  { margin-bottom: 3rem; }

input#hamburger:checked ~ nav a {
 color: rgb(58 65 72);
 border-bottom-color: rgb(0 0 0 / 0.075);
}

input#hamburger:checked ~ nav a:hover {
 color: rgb(255 45 0);
 padding-left: 0.5rem;
}

nav a:first-child {
 border-top: 0.1rem solid transparent;
}

input#hamburger:checked ~ nav a:first-child {
 border-top-color: rgb(0 0 0 / 0.075);
}

input#hamburger:checked ~ nav a.red {
 color: rgb(255 45 0);
}

/* ========================================== */