/* Footer (DS §7.7) — fog background, content columns, mono bottom strip. */
@layer components {
  .pk-footer {
    background: var(--pk-fog);
    padding: var(--pk-space-7) var(--pk-space-4);
    font-size: var(--pk-text-small);
    color: var(--pk-slate);
  }

  .pk-footer-grid {
    max-width: var(--pk-container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pk-space-5);
  }

  /* h2 in the markup (no skipped heading levels after a page's h1) but
     visually unchanged: column headings keep the small-label size. */
  .pk-footer h2 {
    color: var(--pk-steel);
    font-size: var(--pk-text-small);
    margin: 0 0 var(--pk-space-3);
    font-weight: 500;
    letter-spacing: 0;
  }

  .pk-footer p {
    margin: 0 0 var(--pk-space-2);
  }

  /* :not(.btn): container selectors never restyle buttons (DS §7.3). */
  .pk-footer a:not(.btn) {
    color: var(--pk-slate);
    text-decoration: none;
  }

  .pk-footer a:not(.btn):hover {
    color: var(--pk-marine);
    text-decoration: underline;
  }

  .pk-footer-logo {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
  }

  .pk-footer-tagline {
    margin-top: var(--pk-space-4);
    max-width: 40ch;
  }

  .pk-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .pk-footer-contact svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* Measurable fact → mono (STYLE rule). */
  .pk-footer-kvk {
    font-family: var(--pk-font-mono);
    font-size: 13px;
  }

  /* slate, not stone: 12px stone on fog is 3:1, below WCAG AA;
     slate reaches 5.4:1. */
  .pk-footer-credits {
    margin-top: var(--pk-space-4);
    font-size: var(--pk-text-eyebrow);
    color: var(--pk-slate);
  }

  .pk-footer-bottom {
    max-width: var(--pk-container-max);
    margin: var(--pk-space-6) auto 0;
    padding-top: var(--pk-space-4);
    border-top: 1px solid var(--pk-mist);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--pk-space-3);
    font-family: var(--pk-font-mono);
    font-size: var(--pk-text-eyebrow);
    color: var(--pk-slate);
  }

  @media (min-width: 720px) {
    .pk-footer {
      padding: var(--pk-space-8) var(--pk-space-7);
    }

    .pk-footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 1024px) {
    .pk-footer-grid {
      grid-template-columns: 2fr 1fr 1fr 1fr;
    }
  }
}