/* Stylesheet Contents
   1. Renamed Variables
   2. Custom Fonts
   3. Typography Customizations
   4. Feature Customizations
   5. Bugfixes
   6. Internet Explorer
*/




/* RENAMED VARIABLES
   Grove fonts, colors, and font-sizes are set with CSS Custom Properties.
   If these Custom Properties are renamed, any of our CSS that uses them will break.
   Format: [Original Property]: var([Renamed Property]);

   8/1/2022: --secondaryHeadlineFont renamed to --secHlFont.
   8/1/2022: --secondaryColor[N] renamed to --secC[N].
*/

:root {
  --secondaryHeadlineFont: var(--secHlFont);
  --secondaryColor1: var(--secC1);
  --secondaryColor2: var(--secC2);
  --secondaryColor3: var(--secC3);
  --secondaryColor4: var(--secC4);
  --secondaryColor5: var(--secC5);
  /* This property is not set at root */
  --inverseButtonBgColor: var(--buttonBgColorInverse);
}





/* CUSTOM FONTS
   Grove fonts are themed using CSS Custom Properties.
   1. Replace these fonts in the root to re-theme the entire site.
   2. Set individual elements to these properties to change its font.
   3. Set fallback values for IE and other older browsers.

   7/7/2022: --liveBlogBodyFont added.
   8/1/2022: --secondaryHeadlineFont renamed to --secHlFont.
*/

html.fonts-loaded {
  --primaryHeadlineFont: "utopia-std-display", Georgia, serif;
  --secHlFont: "utopia-std", Georgia, serif;
  --bodyFont: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --liveBlogBodyFont: var(--bodyFont);
}

[class*="-pageHeading"],
.AuthorPage-name,
.BrightspotPersistentPlayer-programName {
  font-family: "utopia-std-display", Georgia, serif;
  font-family: var(--primaryHeadlineFont);
}

[class*="-authorName"],
[class*="-category"],
[class*="-contributors"]
[class*="-pageSubHeading"],
.ListC .PromoXSmall-title {
  font-family: "utopia-std", Georgia, serif;
  font-family: var(--secHlFont);
}

body,
[class*="-dateModified"],
[class*="-datePublished"],
[class*="-tags"] .Link,
[class*="-timestamp"],
.Figure-caption,
.NavI .NavigationLink,
.PromoAudioShowA-title {
  font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--bodyFont);
}




/* TYPOGRAPHY CUSTOMIZATIONS */

[class*="-articleBody"] {
  font-size: 1.7rem;
}

[class*='-timestamp'] {
  font-size: 0.875em;
}

[class*='-aui-bio-cta'], /* -aui- "authorInfo" */
[class*='-authorName'],
[class*='-bylineText'],
[class*='-contributors'],
.AuthorPage-jobTitle,
.NavI-text,
.PromoAudioShowA-title,
.SearchResultsModule-filters-title,
.SearchResultsModule-title {
  font-weight: 400;
}

.PromoA-authorName,
.PromoB-authorName,
.PromoC-authorName {
  text-transform: uppercase;
}

.NavI-text.gtm_nav_cat {
  letter-spacing: 1.25px;
}


/* Byline: Match additional contributors to author styles */

[class*='-authorName'], [class*='-contributors'] {
  font-size: 0.875em;
  letter-spacing: 0.05em;
}


/* Style default alt text for images */

img {
  color: var(--secondaryTextColor);
  font-family: var(--secHlFont);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 100;
  letter-spacing: 0.025em;
}

/* Hide comma between name and date in bylines */

[class*='-byline-divider'] {
  color: transparent;
}





/* FEATURE CUSTOMIZATIONS */

/* Alert Bar Customizations */

.AlertBar {
  background-color: #f26a5b;
  background-color: var(--donateBGColor);
  max-width: 900px;
}

.AlertBar-message {
  color: white;
  color: var(--primaryTextColorInverse);
  padding: 10px 30px;
}

.AlertBar-message .Link {
  text-decoration: underline;
}


/* Donate Button Customizations
   1. Round off the edges of the donate button.
   2. Make Heart icon larger when hovered over.
*/

.PH-donate-button {
  border-radius: 20px;
}

.PH-donate-button svg {
  transform: scale(1);
  transition: 0.25s ease;
}

.PH-donate-button:hover svg {
  transform: scale(1.125);
}


/* Footer Customizations
   1. Left-align row of affiliate logos
   2. Reduce Affiliate Logo Sizing
*/

.Page-footer {
  background: #231f20;
  background: var(--primaryTextColor);
}

/* 1 */
.Page-footer .ListLogos-items {
  justify-content: flex-start;
}

