/**
 * @file
 * Subtheme specific CSS.
 */

/*
    Custom CSS for Drupal 10 verison of Jazz site.
    Feb-April 2024
    Patrick Wheeler


    KJZZ Styleguide Blue = 279dd0
        Using 4391c9 to match logo artwork
*/

@import url("https://use.typekit.net/eas2pvu.css");
/* new Calibri font from Adobe */

:root {
    --jazz-blue: #4391c9;
    --background-white: #fdfdff;
    --test-indicator: #abc;
    --jazz-light-blue: #D4E8FC;
}
/* 
    i think I'd like to change the background to #f3f8fc
    it maintains the same hue as #4391c9 and is a little softer
*/


body {
/*    background-color: #ffffff;*/
/*    color: #222224;*/
/*    font-family: "Trebuchet MS",Helvetica,sans-serif;*/
    font-family: "calibri",Helvetica,sans-serif;
    /* new Calibri font from Adobe */
    font-weight: 300;
    font-style: normal;
}
/*
    might experiment with changing font to Calibri
*/

.page {
    min-height: 100%;
    background-color: var(--background-white);
    /* main page background white */
}




/* NAVBAR-TOP REGION (First bar) ************************************/

nav#navbar-top {
    padding-top: 70px;
    border-bottom: 4px solid var(--jazz-blue);
}

nav#navbar-top > .row {
    flex-direction: column;
    flex-wrap: wrap;
/*    border: 1px dashed white;*/
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    margin: auto;
/*    
    TODO
        Make this responsive for mobile.
    
*/
}
/*
div#navbar-top .block {
    padding: 0;
}
*/

/*  
    "order" is mobile first. 
    wide screen selectors at the bottom of css file 
*/
/* 1 */
div#block-jazz10custom-barrio-jazzhdlogo {
    flex-shrink: 1;
    width: unset;
    flex-grow: 1;
    order: 1;
}
/* 2 */
div#block-jazz10custom-barrio-jazzphxcomposerplayingnowwidgetadd {
/*    width: 300px;*/
/*    flex-basis: 630px;*/
    order: 3;
    flex-grow: 1;
}
div#composer_container {
    display: flex;
    flex-flow: row;
    /* border: 1px solid red; */
/*    width: 600px;*/
    height: 160px;
    border-radius: 10px;
    background-color: white;
/*    padding: 10px;*/
}
iframe#playing_now_frame_1{
/*    clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%);*/
/*  clip was originally 37 to lose line, 
    but was cutting off JazzWorks when there was no song info
    */
}
iframe#playing_now_frame_2{
    display: none;
    position: relative; 
    bottom: 57px; 
    clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%);
}

/* 3 */
div#block-jazz10custom-barrio-listennowblock {
    width: 220px;
    padding: 0;
    margin: 0 12px;
    order: 2;
}
div#block-jazz10custom-barrio-listenonblock {
    /* unused concept - GIF in the navbar-top */
/*    width: 200px;*/
/*    padding-left: 0;*/
    
}
div#block-jazz10custom-barrio-listenonblock img {
/*    height: 100px;*/
}


div#now_playing_title {
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
}



nav#block-jazz10custom-barrio-main-menu, 
div#block-jazz10custom-barrio-donatebutton {
/*    border: 1px solid red;*/
    flex-shrink: 1;
    width: auto;
}
nav#block-jazz10custom-barrio-main-menu .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    text-transform: uppercase;
}
nav#block-jazz10custom-barrio-main-menu li {
    padding: 0 10px;
    text-wrap: nowrap;
    font-size: 19px;
    font-weight: bold;
}

div#block-jazz10custom-barrio-jazzhdlogo img {
    height: 110px;
}

/* LISTEN NOW BUTTON */
div#listenOuterContainer {
    border: 4px solid #FB9A33;
    border-radius: 20px;
    min-width: 200px;
    height: 85px;
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
    background-color: white;
    color: var(--jazz-blue);
    text-align: center;
    display: flex;
    flex-direction: column;
}
div#listen_button_div {
/*    background-color: var(--jazz-blue);*/
/*    text-align: center;*/
/*    border-radius: 30px;*/
    padding: 5px 5px 5px 14px;
    font-size: 21px;
    font-weight: 600;
/*    color: white;*/
/*    text-transform: uppercase;*/
    line-height: 18px;
/*    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));*/
/*    min-width: 200px;*/
/*    height: 80px;*/
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
}
img#playicon {
    width: 36px;
