/* Blanford Pupsite - MAISD - 3P Learning */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {

    --MAISD_Blue:           hsl(206.67deg 100% 26.47%); /* 8.91 - #004B87 */
    --MAISD_MedBlue:        hsl(204.73deg 77.08% 37.65%); /* 5.52 - #004B87 */
    --MAISD_Green:          hsl(88.13deg 100% 25.1%); /* 4.84 - #004B87 */
    --MAISD_LtOrange:       hsl(26.5deg 100% 68.04%); /* 1.95 - #004B87 */
    --MAISD_LtBlue:         hsl(205.71deg 30.43% 95.49%); /* 1.1 - #004B87 */
    --MAISD_XLtBlue:        hsl(216deg 33.33% 97.06%); /* 1.07 - #004B87 */

    --MAISD_Black:          #23272A; /* 15.05 */

    --DK_FilterDkBlue:      brightness(0) saturate(100%) invert(21%) sepia(97%) saturate(525%) hue-rotate(148deg) brightness(99%) contrast(106%);

    --Color_Primary:        var(--MAISD_Green);
    --Color_PrimaryDk:      color-mix(in oklab, var(--Color_Primary), #000 30%);
    --Color_PrimaryLt:      color-mix(in oklab, var(--Color_Primary), #fff 50%);
    --Color_TransPrimary:   color-mix(in oklab, var(--Color_Primary), transparent 15%);
    --Color_ComplPrimary:   var(--Color_White);

    --Color_Secondary:      var(--MAISD_Blue);
    --Color_Accent:         var(--Color_PrimaryLt);
    --Color_Text:           var(--MAISD_Black);
    --Color_Link:           var(--Color_Secondary);

    --Color_White:          #fff; /* 1.12 */

    --Color_BackgroundLt:   var(--MAISD_LtBlue);

    --Font_Base:            'Roboto', Arial, Helvetica, sans-serif;
    --Font_Heading:         'Roboto', Arial, Helvetica, sans-serif;

    --Site_ComponentMargin: 3rem;
    --Site_ComponentWidth:  calc(100% - (var(--Site_ComponentMargin) * 2));
    --Site_MainLogoWidth:   225px;
    --Site_BorderRadius:    15px;
    --Site_TextShadow:      none;
    --Site_BoxShadow:       2px 2px 5px rgba(0, 0, 0, .4);

    --Site_PupLogoWidth:    50%;
}

h1
{
    color: var(--Color_Primary);
}
p
{
    max-width: 65ch;
}

.social_media_list li a.twitter-x
{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    vertical-align: sub;
}
.social_media_list li a.twitter-x:before
{
    content: "";
    position: absolute;
    inset: 0;
    vertical-align: middle;
    background-image: url(/skins/maisd2021/img/x-twitter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 10px);
    filter: brightness(0) saturate(100%) invert(25%) sepia(38%) saturate(5212%) hue-rotate(189deg) brightness(91%) contrast(83%);
}
.site_script_foot .social_media_list li a.twitter-x:before
{
    filter: brightness(1.0) invert(100%);
}

/* Welcome */
.main_focus
{
}
.pup_welcome
{
}

/* 3P Learning Descirptions */
.component1 .component_liner
{
    width: 100%;
    background: var(--Color_PrimaryDk);
    padding: 0;
}
.component1 .fbcms_spotlights  
{
    padding: 0;
    margin: 0;
}
.component1 .fbcms_spotlights .fbcms_contentheader
{
    margin: 0;
    text-align: center;
}
.component1 .fbcms_spotlight_slide_liner 
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2px;
}
.component1 .fbcms_spotlights .fbcms_spotlight
{
    position: relative;
    margin: 0;
}
.component1 .fbcms_spotlights .fbcms_spotlight_liner
{
    padding: 0;
}
.component1 .fbcms_spotlights .fbcms_spotlight_image
{
    line-height: 0;
    margin: 0;
}
.component1 .fbcms_spotlights .fbcms_spotlight_image img 
{
    width: 100%;
    line-height: 0;
}
.component1 .fbcms_spotlights .fbcms_spotlight_text
{
    padding: 1rem;
    background: var(--Color_TransPrimary);
    color: #fff;
}
.component1 .fbcms_spotlights .desc_short
{
    color: #fff;
}
.component1 .fbcms_news_headlines .fbcms_article_summary
{
    font-size: .825em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    overflow: hidden;
    -webkit-box-orient: vertical;
    margin-bottom: .5em;
}
@media only screen and (min-width: 768px)
{
    .component1 .fbcms_spotlight_slide_liner
    {
        grid-gap: 0;
    }
    .component1 .fbcms_spotlights .fbcms_spotlight_text
    {
        position: absolute;
        bottom: 10%;
        width: 60%;
        box-shadow: var(--Site_BoxShadow);
    }
}



/* What is 3P? */
.component2
{
    background: var(--Color_White);
}
.component2 .fbcms_headline_list_content
{
    margin-top: 4rem;
}
.component2 .fbcms_article
{
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: 0 5rem;
    position: relative;
}
.component2 .fbcms_article:not(:last-child)
{
    margin-bottom: 0;
    padding-bottom: 4rem;
}
.component2 .fbcms_article:not(:last-child):before
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(80px + 2.5rem);
    height: 100%;
    border: solid 1px var(--Color_Accent);
}
.component2 .fbcms_article:after
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(81px +  2.5rem);
    transform: translateX(-50%);
    height: 1.5rem;
    width: 1.5rem;
    border: solid 2px var(--Color_Accent);
    background: var(--Color_White);
    border-radius: 50%;
}
.component2 .fbcms_article .fbcms_article_imageblock
{
    margin-top: -2em;
}

