/* 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-zero-dark);
      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);
      padding-inline: clamp(1rem, 4vw, 2.5rem);
   }

   nav a {
      color: var(--color-zero-dark);
      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 (min-width: 48rem) {
      header {
         display: grid;
         grid-template-columns: auto auto minmax(0, 1fr);
         justify-content: start;
         align-items: center;
         column-gap: var(--space-3);
      }

      header #primary-nav {
         grid-column: 1;
         justify-self: start;
         justify-content: flex-start;
      }

      header .logo {
         grid-column: 2;
         justify-self: start;
         margin-left: clamp(.5rem, 3vw, 2rem);
      }

      header .nav-toggle {
         grid-column: 3;
         justify-self: start;
      }
   }

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

      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 {
         display: flex;
         align-items: center;
      }
   
      header::before {
         content: '';
         flex: 1 1 0;
      }
   
      #primary-nav {
         flex: 0 0 auto;
         margin-right: var(--space-3);
      }
   
      .logo {
         flex: 0 0 auto;
         margin-inline: auto clamp(0.5rem, 4vw, 2rem);
      }
   }*/

}