GroveWJCTStyle.css

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --WJCT-primary: #006BB6;
    --WJCT-secondary: #40C4FF;
    --WJCT-tertiary: #2C3E50;
    --WJCT-light-text: white;
    --WJCT-red: #D50000;
    --bodyFont: "Montserrat", sans-serif;
    --primaryFont: "Montserrat", sans-serif;
    --primaryHeadlineFont: "Merriweather", serif;
    --secondaryHeadlineFont: "Merriweather", serif;
    --headerBgColor: #006BB6;
    --buttonHeight: 40px;
    --WJCT-link: #40C4FF;
    --headline-1: 5rem;
}

html {
    font-family: var(--primaryFont);
}


.AlertBar-message {
    color:white;
    font-weight: 600;
    padding: 2rem;
}

p,
.ArticlePage-authorInfo-bio-content {
    line-height: 1.7;
}

/* Program page font size fix (Podcast, Shows, Franchises) */
.FranchisePage-description,
.PodcastPage-description,
.RadioShowPage-description,
.ArticlePage-authorInfo-bio-content {
    font-size: 1.8rem;
}

.Page-header-hamburger-menu-content,
.Page-header-hamburger-menu-content,
.Page-header-hamburger-menu-wrapper {
    background-color: var(--WJCT-tertiary);
}

.BrightspotPersistentPlayer-drawer {
    background: var(--WJCT-tertiary);
}

svg.chevron,
.NavigationItem-text.gtm_nav_cat,
.Page-header-hamburger-menu-content .NavigationItem .NavigationLink {
    color: var(--WJCT-light-text);
}

.NavigationItem-text.gtm_nav_cat span:hover {
    color: var(--WJCT-secondary);
}

nav.DropdownNavigation.gtm_nav .NavigationItem-items-item.gtm_nav_subcat a:hover,
.Page-header-hamburger-menu-content .NavigationItem .NavigationLink:hover {
    color: var(--WJCT-link);
}

.close-x,
.NavigationItem-more svg {
    fill: var(--WJCT-light-text);
}

.Page-header-donate-button.gtm_donate {
    background-color: var(--WJCT-red);
}