.component2 .fbcms_article .fbcms_media
{
    position: relative;
    z-index: 1;
    line-height: 0;
}
.component2 .fbcms_article .fbcms_media:after
{
    content: "";
    display: block;
    position: absolute;
    bottom: -30%;
    left: -30%;
    width: 120%;
    height: 120%;
    background: var(--Color_Accent);
    border-radius: 50%;
    opacity: .8;
    z-index: -1;
}
.component2 .fbcms_article:first-child .fbcms_media:after
{
    opacity: .2;
}
.component2 .fbcms_article:nth-child(2) .fbcms_media:after
{
    opacity: .4;
}
.component2 .fbcms_article:nth-child(3) .fbcms_media:after
{
    opacity: .6;
}
.component2 .fbcms_article:nth-child(4) .fbcms_media:after
{
    opacity: .8;
}
.component2 .fbcms_article .fbcms_media img 
{
    filter: drop-shadow(-1px 1px 2px rgba(0, 0, 0, .3)) var(--DK_FilterDkBlue);
}

.component2 .fbcms_article .fbcms_article_date
{
    font-size: .9em;
}
.component2 .fbcms_article .fbcms_article_summary
{
    font-size: .825em;
}
@media only screen and (min-width: 768px)
{
    .component2 .column.left_col 
    {
        width: calc(60% - 2rem);
    }
    .component2 .column.right_col
    {
        width: calc(40% - 2rem);
    }
    .component2 .left_col .column_inner
    {
        position: sticky;
        top: 2rem;
    }
}
@media only screen and (min-width: 994px)
{
    .component2 .column.left_col 
    {
        width: calc(60% - 4rem);
    }
    .component2 .column.right_col
    {
        width: calc(40% - 4rem);
    }
}


