/* Footer — builds on theme.css (section, headings, links). Everything snaps to the 8px unit;
   the pixel is 4px, matching the theme's border and shadow. */

/* Dithered rule: a 4px checkerboard, hard stops only. */
#footer .footer-dither {
  height: 8px;
  margin-bottom: 32px;
  background-color: var(--bg);
  background-image: repeating-conic-gradient(#29366F 0% 25%, #1A1C2C 0% 50%);
  background-size: 8px 8px;
  image-rendering: pixelated;
}

#footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

#footer .footer-title { font-family: var(--font-mono); font-size: 16px; line-height: 24px; margin: 0 0 16px; }
#footer .footer-id p { margin: 0; }

/* Bitmap type for short labels only. Yellow clears 4.5:1 on --bg. */
#footer .footer-label {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  color: #FFCD75;
  margin: 0 0 16px;
}

#footer .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; }

/* Yellow rather than the theme's red: red on --bg only just clears 4.5:1. */
#footer a { color: #FFCD75; }
#footer .footer-links a { display: inline-block; min-height: 48px; padding: 8px 0; line-height: 32px; }
#footer a:hover,
#footer a:active { color: var(--fg); }
#footer .footer-links a:hover,
#footer .footer-links a:active { transform: translate(4px, 0); }
#footer a:focus-visible { outline: 4px solid #FFCD75; outline-offset: 4px; }

#footer .footer-note { margin: 0; }

@media (max-width: 720px) {
  #footer .footer-grid { grid-template-columns: minmax(0, 1fr); }
}