/*
Theme Name:     Department of Pediatrics
Theme URI:      https://pediatrics.wustl.edu/
Description:    Child theme of the WashU Web Theme
Author:         WashU Medicine Marketing & Communications
Author URI:     https://marcomm.med.wustl.edu/
Template:       wutheme_chauvenet
Version:        1.0.0
*/

/* GLOBAL STYLES */

/* Prevents horizontal scrolling when there are full-width sections */
#page {
  overflow-x: hidden;
}

/* Header and main nav - allows for use of full container width for main navigation */
.header-alt .washu-main-menu-wrapper {
  float: left;
  width: 100%;
  margin: 0;
}

/* Places main navigation underneath the department name */
.header-alt .site-header>.container {
  display: block;
}

/* Left aligns the main navigation */
.header-alt .washu-main-menu-wrapper .washu-main-menu-content {
  text-align: left;
  margin-left: -10px;
}

@media screen and (max-width: 1399px) {
  .home .header-alt .page-thumbnail-feature {
      height: calc(50vh - 75px);
  }
}

@media screen and (min-width: 1400px) {
  .home .header-alt .page-thumbnail-feature {
      height: calc(100vh - 75px);
  }
}

/* Situates feature text just below banner image focal points and reduces font size */
.feature-text {
  margin-top: 20rem;
  padding: 2rem 2.5rem;
  max-width: 82%;
}

.feature-text .heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.7rem;
  font-family: "Libre Baskerville", "Times New Roman", serif;
}

.feature-text .subheading {
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .1em;
  font-weight: 100;
}

.feature-text.bg-dark-gray {
  background: rgb(61 61 61 / 52%);
}

/* Reduces the font size and margin-top of the feature text on smaller screens */
@media screen and (max-width: 1399px) {
  .feature-text {
      padding: 1.5rem 2rem;
      margin-top: 5rem;
  }

  .feature-text .heading {
      font-size: 2rem;
  }

  .feature-text .subheading {
      letter-spacing: 0;
      font-size: 1.3rem;
  }
}

/* reduces the padding around the site title on smaller screens */
@media screen and (min-width: 56.25em) {
  .header-alt .site-header .site-title {
      padding: 0;
  }
}

/* styles the affiliation text */
.site-title::before {
  content: "Edward Mallinckrodt Department of";
  font-size: 1rem;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  display: inline-block;
  width: 100%;
  font-weight: 600;
  letter-spacing: .02em;
}

/* FULL WIDTH CONTENT */

/* featured content - links to 3 sections */

.frontpage-featured-content {
  margin: -3.5rem -9999rem 2rem;
  padding: 2rem 9999rem;
  background: #2e8192;
}

@media screen and (max-width: 40rem) {
  .frontpage-featured-content {
      display: flex;
  }
}

.frontpage-featured-content a {
  color: #fff;
  text-decoration: none;
  padding: 8px 24px;
  margin: 1rem 1rem;
  border-style: solid;
  border-color: #fff;
  border-width: thin;
  border-radius: 8px;
  display: inline-block;
}

.frontpage-featured-content a:hover {
  color: #d15f27;
  background-color: #fff;
}

/* at-a-glance */
.at-a-glance .wp-block-image figure,
figure.wp-block-image {
  margin-bottom: .75rem;
}

.at-a-glance .glance-icon {
  text-align: center;
  margin-bottom: 25px;
}

.at-a-glance h3.number {
  margin-top: 0;
  margin-bottom: 0;
}

/* research */
.frontpage-research {
  margin: 0rem -9999rem 0;
  padding: 0rem 9999rem;
  background: #53565A;
}

.frontpage-research h2.research {
  color: #fff;
}

.frontpage-research .wp-block-cover {
  margin-bottom: 0;
}

.frontpage-research .wp-block-cover .has-background-dim {
  background-color: #0000;
}

.washu-billboard.frontpage-research .wp-block-button__link {
  color: #fff;
  text-decoration: none;
  border-color: #fff;
}

.frontpage-research .wp-block-cover {
  margin-bottom: 0;
  margin-left: -6rem;
  width: 125%;
}

