/* Footer -- echoes Banner.module.css's brand language (the thin
   blue-grey accent line, the same colour tokens) so the page reads as
   bookended by one consistent header/footer system.

   Laid out as one centred, horizontal-flowing band (brand, then a
   single inline links row, then the about blurb, stacked top to
   bottom) rather than three separate side-by-side columns each with
   their own vertically-stacked content -- everything that reads as
   "content" here sits on its own horizontal line, centred, and the
   links row itself wraps onto multiple centred lines by itself via
   flex-wrap on narrow screens. That means there's no separate mobile
   breakpoint needed the way the old 3-column grid required -- this
   layout is adaptive by construction, not by a media-query override. */
.footer {
  margin-top: 3rem;
  background: linear-gradient(180deg, #eef1f3 0%, #e4e8eb 100%);
  border-top: 1px solid #dcdfe3;

  /* Same trick as the header's box-shadow accent (see .header in
     Banner.module.css), just flipped to sit along the top edge instead
     of the bottom. */
  box-shadow: inset 0 3px 0 0 #6f93a8;
}

.footerInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footerTitle {
  font-size: 20px;
  font-weight: 800;

  /* Same brand blue-grey used everywhere else as an accent (the header
     title, the header's own bottom border, the active nav pill) --
     was the plain dark body colour before, which read as just another
     line of text rather than the site's own name. */
  color: #6f93a8;
}

.footerTagline {
  margin: 4px 0 0;
  font-size: 13px;
  color: #5f7d95;
}

/* Quick Links as one horizontal, centred, wrapping row instead of a
   vertical list -- each link sits inline with the others rather than
   on its own line. */
.footerLinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 20px;
}

.footerLinks a {
  color: #445d6b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.15s ease;
}

.footerLinks a:hover {
  color: #24303a;
  text-decoration: underline;
}

.footerAbout {
  margin: 0;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.6;
  color: #5f7d95;
}

.footerBottom {
  border-top: 1px solid #dcdfe3;
  padding: 14px 16px;
  text-align: center;
  font-size: 12px;
  color: #6c757d;
}