/* Styles for computational literacy page.

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}


/*sections*/
.page-width {
    margin: 0 auto;
    max-width: 1125px;
    padding: 3.125rem var(--wrapper-h-pad);
    width: 100%;
}


/*altered sections*/
#intro.page-width,
#included.page-width,
#addons.page-width {
    padding-bottom: 0.5rem;
}


/*content grids*/
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
}
.three-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    margin: 1rem 0;
}


/*text*/
main {
    color: #404040;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

main h1, main h2, main h3, main h4 {
    font-weight: 600;
}
main h1 { font-size: 3.4375rem; }
main h1 .subtitle {
    display: block;
    font-size: 2.25rem;
    text-transform: uppercase;
}
main h2 { 
    border-top: 1px solid #ddd;
    color: #db4d3e; 
    font-size: 2.5rem; 
    padding-top: 3.125rem;
    padding-bottom: 2rem;
}
main h3 {
    border-top: 1px solid #ddd;
    color: #db4d3e; 
    font-size: 1.75rem; 
    padding-top: 3.125rem;
}
main h4 { 
    font-size: 1.125rem; 
    padding-bottom: 0.25rem;
}
main p { 
    line-height: 1.5;
    padding: 0 0 1.5rem; 
}

main ul { padding-bottom: 1rem; }
main ul li {
    padding: 0 0  0.5rem 0.75rem;
    position: relative;
}
main ul li:before {
    color: #888;
    content: '\25AA';
    margin-left: -0.75rem;
    position: absolute;
}

span.price { 
    font-size: 1rem; 
    line-height: 1; 
}
span.price span.dollarsign {
    display: inline-block;
    font-size: 1.25rem;
    margin-top: .25rem;
    vertical-align: top;
}
span.price span {
    font-size: 2rem;
}


/*altered text*/
main p:last-child,
main li:last-child { padding-bottom: 0; }

#intro h2,
#pricing h3,
#faq h3 {
    border: 0;
    padding-top: 0;
}

#addons h3, 
#faq h3 {
    padding-bottom: 1.25rem;
}


/*links*/
main a {
    color: #404040;
    font-weight: 600;
}
main a:hover {
    color: #db4d3e;
}
main a.button {
    border-radius: 0.25rem; 
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 0.75rem 1rem;
}
main a.button.white { background: #fff; }
main a.button.base-package { background: #16a4ab; }
main a.button.pro-package { background: #0067a4; }



/* ==========================================================================
   hero
   ========================================================================== */
#hero { 
    background: #0d546f; 
    color: #fff;
}
#hero .page-width {
    background: url('/computational-literacy-package/img/hero.png') top no-repeat;
    background-position-x: calc(100% + 97px);
    background-size: 652px;
    display: grid;
    align-items: center;
    height: 300px;
}



/* ==========================================================================
   intro
   ========================================================================== */
#intro p {
    font-size: 1.625rem;
}
#intro p:first-of-type {
    color: #0067A4;
    font-size: 1.875rem;
    font-weight: 300;
    padding-bottom: 2rem;
}



/* ==========================================================================
   what's included
   ========================================================================== */
#included .package {
    margin-bottom: 5px; 
}
#included .package h3 {
    align-items: center;
    color: #fff;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr auto auto;
    line-height: 1;
    padding: 1rem;
}
#included .package h3 div {
    justify-self: end;
    background: none;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
#included .package h3 .subtitle {
    font-size: 1rem;
    font-weight: 400;
}

#included .package-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    margin: 5px 0;
}
#included .package-perks > div {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
}
#included .perk {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 1rem;
    padding: 1.5rem;
}

#included .base-package h3 { background: #16a4ab; }
#included .base-package h4 { color: #16a4ab; }
#included .base-package .perk { background: #e7f5f6; }
#included .base-package a.button { color: #16a4ab !important; }
#included .base-package a.button:hover { background: #107f85; color: #fff !important; }

