/* ===== NodApproved site header ======================================
   A port of the MicroArts header (css/siteHeader.css), same structure and
   same behaviours, dressed in NodApproved's logo, links and typeface.

   Colours invert: default = white elements for dark backgrounds,
   .over-light = black for light regions, toggled by the sampler in nav.js.
   The bar itself is progressive frosted glass with NO tint of its own, so
   it never has to invert — it just blurs whatever is behind it and keeps
   that background's brightness.
   ==================================================================== */
.nod-nav {
  --nav-fg: #f2f2f0;                 /* element colour on dark bg */
  --nav-bg: #101011;                 /* pill text / inverse of fg */
  --nav-h: 78px;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  pointer-events: none;              /* transparent areas don't block content */
  font-family: Inter, "Helvetica Neue", Helvetica, sans-serif;
}
.nod-nav.over-light {
  --nav-fg: #0c0c0e;
  --nav-bg: #f2f2f0;
}

/* Progressive glass: sharp along the bar's bottom edge, blurring away
   towards the top, so there is no hard line where the effect stops. */
.nod-nav::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: transparent;
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.42) 42%, #000 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.42) 42%, #000 100%);
}

.nod-nav-inner {
  pointer-events: auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 5rem);
}

/* ---- logo, hard left ----
   The finished NODAPPROVED wordmark, exported from Logo/NODAPPROVED Logo/
   (the 5k masters, trimmed to their own ink). Both the white and the black
   artwork ship, because the studio drew both — a CSS invert() of the white
   one would land on the same pixels here, but only by luck of the mark
   being pure white on transparent, and it would stop being true the moment
   the logo gains a colour. The black layer sits on ::after at opacity 0 and
   fades in over a light region, so the change reads as the same crossfade
   the links and pill already do. Sizing is by height + the file's own
   aspect ratio, so a new export cannot silently squash it. */
.nod-logo {
  --logo-h: 36px;
  display: inline-flex; align-items: center;
  height: var(--nav-h);
  color: var(--nav-fg);
  text-decoration: none;
}
.nod-logo-mark {
  position: relative;
  display: block;
  height: var(--logo-h);
  aspect-ratio: 900 / 214;
  flex: 0 0 auto;
  background: url(nod-wordmark-w.png) left center / contain no-repeat;
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.nod-logo-mark::after {
  content: '';
  position: absolute; inset: 0;
  background: url(nod-wordmark-b.png) left center / contain no-repeat;
  opacity: 0;
  transition: opacity .4s ease;
}
.nod-nav.over-light .nod-logo-mark::after { opacity: 1; }

/* Hover: it pops. The Webflow brand link had this (a MOUSE_OVER bound to the
   built-in POP preset) and it went missing when the header was replaced.
   Rebuilt in CSS so it belongs to the logo itself and holds on every page and
   for both artworks. Origin is the left edge, not the centre — that gutter is
   measured, and growing out of the middle would nudge it. */
.nod-logo:hover .nod-logo-mark { transform: scale(1.07); }

/* Short mark, for pages that only want the NOD (index.html asks for it via
   data-nod-logo="mark"). Not simply the same box: the ticks above and below
   reach further past the letters here, so matching heights would shrink the
   word. Sized on the LETTERS instead — 41/36 is the measured ratio of the two
   N cap heights, so the NOD reads exactly as large as the NOD inside the long
   lockup. Both are trimmed to their own ink, so the left edge lands on the
   same pixel either way. */
.nod-nav.is-short .nod-logo { --logo-h: 41px; }
.nod-nav.is-short .nod-logo-mark {
  aspect-ratio: 511 / 500;
  background-image: url(nod-mark-w.png);
}
.nod-nav.is-short .nod-logo-mark::after { background-image: url(nod-mark-b.png); }

/* iPad and phone get the same lockup, one size down */
@media (max-width: 1024px) {
  .nod-logo { --logo-h: 30px; }
  .nod-nav.is-short .nod-logo { --logo-h: 34px; }
}
@media (max-width: 560px) {
  .nod-logo { --logo-h: 26px; }
  .nod-nav.is-short .nod-logo { --logo-h: 30px; }
}

/* ---- links ---- */
.nod-links {
  display: flex; align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  height: var(--nav-h);
}
.nod-link {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--nav-fg);
  opacity: .72;
  text-decoration: none;
  transition: color .4s ease, opacity .25s ease;
}
.nod-link:hover { opacity: 1; }
.nod-link[aria-current="page"] { opacity: 1; }

/* ---- cta pill (inverts with the theme) ---- */
.nod-morph { position: relative; display: flex; align-items: center; }
.nod-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 22px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--nav-bg);
  background: var(--nav-fg);
  text-decoration: none;
  transition: transform .25s ease, background .4s ease, color .4s ease, box-shadow .25s ease;
}
.nod-cta:hover {
  transform: translateY(-1px);
  background: #ffbf00; color: #14100a;
  box-shadow: 0 12px 30px -18px rgba(255, 191, 0, .9);
}

/* ---- burger ---- */
.nod-burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 42px; height: 42px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.07);
  cursor: pointer;
  transition: opacity .32s ease, transform .32s ease, background .4s ease;
}
.nod-nav.over-light .nod-burger { background: rgba(12,12,14,.06); }
.nod-burger span {
  display: block; width: 20px; height: 2px;
  background: var(--nav-fg);
  transition: transform .25s ease, opacity .25s ease, background .4s ease;
}

/* ---- fullscreen mobile menu ---- */
.nod-mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 2rem;
  background: rgba(10,10,11,.95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  font-family: Inter, "Helvetica Neue", Helvetica, sans-serif;
}
.nod-mobile-nav.active { display: flex; }
.nod-mobile-nav a {
  color: #f2f2f0; text-decoration: none;
  font-weight: 300;
  font-size: clamp(2rem, 11vw, 3.2rem); line-height: 1;
  letter-spacing: -.01em;
}
.nod-mobile-nav .nod-cta {
  font-size: 12px; font-weight: 600;
  color: #101011; background: #f2f2f0;
  padding: 14px 26px; margin-top: 1rem;
}

/* ---- mobile morph: burger <-> pill on scroll direction ---- */
@media (max-width: 820px) {
  .nod-link { display: none; }
  .nod-burger { display: inline-flex; }
  .nod-morph .nod-cta {
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%) translateX(10px) scale(.9);
    opacity: 0; pointer-events: none; white-space: nowrap;
    min-height: 36px; padding: 0 16px;
    font-size: 10.5px; letter-spacing: .14em;
  }
  .nod-nav.is-cta .nod-burger { opacity: 0; transform: scale(.8); pointer-events: none; }
  .nod-nav.is-cta .nod-morph .nod-cta {
    opacity: 1; transform: translateY(-50%) translateX(0) scale(1); pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nod-logo-mark, .nod-logo-mark::after, .nod-cta, .nod-burger, .nod-burger span, .nod-nav::after {
    transition: none !important;
  }
  .nod-logo:hover .nod-logo-mark { transform: none; }
}