/* -------------------------------------- search and intro area -------------------------------------------- */
a {
  text-decoration: none;
}

.search-box,
.search-intro {
  padding-bottom: 3.5rem;
  margin: 0;
}

.search-intro,
.search-intro a {
  color: #fff;
}

.search-intro a:hover {
  text-decoration: none;
}

.search-intro .tagline {
  margin: 0;
  font-weight: 300;
}

.search-intro .title {
    font-family: "Merriweather", "Georgia", "Times New Roman", serif;
    font-size: 3.4rem;
    font-weight: 500;
}

.journals-landing {
  /* primary active btn color, dark blue */
  background: url("../img/lamp-book.png") no-repeat bottom right;
  background-size: contain;
}

.dna-left {
  background: #112e51 url("../img/dna-back.png") no-repeat bottom left;
  background-position: -8.5rem 0;
  background-repeat: repeat-y;
}

.usa-search [type="search"].journal-selector {
  border: none;
}

/* --------------------------------------- breadcrumbs --------------------------------------------------- */

.breadcrumbs-container {
  background-color: #369;
  min-height: 4.5rem;
}

.breadcrumbs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; /* for ellipsis & spacing to work */
  flex-flow: row;
  white-space: nowrap;
  overflow: hidden;
  height: 4.5rem;
}

.breadcrumbs li {
  /* for centering to work, specifying height */
  height: 25px;
  margin: auto 0;
  color: #9bdaf1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 50; /* shrinks after last child, but still does */
}

/* breadcrumbs with forced link color on last item */
.breadcrumbs li:last-child a.breadcrumb-link-color {
  color: #9bdaf1;
}

.breadcrumbs li:first-child {
  flex-shrink: 0; /* first item in breadcrumbs should not shrink */
}

.breadcrumbs li:last-child {
  color: #fff;
  flex-shrink: 100;  /* to shrink the most */
}

/* list separator is '>' symbol */
.breadcrumbs .separator {
  font-family: "Merriweather", "Georgia", "Times New Roman", serif;
  font-weight: 700;
  margin-right: 2rem;
  margin-left: 2rem;
  flex-shrink: 0;  /* separator should not shrink */
}

/* override some <a> styles */
.breadcrumbs a,
.breadcrumbs a:visited {
  text-decoration: none;
  color: inherit;
}

.breadcrumbs .current a,
.breadcrumbs .current a:hover {
  cursor: default;
}

.breadcrumbs a:focus {
  box-shadow: none;
}

.ribbon-right-side {
  height: 4.5rem;
  float: right;
}

.ribbon-right-side a {
  color: #9bdaf1;
  display: inline-block;
  height: 4.5rem;
  line-height: 4.5rem;
  vertical-align: middle;
}

/* ----------------------------------------- same padding for header as for page content --------------- */

.ncbi-footer .usa-grid {
  /* same padding as content-box */
  padding-left: 3rem;
  padding-right: 3rem;
}

/* ----------------------------------------- journal tile --------------------------------------------- */

/* follow-btn reused on journals and journal page (in journal tile) */
.follow-btn {
  margin-right: 20px;
}

.follow-btn:hover {
  background-color: #e1f3f8;  /* light-blue */
}

.follow-btn.usa-button-outline {
  color: #205493;
  box-shadow: inset 0 0 0 2px #205493;
}

.follow-btn.usa-button-disabled {
  color: #323a45;
  background-color: #d6d7d9;
  box-shadow: none;
}

/* journal title tile */
.journal-tile {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}

/* applying margin to inner elements in content box, b/c we want label (new-content) to appear in the corner */
.journal-tile.labs-content-box {
  padding: 0;
}

.journal-tile-left {
  margin: 3rem;
}

.journal-tile-left {
  display: block;
  float: left;
  width: 65%;
}

.journal-tile-right {
  float: left;
  width: 30%;
  height: 100%;

  /* same height as parent */
  position: absolute;
  right: 0;
  top: 0;

  /* allow vertical centering for children */
  display: flex;
  justify-content: center;
}

.journal-tile-right .centered {
  align-self: center; /* vertically center */
}

