/* Nav — builds on theme.css (section, links). Everything snaps to the 8px unit; the pixel is
   4px, matching the theme's border and shadow. */

#nav { padding-block: 16px 0; }

#nav .nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-bottom: 16px;
}

/* Bitmap type for short strings only: the name and the link labels. */
#nav .nav-brand,
#nav .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  color: var(--fg);
  text-decoration: none;
}

#nav .nav-brand { gap: 16px; }

/* 4x4 mark drawn at 4px per pixel: a yellow block with the theme's hard shadow. */
#nav .nav-mark {
  flex: none;
  width: 16px;
  height: 16px;
  background: #FFCD75;
  box-shadow: 4px 4px 0 #29366F;
}

#nav .nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
#nav .nav-links li { max-width: none; }

/* The transparent border keeps the box still when the hover marker appears. */
#nav .nav-link {
  padding: 0 8px;
  border-bottom: 4px solid transparent;
}
/* Yellow clears 4.5:1 on --bg. */
#nav .nav-link-out { color: #FFCD75; }

#nav .nav-link:hover,
#nav .nav-link:focus-visible { border-bottom-color: #FFCD75; }
#nav .nav-link:active { transform: translate(0, 4px); }
#nav .nav-brand:focus-visible,
#nav .nav-link:focus-visible { outline: 4px solid #41A6F6; outline-offset: 4px; }

/* Bottom rule: 4px checkerboard dither, hard stops only. */
#nav .nav-dither {
  height: 8px;
  background-color: var(--bg);
  background-image: repeating-conic-gradient(#29366F 0% 25%, #1A1C2C 0% 50%);
  background-size: 8px 8px;
  image-rendering: pixelated;
}

@media (max-width: 720px) {
  #nav .nav-links { gap: 0; margin-inline: -8px; }
}