/* --- footer.css --- */

@layer components {
  .site-footer {
    color: var(--my-text-note);
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  .site-footer__inner {
    border-top: 1px solid var(--my-rule-color);
    display: grid;
    gap: 1rem;
    max-width: 70ch;
    padding-top: 1.1rem;
    width: 100%;
  }

  .site-footer__nav {
    display: flex;
    justify-content: center;
  }

  .footer-chip-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.25rem 0.45rem;
    justify-content: center;
  }

  .footer-chip + .footer-chip::before {
    color: var(--my-text-note);
    content: "\2022";
    display: inline-block;
    margin-right: 0.45rem;
  }

  .footer-link {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    opacity: 0.82;
    padding: 0;
    transition:
      color var(--ui-dur-fast),
      opacity var(--ui-dur-fast);
  }

  .footer-link:hover {
    color: var(--my-text-body);
    opacity: 1;
  }

  .footer-link:focus-visible {
    outline: 2px solid var(--my-accent1);
    outline-offset: 2px;
  }

  .footer-link.is-active {
    color: var(--my-text-body);
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--my-accent1) 70%, transparent);
    text-underline-offset: 0.18em;
  }

  .site-footer__legal {
    display: grid;
    gap: 0.4rem;
    text-align: center;
  }

  .footer-meta {
    font-size: 0.82em;
    margin: 0;
    opacity: 0.7;
  }

  .footer-meta strong {
    color: var(--my-text-body);
    font-weight: 600;
  }

  @media (width <= 768px) {
    .site-footer {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 1rem;
    }

    .site-footer__inner {
      gap: 0.9rem;
      padding-top: 0.95rem;
    }

    .footer-chip-list {
      gap: 0.5rem;
    }
  }
}