/*    float: right;*/
/*    vertical-align: -5px;*/
/*    padding-top: 10px;*/
/*    border: 1px solid white;*/
/*    border-radius: 20px;*/
}
div#listenLowerContainer {
    border-top: 4px solid #FB9A33;
    font-size: 17px;
    font-weight: bold;
}
div#listenLowerContainer a {
    text-decoration: none;
    color: var(--jazz-blue);
}




/* NAVBAR REGION (Second bar) ************************************/
nav#navbar-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
/*    background-color: #e3e9ed;*/
    background-color: var(--jazz-blue);
/*    border-bottom: 8px solid var(--jazz-blue);*/
    margin-bottom: 24px;
    filter: drop-shadow(0px 7px 8px rgba(0, 0, 0, 0.4));
    align-items: center;
/*    justify-content: space-between;*/
    padding: 0 5vw;
    z-index: 100;
/*    flex-wrap: wrap;*/
    /* z-index value fixed an issue where drop-down menu was going behind main content   */
}
nav#navbar-main > div {
    margin: 8px 12px;
}
button.navbar-toggler {
    order: 1;
    background-color: var(--jazz-light-blue);
}
div#block-jazz10custom-barrio-donatebutton {
    order: 2;
}
div#block-jazz10custom-barrio-requestbutton {
    order: 5;
    display: none;
}
.nav.navbar-nav > li.nav-item {
    /* only for hamburger menu */
    padding-left: 22px;
}

div#donate_button_div {
/*    background-color: #920b0f;*/
    background-color: #cb1313;
    width: 220px;
/*    was 165 */
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
    border-radius: 12px;
/*    padding: 8px;*/
    font-size: 24px;
    transition: all 0.1s;
    color: white;
    text-align: center;
    margin: 0 0;
}
nav#navbar-main > div {
/*    padding: 0 12px;*/
}

/* MENU ******/
div#CollapsingNavbar {
    margin: 0 10px;
    order: 4;
}
nav#block-jazz10custom-barrio-mainnavigation li {
/*    padding: 0 10px;*/
    text-wrap: nowrap;
    font-size: 16px;
    font-weight: 400;
}
.dropdown-menu .dropdown-item a {
    text-decoration: none;
}

div#request_button_container_div a,
div#block-jazz10custom-barrio-donatebutton a,
div#block-headericonsandplaybutton a {
    text-decoration: none;
}
div#request_button {
    background-color: white;
    padding: 6px 0;
    color: var(--jazz-blue);
    text-transform: uppercase;
    text-align: center;
    border-radius: 12px;
    font-weight: bold;
    filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
    width: 100%;
    max-width: 300px;
    min-width: 220px;
    opacity: 0.9;
    transition: all 0.1s;
}







/* HOME PAGE - ONE COL *************************************/
/* Tease in the first one-col section of home page */
/* TODO, two sets of selectors to enable preview */

div.layout.layout--onecol {
    margin-bottom: 30px;
}
.layout__region {
    /* outside container */
/*    border: 1px dotted green;*/
    background-color: black;
    /* fills gap at bottom of embed video */
}
.home-tease-block .view-content.row {
    max-width: 100%;
    margin-left: 0;
}

/* TEASER - shows on homepage and in teaser content preview */
article.node.node--type-tease {
    display: flex;
    margin-bottom: 30px;
}
div.home-tease-block-row.views-row,
article.node.node--type-tease div.node__content {
    background-color: var(--jazz-light-blue);
/*    max-width: 780px;*/
/*    max-height: 250px;*/
/*    height: 250px;*/
/*    margin-top: 8px;*/
    flex-grow: 1;
    padding: 0;
/*    margin-left: 12px;*/
    position: relative;
}

/* article.node.node--type-tease {
    background-color: var(--jazz-light-blue);
    max-height: 250px;
    height: 250px;
    margin-top: 8px;
    padding: 0;
    position: relative;
}
*/

