/* nav.css — Your work goes here. */

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
   position: fixed;
   height: var(--nav-height);
   min-width: 100%;
   background: var(--color-surface);
   border-bottom: var(--color-border) 5px solid;
   z-index: 100;
   backdrop-filter: blur(50%);
}

/* ============================================================
   SITE NAV
   ============================================================ */

.site-nav {
   display: flex;
   flex-direction: row;
   max-width: var(--max-width);
   align-items: center;
   margin: 0 auto;
   padding-left: var(--gutter);
   padding-right: var(--gutter);
   height: var(--nav-height);
   justify-content: space-between;
}

.nav-logo {
   font-weight: 700;
   color: var(--color-accent-light);
}

/* ============================================================
   DESKTOP NAV LINKS
   ============================================================ */

.nav-links {
   display: flex;
   flex-direction: row;
   gap: var(--gutter);
   list-style: none;
   align-items: center;
   height: 100%;
}

@media (max-width: 768px) {
   .nav-links {
      display: none;
   }
}

.nav-link {
   color: var(--color-text-muted);
   font-size: 1em;
   transition: var(--transition-base);

   &:hover {
      color: var(--color-text)
   }
}

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */

.nav-toggle {
   display: flex;
   flex-direction: column;
   gap: 5px;
   align-items: center;
   justify-content: center;
   width: 2rem;
   height: 2rem;
   background: none;
   cursor: pointer;
   border: none;

   .hamburger-line {
      width: 100%;
      height: 2px;
      background: var(--color-text);
      border-radius: 2px;
      transition: transform var(--transition-base), opacity var(--transition-base);
   }

   &[aria-expanded="true"] {
      .hamburger-line:nth-child(1) {
         transform: rotate(45deg) translateY(10px);
      }

      .hamburger-line:nth-child(2) {
         opacity: 0;
      }

      .hamburger-line:nth-child(3) {
         transform: rotate(-45deg) translateY(-10px);
      }
   }
}

@media (min-width: 768px) {
   .nav-toggle {
      display: none;
   }
}


/* ============================================================
   SLIDE-OUT MENU PANEL
   ============================================================ */

.slide-menu {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 150;
   width: var(--slide-menu-width);
   height: 100vh;
   padding: 2rem;
   background: var(--color-surface);
   border-left: var(--color-border) 4px solid;
   transform: translateX(100%);
   transition: var(--transition-slide);
   
   &.is-open {
      transform: translateX(0);
   }
}

.slide-menu-close {
   position: absolute;
   top: 0;
   right: 20px;
   background: none;
   border: none;
   font-size: 2rem;
   cursor: pointer;
   color: var(--color-text-muted);
   transition: color var(--transition-base);
   
   &:hover {
      color: var(--color-text);
   }
}

/* ============================================================
   STAGGERED LINK ENTRANCE
   ============================================================ */

@keyframes link-enter {
   0% {
      opacity: 0;
      transform: translateX(16px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

.slide-menu-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 10px;
}

.slide-menu-link {
   opacity: 0;
   font-size: 1.5em;
   color: var(--color-text-muted);
   transition: color var(--transition-base);

   &:hover {
      color: var(--color-text);
   }
}

.slide-menu.is-open .slide-menu-link {
   animation: link-enter 250ms ease-out forwards;
}

.slide-menu.is-open .slide-menu-links li:nth-child(1) .slide-menu-link {
   animation-delay: 0ms;
}
.slide-menu.is-open .slide-menu-links li:nth-child(2) .slide-menu-link {
   animation-delay: 50ms;
}
.slide-menu.is-open .slide-menu-links li:nth-child(3) .slide-menu-link {
   animation-delay: 100ms;
}
.slide-menu.is-open .slide-menu-links li:nth-child(4) .slide-menu-link {
   animation-delay: 150ms;
}

/* ============================================================
   OVERLAY
   ============================================================ */

.slide-overlay {
   position: fixed;
   inset: 0;
   background: var(--color-overlay);
   z-index: 120;
   opacity: 0;
   pointer-events: none;
   transition: var(--transition-slide);

   &.is-open {
      opacity: 1;
      pointer-events: auto;
   }
}