/* Multi-page nav: dropdown tabs. Extends style.css's .nav tab hover. */

.nav-item { position: relative; display: flex; align-items: center; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(20,23,28,.12);
  padding: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown a {
  display: block;
  padding: .6rem .8rem;
  border-radius: 6px;
  font-size: .92rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dropdown a:hover { background: var(--wash); color: var(--ink); }
.dropdown a.soon { color: var(--muted); cursor: default; }
.dropdown a.soon:hover { background: none; color: var(--muted); }

@media (max-width: 900px) {
  .dropdown { display: none; } /* mobile nav handled separately, later */
}