/* Teaser Banner */
div.views-field-field-banner,
article.node.node--type-tease .field.field--name-field-banner {
    min-height: 40px;
    background-color: var(--jazz-blue);
    font-size: 21px;
    font-weight: 500;
    padding: 6px 10px 4px;
    color: white;
    line-height: 24px;
}
/* Teaser Image */
.home-tease-block-row img,
article.node.node--type-tease img {
    float: none;
    width: 100%;
    height: unset;
    border-left: 1px solid var(--jazz-light-blue);
    border-right: 1px solid var(--jazz-light-blue);
    margin-bottom: 0;
}
/* Teaser Headline */
div.home-tease-block-row > div.views-field-field-headline, 
article.node.node--type-tease div.field--name-field-headline {
    padding: 6px 10px 6px 10px;
/*    padding-left: 10px;*/
/*    padding-right: 10px;*/
    font-weight: bold;
    line-height: 20px
}
/* Teaser body */
.home-tease-block-row .views-field.views-field-body,
article.node.node--type-tease div.field--name-body {
    padding-left: 10px; /* pads tease text on small screens */
    padding-right: 10px;
    margin-bottom: 28px;
    line-height: normal;
}
article.node.node--type-tease .clearfix::after {
    /* hides a thing interfering with vertical size on tease article page   */
    display: none;
}
/* Teaser Date Line */
div.views-field-field-date-and-time,
article.node.node--type-tease div.field--name-field-date-and-time {
    font-weight: bold;
    position: absolute;
    right: 12px;
    bottom: 2px;
}

/* Headline */






/* HERE *****************/


section.region-featured-top {
    margin-bottom: 10px;
    flex-wrap: nowrap;
    column-gap: 20px;
/*    
    TODO
    This no wrap should only be on large screens.
    On mobile, it needs to wrap.\
*/
}
div#block-jazz10custom-barrio-views-block-tease-block-block-1 {
    flex-grow: 1;
    flex-shrink: 2;
}
.row.region-featured-top div {
    width: auto;
}


/*
    TODO

        should move common row background colors and heights to a shared rule

*/


/* OUTSIDE BOX */


/* HOME PAGE - TWO COL *************************/
div.layout--twocol-section--50-50 {
    column-gap: 30px;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}

div.layout--twocol-section--50-50 div.views-field {
    /* the MORE */
    text-transform: uppercase;
}
div.layout--twocol-section--50-50 div.views-field-view-node {
    /* title bar on video and interview blocks */
/*    background-color: #e6e6e6;*/
/*    background-color: var(--jazz-blue);*/
/*    padding: 3px 20px;*/
}
/* HEADERS = WHITE ON DARK BLUE*/
div.layout__region div.views-field-view-node,
h2.block-title {
    background-color: var(--jazz-blue);
    text-transform: uppercase;
/*    padding: 6px 20px;*/
    margin-bottom: 0;
}
div.layout__region div.views-field-view-node {
    padding: 3px 20px;
}
h2.block-title {
    padding: 6px 20px;
}
div.views-field-view-node a, 
div.views-field-nothing a,
h2.pane-title a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
}
div.layout--twocol-section--50-50 div.views-field-nothing {
    /* the MORE box */
    background-color: var(--jazz-light-blue);
    padding: 3px 20px;
    float: right;
}
div.views-field-nothing a {
    color: var(--jazz-blue);
}
/* MORE = LIGHT BLUE */



div.views-field-view-node a:hover,
div.views-field-view-node a:focus,
div.views-field-nothing a:hover,
div.views-field-nothing a:focus,
h2.pane-title a:hover,
h2.pane-title a:focus {
    text-decoration: underline;
}
iframe.media-oembed-content {
    /* video box */
    max-width: 100%;
    width: 100%;
    height: 50vw;
}
div.layout--twocol-section--50-50 div.views-field-field-teaser-image img {
    /* review tease image */
    min-width: 100%;
    object-fit: cover;
}




/* EVENTS BLOCKS */
#block-jazz10custom-barrio-content .layout__region.layout__region--second {
    background-color: #e3e9ff;
    /* to cover the gap at the bottom */
/* NOTE - selector also indicates map block   */
}



/* HOME PAGE - THREE COL */
div.layout--threecol-section--33-34-33 {
    column-gap: 20px;
    flex-wrap: nowrap;
    margin-bottom: 20px;
}
div.layout--threecol-section--33-34-33 > div.layout__region {
/*    border: 1px solid red;*/
}
div.layout--threecol-section--33-34-33 h2.pane-title.block-title {
    float: none;
    text-transform: uppercase;
    background-color: #e6e6e6;
    padding: 3px 20px;
    margin-bottom: 0;
}
.pane-title {
    font-size: 1em;    
}
div.layout__region--first img {
    object-fit: cover;
    min-height: 318px;
    max-width: 100%;
}
/* PROMO BOX */
ol.flex-control-nav.flex-control-paging, .flex-direction-nav {
    /* hides the flexslider controls */
    display: none;
}
.flexslider {
    margin: 0;
    border: 0;
}


