/* nav.css : one navigation bar, symmetric on every screen.
   Desktop: brand on the left, the five sections centred on the page axis, "Email me" on the right.
   Phone:   menu on the left, brand centred, "Email me" on the right. Same three-column grid.
   Depth: a hairline fills along the bar as you read, and a selection frame sits on the section you are in.
   Loaded after bento-skin.css. Daz, 26 Oct 2026. */

:root { --nav-pad: clamp(1rem, 4vw, 3.5rem); --nav-rule: rgba(20, 40, 83, .2); --nav-ease: cubic-bezier(.16, 1, .3, 1); }

/* the wrapper had no width, so the three parts huddled at the left and the bar started 40px
   before the page content. Giving it the full width puts the bar on the same edges as the page. */
.nav_component > .padding-global { width: 100%; }

/* the old wayfinding (dot rail and a separate top line) is folded into the bar */
.scroll_rail, .scroll_progress { display: none !important; }

.nav_v2 { height: 4rem; background: #fff; border-bottom: 1px solid var(--nav-rule); }
.nav_v2 .nav_container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  height: 4rem;
}

/* ---------- 1. Left: brand (desktop) ---------- */
.nav_v2 .nav_brand { grid-column: 1; grid-row: 1; justify-self: start; min-height: 44px; }
.nav_v2 .nav_badge { border-radius: 2px; background: transparent; border-color: var(--nav-rule); }

/* ---------- 2. Centre: the five sections ---------- */
.nav_v2 .nav_menu { grid-column: 2; grid-row: 1; position: relative; display: flex; align-items: center; gap: 0; }
.nav_v2 .nav_link {
  position: relative; z-index: 1;
  min-height: 44px; padding: 0 .875rem; gap: .5rem;
  align-items: center;
  font-size: .875rem; font-weight: 600; color: var(--hx-ink, #142853);
  white-space: nowrap;
}
.nav_v2 .nav_link-num { font-size: .6875rem; color: var(--hx-blue, #3360FF); }
.nav_v2 .nav_link:hover { color: var(--hx-ink, #142853); }

/* the selection frame: it slides to the section you are in, and previews the link you point at */
.nav_frame {
  position: absolute; left: 0; top: 50%;
  width: 0; height: 34px; margin-top: -17px;
  border: 1px solid var(--hx-ink, #142853); border-radius: 2px;
  background: var(--hx-blush, #FFF1EE);
  opacity: 0; pointer-events: none; z-index: 0;
  transform: translateX(var(--fx, 0px));
  transition: transform .5s var(--nav-ease), width .5s var(--nav-ease), opacity .25s ease, background-color .25s ease;
}
.nav_frame.is-on { opacity: 1; }
.nav_frame.is-ghost { background: transparent; }
.nav_frame i {
  position: absolute; width: 10px; height: 10px; box-sizing: border-box;
  border: 1.5px solid var(--hx-ink, #142853); border-radius: 50%; background: #fff;
}
.nav_frame i:nth-child(1) { left: -6px; top: -6px; }
.nav_frame i:nth-child(2) { right: -6px; top: -6px; }
.nav_frame i:nth-child(3) { left: -6px; bottom: -6px; }
.nav_frame i:nth-child(4) { right: -6px; bottom: -6px; }

/* ---------- 3. Right: the one action ---------- */
.nav_v2 .nav_cta {
  grid-column: 3; grid-row: 1; justify-self: end;
  min-height: 44px; padding: 0 1.125rem;
  font-size: .875rem;
  --bx-fill: var(--hx-blue, #3360FF); --bx-fill-text: #fff;
}

/* ---------- 4. Depth: how far down the page you are ---------- */
.nav_progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--hx-blue, #3360FF);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  pointer-events: none;
}

/* the menu button only exists on small screens */
.nav_v2 .nav_toggle { display: none; }

/* the docked pop-up on a laptop starts below the bar, so it never covers the button */
@media (min-width: 992px) { html:not(.has-welcome) .reveal_card { --card-top-gap: 5rem; } }

/* the badge needs room: it steps aside on narrower laptops */
@media (max-width: 1179px) { .nav_v2 .nav_badge { display: none; } }

/* ---------- 5. Phones and tablets ---------- */
@media (max-width: 991px) {
  .nav_v2 .nav_container { column-gap: .5rem; }

  .nav_v2 .nav_toggle {
    display: inline-flex; align-items: center; gap: .625rem;
    grid-column: 1; grid-row: 1; justify-self: start;
    min-height: 44px; padding: 0 .75rem;
    font: 600 .75rem/1 var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: .08em; text-transform: uppercase;
    color: var(--hx-ink, #142853); background: transparent;
    border: 1px solid var(--nav-rule); border-radius: 2px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .nav_v2 .nav_toggle:hover, .nav_v2.is-open .nav_toggle { background: var(--hx-blush, #FFF1EE); border-color: var(--hx-ink, #142853); }
  .nav_v2 .nav_toggle:focus-visible { outline: 2px solid var(--hx-blue, #3360FF); outline-offset: 3px; }

  .nav_toggle-bars { position: relative; display: block; width: 16px; height: 11px; flex: none; }
  .nav_toggle-bars i {
    position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
    transition: transform .35s var(--nav-ease), top .35s var(--nav-ease);
  }
  .nav_toggle-bars i:nth-child(1) { top: 2px; }
  .nav_toggle-bars i:nth-child(2) { top: 8px; }
  .nav_v2.is-open .nav_toggle-bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .nav_v2.is-open .nav_toggle-bars i:nth-child(2) { top: 5px; transform: rotate(-45deg); }

  .nav_v2 .nav_brand { grid-column: 2; justify-self: center; }
  .nav_v2 .nav_cta { padding: 0 .875rem; font-size: .8125rem; }

  /* the list drops under the bar as one full-width sheet */
  .nav_v2 .nav_menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; align-items: stretch;
    margin-top: 1px; padding: .25rem 0 .5rem;
    background: #fff; border-bottom: 1px solid var(--hx-ink, #142853);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s ease, transform .4s var(--nav-ease), visibility 0s linear .4s;
  }
  .nav_v2.is-open .nav_menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

  .nav_v2 .nav_link {
    justify-content: flex-start; gap: 1rem;
    min-height: 54px; padding: 0 var(--nav-pad);
    border-top: 1px solid rgba(20, 40, 83, .12);
    font-size: 1.0625rem;
  }
  .nav_v2 .nav_link:first-of-type { border-top: 0; }
  .nav_v2 .nav_link-num { width: 1.5rem; font-size: .75rem; }
  .nav_v2 .nav_link.is-active { background: linear-gradient(var(--hx-blue, #3360FF), var(--hx-blue, #3360FF)) left top / 2px 100% no-repeat, var(--hx-blush, #FFF1EE); }
  .nav_frame { display: none; }
}

@media (max-width: 389px) { .nav_v2 .nav_brand-name { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav_frame, .nav_toggle-bars i, .nav_v2 .nav_menu, .nav_v2 .nav_toggle { transition: none; }
}