/*
  hub-v2.css — styles for the SVG-based honeycomb nav.
  All positioning is in SVG coordinates; CSS only handles colors and sizing.
*/

.hub__version-toggle {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 60;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.8rem;
  border-radius: 14px;
  background: rgba(20, 21, 42, 0.6);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.2s var(--easing);
}
.hub__version-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
}

/* Container holding the SVG strip */
.hub__nodes--v2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 1rem auto 0;
  padding: 0 var(--gutter);
  color: var(--accent);
}

/* The SVG itself */
.hub-v2-nav {
  width: min(720px, 96vw);
  height: auto;
  display: block;
  overflow: visible;
}

/* Each hex group is wrapped in <a>; the SVG <g> holds the visual */
.hub-v2-nav a {
  cursor: pointer;
  outline: none;
}

.hub-v2-hex-bg {
  fill: rgba(20, 21, 42, 0.85);
  stroke: var(--accent);
  stroke-width: 1.4;
  transition: fill 0.25s, stroke-width 0.25s, filter 0.25s;
}

.hub-v2-icon {
  color: var(--accent);
  pointer-events: none;
}

.hub-v2-nav a:hover .hub-v2-hex-bg,
.hub-v2-nav a:focus-visible .hub-v2-hex-bg {
  fill: var(--accent-soft);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 12px rgba(201, 169, 97, 0.5));
}

/* Per-hex text labels (above top-row hexes, below bottom-row hexes) */
.hub-v2-label {
  font-family: var(--font-sans);
  font-size: 7.5px;
  letter-spacing: 0.02em;
  fill: var(--text-secondary);
  pointer-events: none;
  text-transform: uppercase;
  font-weight: 500;
}
.hub-v2-nav a:hover .hub-v2-label,
.hub-v2-nav a:focus-visible .hub-v2-label {
  fill: var(--text);
}