#included .pro-package { margin-top: 2.5rem; }
#included .pro-package h3 { background: #0067a4; }
#included .pro-package h4 { color: #0067a4; }
#included .pro-package .perk { background: #ebf2f8; }
#included .pro-package a.button { color: #0067a4 !important; }
#included .pro-package a.button:hover { background: #004d7b; color: #fff !important; }



/* ==========================================================================
   add-ons
   ========================================================================== */



/* ==========================================================================
   recommended for
   ========================================================================== */
#recommended .three-col-grid > div {
    background: #f4f4f4;
    padding: 1.875rem;
}



/* ==========================================================================
   pricing
   ========================================================================== */
#pricing {
    background: #0d546f;
}
#pricing h3 { 
    color: #fff; 
}
#pricing .three-col-grid > div {
    background: #fff;
    padding: 1.875rem;
}
#pricing .three-col-grid h4 { 
    font-size: 1.5625rem; 
    padding-bottom: 0.5rem;
}
#pricing .three-col-grid p { font-size: 0.875rem; }
#pricing .three-col-grid hr {
    margin: 0 0 1.5rem;
}
#pricing .three-col-grid .button { 
    font-size: 1.125rem;
}
#pricing .three-col-grid + p,
#pricing p a { color: #fff; }

#pricing .two-col-grid {
    align-items: center;
    grid-gap: 1rem;
    grid-template-columns: auto 1fr;
}

#pricing .base-package h4 { color: #16a4ab; }
#pricing .base-package .button { background: #16a4ab; }
#pricing .base-package .button:hover { background: #107f85; }

#pricing .pro-package h4 { color: #0067a4; }
#pricing .pro-package .button { background: #0067a4; }
#pricing .pro-package .button:hover { background: #004d7b; }

#pricing .org-package {
    align-items: center;
    display: grid;
    grid-column-end: span 3;
    grid-template-columns: 1fr auto;
    padding: 1rem 1rem 1rem 1.875rem !important;
}
#pricing .org-package h4 { color: #db4d3e; }
#pricing .org-package div { justify-self: end; }
#pricing .org-package .button { background: #db4d3e; }
#pricing .org-package .button:hover { background: #b33f33; }
span.price + em {
    color: #777;
    display: block;
    margin-top: -0.125rem;
}



/* ==========================================================================
   faq
   ========================================================================== */
#faq { padding-bottom: 4rem; }
#faq ul { padding-bottom: 1.5rem; }
#faq ul li:not(:last-child) { padding-bottom: 0.1875rem; }



/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 900px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 2rem;
    }


    /*text*/
    main h1 { font-size: 3rem; }
    main h1 .subtitle { font-size: 2rem; }


    /*hero*/
    #hero .page-width {
        background-size: 489px;
        background-position-x: calc(100% + 73px);
        background-position-y: bottom;
    }


    /*what's included*/
    #included .package-perks {
        grid-template-columns: 1fr;
    }


    /*grids*/
    #addons .two-col-grid,
    #recommended .three-col-grid,
    #faq .two-col-grid {
        grid-template-columns: 1fr;
        grid-gap: 1.5rem 0;
    }


    /*pricing*/
    #pricing .three-col-grid {
        grid-template-columns: 1fr;
    }
    #pricing .org-package {
        grid-column-end: span 1;
    }
}


@media (max-width: 600px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 1rem;
    }


    /*text*/
    main h1 { font-size: 2rem; }
    main h1 .subtitle { font-size: 1.625rem; }


    /*hero*/
    #hero .page-width {
        align-items: start;
        background: url('/computational-literacy-package/img/hero-m.png') no-repeat;
        background-size: 325px;
        background-position: bottom center;
        height: auto;
        text-align: center;
        padding-bottom: 12.5rem;
    }


    /*included*/
    #included .package h3 {
        grid-gap: 0.5rem;
        grid-template-columns: auto 1fr auto;
    }
    #included .package h3 div:first-of-type {
        border-left: 1px solid #fff;
        justify-self: start;
        padding-left: 0.5rem;
    }
    #included .package h3 .subtitle.show__600 {
        justify-self: start; 
        grid-column-end: span 3;
    }
}