/*
 Theme Name:   Jubitz Family Foundation
 Theme URI:    https://www.upsweptcreative.com/
 Description:  Theme for Jubitz Family Foundation, built as GeneratePress child theme
 Author:       Chynna Lew for Upswept Creative
 Author URI:   https://www.upsweptcreative.com
 Template:     generatepress
 Version:      1.0
*/

/* TABLE OF CONTENTS
* 0. FONTS AND COLORS
* 1. TYPOGRAPHY
* 2. ELEMENTS
* 3. NAVIGATION
* 4. HOMEPAGE
* 5. SINGLE POSTS AND PAGES
* 6. FOOTER
*/

/* ---------------
0. FONTS AND COLORS
----------------- */
:root {
    --green: #48bf84;
    --blue: #008caf;
    --ltblue: #a6c9d2;
    --gray: #333b3d;
    --tgray: #333b3d7e;
}

/* ---------------
1. TYPOGRAPHY
----------------- */
body {
    background-color: var(--ltblue);
    color: var(--gray);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.inside-article {
    background-color: var(--ltblue) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-button__link,
input[type='button'] {
    font-family: 'Roboto', sans-serif;
    font-weight: 700 !important;
}

h1,
h2,
h3 {
    color: var(--blue);
    letter-spacing: .2rem;
	text-transform: uppercase;
}

h4,
h5,
h6 {
	color: var(--gray);
}

@media (max-width: 488px){
    h1{
        font-size: 30px
    }
    h2{
        font-size:26px
    }
}
@media (max-width: 415px){
    .wp-block-columns.image-overlap, .wp-block-columns.image-overlap.left{
        padding: 20px !important
    }
    h1{
        font-size: 26px;
        width: 100%;
    }
    h2{
        font-size:22px
    }
}

/* ---------------
2. ELEMENTS
----------------- */
html {
    scroll-behavior: smooth;
}

/*override wp-margins and padding */
.site,
.site-main,
.inside-article,
.wp-block-image,
article {
    margin: 0px !important;
    max-width: none !important;
    padding: 0px !important;
}

.wp-block-cover,
.wp-block-group {
    padding: 40px
}

.wp-block-cover__inner-container,
.wp-block-group__inner-container,
.wp-block-columns {
    margin: auto;
    max-width: 1200px;
    padding: 0px !important;
}
.col-padding{
	padding-right: 40px !important;
	padding-left:40px !important;
}

@media (max-width: 400px){
    .wp-block-columns.image-overlap{
        padding: 20px !important
    }
}
@media (max-width: 899px) {
    .wp-block-columns.image-overlap, .wp-block-columns.image-overlap.left{
        padding-bottom: 0px !important
    }
}


/* 2.1 BUTTONS */
.wp-block-button a,
input[type='button'] {
    background-color: var(--green) !important;
    border-radius: 0;
    color: white;
    transition: all .5s ease-out;
}

.wp-block-button a:hover,
input[type='button']:hover {
    background-color: var(--blue) !important;
}

input[type='button'] {
	padding: 5px 30px !important;
}

/* white block overlapping image button */
.image-overlap .white-block .wp-block-button {
    display: flex;
    justify-content: center;
    width: 100%;
}

.image-overlap .white-block a {
    width: 60%;
}


@media (max-width: 500px){
    .image-overlap .white-block a {
        width: 80%;
    }
}


/* 2.2 BLOCK STYLES */
/* block colors */
.white-block {
    background-color: white;
    padding: 40px !important;
}

.white-block ul {
	margin: 0;
}

/* white block overlapping image */

/* if image is on the right, use .image-overlap, if image is on the left, use .image-overlap.left */
.image-overlap {
    padding: 20px 40px 20px 0px !important;
    position: relative;
    width: 100%
}
.image-overlap.left {
    padding: 20px 0px 20px 40px !important;
}

.image-overlap .white-block {
    bottom: 0;
    height: fit-content;
    margin: auto 0;
    width: 50%;
    position: absolute;
    top: 0;
}
@media (max-width: 999px){
    .image-overlap .white-block{
        width: 70%
    }
}


.image-overlap.left .white-block {
    right:0
}

.image-overlap .image-block .wp-block-image {
    justify-content: flex-end;
    display: flex;
    flex-direction: row;
}
.image-overlap.left .image-block .wp-block-image{
    justify-content: flex-start;
}

.image-overlap .image-block img {
    width: 60%
}

@media (max-width: 1100px){
    .image-overlap .white-block{
        max-width: 60%
    }
}

@media (max-width: 955px){
    .image-overlap, .image-overlap.left{
        flex-wrap: wrap !important;
        padding: 40px !important
    }
    .image-overlap .white-block, .image-overlap .image-block img{
        flex-basis: 100% !important;
        max-width: 100%;
        position:static;
        width: 100% !important;
    }
    .image-overlap.left .white-block {
        right: auto !important
    }
}

/* ---------------
3. NAVIGATION
----------------- */

.main-nav{ 
    background-color: white !important;
}

.main-nav li a {
    color: var(--green) !important;
    text-transform: uppercase;
    transition: all ease-out 500ms;
}

.main-nav li a:hover {
    color: var(--blue) !important
}

.main-navigation .menu-toggle {
    background-color: white;
    color: var(--green);
    transition: all ease-out 500ms;
}

.main-navigation .menu-toggle:hover {
    background-color: white;
    color: var(--blue);
}

/* ---------------
4. HOMEPAGE
----------------- */
.home-hero {
    margin-bottom: 20px;
    min-height: 60vh;
}

.home-hero .wp-block-group {
    max-width: 60%;
    position: relative;
}

.home-hero h1 {
    background-color: var(--tgray);
    font-weight: 300 !important;
    letter-spacing: normal;
    padding: 40px;
	text-transform: none;
}

.home-hero .wp-block-button__link {
    bottom: 40px;
    left: 0;
    margin: auto;
    padding: 5px;
    position: absolute;
    right: 0;
    width: 50px;
}


@media(max-width:798px){
    .home-hero .wp-block-group {
        max-width: 100%;
        padding-right: 0px;
        padding-left: 0px
    }
}

@media(max-width: 480px) {
	.home-hero h1 {
		font-size: 24px;
		padding: 30px;
	}
}

/* ---------------
5. SINGLE PAGES AND ELEMENTS
----------------- */

/* 5.1 Interior page hero */
.interior-header {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 300px
}

.interior-header h1 {
    color: white;
    font-weight: 300 !important;
    position: relative;
	text-align: center
}

.interior-header h1:after {
    background: var(--blue);
    bottom: -4px;
    content: '';
    height: 1px;
    left: 0;
    margin: 0 auto;
    right: 0;
    position: absolute;
    width: 80%;
}

/* 5.2 ABOUT PAGE*/
.staff.founders p .more-text, .staff.founders p .read-less{
    display: none;
}

.read-more, .read-less {
    background-color: white;
    color: var(--blue);
	font-weight: bold;
    padding: 0px 5px;
    margin: 0px;
    transition: all ease-out .5s
}
.read-more:hover, .read-less:hover{
    background-color: white;
    color: var(--green);
}

/* 5.3 GRANTS PAGE */
.not-funding li {
	list-style-type: circle;
	margin-left: 20px
}

/* ---------------
6. FOOTER
----------------- */
.site-footer,
.site-footer .inside-site-info {
    background-color: var(--gray) !important;
    color: white;
}
.site-footer p{
	font-size: 0.8em;
    margin: 0;
	padding: 10px;
}