/* Ledger page styles: site footer. Owned by _includes/page/site-footer.html;
   shared component rules belong in assets/css/base.css.

   The footer is the one band that appears under every page, so it takes the
   panel step of the surface ladder rather than a border-only treatment: the
   tonal shift says "the page ended", and the hairline above it does the work
   the tonal step alone cannot (background → panel is ~1.13:1 in light).

   Type roles follow the post-pullback rules. Headings and links are chrome
   labels, so they take the label face, uppercase and tracked, at the same
   size as the top rail — the footer sections and the header sections are the
   same list, and they should read as the same list. The catchphrase under the
   wordmark is the same fragment as the home hero tagline. The
   imprint is a legend in the body face. No monospace anywhere. */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-panel-contrast);
  border-top: 1px solid var(--border-gentle-divider);
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

/* ── Shards ──
   Decoration only, and the shared utility already unmounts them under 640px.
   `overflow: hidden` on the band keeps the negative offsets out of the
   document scroll width at every width in between.

   Both sit at the bottom, where the imprint is one short left-aligned line and
   the rest of the row is empty at every width the shards survive. The first
   position tried was the top-right corner, which put a wedge straight through
   the Elsewhere column — the same collision the CV dossier shard had to be
   corrected for. */
.site-footer-shard {
  right: -3rem;
  bottom: -4rem;
  width: 13rem;
  height: 13rem;
  background: var(--color-secondary);
}

.site-footer-shard--beta {
  right: auto;
  left: -3.5rem;
  bottom: -3rem;
  width: 10rem;
  height: 10rem;
  background: var(--color-primary);
}

/* Between the suppression breakpoint and the desktop layout the imprint takes
   most of the row, so the shards give it back the width. */
@media (max-width: 1023px) {
  .site-footer-shard {
    right: -2.5rem;
    bottom: -3rem;
    width: 9rem;
    height: 9rem;
  }

  .site-footer-shard--beta {
    left: -3rem;
    bottom: -2.5rem;
    width: 7rem;
    height: 7rem;
  }
}

/* ── Grid ──
   One column stacked, three across at tablet, then a 12-column measure at
   desktop where the masthead earns the widest span. Each block carries its
   own span class rather than an :nth-child rule, so a block dropping out
   reflows the row instead of breaking it. */
.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.site-footer-block {
  min-width: 0;
}

@media (min-width: 768px) {
  .site-footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-2xl);
  }

  .site-footer-masthead {
    grid-column: span 12;
  }

  /* Pages takes two-thirds so four page columns fit; Contact keeps a third. */
  .site-footer-sections {
    grid-column: span 8;
  }

  .site-footer-elsewhere {
    grid-column: span 4;
  }
}

@media (min-width: 1024px) {

  /* Masthead span 4 keeps the author line one wordmark-wide; Pages moves one
     track left (span 6) so four page columns still sit the same distance from
     the wordmark and from Contact (span 2). */
  .site-footer-masthead {
    grid-column: span 4;
  }

  .site-footer-sections {
    grid-column: span 6;
  }

  .site-footer-elsewhere {
    grid-column: span 2;
  }
}

/* ── Masthead ── */
.site-footer-wordmark-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-on-surface);
}

.site-footer-wordmark {
  font-family: var(--font-title);
  font-size: calc(var(--type-card) - 2pt);
  line-height: 1.15;
  font-synthesis: none;
  /* Full author name can wrap gracefully on narrow screens if needed */
  overflow-wrap: normal;
  word-break: normal;
}

@media (min-width: 640px) {
  .site-footer-wordmark {
    white-space: nowrap;
    line-height: 1;
  }
}

/* The mockup's footer bio describes someone else, so this is site.description
   — one sentence, and the only sentence the site has about itself. */
.site-footer-bio {
  margin-top: var(--space-md);
  max-width: 32rem;
  font-family: var(--font-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0.03em;
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
}

/* ── Block headings ── */
.site-footer-heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-label);
  font-size: var(--type-meta);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-on-surface);
}

/* ── Link lists ──
   Sections and Elsewhere are the same object in two sources, so they share
   one presentation. The contacts list arrives from the runtime with its own
   utility classes; a two-class selector outranks them without the runtime
   having to know the footer exists. */
.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Page names and contact channels are read as words, not scanned as labels,
   so they take the body face. Small caps stay on the block headings. */
.site-footer-link,
.site-footer .site-footer-contacts a {
  font-family: var(--font-body);
  font-size: var(--type-label-lg);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-default);
}

.site-footer-link:hover,
.site-footer .site-footer-contacts a:hover {
  color: var(--color-primary);
}

/* The live page is marked, not just coloured: the rule repeats the rail's
   `is-active` treatment so the two navigations agree about where you are. */
.site-footer-link.is-current {
  color: var(--color-on-surface);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.15rem;
}

/* ── Imprint ── */
.site-footer-imprint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-gentle-subtle);
  font-family: var(--font-body);
  font-size: var(--type-meta);
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

/* A middot between items rather than a separator element, so an absent
   license leaves no orphaned punctuation behind. outline-variant is the
   hairline token: #b8b8b8 on #f4f4f4 is 1.80:1, and #45454c on #141418
   is 1.93:1. outline clears 4.5:1 on the same panel (6.08:1 light,
   5.95:1 dark). */
.site-footer-imprint-item+.site-footer-imprint-item::before {
  content: "·";
  margin-right: var(--space-md);
  color: var(--color-outline);
}

.site-footer-imprint-link {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  border-bottom: 1px solid var(--border-gentle);
  transition: color var(--motion-duration-fast) var(--motion-ease-default), border-color var(--motion-duration-fast) var(--motion-ease-default);
}

.site-footer-imprint-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── Print ──
   On paper the navigation and the external links are dead ends and the tonal
   band is a large grey rectangle, so only the imprint survives. It is the one
   part a printed page still needs: who holds the copyright and under which
   licence. */
@media print {
  .site-footer {
    background: none;
    border-top: 1px solid var(--color-outline-variant);
    overflow: visible;
  }

  .site-footer-inner {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .site-footer-shard,
  .site-footer-grid {
    display: none;
  }

  .site-footer-imprint {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* ── Page columns ──
   The three nav groups plus Bibliography become four columns, so the footer
   reads the Explore pairs and leaves Bibliography its own list rather than
   burying it under References. They stack on a phone, where four columns of
   two would be four columns of nothing. */
.site-footer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .site-footer-columns {
    grid-template-columns: repeat(4, minmax(0, auto));
    gap: var(--space-lg);
    justify-content: start;
  }
}