/* 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. */
.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;
}

/* --- 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;
  }
}