/* FHR journal stylesheet - OJS 3.4, Bootstrap3 theme */

/* Preserve the journal's existing HTML spacing. */
html {
  padding-top: 0;
  padding-bottom: 0;
}

/* Existing jumbotron presentation, retained unchanged. */
.jumbotron-cover-image {
  position: relative;
  background: #000 url('/annex/header.jpg') no-repeat center center;
  width: 100%;
  height: 250px;
  background-size: cover;
  color: #000;
}

/* FHR panoramic banner: first row above the primary navigation. */
#headerNavigationContainer > .container-fluid:first-of-type {
  background-color: #102d3a;
  background-image: url('/annex/headerfhr.png');
  /* Prioritize faces on common laptop landscape viewports. */
  background-position: center 16%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
  padding: 10px 20px;
  box-sizing: border-box;
}

/* Keep the user/login navigation aligned within the banner. */
#headerNavigationContainer > .container-fluid:first-of-type > .row {
  width: 100%;
  margin: 0;
}

/* Ensure the username/login controls remain readable. */
#headerNavigationContainer > .container-fluid:first-of-type #navigationUser > li > a {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

/* Large desktop monitors: slightly taller banner. */
@media (min-width: 1600px) {
  #headerNavigationContainer > .container-fluid:first-of-type {
    min-height: 360px;
  }
}

@media (max-width: 991px) {
  #headerNavigationContainer > .container-fluid:first-of-type {
    min-height: 220px;
    background-position: center 16%;
  }
}

@media (max-width: 575px) {
  #headerNavigationContainer > .container-fluid:first-of-type {
    min-height: 140px;
    padding: 5px 10px;
  }
}