/**
 * @file
 * News node styling for News content type.
 */

/* ==========================================================================
   News Node Base Styles
   ========================================================================== */

.node--type-news {
  color: #111;
  box-sizing: inherit;
  margin: 50px 0;
  font: 1.25rem 'Milo', sans-serif;
  line-height: 1.35;
}

/* ==========================================================================
   Page Layout
   ========================================================================== */

.page-node-type-news .uh-header {
  margin-bottom: 30px;
}

.page-node-type-news .content {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure the page container doesn't constrain the content */
.page-node-type-news {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.page-node-type-news h2 {
  font: 3rem 'League Gothic', sans-serif;
  margin: 0 0 1rem;
  text-transform: none;
}

/* ==========================================================================
   Field Styling
   ========================================================================== */

.page-node-type-news .field {
  margin: 8px 0 15px;
}

.page-node-type-news .field--name-field-news-author {
  display: inline-block;
}

.page-node-type-news .field--name-field-news-category,
.page-node-type-news .field--name-field-news-research-topic {
  font-style: italic;
}

/* Remove links from taxonomy terms but keep labels visible */
.page-node-type-news .field--name-field-news-category a,
.page-node-type-news .field--name-field-news-research-topic a {
  text-decoration: none;
  color: inherit;
  pointer-events: none;
}

/* ==========================================================================
   Date and Author
   ========================================================================== */

.page-node-type-news .date-author-field {
  margin: 20px 0;
  font-weight: normal;
}

.page-node-type-news .date-author-field .news-author {
  display: inline;
}

.page-node-type-news .date-author-separator {
  margin: 0 8px;
  display: inline;
}

/* ==========================================================================
   Content Layout with Image
   ========================================================================== */

.page-node-type-news .news-content-wrapper {
  overflow: hidden;
}

.page-node-type-news .image-full-text {
  float: right !important;
  width: 350px !important;
  max-width: 350px !important;
  margin: 0 0 20px 30px !important;
  height: auto !important;
  display: block !important;
}

/* Override Bootstrap's clearfix */
.page-node-type-news .clearfix::before,
.page-node-type-news .clearfix::after {
  display: none !important;
}

.page-node-type-news .clearfix {
  overflow: visible !important;
  clear: none !important;
}

/* ==========================================================================
   Separators
   ========================================================================== */

.page-node-type-news hr.top-separator {
  border: 2px solid #000;
  opacity: 1 !important;
}

.page-node-type-news hr.bottom-separator {
  border: 1px solid #eee;
  opacity: 1 !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.page-node-type-news .site-footer {
  margin-top: 20px;
}

/* ==========================================================================
   Newsroom View
   ========================================================================== */

.newsroom .view-header {
  line-height: 0.5;
  margin-bottom: 30px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media only screen and (max-width: 1024px) {
  .page-node-type-news .image-full-text {
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 0 15px 20px !important;
  }
}

@media only screen and (max-width: 768px) {
  .page-node-type-news .content {
    padding: 0 1rem;
  }

  .page-node-type-news .image-full-text {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    display: block !important;
  }

  .page-node-type-news h2 {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 480px) {
  .page-node-type-news h2 {
    font-size: 2rem;
  }

  .page-node-type-news .content {
    padding: 0 0.75rem;
  }

  .page-node-type-news .date-author-separator {
    padding: 0 8px;
  }
}