/* MAP BLOCK **************************************************/
div.i4ewOd-pzNkMb-haAclf {
    display: none;
}



/* SIDEBAR SECOND **************************************************/
@media (min-width: 768px) {
    .sidebar_second {
        flex: 0 0 auto;
        width: 300px;
        padding: 0;
        margin-top: 10px;
        margin-left: 18px;
    }
}
.sidebar_second .block {
    border: 1px solid #ddd;
    padding: 0;
    margin: 0 0 30px 0;
}
.sidebar .block {
    border: none;
}
.sidebar div {
/*    max-width: 300px;*/
}



/* CONTENT ***********************************************************/
.block-page-title-block h1.title {
    background: linear-gradient(125deg, var(--jazz-blue), transparent);
    padding: 3px 12px;
    border-radius: 10px;
    font-size: 1.8rem;
    margin-left: -10px;
    margin-top: 10px;
    color: white;
    text-shadow: 0px 0px 4px var(--jazz-blue);
}
article img {
/* added this line 5/14 to deal with imgs in articles that were too big   */
    max-width: 100%;
    height: unset;
}



.view-videos .view-content.row,
.view-interviews .view-content.row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
div.view-videos:not(.view-display-id-block_1) .videos-view-row.views-row {
    border: 1px solid var(--jazz-light-blue);
    border-radius: 10px;
    padding: 8px;
    flex-basis: 380px;
    flex-grow: 1;
}
.view-interviews .interviews-view-row.views-row {
    border: 1px solid var(--jazz-light-blue);
    border-radius: 10px;
    padding: 8px;
    flex-basis: 380px;
    flex-grow: 1;
    display: flex;
}
.interviews-view-row .views-field.views-field-field-teaser-image {
    max-width: 50%;
    min-width: 50%;
}
.views-field-field-teaser-image img {
    border-radius: 5px;
    background-color: black;
    aspect-ratio: 1.3 / 1;
    object-fit: cover;
    max-height: 284px;
    width: 90%;
    height: auto;
}


.view-videos .views-field.views-field-title,
.view-interviews .views-field.views-field-title{
    display: block;
    max-width: 360px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.view-videos .views-field-title a,
.view-interviews .views-field-title a{
    text-decoration: none;
    font-size: 18px;
    color: black;
}
.view-videos .views-field-title a:hover,
.view-videos .views-field-title a:focus,
.view-interviews .views-field-title a:hover,
.view-interviews .views-field-title a:focus {
    text-decoration: underline;
}

/* webforms ***********************************************************/
form.webform-submission-form button#edit-actions-submit,
form.webform-submission-form button#edit-submit {
    color: white;
    background-color: var(--jazz-blue);
}
form.webform-submission-form button#edit-actions-submit:hover,
form.webform-submission-form button#edit-actions-submit:focus,
form.webform-submission-form button#edit-submit:hover,
form.webform-submission-form button#edit-submit:focus {
    background-color: hsl(205 55% 33%);
}

/* FOOTER ***********************************************************/
footer.site-footer {
    background-color: var(--jazz-blue);
    padding-top: 0;
}
div.site-footer__bottom {
    border-top: none;
}
div#block-jazz10custom-barrio-pagefooter {
    text-align: center;
}
div#footerdiv a {
    color: #ffe7a1;
    text-decoration: none;
}
div#footerdiv a:hover, div#footerdiv a:focus {
    text-decoration: underline;
}

/*div#block-jazz10custom-barrio-search-form-wide div#edit-actions*/

div#block-jazz10custom-barrio-search-form-wide button.form-submit {
    display: none;
    /* hides the submit button on search field */
}
input#edit-keys, input#edit-keys--2 {
    border: 1px ridge hsl(198deg 68% 48% / 50%);
    background: url("/themes/custom/jazz10custom_barrio/spyglass.gif") no-repeat scroll 97% 50% #FFFFFF;
    border-radius: 18px;
}
footer.site-footer div.container-inline,
footer.site-footer div.form-type-search {
    width: 100%;
}



/*
    TODO
        992 is the breakpoint for hamburger
        but at 1220, the navbar menu needs to wrap or something
*/


@media screen and (min-width: 48em) {
/* 
    this appears to apply to homepage as well as articles,
    but these settings are intended only for homepage
    (maybe the views page)
*/
    iframe.media-oembed-content {
        height: 26vw;
        max-height: 310px;
    }
    
}

/* videos on article pages, but not views or homepage */
article.node--type-article iframe.media-oembed-content {
    height: unset;
    max-height: unset;
    aspect-ratio: 16 / 9;
}




