/* Shared keyboard and mobile-navigation behavior for the public Helix pages.
   This does not change the visual system: it does not define or override any
   page color tokens (each page sets its own --mute/--green inline); it only
   makes the existing controls reachable, visible on focus, and operable
   without a mouse. */

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--evergreen, #14532d);
  border: 2px solid currentColor;
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--evergreen, #14532d);
}

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

@media (max-width: 900px) {
  .nav-links.is-open,
  html:not(.js) .nav-links {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: stretch;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 60;
    gap: 4px;
    padding: 18px 24px;
    background: var(--cream, #f5f1e8);
    border-bottom: 1px solid var(--line, rgba(20, 60, 35, .12));
    box-shadow: var(--shadow-sm, 0 12px 30px -18px rgba(18, 50, 30, .35));
  }
  .nav-links.is-open a { padding: 8px 4px; }
  html:not(.js) .menu-btn { display: none; }
}