/*
 Theme Name:   InCommon 2.0
 Theme URI:    https://incommondcd.org
 Description:  Custom theme for InCommon Community Development 
 Version:      1.9
 Author:       Hanscom Park Studio 
 Author URI:   https://hanscompark.com
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  incommon
 Template:     chaplin
*/


:root {

--light-blue: #7ca6de;
--light-gray: #F1F1F3;
--medium-gray: #E1E1E3;
--dark-gray: #747579; 
--campaign-blue: #107ac6;
--campaign-green: #92a920;
}

/* ---------- FONTS ---------- */

@import url("https://use.typekit.net/unu5gmo.css");


@font-face {
    font-family: "quentin-regular";
    font-style: normal;
    font-weight: 400;
    src: url('fonts/quentin/quentin.woff') format('woff'),
         url('fonts/quentin/quentin.woff2') format('woff2');
    }


body { font-family: 'Gibson', 'canada-type-gibson', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif !important; }

.quentin { font-family: "quentin-regular", sans-serif !important; }
.gibson { font-family: "Gibson", "canada-type-gibson", sans-serif; }


p, h1, h2, h4, h5, h6 { font-family: "Gibson", "canada-type-gibson", sans-serif; }
h2 { color: black; font-weight: 400; }
h3 { font-family: "quentin-regular", sans-serif !important; font-size: 4em; font-weight: 400; }
h5 { font-weight: 600; color: var(--dark-gray); }

div#give-menu li.bold a { font-weight: bold !important; }


/* ---------- COLORS ---------- */

.light-blue { color: var(--light-blue); }
.medium-gray { color: var(--medium-gray); }
.dark-gray { color: var(--dark-gray); }

div#give-menu li.red a { color: red !important; }
div#give-menu li.campaign-green a { color: var(--campaign-green) !important };


/* ---------- SETUP ---------- */

body.page-template-template-full-width h1.entry-title, body.page-template-no-sidebar h1.entry-title { margin: 50px 0; font-weight: 500; }

a { text-decoration: none; color: var(--light-blue); }
a:hover { text-decoration: underline; }

body.home > #site-footer { margin-top: 0; }

.margin-top-0 { margin-top: 0; }
.margin-bottom-0 { margin-bottom: 0; }


/* ---------- TEXT ---------- */

p.main-hero { font-family: "Gibson", "canada-type-gibson", sans-serif; font-size: 3.5rem; line-height: 1.3; font-weight: 600; padding: 0 15%;  }

.donor-list { column-count: 3; }

footer div.widget-content li a { color: var(--light-blue); }

.cover-header h1 { font-size: 3em; font-weight: 500; }

.wp-block-latest-posts li a { font-weight: normal; }

footer a.button { color: #fff !important; }

h1.staff-name { margin-bottom: 0.5rem; } /* single-staff page */

p.job-title { font-weight: 500; text-transform: uppercase; color: var(--dark-gray); font-size: 2.2rem; } /* single-staff page */

p.title { line-height: 1; margin-top: 0.7 	5em; } /* staff page */


div#give-menu{ display: flex; }
div#give-menu li { list-style: none !important; font-size: 1.6rem; font-weight: 500; }
div#give-menu li a { color: #1a1b1f; }

.overlay-header div#give-menu li a { color: #fff !important; }


/* ---------- ELEMENTS ---------- */

.autoplay video { playsinline: true; max-height: 100% !important;  } 

.cover-header { height: 30rem; min-height: 80vh !important; }

.cover-header-inner-wrapper { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); }

.cover-header-inner-wrapper.remove-page-header-overlay { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 20%); }



.screen-height { min-height: 80vh; }

.cover-header + .post-inner { padding-top: 10rem; }

#site-header { padding: 2.5rem; margin-bottom: 0; }

.post-inner { padding-top: 0; }

div.to-the-content-wrapper { display: none; }

.blue-box { border: 10px solid var(--light-blue); padding: 100px 50px; }

footer { background-color: var(--light-gray); }

p.theme-credits { display: none; }

div#mc_embed_signup input.button { margin-top: 10px; }

.footer-logo { max-width: 200px; }
.footer-medal { max-height: 150px; display: inline-block; }

.wp-block-cover.join-button, .wp-block-cover.is-style-rounded-corners { min-height: 300px; height: 300px; width: 300px; margin: 10px auto; border-radius: 50%; }

.wp-block-cover p { margin-right: 0; }

.posts { margin-top: 50px; } 


#inside-page-nav { display: grid; height: auto; grid-gap: 3rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
div.inside-page-nav-item { height: 220px; background: var(--light-gray); border-radius: 5px; padding-bottom: 1rem;  }
div.inside-page-nav-item:hover, div.inside-page-nav-item:focus { box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.15); }
.inside-page-nav-item--title { font-weight: 500; font-size: 2rem; padding-left: 2rem; line-height: 1.1; }
.inside-page-nav-item--image { border-top-left-radius: 5px; border-top-right-radius: 5px; height: 70%; max-height: 200px; background: #eee; background-size: cover; margin-bottom: 1rem; }
.inside-page-nav-item--link {}


div.cover-header .wp-block-cover__video-background { min-width: 100%; min-height: 100%; width: auto !important; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }


/* Styles for Hanscom (4611), Georgia (4618) apartment pages */
.page-id-4611 .cover-header-inner-wrapper, .page-id-4618 .cover-header-inner-wrapper { background: none !important; }
.page-id-4611 .header-inner { color: black; }


.wp-block-cover.is-style-rounded-corners { border-radius: 50% !important; }


/* -------------- MEDIA QUERIES ------------- */

@media screen and (max-width: 425px ) {

	.wp-block-video.mobile-video video	{ max-width: none; width: 200vw !important; margin-left: -50%; }
	h3 { font-size: 3em; }
	.donor-list {column-count: 2;}
	.cover-header { height: 20rem; min-height: 60vh !important; }
	div.entry-content p, div.entry-content ul { padding-right: 5%; }
	.cover-header h1 { font-size: 2.4em; }
	.site-logo img { max-height: 4rem; width: auto; }
	.wp-block-cover { min-height: 300px; }
	footer { padding-top: 40px; }
	footer .widget:first-child { border-top: 0; }
	.wp-block-cover video { display: block !important; width: 100% !important; }
	#site-header { padding: 0.5rem; }
    #give-menu { display: none !important; }
	#give-menu li.menu-item { list-style: none !important; }
	
}

@media screen and (min-width: 700px ) {
	.footer-widgets-outer-wrapper { margin-top: 0; }
}