/* The site's own pages (about, privacy, the 404) and the footer the hub carries. The hub page keeps its themes
   (css/base.css in the game repo); its variables colour the footer there, and these defaults stand in elsewhere. */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/fredoka-latin.woff2") format("woff2");
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin: 18px auto 8px;
  font: 600 0.85rem/1.4 "Fredoka", system-ui, sans-serif;
}
.site-foot a { color: var(--muted, #78716c); text-decoration: none; padding: 6px 2px; }
.site-foot a:hover, .site-foot a:focus-visible { color: var(--accent, #7c3aed); text-decoration: underline; }
.site-foot a[aria-current="page"] { color: var(--text, #1c1917); }
/* the tower defence's map list: cream on the bench's wood */
.maps .site-foot a { color: var(--cream, #fbf4e4); opacity: 0.75; }
.maps .site-foot a:hover, .maps .site-foot a:focus-visible { color: var(--cream, #fbf4e4); opacity: 1; }

body.site-page {
  margin: 0;
  min-height: 100vh;
  background: #fdf6e3;
  color: #2b1d12;
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.site-box { max-width: 680px; margin: 0 auto; padding: 32px 16px 8px; }
.site-page h1, .site-page h2 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; line-height: 1.2; }
.site-page h1 { font-size: 2.2rem; margin: 0 0 16px; color: #7c3aed; }
.site-page h2 { font-size: 1.3rem; margin: 28px 0 8px; }
.site-page a { color: #6d28d9; }
.site-page ul { padding-left: 1.2em; }
.site-page li { margin: 6px 0; }
.site-page .fine { margin-top: 32px; font-size: 0.8rem; color: #78716c; }
.site-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 14px;
  background: #7c3aed;
  color: #fff !important;
  font: 700 1.1rem/1 "Fredoka", system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 0 #4c1d95;
}
.site-btn:active { transform: translateY(4px); box-shadow: none; }

@media (prefers-color-scheme: dark) {
  body.site-page { background: #1c1917; color: #f5f5f4; }
  .site-page h1 { color: #c4b5fd; }
  .site-page a { color: #c4b5fd; }
  .site-page .fine { color: #a8a29e; }
}