/* Shared nav widget styles — used by every preview/*.html page.
   Edit here once; hero.html and nav.html both pull from this file. */

.spec-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 1rem; padding: 1rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Mobile: only 2 groups are ever visible (center nav is hidden), so a flex
   row + space-between fits them — the 3-col grid would still reserve the
   empty middle track and needlessly squeeze both groups toward the edges. */
.specimen[data-viewport="mobile"] .spec-nav { display: flex; justify-content: space-between; padding: 1rem 1.25rem; }
.spec-nav-left { display: flex; align-items: center; }
.spec-logo-icon { height: 1.3rem; width: auto; color: var(--wz-on-surface); flex-shrink: 0; }
.spec-nav-center {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  font-family: 'Funnel Display', var(--wb-sans); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em;
  text-transform: lowercase; color: color-mix(in srgb, var(--wz-on-surface) 60%, transparent);
}
.specimen[data-viewport="mobile"] .spec-nav-center { display: none; }
.spec-nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

.spec-status-cta { display: flex; align-items: center; gap: 1rem; }
.specimen[data-viewport="mobile"] .spec-status-cta { display: none; }
.spec-status {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  font-family: 'Funnel Display', var(--wb-sans); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: lowercase;
  color: color-mix(in srgb, var(--wz-on-surface) 55%, transparent);
}
.spec-status-dot { height: 6px; width: 6px; border-radius: 999px; background: var(--wz-primary); flex-shrink: 0; }

.spec-contact-wrap { position: relative; }
.spec-dropdown {
  position: absolute; right: 0; top: 100%; margin-top: 0.5rem; width: 14rem;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: var(--wz-surface);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4); overflow: hidden; z-index: 6;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.spec-contact-wrap:hover .spec-dropdown, .spec-contact-wrap:focus-within .spec-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.spec-dropdown-item {
  display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem;
  font-family: 'Funnel Display', var(--wb-sans); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.01em; text-transform: lowercase;
  color: color-mix(in srgb, var(--wz-on-surface) 70%, transparent); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spec-dropdown-item:last-child { border-bottom: none; }
.spec-dropdown-item.is-primary { color: var(--wz-on-surface); font-weight: 700; }

.spec-nav-icons { display: none; align-items: center; gap: 0.5rem; }
.specimen[data-viewport="mobile"] .spec-nav-icons { display: flex; }
.spec-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 2rem; width: 2rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: color-mix(in srgb, var(--wz-on-surface) 70%, transparent);
  font-family: var(--wb-mono); font-size: 0.6875rem;
}
.spec-icon-btn.burger { cursor: pointer; background: none; }
.spec-icon-btn.burger:hover { background: rgba(255,255,255,0.06); }
.spec-nav-cta {
  font-family: 'Funnel Display', var(--wb-sans); font-size: 0.75rem; letter-spacing: 0.01em; text-transform: lowercase;
  background: var(--wz-primary); color: var(--wz-on-primary); padding: 0.35rem 0.75rem; border-radius: 999px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem;
}

.mnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; border-bottom: 1px solid transparent; }
.mnav.is-open { grid-template-rows: 1fr; border-bottom-color: rgba(255,255,255,0.08); }
.mnav-inner { min-height: 0; overflow: hidden; }
.mnav-list { display: flex; flex-direction: column; padding: 0 1.25rem; background: var(--wz-surface); }
.mnav-list a, .mnav-list span.mnav-link {
  padding: 0.85rem 0; font-family: 'Funnel Display', var(--wb-sans); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.01em; text-transform: lowercase;
  color: color-mix(in srgb, var(--wz-on-surface) 85%, transparent); border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none; display: block;
}
.mnav-list span.mnav-link:last-child { border-bottom: none; }