/* the site footer styles */
@layer components {
  @scope (lz-site-footer) {
    :scope {
      --grid-column: gutter-left / gutter-right;

      position: sticky;
      inset-block-end: 0;
      display: grid;
      grid-template-columns: subgrid;
      padding-block: 1rem;
      text-align: center;
      background-color: var(--surface-2);

      /* A 10pt band of its own color below it, so no sliver of the page shows
         under it while stuck at a fractional scroll position. A shadow, not a
         border: it takes no room, so at the end of the page, unstuck, it
         falls past the bottom and adds no height. */
      box-shadow: 0 10pt 0 var(--surface-2);

      > * {
        grid-column: content;
      }

      small {
        display: inline-block;
        margin-block-start: var(--size-3);
        margin-inline: auto;
        text-wrap: balance;
      }

      ul[role="list"] {
        display: flex;
        gap: var(--size-4);
        justify-content: center;
        padding: 0;
        margin: 0;
        list-style: none;

        li {
          margin: 0;
        }

        a {
          display: flex;
          column-gap: var(--size-2);
          align-items: center;
        }
      }
    }
  }
}