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

/*
Custom theme for Drupal 10 verison of SPOT127 site.
April 2023 - Sept 2025
Patrick Wheeler

*/

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
}
h2 {
    font-weight: bolder;
    padding-top: 2rem;
}
h3 {
    font-weight: bold
}

/* --------- */
/* header#header is the region above body, containing leaderboard and navbar */
header img.img-fluid.d-inline-block.align-top {
    /*    height of the logo in the website header */
    height: 100px;
    max-width: none;
}

/* ------------------------ NAVBAR-TOP --------------------------*/
/* div#navbar-top is the leaderboard for the tax credit banner */
#navbar-top {
    background-color: rgb(255, 181, 48);
    background-image: url(/sites/default/files/SPOT_yellowDots_300x300.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding-top: 0;
    padding-bottom: 0;
}
#navbar-top .region-top-header {
    flex-grow: 1;
}
/*
#navbar-top a {
text-decoration: none;
}
*/


.mean-container .mean-bar{
    margin-bottom: 0px;
}
div#tax-header{
    /*background-color: #FFb400;
    background-image: url("/sites/default/files/SPOT_yellowDots_300x300.png")  ; */
    background-repeat: no-repeat;
    background-size: auto;
    text-align: center;
    color: #115378;
    /*letter-spacing: 3px;*/
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 4px;
}

#block-block-20 .block-inner, #block-block-20 {
    margin:  0;
}
@media only screen and (max-width: 500px) {
    div#tax-header{
        font-size: 1em; 
        margin: 0;  }
}




/* ------------------------ NAVBAR-MAIN -------------------------*/
/* div#navbar-main contains the logo and navigation menu */
ul.dropdown-menu a {
    text-decoration: none;
}
#navbar-top a:hover, #main-content a:hover {
    text-decoration: underline;
}
/*
nav.navbar-main {
max-width: 1320px;
margin: auto;
}
*/
div#navbar-main {
    /*
    should reverse flex order
    and center menu and logo

    TODO - how to get wide mobile menu button like Jazz
    */
}
div#navbar-main a.navbar-brand {
    margin: 0 15px;
}
@media screen and (min-width: 40em) {
    div#navbar-main {
        /*
        after mobile...

        */
        max-width: 1320px;
        margin: auto;
    }
    div#navbar-main a.navbar-brand {
        margin: 0;
    }
}
@media screen and (max-width: 1340px) {
    div#navbar-main {
        margin: 0 10px;
        /* below 1340 the navbar logo and donate button were hitting edges of screen */
    }
}











/* NAVBAR-MAIN menu */
.navbar-nav {
    justify-content: flex-end;
}
.navbar-nav li.nav-item {
    font-size: 0.9em;
    color: #535353;
    /*    font-weight: bold;*/
    padding: 0 2px;
    text-transform: uppercase;
}
ul.navbar-nav li.nav-item:last-child {
    background: #c00;
    border-radius: 11px;
    text-align: center;
}
ul.navbar-nav li.nav-item:last-child a {
    color: white;
    font-weight: bold;
}


/* HIGHLIGHTED is the black bar at the top of the homepage body */
div.highlighted {
    background-color: #000;
    color: #fff;
    /* text color only needed while building */
}

/* The page title, below the Highlighted section of the homepage */
div#block-spottheme-page-title h1 {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}


.field--name-body a:link, .field--name-body a:visited {
    text-decoration: none;
    color: #125c87;
}
.field--name-body a:hover, .field--name-body a:focus {
    text-decoration: underline;
    color: #125c87;
}
article.node--type-page a {
    /* 
    added to satisfy ADA March 2026 
    making links in article sections bold 
    but not on landing pages ie homepage
    */
    font-weight: bold;
}

.views-field-field-youtube-video iframe.media-oembed-content {
    height: 315px;
    width: 560px;
}

