/**
 * ============================================================================
 * footer.css — .site-footer BEM Block
 * ============================================================================
 *
 * PURPOSE:
 *   Styles the site footer containing legal disclaimer, copyright,
 *   and utility links (about, privacy). Appears on every page.
 *
 * BEM STRUCTURE:
 *   .site-footer            — The footer bar itself
 *   .site-footer__inner     — Container wrapper
 *   .site-footer__disclaimer — Legal/financial disclaimer text
 *   .site-footer__links     — Utility link list (about, privacy, etc.)
 *   .site-footer__link      — Individual link
 *   .site-footer__copyright — Copyright line
 *
 * DESIGN DECISIONS:
 *   - Navy background matching header for visual bookending
 *   - Prominent financial disclaimer — required for credibility and
 *     potential AdSense/affiliate compliance
 *   - Small, unobtrusive — the footer isn't the point of the site
 *
 * ============================================================================
 */

.site-footer {
  background-color: var(--color-primary);
  color: var(--color-on-primary-muted);
  padding: var(--space-xl) 0;
  margin-top: auto; /* Pushes footer to bottom via flexbox page layout */
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Financial disclaimer — important for compliance. Displayed first. */
.site-footer__disclaimer {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-on-primary-subtle);
  max-width: 40rem;
}

/* Utility links row */
.site-footer__links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-lg);
}

/* Footer links — icon + text inline. Gap via the space in the HTML. */
.site-footer__link {
  color: var(--color-on-primary-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-on-primary);
  text-decoration: underline;
}

/* Copyright line */
.site-footer__copyright {
  font-size: var(--text-xs);
  color: var(--color-on-primary-faint);
}