/* Stylesheet Contents
   1. Renamed Variables
   2. Custom Fonts
   3. Typography Customizations
   4. Feature Customizations
   5. Bugfixes
   6. Allegiance Donate Asks
   7. 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 .NavLink,
.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: #237bbd;
  background-color: var(--primaryColor2);
  background-color: var(--primaryColor1);
  margin-top: 5px;
  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 */

.Page-footer {
  background: #231f20; /* Defaults to bright blue */
  background: var(--primaryTextColor);
}

.Page-footer .Page-footer-branding {
  position: relative;
}

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

  content: '';
  opacity: 0.25;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
}

.Page-footer .ListLogos {
  z-index: 1;
}

.Page-footer .ListLogos-items {
  justify-content: flex-start;  /* Left-Align affiliate logos */
  padding-left: 3px;            /* Align first Logo to left portion of footer */
}

@media (min-width: 768px) {
  .Page-footer .Page-footer-branding::before {
    background-size: 30% 45%;
  }

  .Page-footer .ListLogos-items {
    padding-left: 21px;
  }
}

.Page-footer .ListLogos-items-item {
  background-color: #000000;
  padding: 10px 15px;
}

.Page-footer .PromoLogo img {
  width: auto;
  height: 100%;
  max-height: 25px;  /* Shrink affiliate logos */
  opacity: 0.75;
  transition: 0.2s;
}

.ListLogos-items-item:first-child .PromoLogo img {
  max-height: 32px;  /* NPR logo is too small */
}

.Page-footer .PromoLogo img:hover {
  opacity: 1.00;
}


/* 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);
}

/* Podcast Sharing Link Icons */
.HtmlModule .podcast-share-link {
  display: block;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
}

.HtmlModule .podcast-share-link img,
.HtmlModule .podcast-share-link svg {
  border-radius: 15%;
  box-shadow: 1px 1px 3px #cccccc;
  box-shadow: 1px 1px 3px var(--secC2);
  transform: scale(1);
  transition: 0.25s;
  width: 40px;
  height: 40px;
}

.HtmlModule .podcast-share-link:hover img,
.HtmlModule .podcast-share-link:hover svg {
  transform: scale(1.125);
}

/* Other */

/* Display crossed-circle cursor on disabled links/buttons */
a[disabled],
button[disabled] {
  cursor: not-allowed !important;
}

/* 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;
}

.HtmlModule ol, .HtmlModule ul {
  list-style: disc;
  padding-left: 2rem;
}

.HtmlModule ul.PodcastActionBar-items {
  list-style-type: none;
}

/* 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)
   5. Increase contrast for Audio Enhancement Title (7/2023 update changed it to white)
   6. Add styling to links in Promo Descriptions
*/

.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;
}

.AudioEnh-title {
  color: var(--primaryTextColor);
}

[class*="Promo"][class*="-description"] a.Link {
  color: #1a7fc3;
  color: var(--linkColor);
  font-weight: bold;
  text-decoration: underline;
}

/* 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.
*/

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

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

/* 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.
   4. Shorten/Style Calendar Dates so they don't wrap.
*/

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

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

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

span.PromoEvent-date-day {
  color: var(--primaryColor1);
  display: block;
  font-family: var(--bodyFont);
  font-size: 1.5rem;
  font-weight: normal;
}

/* Remove scrollbar from pinned navigation */
.DropdownNavigation {
  height: auto !important;
}

/* Inline Audio Transcript */
.inline-audio-transcript {
  color: #b2b2b4;
  color: var(--secC1);
  font-style: italic;
  max-width: 700px;
  margin: 20px auto;
}

.inline-audio-transcript audio {
  width: 100%;
}

.inline-audio-transcript summary {
  list-style-type: none;
  text-align: right;
  text-transform: uppercase;
  font-size: 0.875em;
  margin-top: 0.375em;
  text-decoration: underline;
  color: #b2b2b4;
  color: var(--secC1);
  display: block;
}

.inline-audio-transcript summary:hover {
  text-decoration: none;
}

.inline-audio-transcript p:first-of-type {
  margin-top: 1rem;
}



/* DONATE EMBED FOR ALLEGIANCE ASK
   Donate asks appear at the bottom of most stories/episodes
*/

.alleg-donate-embed {
  background-color: white;
  background-size: cover;
  border-left: 1.5rem solid #000;
  box-shadow:
    1px 4px 4px #e6e7e8,
    0 0 0 1px #e6e7e8;
  box-shadow:
    1px 4px 4px var(--headerBorderColor),
    0 0 0 1px var(--headerBorderColor);
  box-sizing: border-box;
  color: #231f20;
  margin: 0 auto 2.5rem auto !important;
  font-family: 'acumin-pro';
  font-size: 1.5rem;
  line-height: 1.3;
  padding: 1.5rem 4rem 1.5rem 3.25rem;
  width: 100%;
  max-width: 700px;
}

.alleg-donate-embed h1 {
  color: inherit;
  font-family: 'utopia-std';
  font-size: 3.2rem;
  margin: 0;
  margin-bottom: 1rem;
}

.alleg-donate-embed p {
  margin: 0;
  margin-bottom: 1.75rem;
}

.alleg-donate-embed form {
  margin: 0;
  margin-bottom: 1rem;
}

.alleg-form-group {
  display: flex;
  justify-content: space-evenly;
  margin: 0;
  margin-bottom: 1.75rem;
  width: 100%;
}

.alleg-form-group label {
  background-color: #e6e7e8;
  border: 2px solid #e6e7e8;
  cursor: pointer;
  margin: 0 5px;
  padding: 0.5em 0;
  text-align: center;
  transition: 0.3s;
  width: 100%;
}

.alleg-form-group label:first-of-type { margin-left: 0; }
.alleg-form-group label:last-of-type  { margin-right: 0; }

.alleg-form-group input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.alleg-form-group input[type="radio"]:checked + label {
  background-color: #231f20;
  border-color: #231f20;
  color: white;
}

.alleg-form-group label:hover,
.alleg-form-group label:focus,
.alleg-form-group input[type="radio"]:checked + label:hover,
.alleg-form-group input[type="radio"]:checked + label:focus {
  border-color: #b1b3b6;
}

.alleg-form-group input[type="number"] {
  border: 2px solid #e6e7e8;
}

.alleg-donate-embed button {
  background-color: #f26a5b;
  border: none;
  border-radius: 2rem;
  color: white;
  cursor: pointer;
  font-weight: bold;
  padding: 1rem 1.5rem;
}

.alleg-donate-embed svg {
  display: inline-block;
  fill: currentColor;
  height: 0.85em;
  width: 0.85em;
}

.alleg-double-group {
  display: flex;
  flex-direction: row;
}

.alleg-double-group .alleg-form-group:first-of-type {
  margin-right: 10px;
}

@media (max-width: 700px) {
  .alleg-double-group {
    flex-direction: column;
  }
}

@media (max-width: 450px) {
  .alleg-double-group .alleg-form-group:last-child {
    flex-direction: column;
  }
}

.alleg-form-group input[type="number"] {
  min-height: 4rem;
}





/* INTERNET EXPLORER
   We no longer support Internet Explorer, but it doesn't hurt to leave our IE fixes in.
*/

@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 .NavLink {
    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);
  }


  /* Structural Fixes
     1. Align site logo to the left edge of the header
  */

  .PH-logo {
    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;
  }
}