ul#block-spot-custom-subtheme-main-menu button {
    /* undoing button appearance after intalling Accessible Mennu module */
    border: unset;
    background-color: unset;
    text-transform: uppercase;
    /*I almost think it looks better without uppercase transform.*/
}
ul.dropdown-menu a:hover,
ul.dropdown-menu a:focus {
    background-color: #fbb530;
}



/* HOME PAGE ***************************/



/* BEGIN my new layout */


/*    temporary?*/
/*
h1.title {
display: none;
}
section.section nav.tabs {
display: none;
}

*/
div.homepage_content_block, div.homepage_course_list_container, div.homepage_support_block {
    margin-top: 30px;
    margin-bottom: 70px;
}

div.homepage_floating_block {
    border: 1px solid #dde;
    /* background: #efefef; */
    border-radius: 20px;
    box-shadow: 2px 8px 16px #ddd;
    /* padding: 10px; */
    /*    margin-top: 10px;*/
    /*    margin-bottom: 70px;*/
    /* margin: auto; */
    /* margin-bottom: 40px; */
}

div#homepage_about_block {
    margin-top: 40px;
}
div.homepage_content_block {
    display: flex;
}
div.homepagecontent_innerdiv {
    /* border: 1px solid blue; */
    border-radius: 20px;
    /* margin: 8px; */
}
div.homepage_content_innerdiv img {
    max-width: 480px;
    border-radius: 20px 0 0 20px;
    min-height: 100%;
    object-fit: cover;
}
/* This rule needs media queries so it behaves correctly on narrow screens. */

.homepage_content_innerdiv.homepage_content_innertextdiv {
    padding: 15px;
}
a.homepage_link {
    color: black !important;
    text-decoration: none !important;
}

div.homepage_course_list_container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
div.homepage_course_block {
    border: 6px solid #faa006;
    border-radius: 10px;
    background: hsl(43 97% 60% / 1);
    text-align: center;
    padding: 10px 6px;
    flex-basis: 30%;
    min-height: 100px;
    margin-bottom: 30px;
}
.homepage_course_block {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
div.homepage_course_topline {
    font-weight: bold;
    font-size: 1.2rem;
    min-width: 280px;
}
div.homepage_course_topline h3 {
    font-size: 1.2rem;
}
div.homepage_course_descriptor {
    background: white;
    border-radius: 6px;
    margin: 6px;
    padding: 10px;
    line-height: 20px;
    flex-grow: 2;
    font-size: 0.9em;
}
div.homepage_course_link {
    text-transform: uppercase;
    font-size: 0.9rem;
}

div.homepage_support_block {
    max-width: 800px;
    margin: 30px auto 70px;
}
div.homepage_support_block p {
    padding: 12px 18px;
}
div#lowerDonateButton {
    text-align: center;
    margin-top: 40px;
    padding-bottom: 30px;
}

@media screen and (max-width: 991px) {
    div.homepage_content_block {
        flex-direction: column;
    }
    div.homepage_content_innerdiv img {
        width: 100%;
        min-width: 100%;
        border-radius: 20px 20px 0 0;
    }
    div.homepage_course_block {
        min-width: 75%;
    }
}
@media screen and (max-width: 450px) {
    div.homepage_course_block {
        flex-grow: 1;
    }
}

/* Changing the structure of the cards and their links for ADA */
.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensures the click area is on top */
}

/* Ensure other links in the text (if any) stay clickable */
.card-container p a {
    position: relative;
    z-index: 2;
}
.card-container:focus-within {
    outline: 2px solid #005fcc;
}








/* 
darker orange is #faa006
light orange is #fbb404 
tax credit banner is #fbb530
*/ 

/* End my new layout */








div.layout {
    justify-content: space-between;
    margin-bottom: 50px;
}

/* featured top holds the full-width home page promo block */
.featured-top .container {
    /* mostly web builder UI related, making homepage promo block full-width. 
    doesn't really alter appearance. Sept '25 */
    max-width: unset;
}