.Page-header-donate-button.gtm_donate {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

footer.Page-footer {
    background-color: var(--WJCT-tertiary);
}

.Page-footer-branding {
    background-color: black;
}

ul.NavigationItem-items {
    padding: 0px !important;
}

nav.DropdownNavigation.gtm_nav li.NavigationItem-items-item.gtm_nav_subcat:hover {
    background-color: rgba(44, 62, 80, .2);
    color: var(--WJCT-primary);
}

.Page-header-nav-bar {
    background: none;
}

/* Removed white bar from bottom of all navigation items. */
.Page-header-nav-bar .NavigationItem .NavigationItem-items .NavigationLink {
    border-bottom: 0px;
}

/* Removed white bar from bottom of last navigation item. */
/* li.NavigationItem-items-item.gtm_nav_subcat:last-child a.NavigationLink{
border-bottom: 0px;
} */
/* Decided it's better off with no white bars underneath */

/* Change color of nav menu drop down */
ul.NavigationItem-items {
    background-color: var(--WJCT-tertiary) !important;
}

/* Change color of nav menu links to white */
.NavigationItem .NavigationLink {
    color: white;
}

/* Add light blue line above categories */
/* .PromoA-category,
.PromoB-category,
.PromoC-category {
    padding-top: 10px;
    border-top-color: var(--WJCT-secondary);
    border-top-style: solid;
} */

/* li.ListE-items-item {
    border-bottom: 3px solid var(--WJCT-secondary);
} */

.PromoA-category,
.PromoB-category,
.PromoC-category {
    display: none;
}

.PromoA-media,
.PromoB-media,
.PromoC-media {
    padding-bottom: 10px;
}

/* Make the navigation text font bold */
.NavigationItem-text {
    font-weight: 700;
}

/* Make subnavigation font heavier */
li.NavigationItem-items-item.gtm_nav_subcat {
    font-weight: 500;
}

/* Make volume button yellow/black and make transparent cover disappear */
button.BrightspotPersistentPlayer-volumeControl-toggle {
    color: black;
    background-color: #FFCC00;
    border-radius: 50%;
    margin-top: 7px;
    height: 30px;
    width: 30px;
}

/* Get rid of ugly overlay on volume control */
.BrightspotPersistentPlayer-volumeControl-toggle:after,
.BrightspotPersistentPlayer-volumeControl-toggleMobile:after {
    opacity: 0;
}

/* Make the volume control thicker */
.noUi-target.noUi-rtl.noUi-vertical.noUi-txt-dir-ltr,
.noUi-handle.noUi-handle-lower {
    width: 8px;
}

/* Change All Streams button to secondary color and rounded rectangle */
.BrightspotPersistentPlayer-drawerToggle {
    background-color: var(--WJCT-secondary);
    border-radius: 5px;
}

.BrightspotPersistentPlayer-drawerToggle {
    padding-right: 0px;
}

/* Make Next Up disappear */
.BrightspotPersistentPlayer-tabletDesktopExtraInfo {
    /*     display: none; */
}

/* Make all buttons the same height */
.BrightspotPersistentPlayer-drawerControls,
.Page-header-donate-button {
    height: var(--buttonHeight);
}

/* Make the buttons (hamburger and search) white */
.Page-header-search-button-mobile .icon-magnify,
.Page-header-search-button .icon-magnify,
.Page-header-menu-trigger .burger-menu,
.Page-header-hamburger-menu-close .close-x {
    fill: white;
    stroke-width: 1px;
    stroke: white;
}

/* Change the header background from a color to an image */
ps-header.Page-header {
    background-image: url("http://npr-brightspot.s3.amazonaws.com/aa/4d/59ec9482439f9ab1e1a6bbc35122/wjct-news-header-image.png");
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
    /* display: flex; */
    /* flex-direction: column; */
    padding-top: 45px;
    border-bottom: none;
}

/* Making the sticky page header thinner */
[data-header-sticky] ps-header.Page-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* START Persistent player rearranging and style */
ps-brightspot-persistent-player.BrightspotPersistentPlayer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

ps-brightspot-persistent-player.BrightspotPersistentPlayer>.BrightspotPersistentPlayer-streamInfo {
    order: 1;
}

ps-brightspot-persistent-player.BrightspotPersistentPlayer>.BrightspotPersistentPlayer-playerControls {
    order: 2;
}

ps-brightspot-persistent-player.BrightspotPersistentPlayer>.BrightspotPersistentPlayer-volumeControl {
    order: 3;
}

ps-brightspot-persistent-player.BrightspotPersistentPlayer>.BrightspotPersistentPlayer-drawerControls {
    order: 4;
}

.BrightspotPersistentPlayer-streamInfo {
    text-align: right;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.BrightspotPersistentPlayer-playerControls {
    margin-right: 0;
}

.BrightspotPersistentPlayer-name,
.BrightspotPersistentPlayer-programName {
    font-family: 'Montserrat';
    font-weight: bold;
}

.BrightspotPersistentPlayer-name {
    order: 2;
    font-size: 1.3rem;
}

.BrightspotPersistentPlayer-programName {
    order: 1;
    font-size: 1.6rem;
}

.BrightspotPersistentPlayer-drawerControls {
    margin-left: 3rem;
}

.BrightspotPersistentPlayer-volumeControl {
    display: flex;
    flex-direction: row;
    margin-right: 0;
}

button.BrightspotPersistentPlayer-volumeControl-toggle {
    order: 2;
    margin-right: 0;
}

.BrightspotPersistentPlayer-volumeControl-slider {
    order: 1;
    padding-right: 10px;
    padding-left: 10px;
}

/* END Persistent player rearranging and style */

/* Hide the magnifying lens. Decided not to go with it. */
/* button.Page-header-search-button {
        display: none;
} */

/* Player button formatting */

button.StreamPill {
    background-color: var(--WJCT-tertiary);
    color: white;
}

.BrightspotPersistentPlayer {
    padding-right: 10px;
}

.BrightspotPersistentPlayer-schedule,
figcaption.Figure-caption,
.NavigationItem .NavigationLink,
.PromoC-category,
.PromoC-byline,
.PromoB-category,
.PromoB-byline,
.PromoA-category,
.PromoA-byline,
.ArticlePage-breadcrumbs-wrapper,
.ArticlePage-authorName,
.ArticlePage-datePublished,
.Figure-source,
.Figure-credit,
.ArticlePage-tags-list a.Link,
.ArticlePage-tags-heading,
span.StreamPill-text,
span.BrightspotPersistentPlayer-drawerToggle-text {
    font-family: var(--primaryFont);
}

.ArticlePage-datePublished {
    font-style: italic
}

.BrightspotPersistentPlayer-schedule,
.PromoA-byline,
.PromoB-byline,
.PromoC-byline {
    font-weight: 600;
}

/* Fixing the caption style */

.Figure-content {
    display: flex;
    flex-direction: column;
}

figcaption.Figure-caption {
    order: 1;
    justify-content: flex-start;
}

.Figure-credit-container {
    order: 2;
    flex-direction: row;
    justify-content: flex-start;
}



/* ############################ */
/* Breakpoint specific styles */

/* Desktop Large (1920) breakpoint style */
@media only screen and (min-width: 1920px) {}

/* Desktop Medium (1440) breakpoint style */
@media only screen and (min-width: 1440px) {

    [data-header-sticky] .BrightspotPersistentPlayer-name,
    [data-header-sticky].BrightspotPersistentPlayer-programName {
        max-width: 700px;
    }

}

/* Desktop Small (1280) breakpoint style */
@media only screen and (min-width: 1280px) {

    .BrightspotPersistentPlayer-name,
    .BrightspotPersistentPlayer-programName {
        max-width: 250px;
    }

    .BrightspotPersistentPlayer-tabletDesktopExtraInfo {
        margin-left: 425px;
    }

    /* Resizing the WJCT News logo  */
    .Page-header-logo {
        position: absolute;
        z-index: 50;
    }

    [data-header-sticky] .Page-header-logo {
        position: relative;
    }

    .Page-header-logo {
        display: block;
    }

    .Page-header-logo img {
        width: 405px;
        height: 108px;
        max-height: 108px;
        background: url("https://npr.brightspotcdn.com/1a/f2/429727494181954d3fc199ddfd68/wjct-news-header-logo-405pxw.png");
    }

    [data-header-sticky] .Page-header-logo img {
        width: 150px;
        height: 40px;
        max-height: 40px;
        background-position: center;
        /*     Center the image */
        background-repeat: no-repeat;
        /* Do not repeat the image */
        background-size: contain;
        /* Resize the background image to cover the entire container */
    }

    /* Fixing the WJCT News logo */

    [data-toggle-header=hamburger-menu] .Page-header-hamburger-menu {
        z-index: 52;
    }

    .Page-header-top-bar {
        position: relative;
        z-index: 51;
        width: 100%;
        display: flex;
        height: 100%;
        align-items: flex-start;
    }

    .BrightspotPersistentPlayer {
        padding-right: 0 !important;
    }

}

/* Tablet Landscape (1024) breakpoint style */
@media only screen and (min-width: 1024px) {
    .BrightspotPersistentPlayer-drawerToggle {
        padding-right: 12px;
    }
}

/* Tablet Portrait (768) breakpoint style */
@media only screen and (min-width: 768px) {
    .BrightspotPersistentPlayer {
        padding-right: 30px;
    }

    /* Override the solid color background */
    .Page-header-persistent-player {
        background: transparent;
    }

    [data-header-sticky] .Page-header-persistent-player {
        height: 30px;
        margin-bottom: 1.8rem;
    }
}

/* Mobile Landscape (640) breakpoint style */
@media only screen and (max-width: 767px) {
    h1.ArticlePage-headline {
        font-size: 3rem;
    }

    .Page-header-donate-button.gtm_donate a.Link {
        color: transparent;
        margin-left: -90px;
    }

    .Page-header-persistent-player {
        background-color: var(--WJCT-tertiary);
    }

    .Page-header-donate-button.gtm_donate a.Link:after {
        color: white;
        content: "Donate";
    }

    .BrightspotPersistentPlayer-streamInfo {
        align-items: flex-start;
        padding-left: 0;
    }
    
    ps-brightspot-persistent-player.BrightspotPersistentPlayer {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Rearrange buttons and make hamburger menu bigger */

    .Page-header-logo {
        order: 1;
    }

    button.Page-header-menu-trigger,
    button.Page-header-hamburger-menu-close {
        order: 2;
        /* Give the hamburger a rounded rectangle buttom  */
        /* background-color:var(--primaryColor2);
        padding: 2rem;
        border-radius: 5px; */
    }

    .Page-header-top-bar-content {
        display: flex;
        justify-content: flex-start;
        flex: none;
    }

    .Page-header-top-bar {
        display: flex;
        justify-content: space-between;
    }

    ps-header.Page-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Fixing the mess that is the social buttons on mobile */
    .ArticlePage-contentInfo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ArticlePage-actions {
        display:flex;
        width: 100%;
        justify-content: flex-end;
    }
}

/* Mobile Portrait (360) breakpoint style */

/* End of Style sheet */


/* Not sure what these were supposed to do, but they don't seem to work now. */
/* Fixing the hamburger menu back the way it was */
.Page-header-hamburger-menu .Page-header-logo img {
    /*     width: auto; */
    /*     max-height: 40px; */
    /*     height: 40px; */
    /*         background-size: 150px, 40px; */
    /*     background-position: center; */
    /*     Center the image */
    /*     background-repeat: no-repeat; */
    /* Do not repeat the image */
    /*     background-size: contain; */
    /* Resize the background image to cover the entire container */

}

/* Homepage specific styles */
div#latestnewscast {
    text-align: center;
    line-height: 3;
}

.HtmlModule {
    margin-bottom: 0px;
}

/* Adjusting the FCC promo & Latest Stories section */
.Enhancement .PromoXSmall-title .Link,
.PromoXSmall-title .Link {
    text-decoration: none;
    color: var(--primaryTextColor);
    font-family: var(--secondaryHeadlineFont), Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
}

.ListF {
    padding: 0 20px;
}

/* Making the section headers all caps */
.ListTitles-header-title,
.ListE-header-title,
.ListF-header-title {
    text-transform: uppercase;
}

@media only screen and (min-width: 768px) {
    [class$=-column] .ListF {
        margin-right: 0px;
    }
}

/* What's Health Got to Do with It Sponsor Logos */
#whgtdwisponsors .ThreeColumnContainer-column {
    padding: 0 2rem;
    display: flex;
    align-items: flex-end;
}

#whgtdwisponsors .Enhancement {
    margin: 0;
}

/* Hiding the Section header name breadcrumbs from the top of the page */
.ArticlePage-breadcrumbs-wrapper {
    display: none;
}

/* Hiding the social buttons on the bottom of the radio episode and podcast episodes until Brightspot fixes them */
.RSEP-social, .PCEP-social {
    display: none;
}