/* White explicitly rather than transparent: the navbar is sticky, so a
   transparent bar would let the page content scroll through underneath it. */
.navbar-light {
  background-color: #FFFFFF;
  /* The charcoal this bar used to be filled with, now just a rule under it.
     Mirrors the footer's border-top. */
  border-bottom: solid 2px #2D2926;
  font-size: 1em;
  padding: 0;
}

/* The name keeps the red block. The nav links are taller than the brand, and
   the navbar centers its children, so the block would otherwise float with a
   white gap above and below it; stretch it to fill the bar instead. */
.navbar-light .navbar-brand {
  background-color: #CC0000;
  color: white;
  padding: 0.6rem;
  margin-right: 0 !important;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  background-color: #2D2926;
  color: white;
}

.navbar-light .nav-item {
  padding: 0.3rem;
}

.navbar-light .navbar-nav > li > a,
.navbar-light .navbar-nav .nav-link {
  color: #2D2926;
  font-size: 1.1rem;
  font-weight: 600;
}

/* The current page keeps the grey block and gold text, on hover too. */
.navbar-light .active {
  background-color: #8D8986;
}

.navbar-light .navbar-nav .active .nav-link,
.navbar-light .navbar-nav .active .nav-link:hover,
.navbar-light .navbar-nav .active .nav-link:focus {
  color: #ffc72c;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #2D2926;
}