div.featured-top aside.featured-top__inner.section.container.clearfix {
    /*    this rule clears proprties to allow block to be full-width on desktop screens */
    padding: unset;
    margin: unset;
}
div.featured-top div.views-row {
    padding: unset;
}
div.featured-top div.field-content img {
    width: 100vw;
    height: unset;
}

div.layout--twocol-section img {
    /* images in the homepage twocol */
    height: 350px;
    width: 500px;
    object-fit: cover;
}







@media screen and (min-width: 40em) {
    .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first, .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
        flex: 0 1 49%;
        border: 1px solid #eef;
        border-radius: 10px;
        background-color: #fcfcfe;
        padding: 10px;
        box-shadow: 2px 8px 16px #ddd;
    } 
    .layout--threecol-section--33-34-33 > .layout__region {
        flex: 0 1 32%;
        border: 1px solid #eef;
        border-radius: 10px;
        background-color: #fcfcfe;
        padding: 10px;
        box-shadow: 2px 8px 16px #ddd;
    }
}

.layout.layout--twocol-section.layout--twocol-section--50-50 span.views-field-title,
.layout--twocol-section div.views-field-title,
.layout--threecol-section span.views-field-title{
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}
.layout.layout--twocol-section.layout--twocol-section--50-50 span.views-field-title a,
.layout--twocol-section div.views-field-title a,
.layout--threecol-section span.views-field-title a {
    color: #444;
    text-decoration: none;
}
.layout--onecol h2 {
    font-size: 1.5rem;
    color: #444;
    font-weight: bold;
    text-align: center;
}


div#lowerDonateButton {
    text-align: center;
    margin-top: 40px;
}
div#lowerDonateButton a.home-donate {
    color: #fff;
    background: #bf0000;
    /*    border: 1px solid #bf0000;*/
    padding: 1rem;
    margin: auto;
    font-size: 1.7rem;
    border-radius: 1rem;
}

h1.title {
    text-align: center;
    font-weight: bold;
    padding: 15px 15px 0px 15px;
}

/* For content on About page */
div.student-quotes {
    max-width: 700px;
    border-top: 3px #09c solid;
    border-bottom: 3px #09c solid;
    margin: 40px auto;
}
div.student-quotes blockquote, div.student-quotes blockquote p {
    line-height: 1.33em;
    color: #000;
    max-width: 700px;
    font-weight: bold;
    font-size: 20px;
    margin: 10px auto;
    font-style: italic;
}
div.student-quotes blockquote {
    border-left: none;
}
div.student-quotes blockquote div {
    /* the source of the quote */
    text-align: right;
    padding-right: 50px;
    font-size: 18px;
    font-weight: normal;
}

.text-align-center img {
    max-width: 100%;
    height: auto;
    padding: 4px;
}
div.hero_photo_container img {
    max-width: 100%;
    height: auto;
}
div.two_photo_container img {
    max-width: 100%;
    height: auto;
    padding: 0 10px;
}

.align-center .field__item {
    text-align: center;
}
img.align-center {
    /* fixes oversized hero images, like on jobs page */
    max-width: 100%;
    height: auto;
}
.field__item video {
    /* fixes over-width of video on Summer Bootcamp page */
    max-width: 100%;
}


/* ------------------------ FOOTER --------------------------- */
footer.site-footer {
    margin-top: 40px;
}
div.site-footer__bottom {
    /* div nested inside container inside footer */
    margin: 0;
    border: none;
}
div.site-footer__bottom section.region {
    margin: 20px -10px 0;
}
.no-wrap {
    /* added to control line breaks in copyright line */
    white-space: nowrap;
}
div#social_icons_container {
    display: flex;
    justify-content: center;
}
.social_icon {
    padding: 14px;
}
div.social_icon img {
    height: 20px;
}
a#sitemap_footer_link,
a#accessibility_footer_link {
    color: #4FBFFF;
}

@media only screen and (max-width: 600px) {
    #block-block-2 {
        clear: both;
    }
}



@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1040px;
    }
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;    
    }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1320px;    
    }
}