/*
 * Site-footer — section (minimal form)
 *
 * Single-row footer: logo + nav links + copyright. The expanded form
 * (multi-column with category groups) lives in Site-footer-extended.
 * Per the answered design question: two separate components.
 *
 *   <footer class="site-footer">
 *     <a class="site-footer__logo" href="/">Malevich</a>
 *     <nav class="site-footer__nav" aria-label="Footer">
 *       <a href="/manifesto">Manifesto</a>
 *       <a href="/license">License</a>
 *       <a href="/contact">Contact</a>
 *     </nav>
 *     <p class="site-footer__copyright">© 2026 Malevich.</p>
 *   </footer>
 */

@layer malevich.components {
  .site-footer {
    container-type: inline-size;
    container-name: site-footer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-gap-elements-m);
    flex-wrap: wrap;

    padding-block: var(--space-inset-block-l);
    padding-inline: var(--space-inset-section-m);

    background-color: var(--color-surface-canvas);
    border-block-start: var(--border-width-hairline) solid var(--color-border-muted);
    color: var(--color-ink-regular);

    inline-size: 100%;
    box-sizing: border-box;
  }

  .site-footer__logo {
    display: inline-flex;
    align-items: center;
    color: var(--color-ink-strong);
    text-decoration: none;
    font-family: var(--font-display-title-family);
    font-size: var(--font-heading-section-size);
    font-weight: var(--font-display-title-weight);
    letter-spacing: var(--font-display-title-letter-spacing);
    flex-shrink: 0;
  }

  .site-footer__nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-gap-elements-m);
  }

  .site-footer__nav a {
    color: var(--color-ink-regular);
    text-decoration: none;
    font-family: var(--font-body-support-family);
    font-size: var(--font-body-support-size);
    font-weight: var(--font-body-support-weight);
    line-height: var(--font-body-support-line-height);
    letter-spacing: var(--font-body-support-letter-spacing);
    transition: color var(--motion-fast) var(--motion-easing-default);
  }

  .site-footer__nav a:hover {
    color: var(--color-ink-strong);
  }

  .site-footer__copyright {
    margin: 0;
    color: var(--color-ink-subtle);
    font-family: var(--font-caption-family);
    font-size: var(--font-caption-size);
    font-weight: var(--font-caption-weight);
    line-height: var(--font-caption-line-height);
    letter-spacing: var(--font-caption-letter-spacing);
    flex-shrink: 0;
  }

  /* Variants */

  .site-footer.-on-inverse {
    background-color: var(--color-ink-strong);
    color: var(--color-ink-inverse);
  }
  .site-footer.-on-inverse .site-footer__logo,
  .site-footer.-on-inverse .site-footer__nav a {
    color: var(--color-ink-inverse);
  }
  .site-footer.-on-inverse .site-footer__nav a:hover {
    opacity: 0.85;
  }
  .site-footer.-on-inverse .site-footer__copyright {
    color: var(--color-ink-inverse);
    opacity: 0.6;
  }
}

This component is pure CSS — no JavaScript required.

# Site-Footer — AGENTS.md

> Auto-generated from `site-footer.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `site-footer`
- **Layer:** sections
- **Status:** stable
- **Last updated:** 2026-05-19

## Summary

- Marketing sites with light footer content.

## Variants

| Variant | Class | Effect |
|---|---|---|
| Default | `.site-footer` | Canvas surface |
| Inverse | `.-on-inverse` | Dark surface |

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | `solid` |
| `surface` | `flat` |
| `effect` | — |
| `shader` | — |
| `rhythm` | `compact`, `regular` |
| `motion` | any value |
| `behavior` | — |

## Anatomy

```html
<footer class="site-footer">
  <a class="site-footer__logo" href="/">Malevich</a>

  <nav class="site-footer__nav" aria-label="Footer">
    <a href="/manifesto">Manifesto</a>
    <a href="/license">License</a>
    <a href="/contact">Contact</a>
  </nav>

  <p class="site-footer__copyright">© 2026 Malevich.</p>
</footer>
```

## Tokens consumed

- `--color-surface-canvas` — default background
- `--color-ink-strong` — inverse background
- `--color-ink-strong`, `--color-ink-regular`, `--color-ink-subtle`
- `--color-border-muted` — top border
- `--space-inset-block-l`, `--space-inset-section-m`
- `--space-gap-elements-m`
- `--border-width-hairline`
- `--font-display-title-*`, `--font-heading-section-size`,
  `--font-body-support-*`, `--font-caption-*`
- `--motion-fast`, `--motion-easing-default`

## Accessibility contract

- Use `<footer>` as the wrapper for the page-level footer.
- `<nav aria-label="Footer">` identifies the footer-nav landmark.
- Provide visible copyright; assistive tech reads it after the nav.