.frontpage-research .wp-block-columns {
  margin-bottom: 0;
}

.washu-billboard.frontpage-research p,
.frontpage-research a {
  color: #fff;
}

/* patient care */
.frontpage-lg-patient-care {
  margin: 0rem -9999rem 0;
  padding: 0rem 9999rem;
  background: #fff;
}

.frontpage-sm-patient-care {
  margin: 0rem -9999rem 0;
  padding: 0rem 9999rem;
  background: #fff;
}

.frontpage-sm-patient-care .wp-block-cover {
  margin-bottom: 0;
  margin-left: -6rem;
  width: 125%;
}

.frontpage-lg-patient-care .wp-block-cover {
  margin-bottom: 0;
  margin-right: -6rem;
  width: 125%;
}

.frontpage-lg-patient-care .wp-block-cover .has-background-dim {
  background-color: #0000;
}

.frontpage-sm-patient-care .wp-block-cover .has-background-dim {
  background-color: #0000;
}

@media screen and (min-width: 782px) {
  .frontpage-lg-patient-care .wp-block-column {
      padding-top: 2rem;
  }
}

@media screen and (max-width: 780px) {
  /* needs dynamic 'wp-container-' class name for specificity to override inherited style */
  .wp-container-20.frontpage-lg-patient-care {
      display: none;
  }
}

@media screen and (min-width: 780px) {
  .frontpage-sm-patient-care {
      display: none;
  }
}

.frontpage-lg-patient-care .wp-block-button.wp-block-button {
  margin-right: 0px;
}

/* education */
.frontpage-education {
  margin-top: 0;
}

.frontpage-education-ataglance {
  max-width: 65rem;
  margin: 0 auto;
}

/* slch */
.frontpage-slch {
  margin-right: -9999rem;
  margin-left: -9999rem;
  padding: 0rem 9999rem;
  background: #fff;
}

.frontpage-slch .wp-block-cover {
  margin-bottom: 0;
}

.frontpage-slch .wp-block-cover .has-background-dim {
  background-color: #0000;
}

.washu-billboard.frontpage-slch .wp-block-button__link {
  color: #fff;
  text-decoration: none;
  border-color: white;
}

.frontpage-slch .wp-block-cover {
  margin-bottom: 0;
  margin-left: -6rem;
  width: 125%;
}

.frontpage-slch .wp-block-columns {
  margin-bottom: 0;
}

/* recognitions */
.frontpage-recognition {
  margin: 0 -9999rem 20px -9999rem;
  padding: 40px 9999rem 40px;
}

@media screen and (max-width: 782px) {
  .usnwr-badge {
      max-width: 300px;
  }
}

/* limits the height of the twitter widget */
#twitter-widget-0 {
  max-height: 900px
}

@media screen and (max-width: 780px) {
  /* removes column padding on small screens */
  .twitter-column {
      padding-left: 0px !important;
  }
}

/* Fix 'is-light' class in cover divs */
.wp-block-cover .wp-block-cover__inner-container h2 {
  color: #fff;
}

.wp-block-cover .wp-block-cover__inner-container h5 {
  color: #fff;
}

.wp-block-cover .wp-block-cover__inner-container p {
  color: #fff;
}

/* full width div, not just expanded margins */
.full-width-div .wp-block-cover__inner-container {
  max-width: 65em;
}

.full-width-div .wp-block-cover__inner-container h2 {
  font-size: 3rem;
}

.full-width-div .wp-block-cover__inner-container>p {
  font-size: 1.2rem;
}

/* ADDITIONAL STYLES */
/* table left column header styling */
.tbl-column-hdr tr td:first-child {
  /* style first td as a header */
  color: #fff;
  background-color: #3d3d3d;
  width: 25%;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.paper {
background: #fff;
box-shadow:
  /* The top layer shadow */
  0 1px 1px rgba(0,0,0,0.15),
  /* The second layer */
  0 10px 0 -5px #eee,
  /* The second layer shadow */
  0 10px 1px -4px rgba(0,0,0,0.15),
   /* The third layer */
  0 20px 0 -10px #eee,
  /* The third layer shadow */
  0 20px 1px -9px rgba(0,0,0,0.15);
}