/* Floating bordered header, as on nullmask.io. Swaps theme with the section below. */

.nav {
  --nav-bg: var(--nm-bg);
  --nav-fg: var(--nm-ink);
  --nav-bd: var(--nm-black);
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10001;
  width: 100%;
  max-width: 1440px;
  padding: 14px 16px 0;
  transform: translateX(-50%);
}
.nav[data-nav-theme='dark'] {
  --nav-bg: var(--nm-dark);
  --nav-fg: var(--nm-bg);
  --nav-bd: var(--nm-bg);
}

.nav__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--nav-h);
  border: 1px solid var(--nav-bd);
  border-radius: var(--r-lg);
  background: var(--nav-bg);
  color: var(--nav-fg);
  transition: background-color 500ms, color 500ms, border-color 500ms, border-radius 200ms;
}
.nav.is-open .nav__bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 14px;
  text-decoration: none;
  min-width: 0;
}
.nav__brand .nm-mark { height: 52px; }
.nm-wordmark { width: 196px; height: auto; aspect-ratio: 242 / 30; flex: none; }
.nav__product {
  padding: 4px 0 4px 14px;
  border-left: 1px solid currentColor;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav__links a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__links a:hover { background: var(--nm-lime); color: var(--nm-black); }

.nav__end { display: flex; align-items: center; }
.nav__connect { margin-right: 14px; }
[data-nav-theme='dark'] .nav__connect:hover { box-shadow: 3px 3px 0 var(--nm-bg); }

.nav__menu {
  display: none;
  align-self: stretch;
  width: 72px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--nav-bd);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 500ms;
}
.nav__menu svg { width: 44px; margin: auto; }
.nav__menu[aria-expanded='true'] path { d: path('M20 20L45 43M20 43L45 20'); }

.nav__sheet {
  border: 1px solid var(--nav-bd);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--nav-bg);
  color: var(--nav-fg);
  padding: 8px 16px 18px;
  transition: background-color 500ms, color 500ms;
}
.nav__sheet nav { display: grid; margin-bottom: 14px; }
.nav__sheet nav a {
  padding: 14px 4px;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

@media (max-width: 1240px) {
  .nav__product { display: none; }
}

@media (max-width: 1079px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .nav { padding: 10px 10px 0; }
  .nav__brand { gap: 10px; padding-left: 10px; }
  .nav__brand .nm-mark { height: 42px; }
  .nm-wordmark { width: 148px; }
  .nav__connect { display: none; }
  .nav__menu { width: 64px; }
}