/* ────────────────────────────────────────────────────────────────
   Sticky overlay navigation for Direction B (DarkNav) and the global
   return-to-top button. The nav is fixed to the top: transparent over
   the hero, solid once scrolled; on mobile it collapses to a hamburger.
   ──────────────────────────────────────────────────────────────── */

html {
  scroll-padding-top: 84px; /* in-page anchors clear the fixed nav */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Nav bar ─────────────────────────────────────────────── */
.beth-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  /* Match the centred, width-capped site (--site-max) so the nav aligns with
     the content and its links stay over the hero — not out in the gutters. */
  margin-inline: auto;
  max-width: var(--site-max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 56px;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.beth-nav.is-scrolled {
  background: rgba(43, 47, 44, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(43, 47, 44, 0.18);
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Brand */
.beth-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.beth-nav__seal {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(245, 241, 234, 0.14);
  display: grid; place-items: center;
  color: var(--bg-cream); font-weight: 600; font-size: 13px; letter-spacing: 0.5px;
}
.beth-nav__word { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--bg-cream); }
.beth-nav__word span { opacity: 0.65; font-weight: 400; }

/* Links (desktop row) */
.beth-nav__links {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}
.beth-nav__links a {
  font-size: 14px; color: rgba(245, 241, 234, 0.85); font-weight: 500;
  text-decoration: none; transition: color .15s ease;
}
.beth-nav__links a:hover { color: var(--bg-cream); }
.beth-nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; font-size: 13px; font-weight: 500;
  background: var(--bg-cream); color: var(--sage-600) !important;
  border-radius: var(--r-pill);
}
.beth-nav__cta:hover { background: #fff; }

/* Hamburger (hidden on desktop) */
.beth-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 11px; border: none; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.beth-nav__toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--bg-cream); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.beth-nav.is-open .beth-nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.beth-nav.is-open .beth-nav__toggle span:nth-child(2) { opacity: 0; }
.beth-nav.is-open .beth-nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Mobile: hamburger + dropdown panel ──────────────────── */
@media (max-width: 768px) {
  .beth-nav {
    padding: 14px 20px;
    background: rgba(43, 47, 44, 0.92);
    backdrop-filter: blur(10px);
  }
  .beth-nav__toggle { display: flex; }
  .beth-nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 20px 18px;
    background: rgba(43, 47, 44, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(43, 47, 44, 0.28);
  }
  .beth-nav.is-open .beth-nav__links { display: flex; }
  .beth-nav__links li { width: 100%; }
  .beth-nav__links a { display: block; padding: 12px 4px; font-size: 16px; text-align: center; }
  .beth-nav__cta { justify-content: center; margin-top: 10px; padding: 14px; }
}

/* ── Return-to-top button (all direction pages) ──────────── */
.return-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 400;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--sage-600); color: var(--bg-cream);
  box-shadow: 0 8px 24px rgba(43, 47, 44, 0.22);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.return-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.return-top:hover { background: var(--ink); }