/* pagenav.css — fixed up/down section stepper. Linked on every page. */
/* ── Page navigation arrows ─────────────────────────────────────────────
   Fixed up/down stepper. Large targets, readable labels, keyboard focus. */
.pagenav{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity .25s ease;
}
.pagenav.is-dim{ opacity: .55; }
.pagenav:hover, .pagenav:focus-within{ opacity: 1; }

.pagenav__btn{
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: var(--deep, #0B3D5C);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11,61,92,.28);
  font-family: inherit;
  transition: background .18s ease, transform .12s ease, opacity .18s ease;
}
.pagenav__btn:hover:not(:disabled){ background: var(--deep-2, #072a41); }
.pagenav__btn:active:not(:disabled){ transform: translateY(1px); }
.pagenav__btn:focus-visible{
  outline: 3px solid var(--hi-orange, #FF6D00);
  outline-offset: 3px;
}
.pagenav__btn:disabled{ opacity: .32; cursor: default; }

.pagenav__glyph{ font-size: 17px; line-height: 1; }
.pagenav__word{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.pagenav__sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px){
  .pagenav{ right: 12px; bottom: 12px; gap: 8px; }
  .pagenav__btn{ width: 56px; height: 56px; }
}

@media print{ .pagenav{ display: none; } }

/* Keep the last line of the page clear of the floating arrows. */
body{ padding-bottom: 92px; }
@media (max-width: 640px){ body{ padding-bottom: 84px; } }

/* Where the arrows just put you. A short, quiet highlight so the eye can find
   the new section instead of hunting for it after the page moves. */
.pagenav-landed{
  animation: pagenav-land 1.4s ease-out 1;
}
@keyframes pagenav-land{
  0%   { background: rgba(255,196,87,.42); box-shadow: -.55rem 0 0 rgba(255,196,87,.42); }
  70%  { background: rgba(255,196,87,.22); box-shadow: -.55rem 0 0 rgba(255,196,87,.22); }
  100% { background: transparent;          box-shadow: -.55rem 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){
  .pagenav-landed{ animation: none; }
}