/* Front page (index.html) styles.
   Loaded after bootstrap.min.css so these rules win. */

/* The navbar is .sticky-top, so it stays put while scrolling but still
   occupies space in the flow. It therefore never covers the top of the
   page -- but it does cover whatever an in-page anchor scrolls to, so
   reserve its height for jumps to #repos, #contact and the rest. */
html {
  scroll-padding-top: 4.5rem;
}

/* Bootstrap sets white-space: nowrap on .navbar-brand, and this brand runs
   339px on one line. Measured in a real viewport: it fits from 375px up,
   below that (320px and 360px handsets) it sets a 351px minimum and the
   whole page scrolls sideways. Allow wrapping only below 375px -- applied
   unconditionally it would split the brand across two lines on wider
   phones as well, where there is no need. */
@media (max-width: 374.98px) {
  .navbar-brand {
    white-space: normal;
  }
}

#home {
  background-position: center;
  background-size: cover;
  background-image: url("../images/bg-image-01.jpg");
  background-color: rgba(0, 0, 0, 0.3);
  background-blend-mode: darken;
}

/* The six institution logos are supplied at very different sizes -- from
   176x67 up to 605x211, plus an SVG carrying only a viewBox and so no
   intrinsic size at all. Bootstrap 5 does not constrain img width, so the
   larger ones were rendering at full size and overflowing their card.
   Give every logo the same box and let each one letterbox inside it. */
.kikan-logo-img {
  display: block;
  width: 100%;
  height: 6rem;
  padding: 1rem 1rem 0;
  object-fit: contain;
}

/* .text-muted (#6c757d) on .bg-dark (#212529) is about 3.2:1, short of the
   4.5:1 WCAG AA asks for body text. These are the same greys one step
   lighter. */
footer.bg-dark {
  color: #adb5bd;
}

footer.bg-dark a {
  color: #dee2e6;
}