/* Videos */
.component3
{
    background: var(--Color_BackgroundLt);
    border-bottom: solid 5px var(--Color_PrimaryDk);
}
.component3 .component_liner,
.fbcms_editmode .component3 .fbcms_section
{
    --_gap: 1rem;
    gap: var(--_gap);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.component3  .component_liner .fbcms_content
{
    width: 100%;
}
@media only screen and (min-width: 768px)
{
    .component3 .component_liner
    {
        --_gap: 2rem;
    }
    .component3  .component_liner .fbcms_content
    {
/*        width: calc(50% - (var(--_gap) / 2));*/
        flex: 1 0 calc(50% - var(--_gap));
    }
}
@media only screen and (min-width: 994px)
{
    .component3 .component_liner
    {
        --_gap: 3rem;
    }
    .component3 .fbcms_content.firstone,
    .component3 .fbcms_content.lastone
    {
        padding: 0;
    }
}

/* Staff */
.component3 .fbcms_content.fbcms_staff_cards
{
    background: var(--Color_White);
    padding-bottom: 0;
}
.component3 .fbcms_staff_cards .fbcms_contentheader
{
    text-align: center;
    padding-top: 2rem;
}
.component3 .fbcms_staff_cards .fbcms_contentfooter
{
    text-align: center;
    margin: 0;
}
.component3 .fbcms_staff_cards .fbcms_contentbody
{
    margin: 0;
}
.component3 .fbcms_staff_cards > .fbcms_contentbody > .fbcms_staffentry 
{
    padding: 0;
    background: var(--Color_Primary);
    border-left: solid 4px var(--Color_White);
    border-right: solid 4px var(--Color_White);
}
.component3 .fbcms_staff_cards .fbcms_staffentry_liner
{
    padding: 0;
    background: var(--Color_Primary);
}
.component3 .fbcms_staff_cards .fbcms_contentbody .profile_photo
{
    margin: 0; 
    z-index: 1;
    display: block;
}
.component3 .fbcms_staff_cards .fbcms_staffentry_liner > *:where(:not(img, .fbcms_card_skiplinks)) 
{
    position: relative;
    z-index: 2;
    background: var(--Color_TransPrimary);
    color: #fff;
    padding: .1rem 1rem;
    text-align: center;
}
.component3 .fbcms_staff_cards .name 
{
    font: 400 1.8rem/1.3 var(--Font_Base);
    padding-top: 1rem;
}
.component3 .fbcms_staff_cards .position 
{
    font: 500 1.1rem/1.15 var(--Font_Base);
    padding-bottom: .25em;
}
.component3 .fbcms_staff_cards .fbcms_staffentry_liner a 
{
    color: #fff;
    font-weight: 400;
}
.component3 .fbcms_staff_cards .phone
{
    padding-bottom: .75em;
}
.component3 .fbcms_staff_cards .send_email 
{
    padding-bottom: 1rem;
    margin: 0;
    padding-bottom: 1em;
}
.component3 .fbcms_staff_cards .send_email a
{
    background: var(--Color_White);
    color: var(--Color_PrimaryDk);
    padding: .5em 1em;
    border-radius: 1000px;
    text-decoration: none;
}
@media only screen and (min-width: 768px)
{
    .component3 .fbcms_content.fbcms_staff_cards
    {
        margin-inline: calc(var(--Site_ComponentMargin) * -1);
        padding-inline: var(--Site_ComponentMargin);
    }
    .component3 .fbcms_staff_cards > .fbcms_contentbody > .fbcms_staffentry 
    {
        width: 33.333%;
    }
}
@media only screen and (min-width: 994px)
{
    .component3 .fbcms_staff_cards .fbcms_staffentry_liner
    {
        aspect-ratio: 400 / 437;
        border: none;
        background: var(--Color_White);
        position: relative;
        display: grid;
        grid-template-rows: 1fr auto;
    }
    /*  keeps other text at bottom of grid  */ 
    .component3 .fbcms_staff_cards .fbcms_staffentry_liner:before 
    {
        content: "";
        display: block;
    }
    .component3 .fbcms_staff_cards .fbcms_contentbody .profile_photo
    {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    .component3 .fbcms_staff_cards .fbcms_staffentry_liner > *:where(:not(img, .fbcms_card_skiplinks)) 
    {
        width: 75%;
        max-width: 350px;
    }
}


/* FAQs */
.component4
{
    background: var(--Color_White);
}
@media only screen and (min-width: 768px)
{
    .component4 .left_col .column_inner
    {
        position: sticky;
        top: 2rem;
    }
}

/* Networks Supported */
.component5
{
    background: var(--Color_BackgroundLt);
    position: relative;
/*    color: #fff;*/
}
/*.component5 a,
.component5 h2,
.component5 h3,
.component5 h4,
.component5 h5,
.component5 h6,
.component5 .content_intro
{
    color: #fff;
}*/

.component5:after 
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
    opacity: .3;
    background-image: url(/downloads/3p-pupsite-image-assets/networks_supported_background.jpeg);
}
.component5 .fbcms_content,
.component5 .fbcms_section
{
    position: relative;
    z-index: 2;
}

.component5 h2.data-driven-title
{
    text-align: center;
    margin-bottom: 2em;
}
.component5 .fbcms_spotlights
{
    margin: 0;
}
.component5 .fbcms_spotlights .horz_layout_0 .fbcms_spotlight_slide_liner
{
    max-width:  1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 1rem 3rem;
}
.component5 a.fbcms_spotlight_liner:hover,
.component5 a.fbcms_spotlight_liner:focus
{
    background: transparent;
}
.component5 .fbcms_spotlights .fbcms_spotlight_image 
{
    filter: var(--Color_TransPrimary);
    transform: scale(.9);
    transition: all .3s;
    text-align: center;
}
.component5 a.fbcms_spotlight_liner:hover .fbcms_spotlight_image,
.component5 a.fbcms_spotlight_liner:focus .fbcms_spotlight_image 
{
    transform: scale(1);
}
.component5 a.fbcms_spotlight_liner .desc_short
{
    color: #fff;
}
.component5 a.fbcms_spotlight_liner:hover .desc_short,
.component5 a.fbcms_spotlight_liner:focus .desc_short 
{
    text-decoration: underline;
}