---
// SiteFooter — the bottom of every chapter page. Holds the inline-nav links
// (chapter-to-chapter or to the field guide) plus the small footer text.
//
// The chapter pages use a "pill" link style: 1px ink border, ink text,
// inverts on hover. Padding and gap are inherited from chapters.css
// `.links`. The block element is the lower bound of the page main — no
// margin/padding magic, just the rule above the first link.
//
// Footer text (the muted paragraph) goes into the default slot.

interface Props {
  /** Optional accessible label for the inline-nav region. */
  navLabel?: string;
}

const { navLabel = 'Chapter navigation' } = Astro.props;
---

<section class="footer">
  <nav class="links" aria-label={navLabel}>
    <slot name="links" />
  </nav>
  <div class="text">
    <slot />
  </div>
</section>

<style>
  .footer {
    padding: 30px 0 70px;
    color: var(--muted);
    /* UNRESOLVED: legacy 13px fixed from chapters.css. No token matches.
       Reported in task 09 report. */
    font-size: clamp(13px, 13px, 13px);
  }

  .links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 70px;
  }

  .links :global(a) {
    padding: 10px 13px;
    color: var(--ink);
    border: 1px solid var(--ink);
    text-decoration: none;
    font: var(--step-0) var(--font-mono);
    text-transform: uppercase;
  }

  .links :global(a:hover) {
    color: var(--paper);
    background: var(--ink);
  }

  .links :global(a:focus-visible) {
    outline: 3px solid var(--red);
    outline-offset: 2px;
  }
</style>