/* ==========================================================================
   Site footer

   Replaces a Bootstrap navbar that had been pressed into service as a footer.
   Same design language as the rest of the site: sandy beige ground, Amatic SC
   headings in brand purple, Open Sans body.

   Scoped under .site-footer so none of it can reach the three CSS frameworks
   the site still loads.
   ========================================================================== */

.site-footer {
  --ft-purple: #7f3f98;
  --ft-ink:    #2b2530;
  --ft-soft:   #6d6577;
  --ft-line:   #e7e2ec;
  --ft-sand:   #faf7f2;

  margin-top: 72px;
  padding: 56px 24px 0;
  background: var(--ft-sand);
  border-top: 1px solid var(--ft-line);
  color: var(--ft-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 48px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 44px;
}

/* ---------------------------------------------------------------- brand -- */

.site-footer-brand img {
  display: block;
  /* The file is 576x186 and carries the sun beside the script, so it needs more
     room than the old script-only mark did. */
  width: 168px;
  height: auto;
}

.site-footer-brand p {
  max-width: 46ch;
  margin: 14px 0 18px;
  color: var(--ft-soft);
  font-size: .9375rem;
  line-height: 1.7;
}

/* Inline SVG rather than an icon font: the site's Font Awesome kit returns 403,
   so every fa- icon renders as nothing. */
.site-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ft-soft);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.site-footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.site-footer-social:hover {
  background: var(--ft-purple);
  border-color: var(--ft-purple);
  color: #fff;
}
.site-footer-social:focus-visible {
  outline: 2px solid var(--ft-purple);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ nav -- */

.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  gap: 40px;
}

.site-footer-nav h2 {
  margin: 0 0 12px;
  font-family: "Amatic SC", cursive;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ft-purple);
}

.site-footer-nav ul { margin: 0; padding: 0; list-style: none; }
.site-footer-nav li { margin-bottom: 9px; }

.site-footer-nav a {
  color: var(--ft-soft);
  font-size: .9375rem;
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer-nav a:hover { color: var(--ft-purple); text-decoration: none; }

/* ----------------------------------------------------------------- base -- */

.site-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 0 22px;
  border-top: 1px solid var(--ft-line);
  color: var(--ft-soft);
  font-size: .8125rem;
}
.site-footer-base a { color: var(--ft-purple); font-weight: 600; text-decoration: none; }
.site-footer-base a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 520px) {
  .site-footer { padding: 40px 18px 0; }
  .site-footer-nav { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer-base { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-social,
  .site-footer-nav a { transition: none; }
}