/* ============================================================
   NAV DOCKING · full-width at the top of the page, pill once scrolled
   Loaded LAST so its longhand border/padding overrides win ties against
   .site-nav and .site-nav.on-light. Paired with nav-dock.js.
   ============================================================ */

/* The floating pill (default .site-nav) is the resting state; the docked state
   is added by JS while scrollY is at the top. Extends the existing transition
   list with the frame properties so the shrink animates rather than snaps. */
.site-nav {
  transition: background 0.45s ease,
              color 0.45s ease,
              border-color 0.45s ease,
              filter 0.45s ease,
              opacity 0.3s ease,
              left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              right 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              bottom 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The nav's stroke is always --lines, in every state. Listed explicitly so this
   beats the two rules that would otherwise recolour it: .site-nav.on-light
   (which flipped it to ink over cream sections) and the colour-takeover rule
   (which flipped it to near-white on project hover). */
.site-nav,
.site-nav.on-light,
:root.color-takeover .site-nav {
  border-color: var(--lines, #A2A2A2);
}

/* Docked — seated into the bottom edge of the hero, full bleed.
   Side and bottom strokes fade to transparent rather than being removed, so the
   1px never collapses and the contents don't shift during the transition.
   The takeover variant is spelled out so it can't out-specify these. */
.site-nav.is-docked {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  /* Safety margin on the docking direction only: lets the last sub-pixel of
     scroll settle before the blurred panel starts sweeping downward. Undocking
     inherits 0s from .site-nav, so detaching stays instant. */
  transition-delay: 80ms;
}

.site-nav.is-docked,
.site-nav.on-light.is-docked,
:root.color-takeover .site-nav.is-docked {
  border-top-color: var(--lines, #A2A2A2);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* Mobile sets `padding: 10px 18px !important`, so match that weight to win. */
@media (max-width: 900px) {
  .site-nav.is-docked {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease; }
}