/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: nav-bar */
/* cf: pointer-fine-density */

/* ── Nav bar ── */
.strand-nav {
  position: relative;
  width: 100%;
  height: var(--strand-nav-height);
  background: var(--strand-surface-elevated);
  border-bottom: 1px solid var(--strand-gray-200);
  font-family: var(--strand-font-sans);
}

.strand-nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: inherit;
  padding: 0 var(--strand-space-8);
}

.strand-nav__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-right: var(--strand-space-8);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-blue-midnight);
  text-decoration: none;
  position: relative;
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__logo:hover {
  color: var(--strand-blue-deep);
}

.strand-nav__logo:active {
  color: var(--strand-blue-abyss);
}

.strand-nav__logo--pulse::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--strand-blue-primary);
  border-radius: var(--strand-radius-sm);
  animation: strand-nav-logo-pulse 2s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-nav-logo-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-nav__logo--pulse::after {
    animation: none;
    opacity: 0.6;
  }
}

.strand-nav__items {
  display: flex;
  align-items: center;
  gap: var(--strand-space-6);
  list-style: none;
  flex: none;
}

.strand-nav__slot {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.strand-nav__items + .strand-nav__slot {
  margin-left: var(--strand-space-8);
}

.strand-nav__slot--reserve {
  min-width: var(--strand-nav-slot-reserve, 14rem);
  justify-content: flex-end;
}

/* ── Links ── */
.strand-nav__link {
  color: var(--strand-gray-600);
  text-decoration: none;
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  white-space: nowrap;
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__link:hover {
  color: var(--strand-gray-900);
}

.strand-nav__link--active {
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-medium);
}

.strand-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--strand-space-3);
  margin-left: auto;
  flex: none;
  min-inline-size: max-content;
}

/* ── Hamburger ── */
.strand-nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: var(--strand-radius-md);
  background: transparent;
  color: var(--strand-gray-600);
  cursor: pointer;
  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__hamburger:hover {
  background: var(--strand-gray-200);
}

.strand-nav__hamburger-icon {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.strand-nav__hamburger-icon::before,
.strand-nav__hamburger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.strand-nav__hamburger-icon::before {
  top: -6px;
}

.strand-nav__hamburger-icon::after {
  top: 6px;
}

.strand-nav__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  width: 100%;
  padding: var(--strand-space-4) var(--strand-space-6);
  background: var(--strand-surface-elevated);
  border-bottom: 1px solid var(--strand-gray-200);
  box-shadow: var(--strand-elevation-2);
  z-index: 99;
}

.strand-nav__mobile-menu--open {
  display: flex;
}

.strand-nav__mobile-link {
  display: block;
  padding: var(--strand-space-3) 0;
  color: var(--strand-gray-600);
  text-decoration: none;
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__mobile-link:hover {
  color: var(--strand-gray-900);
}

.strand-nav__mobile-link--active {
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-semibold);
}

@media (max-width: 767px) {
  .strand-nav__items {
    display: none;
  }

  .strand-nav__slot {
    margin-left: auto;
  }

  .strand-nav__slot--reserve {
    min-width: var(--strand-nav-slot-reserve-sm, 11.75rem);
  }

  .strand-nav__hamburger {
    display: inline-flex;
  }

  .strand-nav {
    height: auto;
    min-height: var(--strand-nav-height);
  }
}

@media (max-width: 479.98px) {
  .strand-nav__inner {
    padding-inline: var(--strand-space-4);
  }
}

@media (pointer: fine) {
  .strand-nav__actions .strand-btn,
  .strand-nav__slot .strand-btn {
    min-height: 34px;
    padding-block: 0;
    padding-inline: var(--strand-space-3);
  }

  .strand-nav__actions .strand-btn.strand-btn--icon-only,
  .strand-nav__slot .strand-btn.strand-btn--icon-only {
    padding: 0;
    min-width: 34px;
    min-height: 34px;
  }
}

.strand-nav--glass {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--strand-scrollbar-gap, 0px);
  z-index: 100;
  height: var(--strand-nav-height);
  background: var(--strand-glass-bg);
  -webkit-backdrop-filter: blur(var(--strand-glass-blur));
  backdrop-filter: blur(var(--strand-glass-blur));
  border-bottom: 1px solid var(--strand-glass-border);
}

.strand-nav--scrolled {
  box-shadow: var(--strand-elevation-1);
  border-bottom-color: var(--strand-nav-scrolled-border);
}

.strand-nav--glass {
  transition:
    box-shadow var(--strand-duration-normal) ease,
    border-color var(--strand-duration-normal) ease;
}

.strand-nav.strand-nav--instrument {
  background: var(--strand-instrument-bg-translucent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--strand-instrument-border);
}

.strand-nav.strand-nav--instrument .strand-nav__logo {
  color: var(--strand-blue-primary);
  text-shadow: 0 0 12px rgba(59, 142, 246, 0.3);
}

.strand-nav.strand-nav--instrument .strand-nav__link {
  color: var(--strand-instrument-text-secondary);
}

.strand-nav.strand-nav--instrument .strand-nav__link:hover {
  color: var(--strand-instrument-text-primary);
}

.strand-nav__title {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-instrument-text-primary);
  text-shadow: 0 0 16px rgba(59, 142, 246, 0.15);
  margin-right: auto;
}

.strand-nav__title-tag {
  font-weight: var(--strand-weight-regular);
  color: var(--strand-gray-400);
  margin-left: var(--strand-space-1);
}

body:has(.strand-nav--glass) {
  padding-top: var(--strand-nav-height);
}

body:has(.strand-nav--glass):has(.strand-banner) {
  padding-top: calc(var(--strand-nav-height) + var(--strand-banner-height, 0px));
}

body.strand-glass-nav-active {
  padding-top: var(--strand-nav-height);
}

body.strand-glass-nav-active.strand-banner-active {
  padding-top: calc(var(--strand-nav-height) + var(--strand-banner-height, 0px));
}