/* Navbar — a section index, not a branding bar.
   Structure: .navbar > .navbar-inner > (.navbar-brand > .brand-link + .navbar-burger)
                                      + (.navbar-menu > .navbar-sections)

   Full-bleed: the brand is pinned to the left edge, the section index to the
   right. The labels reuse the uppercase eyebrow treatment of .section-h3
   (styles.css) so the nav reads as an index of the page's own structure.
   A single accent keypoint rides the rail to mark the section you're in —
   nav.js sets --kp-x / --kp-o. Colors come from the tokens in styles.css. */

.navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 4.25rem;
  /* Bootstrap ships `.navbar { padding: 0.5rem 1rem }`; the gutter is
     .navbar-inner's job, so this would double it. */
  padding: 0;
  /* Translucent so content reads through, with a hairline for separation. */
  background-color: rgba(250, 249, 245, 0.86);
  border-bottom: 1px solid var(--ivory-dark);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .navbar {
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

/* Bootstrap sets `.navbar { display: flex }`, which makes this a flex item that
   would otherwise shrink to its content. Full width, so the rail can sit right. */
.navbar-inner {
  width: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
}

.navbar-brand {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  min-height: 4.25rem;
}

/* --- Brand: display face, matching the h1 it sits above.
       No left padding, so the logo starts on the container's edge. --- */
.brand-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem 0.5rem 0;
  cursor: pointer;
}

/* Navbar links never take the global accent colour or underline. */
.navbar a:link,
.navbar a:visited {
  color: var(--text-primary);
  text-decoration: none;
}

.brand-link strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.brand-link img {
  height: 1.4rem;
  width: auto;
  margin-right: 0.5rem;
  border-radius: var(--radius-sm);
}

.navbar-brand .brand-link:focus,
.navbar-brand .brand-link:hover {
  background-color: transparent;
}

/* --- Burger (mobile only) --- */
.navbar-burger {
  display: block;
  position: relative;
  height: 4.25rem;
  width: 3.25rem;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.navbar-burger span {
  display: block;
  position: absolute;
  height: 1px;
  width: 16px;
  left: calc(50% - 8px);
  background-color: currentColor;
  transform-origin: center;
  transition: opacity 120ms ease-out, transform 180ms ease-out;
}

.navbar-burger span:nth-child(1) { top: calc(50% - 6px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 4px); }

.navbar-burger:hover { color: var(--accent); }
.navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.navbar-menu {
  display: none;
}

/* --- Section index --- */
.navbar-sections {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-section {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  padding: 0.35rem 0;
  transition: color 160ms ease-out;
}

/* Specific enough to beat the generic `.navbar a:hover` in styles.css. */
.navbar .nav-section:hover,
.navbar .nav-section.is-active {
  color: var(--text-primary);
}

/* The keypoint: one dot, parked under the active label. nav.js drives the
   custom properties; opacity stays 0 until a section is actually in view.

   The travel is deliberately longer and springier than a UI easing: the dot is
   a physical marker sliding along a rail, and the slight overshoot at the end
   is what sells it as having momentum rather than being redrawn. It is also
   what carries the dot between pages — see .is-instant below. */
.nav-keypoint {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: var(--kp-o, 0);
  transform: translateX(var(--kp-x, 0));
  transition: transform 420ms cubic-bezier(0.34, 1.2, 0.64, 1), opacity 220ms ease-out;
  pointer-events: none;
}

/* Moving between pages is two documents, so the dot would ordinarily just
   appear under the new page's label. Instead nav.js puts it back where the
   previous page left it and lets the transition above carry it across — one
   dot continuing its journey, not a second one switched on.

   That initial placement must not animate, or the dot would fly in from the
   rail's left edge on every load. nav.js adds this class for exactly that one
   write and removes it in the same task, with a forced reflow in between. */
.navbar-sections.is-instant .nav-keypoint {
  transition: none;
}

/* --- Keyboard focus (quality floor, not decoration) --- */
.navbar a:focus-visible,
.navbar-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Phones: match the 20px page gutter in styles.css, so the brand lines up with
   the content under it instead of sitting 48px in. */
@media screen and (max-width: 767px) {
  .navbar-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Mobile (<=1023px): burger reveals a stacked menu --- */
@media screen and (max-width: 1023px) {
  .navbar-menu.is-active {
    display: block;
    padding: 0.25rem 0 0.75rem;
    border-top: 1px solid var(--ivory-dark);
  }

  /* Stacked, so a horizontal rail has nothing to travel along. */
  .navbar-sections {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .nav-section {
    width: 100%;
    padding: 0.6rem 0;
  }

  .nav-keypoint {
    display: none;
  }
}

/* --- Desktop (>=1024px) --- */
@media screen and (min-width: 1024px) {
  .navbar-inner,
  .navbar-menu {
    display: flex;
    align-items: stretch;
  }

  .navbar-burger {
    display: none;
  }

  /* Menu takes the remaining width; the rail sits at its right edge. */
  .navbar-menu {
    flex-grow: 1;
    align-items: center;
  }

  .navbar-sections {
    margin-left: auto;
  }
}

/* --- Reduced motion: the keypoint still marks position, it just doesn't travel --- */
@media (prefers-reduced-motion: reduce) {
  .nav-keypoint,
  .navbar-burger span {
    transition: none;
  }
}