/* NAVIGATION ITEMS ONLY, CLASSES and ELEMENTS */

@layer components.nav {

   .nav-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: transparent;
      border: 1px solid color-mix(in srgb, var(--color-white) 45%, transparent);
      border-radius: var(--radius-1);
      color: var(--color-white);
      padding: 0.45rem 0.65rem;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease;
   }

   .nav-toggle:hover {
      background-color: color-mix(in srgb, var(--color-white) 12%, transparent);
   }

   .nav-toggle:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
   }

   .nav-toggle__box {
      display: inline-flex;
      flex-direction: column;
      gap: 0.25rem;
   }

   .nav-toggle__bar {
      width: 1.5rem;
      height: 2px;
      background: currentColor;
      border-radius: 999px;
      transition: transform 0.3s ease, opacity 0.3s ease;
   }

   .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
   }

   .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
      opacity: 0;
   }

   .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
   }

   nav {
      font: normal var(--fs-nav)/var(--lh-heading) var(--font-nav);
      letter-spacing: .07em;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: clamp(0.75rem, 3vw, 2rem);
      margin: 0 0 0 70px;
      padding-inline: clamp(1rem, 4vw, 2.5rem);
   }

   nav a {
      color: var(--color-white);
      text-decoration: none;
      font-weight: 500;
      position: relative;
      padding: 0.25rem 0;
   }

   nav a::after {
      content: '';
      display: block;
      width: 0;
      height: 2px;
      background: var(--color-accent);
      transition: width 0.3s;
      position: absolute;
      bottom: -4px;
      left: 0;
   }

   nav a:hover::after {
      width: 100%;
   }

   @media (max-width: 48rem) {
      .nav-toggle {
         display: inline-flex;
         margin-left: 0;
         margin-right: auto;
         order: 0;
      }

      nav {
         display: none;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         width: 100%;
         background: color-mix(in srgb, var(--color-bg) 88%, var(--color-black));
         border: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
         border-radius: var(--radius-1);
         padding-block: 0.25rem;
         margin-top: var(--space-2);
      }

      nav[data-open="true"] {
         display: flex;
      }

      nav a {
         text-align: center;
         padding: 0.75rem 1rem;
         width: 100%;
      }

      nav a + a {
         border-top: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
      }

      nav a::after {
         display: none;
      }
   }

   @media (min-width: 48rem) {
      header nav {
         justify-content: flex-start;
         padding-inline: 0;
      }
   }

}