/* Vertical Balance overrides on top of the clean-blog theme. */

/* The theme floats the nav in white text over the hero image. The original
   WordPress site instead gave the nav its own solid white bar above the
   hero, so hero imagery never runs behind (and competes with) the nav
   text. Reproduce that: take the nav out of the "float over the photo"
   positioning and give it a permanent white background + dark text.
   (The theme's existing scroll behavior -- hiding the nav on scroll down,
   sliding it back in as a fixed bar on scroll up via the `.is-fixed` /
   `.is-visible` classes in clean-blog.js -- is unaffected by this and
   already used dark-on-white once fixed, so it still works as before.) */
.navbar-custom {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #f2f2f2;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav li a {
  color: #404040;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
  color: #0085a1;
}
.navbar-custom .dropdown-menu li a {
  color: #404040;
}
.navbar-custom .dropdown-menu li a:hover,
.navbar-custom .dropdown-menu li a:focus {
  color: #0085a1;
}

/* Homepage/archive post cards, styled after the original WordPress theme's
   3-up "post-item" grid (image tile with a date badge, title, excerpt).

   Bootstrap 3's grid columns are float-based, so when one card's title
   wraps to an extra line and makes its column taller than its neighbors,
   the *next* row's floats don't realign to a common top -- they stack
   directly under whichever column had room, leaving a blank gap under the
   shorter columns. Making the row a flexbox row fixes that: every column
   in a line stretches to the tallest one, so the next line always starts
   at the same y for all columns. */
.post-cards {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.post-cards > [class*="col-"] {
  display: flex;
}
.post-card {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.post-card-image {
  display: block;
  position: relative;
  padding: 30% 0;
  background-size: cover;
  background-position: 50%;
  border-radius: 3px;
}
.post-card-date {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: #6dc77a;
  color: #fff;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.post-card-image:hover .post-card-date {
  background-color: #000;
}
.post-card-title {
  font-size: 20px;
  margin: 15px 0 10px;
}
.post-card-title a {
  color: #6dc77a;
}
.post-card-title a:hover,
.post-card-title a:focus {
  color: #404040;
}
.post-card-excerpt {
  flex: 1 1 auto;
  color: #808080;
}

/* Search (theme/static/js/search.js + content/extra/search.html) */
.search-input {
  height: 50px;
  font-size: 18px;
  margin-bottom: 30px;
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-result {
  padding: 20px 0;
  border-bottom: 1px solid #f2f2f2;
}
.search-result:first-child {
  padding-top: 0;
}
.search-result h4 {
  margin: 0 0 5px;
}
.search-result h4 a {
  color: #6dc77a;
}
.search-result h4 a:hover,
.search-result h4 a:focus {
  color: #404040;
}
.search-result-meta {
  margin: 0 0 8px;
  font-size: 14px;
}