.Page-footer .ListLogos-items-item {
  padding: 15px 6px;
}

/* 2 */
.Page-footer .PromoLogo {
  transform: scale(0.75);
}

@media (min-width: 768px) {
  .Page-footer .PromoLogo {
    transform: scale(0.5);
  }
}


/* Persistent Player Customizations */

.BrightspotPersistentPlayer-name {
  letter-spacing: 0.875px;
}

.BrightspotPersistentPlayer-name,
.BrightspotPersistentPlayer-schedule {
  opacity: 0.875;
}

.BrightspotPersistentPlayer-schedule-next {
  font-size: 0.75em;
  padding-top: 3px;
  font-weight: 600;
}

.BrightspotPersistentPlayer-programName {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.0375em;
}

.BrightspotPersistentPlayer-drawerToggle-text {
  font-size: 0.875em;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

[is-live] .BrightspotPersistentPlayer-name:before {
  /* Match Active Stream dot to our accent color */
  background: #f26a5b;
  background: var(--donateBGColor);
}


/* Other */

/* Add colored bar decorations to bylines */

[class*="Promo"][class*="-authorName"] .Link {
  border-left: 3px solid #f26a5b;
  border-left: 3px solid var(--donateBGColor);
  padding-left: 5px;
}





/* BUGFIXES */

/* Bulletpoints
   1. Bulletpoints are missing from some unordered lists on stories, show descriptions, and more.
   2. When Bulletpoints are visible, they often do not have enough whitespace around them.
*/

.ArtP-articleBody > ul,
.AuthorPage-articleBody > ul,
.BlogPage-articleBody > ul,
.BlogPostPage-articleBody > ul,
.EventPage-articleBody > ul,
.LiveBlogPage-articleBody > ul,
.LongFormPage-articleBody > ul,
.OneOffPage-articleBody > ul,
.PCEP-articleBody > ul,
.RSEP-articleBody > ul,
.SectionPage-articleBody > ul,
.SeriesPage-articleBody > ul,
.TagPage-articleBody > ul,
.EventPage-description > ul,
.FranchisePage-description > ul,
.PodcastPage-description > ul,
.RadioShowPage-description > ul,
.TVFranchisePage-description > ul,
.TVShowCollectionPage-description > ul,
.TVShowPage-description > ul,
.RichTextModule-items > ul,
.RTB > ul {
  list-style-type: disc;
  padding-left: 2.4rem;
}

div[class*="P-articleBody"] > ul > li,
div[class*="Page-articleBody"] > ul > li,
div[class*="Page-description"] > ul > li,
.RTB > ul > li {
  margin-bottom: 1.25rem;
}


/* Color Contrast
   1. Add contrast to Close Button in Search (defaults to headerTextColor).
   2. Add contrast to Audio Embed headline (defaults to headerTextColor.
   3. Invert colors for hamburger menu logo.
      (the site header uses a dark background, while hamburger menu uses light)
   4. Increase contrast to Event action buttons (defaults to grey text on dark blue bg)
*/

.PH-search-close svg {
  fill: #231f20;
  fill: var(--primaryTextColor);
}

.AudioEnhancement-title {
  color: #231f20;
  fill: var(--primaryTextColor);
}

.PH-ham-m .PH-logo img {
  /* brightness(0) turns any image into a black silhouette */
  filter: brightness(0);
}

.EventPage-ticketing .Link {
  color: #e6e7e8;
}


/* Footer Logo Correction
   The footer logo displays too small on mobile and too large on desktop
   1. Set a larger base width for the logo.
   2. Constrain the logo so it can't exceed its container.
   3. Prevent logo from being distorted.
*/

.Page-footer-logo {
  width: 200px;
  max-width: 100%;
}

@media only screen and (min-width: 768px) {
  .Page-footer-logo {
    width: 250px;
  }
}

.Page-footer-logo img {
  /* 3
     This fix should no longer be necessary.
     An Aug-2022 code push should have changed how footer-logo is structured.
  */
  object-fit: contain;
}


/* Promo Corrections
   1. Increase available space for Lead Promo button.
   2. Prevent Promo image from shrinking if text beside it wraps. 
*/

.PromoLede-read-more-btn {
  display: inline-block;
  width: auto;
  min-width: 147px; /* Grove's default button size */
  max-width: 294px;
}

.PromoAudioShowB-media {
  flex-shrink: 0;
}


/* Pym Embed Corrections
   Floated elements are given a padding-top of 0, 40px, or 50px depending on
   the viewport. Pym Embeds have an additional margin. Let's remove that.
*/

@media only screen and (min-width: 768px) {
  .Enh [data-pym-loader] {
    margin: -35px 0;
  }
}

@media only screen and (min-width: 1024px) {
  .Enh [data-pym-loader] {
    margin: -45px 0;
  }
}



/* Remove Text Transformation
   Our editorial standards is no longer to capitalize each word in our titles.
   Remove all text-transformations that Grove uses by default.
*/

.EplA-header-title,
.EplB-header-title,
.EventForm-header-title,
.Form-header-title,
.ListB-header-title,
.ListC-header-title,
.ListD-header-title,
.ListE-header-title,
.ListF-header-title,
.ListG-header-title,
.ListH-header-title,
.ListHeader-title,
.ListPeople-header-title,
.ListRelatedContent-header-title,
.ListTitles-header-title,
.RadioTabs-header-title,
.ShowsListB-header-title,
.Tabs-header-title,
.VideoModule-header-title,
.Figure-credit,
.Figure-divider,
.Figure-source,
.label-1,
.PlayListItem-media-current,
.PromoD-cta-button,
.PromoLede-category,
.PromoLede-credit,
.PromoLede-divider,
.PromoLede-source,
.PromoLede-title,
.SocialBar-heading {
  text-transform: none;
}

@media only screen and (min-width: 768px) {
  .PromoLede-read-more-btn {
    text-transform: none;
  }
}


/* Spacing
   1. Reduce spacing when an embed follows a Subhead.
   2. Reduce spacing when a paragraph follows a Subhead.
   3. Reduce gap betweeen headings and other rich-content on stories.
*/

.RichTextModule h2 + .Enh {
  margin-top: 15px;
}

.RichTextModule h2 + p {
  margin-top: 10px;
}

[class*="-articleBody"] > h2 + br,
[class*="-articleBody"] > h3 + br {
  display: none;
}

/* Replace Footer logos with Soundwave Graphic
   The first logo of the set is too tiny to see.
   Use this decoration instead of footer logos until the bug is resolved.
*/

.Page-footer-branding .ListLogos {
  display: none;
}

.Page-footer-branding {
  background-image: url(https://npr.brightspotcdn.com/b7/7a/d024b8154984aede2d827af42561/soundwave-trimmed-white-with-gap.png);
  background-repeat: repeat-x;
  background-size: 30% 45%;
  background-position: center;
  filter: blur(0.5px);
}

@media (max-width: 702px) {
  .Page-footer-branding {
    background-size: 90% 55%;
  }
}






/* INTERNET EXPLORER
   While Internet Explorer doesn't need to appear identical to our site in
   major browsers, it still MUST be presentable. These styles should:
   A. Ensure IE has an acceptable layout/structure
   B. Correct visual bugs present in IE
*/

@media (-ms-high-contrast: active), (-ms-high-contrast: none) {

  /* Color Fixes
     These colors are not being displayed where they should in IE
     While IE does not support CSS Custom Properties, I am providing them
     here so we don't lose track of where the color values came from.
  */

  .PH-donate-button {
    background-color: #f26a5b;
    background-color: var(--donateBGColor);
    border-color: #f26a5b;
    border-color: var(--donateBGColor);
    color: #ffffff;
    color: var(--headerIconColor);
  }
  
  .PH-persistent-player {
    background-color: #234093;
    background-color: var(--primaryColor1);
  }
  
  .BrightspotPersistentPlayer-playerControls {
    background: #237bbd;
    background: var(--primaryColor2);
  }

  .PH-nav-bar .NavI .NavI-items {
    background: #ffffff;
    background: var(--headerMenuBgColor);
  }

  .PH-nav-bar .NavI .NavI-items .NavigationLink {
    border-bottom: 1px solid #e6e7e8;
    border-bottom: 1px solid var(--headerBorderColor);
  }

  .Page-footer {
    background: #231f20;
    background: var(--primaryTextColor);
    color: #ffffff;
    color: var(--footerTextColor);
  }
  
  .Page-footer-branding {
    background-color: #000000;
    background-color: var(--footerPartnersBgColor);
  }

  .AlertBar {
    background-color: #f26a5b;
    background-color: var(--donateBGColor);
  }


  /* Structural Fixes */

  .PH-logo {
    /* Align site logo to left edge of the header */
    justify-content: flex-start;
  }

  .PH-nav-bar .NavI .NavI-items {
    margin-left: -100px;
  }

  .SocialBar {
    align-items: flex-start;
  }


  /* Bugfixes
     1. Disable Sticky Persistent Player (causes overlap with the nav-menu)
     2. Fix Navigation Dropdowns (dropdown menus are cut off and scroll)
  */

  .PH-persistent-player {
    position: static !important;
  }

  .DropdownNavigation {
    overflow: visible !important;
  }
}