/* ---------------------------------------------------------------------------
   navigation.css — ADDITION, not part of the Claude Design export.
   ---------------------------------------------------------------------------
   Anchor landing offsets for the sticky header.

   The exported components scrolled with `window.scrollTo({top: el.offsetTop -
   72})`. The 72 was the desktop header height, hard-coded, so on a phone —
   where the header wraps to two rows and stands taller — a jumped-to heading
   landed underneath the header and out of sight.

   Setting scroll-margin-top on the targets instead lets the browser do the
   arithmetic, for programmatic `scrollIntoView`, for a plain `#hash` link and
   for a page loaded with a hash already in the URL. The value is the header
   height plus a little air, per breakpoint.
--------------------------------------------------------------------------- */

:root {
  --nav-offset: 88px;
}

@media (max-width: 767px) {
  /* Two-row header — see the header rules in responsive.css. */
  :root {
    --nav-offset: 132px;
  }
}

section[id],
footer[id] {
  scroll-margin-top: var(--nav-offset);
}

/* The reduced-motion case is handled in Header.jsx, where the scroll is
   issued: scrollIntoView's own `behavior` wins over CSS scroll-behavior, so a
   rule here would not take effect. */