/* ============================================================
   np-nav.css — site-wide navigation, styled to match the ORIGINAL
   Neophyte design (Figma nav .css-sgc41g), which we measured as:
     - transparent bar over a periwinkle band  rgb(209,220,255) = #D1DCFF
     - link text: black, ~20px, ABC Favorit (the real brand display face,
       now self-hosted from assets/brand/fonts/abc-favorit/)
     - starburst logo-neophyte.svg ~51px, red divider #CA1E08 (1px x 52px)
   Injected by js/np-nav.js on every page. (The old Figma grid nav
   .css-sgc41g has been physically removed from the page markup.)
   ============================================================ */

/* --- ABC Favorit (Dinamo) — the brand display face. Licensed webfont,
       self-hosted per the DINAMO EULA (woff2/woff only; no desktop OTF
       on the web). --- */
@font-face {
  font-family: 'ABC Favorit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/brand/fonts/abc-favorit/ABCFavorit-Regular.woff2') format('woff2'),
       url('../assets/brand/fonts/abc-favorit/ABCFavorit-Regular.woff') format('woff');
}

/* --- (legacy Figma grid nav .css-sgc41g removed from markup; the old
       display:none hide-rule is no longer needed and has been dropped) --- */

/* --- the navbar: matches the original periwinkle band + black type --- */
.np-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 22px;
  padding: 10px 24px;
  background: #D1DCFF;                      /* original band colour */
  font-family: 'ABC Favorit', 'Outfit', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}
.np-nav * { box-sizing: border-box; }

/* brand / logo (far left) — starburst mark, square viewBox 51x51 */
.np-nav__brand {
  display: flex; align-items: center;
  text-decoration: none; flex: 0 0 auto; margin-right: 6px;
}
.np-nav__brand img { width: 44px; height: 44px; display: block; }

/* primary links group */
.np-nav__links {
  display: flex; align-items: center; gap: 6px;
  margin-right: auto;               /* pushes divider + socials to the right */
}
/* links + CTA share one look — in the original, "Get PHYTE" was plain
   black text just like the others (not a button) */
.np-nav__links a,
.np-nav__cta {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 6px;
  font-family: 'ABC Favorit', 'Outfit', system-ui, sans-serif;
  font-size: 20px; font-weight: 400; letter-spacing: 0;
  line-height: 22px; color: #000; background: none;
  text-decoration: none; white-space: nowrap;
  transition: color .15s ease;
}
/* hover / active affordance: green text (matches brand.html .brand-nav) */
.np-nav__links a:hover,
.np-nav__links a:focus-visible,
.np-nav__cta:hover,
.np-nav__cta:focus-visible { color: #2FBF39; }
.np-nav__links a.is-active { color: #2FBF39; }

.np-nav__cta { flex: 0 0 auto; }

/* thin red dividers between menu items (brand red #CA1E08).
   Each link after the first gets a left rule; the gap is widened so the
   line sits centered in the space between items. The CTA ("Get PHYTE")
   is part of the same menu run, so it gets a divider before it too. */
.np-nav__links { gap: 0; }
.np-nav__links a + a,
.np-nav__cta {
  border-left: 1px solid #CA1E08;
}
.np-nav__links a,
.np-nav__cta { margin-left: 8px; padding-left: 16px; }
.np-nav__links a:first-child { margin-left: 0; border-left: 0; }

/* red vertical divider before the social cluster (original: 1px x 52px) */
.np-nav__sep {
  width: 1px; height: 34px; background: #CA1E08;
  flex: 0 0 auto; margin: 0 10px;
}

/* social icons (far right). Icon SVGs fill black by default -> visible on
   the light band. */
.np-nav__socials {
  display: flex; align-items: center; gap: 18px; flex: 0 0 auto;
}
.np-nav__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.9; transition: opacity .15s ease, transform .1s ease;
}
.np-nav__socials a:hover,
.np-nav__socials a:focus-visible { opacity: 1; transform: translateY(-1px); }
/* these icon SVGs have no intrinsic size + preserveAspectRatio="none",
   so set explicit width/height per icon (height 18px x viewBox ratio) to
   avoid a 300px fallback width and prevent distortion */
.np-nav__socials img { height: 18px; width: auto; display: block; }
.np-nav__socials a[aria-label="X"]       img { width: 21px; }  /* 25 x 21   */
.np-nav__socials a[aria-label="Discord"] img { width: 24px; }  /* 26 x 19.8 */
.np-nav__socials a[aria-label="YouTube"] img { width: 26px; }  /* 28 x 19.7 */
.np-nav__socials a[aria-label="TikTok"]  img { width: 15px; }  /* 17 x 20   */

/* --- responsive: hamburger under 860px --- */
.np-nav__toggle {
  display: none; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.np-nav__toggle span {
  display: block; width: 24px; height: 2px; margin: 5px 0;
  background: #000; transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 860px) {
  .np-nav { flex-wrap: wrap; gap: 12px; padding: 10px 18px; }
  .np-nav__toggle { display: block; }
  .np-nav__links,
  .np-nav__cta,
  .np-nav__sep,
  .np-nav__socials { display: none; }

  .np-nav.is-open { flex-direction: column; align-items: stretch; }
  .np-nav.is-open .np-nav__links {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; gap: 2px; margin: 6px 0 0;
  }
  .np-nav.is-open .np-nav__links a { padding: 10px 12px; }
  .np-nav.is-open .np-nav__cta {
    display: inline-flex; width: 100%; justify-content: flex-start;
    padding: 10px 12px;
  }
  .np-nav.is-open .np-nav__sep { display: none; }
  .np-nav.is-open .np-nav__socials {
    display: flex; justify-content: center; gap: 26px;
    width: 100%; padding: 12px 0 4px; margin-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.15);
  }
  .np-nav.is-open .np-nav__socials img { height: 22px; }

  /* hamburger -> X when open */
  .np-nav.is-open .np-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .np-nav.is-open .np-nav__toggle span:nth-child(2) { opacity: 0; }
  .np-nav.is-open .np-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}