/* Project stylesheet, loaded after mdb.css. All site-wide custom CSS goes
   here — component styles and runtime overrides of the CSS custom properties
   that Bootstrap/MDB expose.

   mdb.css is built from static/scss/mdb.scss, but that build is not
   currently reproducible (the committed css was compiled with an older
   sass than what is available), so it is treated as frozen. When changing
   a value that also exists in the scss (like the navbar padding below),
   keep static/scss/custom/_variables.scss in sync so a future rebuild of
   mdb.css produces the same result.

   CSS belongs in a template only when it depends on template data
   (e.g. the banner background image). */

/* ---- Navbar ---- */

.navbar {
  --mdb-navbar-nav-link-padding-x: 0.75rem;
}

/* ---- Footer ---- */

/* The banner is clipped to an ellipse (see .footer-banner in mdb.css), so
   content near the bottom of the box is cut away by the curve. The link row
   therefore sits directly under the heading, high inside the ellipse. */
.footer-links a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus {
  color: #fff;
  text-decoration: underline;
}
.footer-links .footer-link-sep {
  color: #8FB0CB;
  padding: 0 10px;
}

/* ---- Blog cards ---- */

.blog-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }
  .blog-card:hover,
  .blog-card:focus-within {
    transform: none;
  }
}