@media screen and (max-width: 1199px) {
    div.layout--twocol-section--50-50 {
        flex-wrap: wrap;
        row-gap: 30px;
    }
    div.layout--twocol-section--50-50 > div.layout__region {
        flex: 1 1 100% !important;
    }
    iframe.media-oembed-content { 
/*        height: 360px;*/
    }
}








/* >500 ***************************************************/

@media screen and (min-width: 500px) {
    .home-tease-block-row img,
    article.node.node--type-tease img {
        float: left;
        max-width: 50%;
        padding-right: 10px;
        border-top: none;
        border-bottom: 1px solid var(--jazz-light-blue);
    }
}

@media screen and (min-width: 543px) {
    /* switch navbar-top from column to rows   */
    nav#navbar-top > .row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}



/* >560 ***************************************************/

@media screen and (min-width: 560px) {
    div.field--type-image {
        float: none !important;
/*        margin: 0;*/
    }
    article.node.node--type-tease div.field--type-image {
        margin: unset;
    }
}




@media screen and (min-width: 670px) {
    /* change composer to wide format   */
    div#composer_container  {
        height: 80px;
    }
    iframe#playing_now_frame_1 {
        clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%);
    }
    iframe#playing_now_frame_2 {
        display: block;
    }
}



/* >992 ***************************************************/

@media screen and (min-width: 992px) {
    /* the hamburger mobile menu breakpoint */
    nav#navbar-top {
        padding-top: 10px;
        border-bottom: none;
        margin-top: 0;
    }
    nav#navbar-main {
        position: relative;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
        justify-content: center !important;
    }
    div#CollapsingNavbar > section.full-width {
        width: auto;
        position: unset;
        margin: 0;
    }
    nav#block-jazz10custom-barrio-mainnavigation li {
        padding: 0 6px;
    }
    div.home-tease-block-row img,
    article.node.node--type-tease img {
        max-width: 320px;
        margin-bottom: 0;
    }
}



/* > ***************************************************/

@media screen and (min-width: 1210px) {
    /* wrapping navbar-top back into one row   */
    nav#navbar-top > .row {
        align-items: flex-end;
    }
    div#block-jazz10custom-barrio-jazzhdlogo {
        flex-grow: 0;
    }
    div#block-jazz10custom-barrio-jazzphxcomposerplayingnowwidgetadd {
        width: 600px;
        order: 2;
        flex-grow: 0;
    }
    div#block-jazz10custom-barrio-listennowblock {
        order: 3;
    }
    div#composer_container {
        max-width: 600px;
        min-width: 600px;
    }
}
@media screen and (min-width: 1220px) {
    nav#navbar-top {
        flex-wrap: nowrap;
    }
}
@media screen and (min-width: 1310px) {
    div#block-jazz10custom-barrio-requestbutton {
        display: block;
    }
}


/* >1400 ***************************************************/

@media screen and (min-width: 1400px) {
    nav#block-jazz10custom-barrio-mainnavigation li {
        font-size: 18px;
    }
    div.home-tease-block-row.views-row,
    article.node.node--type-tease div.node__content {
        max-height: 250px;
        height: 250px;
    }
    div.home-tease-block-row img,
    article.node.node--type-tease img {
        height: 210px;
        width: fit-content;
/*        max-width: 320px;*/
/*        object-fit: cover;*/
        object-fit: contain;
    }
}
/*
@media screen and (min-width: 1400px) {
    article.node.node--type-tease {
        max-height: 250px;
    }
    article.node.node--type-tease img {
        height: 210px;
        max-width: 320px;
        object-fit: cover;
    }
}
*/




/* >2000 ***************************************************/

@media screen and (min-width: 2000px) {
    .home-tease-block-row.views-row {
        max-height: 250px;
        height: 250px;
    }
    .home-tease-block-row img,
    article.node--type-tease img {
        float: none;
        width: 100%;
/*        min-width: unset;*/
/*        max-width: unset;*/
/*        height: unset;*/
/*        min-width: unset;*/
    /*    max-width: 370px;*/
/*        object-fit: cover;*/
/*        float: left;*/
    /*    padding-right: 10px;*/
/*        padding: 0 10px 0 0;*/
    /*    margin-left: 12px;*/
        border: 1px solid var(--jazz-light-blue);
/*        border-left: 1px solid var(--jazz-light-blue);*/
/*        border-bottom: 1px solid var(--jazz-light-blue);*/
    }
}