/* Adapted from React Bits' Dock: same magnify-on-proximity interaction, restyled to
   sit inline in the site header (not floating fixed over the page) and driven by a
   small vanilla spring-ish size transition instead of Framer Motion. */

.dock-outer {
  display: none;
  position: relative;
  align-items: center;
  height: 100%;
}
@media (min-width: 901px) {
  .dock-outer { display: flex; }
  /* Only hide the plain-text nav once the dock has actually mounted (see dock
     init script) — without JS the text nav stays put so navigation never breaks. */
  .header-dock-active .main-nav { display: none; }
}

.dock-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--dock-panel-height, 52px);
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-sm);
}

.dock-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dock-size, 40px);
  height: var(--dock-size, 40px);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: width 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease;
}
.dock-item:hover,
.dock-item:focus-visible,
.dock-item.is-active {
  background: rgba(255, 106, 26, 0.16);
}
.dock-item:focus-visible {
  box-shadow: 0 0 0 2px var(--amber);
}

.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--dock-size, 40px) * 0.52);
  height: calc(var(--dock-size, 40px) * 0.52);
  color: var(--white);
  transition: width 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.dock-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.7;
}
.dock-item.is-active .dock-icon,
.dock-item:hover .dock-icon,
.dock-item:focus-visible .dock-icon {
  color: var(--amber);
}

.dock-item__dot {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateX(-50%);
  opacity: 0;
}
.dock-item.is-active .dock-item__dot {
  opacity: 1;
}

.dock-label {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--ink);
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}