.journal-tile-title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

.journal-title-text,
.journal-title-text:hover,
.journal-title-text:visited {
  color: #205493; /* blue, link hover */
  text-decoration: none;
}

.journal-title-text:hover {
  border-bottom: .08em solid #205493;
}

.journal-home-link {
  font-weight: 300;
  color: #205493;
}

.journal-list .journal-tile:hover {
  background-color: #e1f3f8;  /* light-blue */
  cursor: pointer;
}


/* new content label */
.new-content {
  background-color: #981b1e;
  border-radius: .7rem;
  font-weight: 300;
  margin-top: -2.3rem;
  margin-left: -2.3rem;
  vertical-align: middle;
  position: absolute;
}

a.new-content {
  color: #fff;
}

/* need to override uswds label background-color */
.usa-label.new-content:hover {  /* NOSONAR */
  background-color: #cd2026;
  color: #fff;
  text-decoration: none;
}

.new-content:visited {
  color: #fff;
}

.labs-background-title {
  padding-left: 0;
}

/* ----------------------------------------- feed ----------------------------------------------------- */

.feed-item-header {
  width: 100%;
  display: block;
  position: relative;
}

.feed-item-heading {
  font-size: 2rem;
  color: #205493;
  text-decoration: none;
}

.feed-item-heading:hover {
  border-bottom: .08em solid #205493;
  text-decoration: none;
}

.feed-item-heading:visited {
  color: #205493;
}

.feed-labels {
  float: right;
  margin-left: 1rem;
}

.usa-label.feed-category,
.feed-item-timestamp {
  margin-top: .5rem;
  font-size: 1.3rem;
  display: block;
}


.usa-label.feed-category {
  background-color: #205493; /* blue, link hover */
  text-align: center;
}

.feed-item-timestamp {
    float: right;
}

.feed-item-refs {
  margin-top: 2rem;
}

.feed-item-refs-title {
  margin-bottom: 1rem;
}


/* override color of external link pic */
.usa-external_link::after {
  background-image: url(/static/django_uswds/uswds/img/external-link-hover.svg);
}

/* --------------------------------------- aside docsum ----------------------------------------------------- */
.aside-docsum .labs-docsum-title {
  font-size: 1.7rem;
}

/* --------------------------------------- styles for mobile ------------------------------------------------ */
@media screen and (max-width: 600px) {
  .labs-background-title {
    padding-left: 3rem;
  }
}

/* ------------------------------------------ tablet -------------------------------------------------------- */
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .labs-background-title {
    padding-left: .5em;
  }
}

/* --------------------------------------- styles for mobile & tablet --------------------------------------- */
@media screen and (max-width: 800px) {

  /* breadcrumbs */
  .breadcrumbs li {
    height: 21px;  /* for centering to work, specifying height */
  }

  .breadcrumbs .separator {
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .ribbon-right-side {
    float: left;
  }

  /* search */
  .title h1 {
    margin-top: 0;
  }

  .usa-search [type="search"].journal-selector,
  .usa-search [type="submit"].search-btn {
    height: 4rem;
  }

  .journals-landing,
  .dna-left {
    background-image: none;
  }

  .search-box {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    margin: 0;
  }

  .search-intro {
    padding-top: 1.5rem;
    padding-bottom: 0;
    margin: 0;
  }

  .search-intro .tagline {
    display: none;
  }

  .search-intro .title {
    margin: 0;
    font-size: 2.4rem;
}

  /* journal tile */
  .journal-tile-left {
    width: 60%;
    margin-right: 0;
    max-width: 170px;
  }

  .journal-tile-right {
    width: 40%;
  }

  .journal-home-link {
    font-size: 1.6rem;
  }

  .new-content {
    display: inline-block;
    margin-bottom: .3rem;
  }

  .follow-btn {
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 10px;
    min-width: 90px;
  }

  .ncbi-page-header .ncbi abbr {
    margin-left: 1rem;
  }
}

@media screen and (max-width: 1024px) {
  .dna-left .usa-grid-full,
  .breadcrumbs-container .usa-grid-full {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}