/*
 Theme Name:   Oregon Raindrop Fund
 Theme URI:    https://www.upsweptcreative.com/
 Description:  Theme for Upswept Creative, 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.1 BUTTONS
-- 2.2 OFFSET COLUMNS
-- 2.3 INTERIOR HEADER
* 3. NAVIGATION
* 4. HOMEPAGE
-- 4.1 HOME HERO
* 5. SINGLE POSTS AND PAGES
-- 5.1 GRANTS PAGE
* 6. FOOTER
*/

/* ---------------
0. FONTS AND COLORS
----------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

@font-face {
    font-family: "MODULAR";
    src: url(assets/fonts/MODULAR-14.otf);
}

/*
  font-family: "Roboto Serif", sans-serif;
font-family: "MODULAR", sans-serif;
*/

:root {
    --green: #47A247;
    --navy: #0C436B;
    --blue: #059BD7;
    --md-blue: #23567a;
    --white: #fff;
    --gray: #1e1e1e;
    --lt-navy: #0972a4;
    --lt-blue: #a2d9f0;

}

body {
    font-family: "Roboto Serif", sans-serif;
}

/* ---------------
1. TYPOGRAPHY
----------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.main-navigation a,
a.wp-block-button__link {
    font-family: "MODULAR", sans-serif;
    letter-spacing: .04em;
    line-height: 1em;
}

h1 {
    font-size: 5rem;
}

h2 {
    font-size: 4.2rem;
}

h3 {
    font-size: 3rem;
}

p {
    font-size: 1.4rem;
}

h1,
h2 {
    filter: drop-shadow(-4px -4px var(--lt-navy));
}

.has-white-background-color h1,
.has-white-background-color h2 {
    color: var(--navy);
    filter: drop-shadow(-3px -3px var(--lt-blue));
}

.tiny-text {
    font-size: .8em !important;
    letter-spacing: -.01em;

}

@media (max-width: 1000px) {
    h1 {
        font-size: 3.2rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.8rem;
    }

    h4 {
        font-size: 2.4rem;
    }

    h5 {
        font-size: 2.2rem;
    }

    h6 {
        font-size: 2rem;
    }

    p {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 2.6rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.8rem;
    }

    h5 {
        font-size: 1.6rem;
    }

    h6 {
        font-size: 1.4rem;
    }

    p {
        font-size: 1rem;
    }
}

/* ---------------
2. ELEMENTS
----------------- */
body {
    overflow-x: hidden;
}

li li {
    list-style-type: "→ ";
}

/* ---------------
-- 2.1 BUTTONS
----------------- */
.wp-block-button .wp-block-button__link {
    border: var(--green) 1px solid;
    border-radius: 5px;
    font-size: 1.25rem;
    padding: 8px 28px;
    transition: all .5s;
}

.wp-block-button__link:hover {
    background-color: var(--navy);
    color: var(--green);
}

/* ---------------
-- 2.2 OFFSET COLUMNS
----------------- */
.wp-block-columns {
    padding: 0px;
    position: relative;
}

.wp-block-columns .wp-block-column:not(:has(img)) {
    padding: 40px;
}

.wp-block-columns.right-offset .wp-block-column:not(:has(img)),
.wp-block-columns.left-offset .wp-block-column:not(:has(img)) {
    padding: 40px 40px 140px 40px;
}

.wp-block-columns.right-offset,
.wp-block-columns.left-offset {
    border-radius: 40px;
    margin-top: -100px;
    width: calc(100% + 120px);
}

main.site-main>article>.inside-article>.entry-content>.wp-block-columns:first-child {
    margin-top: 0px;
}

.wp-block-columns.right-offset {
    margin-right: -120px;
}

.wp-block-columns.left-offset {
    margin-left: -120px;
}

.wp-block-columns.right-offset figure,
.wp-block-columns.left-offset figure {
    height: 100%;
    width: 100%;
}

.wp-block-columns.right-offset img,
.wp-block-columns.left-offset img {
    border-radius: 40px;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.wp-block-columns.right-offset figure {
    display: flex;
    align-items: flex-end;
}

.wp-block-columns.right-offset img {
    min-height: 600px;
    max-height: 100%;
    object-position: left;
}

.block-editor-block-list__block.left-offset,
.block-editor-block-list__block.right-offset {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.left-offset.white-bg .wp-block-image img,
.left-offset.has-white-background-color .wp-block-image img,
.right-offset.blue-bg .wp-block-image img,
.right-offset.has-blue-background-color .wp-block-image img {
    opacity: 0.4;
    height: 100%;
}

@media (max-width: 1320px) {
    .left-offset.no-image {
        padding-left: 80px;
    }
}

@media (max-width: 1320px) {
    .left-offset {
        margin-left: -80px !important width: calc(100vw - 20px) !important;

    }

    .right-offset {
        margin-right: -80px !important;
			padding-right: 60px;
        width: calc(100vw - 20px) !important;

    }
}

@media (max-width: 782px) {
    .left-offset {
        margin-left: -120px !important;
	 padding-left: 100px;
        position: relative;
    }

    .right-offset {
        margin-right: -40px !important;
		padding-right: 20px;
        position: relative;
        width: calc(100vw - 20px) !important;
    }

    .left-offset.white-bg .wp-block-column,
    .left-offset.has-white-background-color .wp-block-column,
    .right-offset.blue-bg .wp-block-column,
    .right-offset.has-blue-background-color .wp-block-column {
        z-index: 1;
    }

    .left-offset.white-bg .wp-block-column:has(.wp-block-image),
    .left-offset.has-white-background-color .wp-block-column:has(.wp-block-image),
    .right-offset.blue-bg .wp-block-column:has(.wp-block-image),
    .right-offset.has-blue-background-color .wp-block-column:has(.wp-block-image) {
        bottom: 0;
        height: 90%;
        opacity: .25;
        position: absolute;
        z-index: 0
    }

    .staff-names .wp-block-column:not(:has(img)):first-child,
    .no-image .wp-block-column:not(:has(img)):first-child {

        padding-bottom: 0px !important;
    }

    .staff-names .wp-block-column:not(:has(img)) {
        padding-bottom: 60px !important;

    }
}

/* ---------------
-- 2.3 INTERIOR HEADER
----------------- */
.entry-title {
    color: white;
    margin-left: 40px;
}

/* ---------------
3. NAVIGATION
----------------- */
.sub-menu.toggled-on >li{
	list-style-type: none;
}
.header-image.is-logo-image {
    margin-left: 40px;
}

.main-navigation a {
    font-size: 1.25rem !important;
}

.sub-menu {
    border-radius: 10px;
}

/* desktop styles */
@media (min-width: 971px) {
    .main-navigation .gp-icon.icon-arrow {
        display: none;
    }
}

/* small screen styles */
@media (max-width: 782px){
	.site-logo img.is-logo-image{
		margin-left: 20px;
		width: 200px;
	}
}
/* ---------------
4. HOMEPAGE
----------------- */
/* ---------------
-- 4.1 HOME HERO
----------------- */
@media (max-width: 782px) {
    .home-hero .wp-block-column:not(:has(img)) {
        padding-bottom: 40px !important;
    }
}

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

/* ----------------------
-- 5.1 GRANTS PAGE
----------------------- */
@media (max-width: 782px){
	.post-17.page .wp-block-columns{
		display: flex;
	}	
		.post-17.page .wp-block-column:not(:has(.wp-block-button)){
			order:1;
			padding-bottom: 0px !important;
	}
	.post-17.page .wp-block-column:has(.wp-block-button){
		order:2;
		padding-bottom: 120px !important;
	}
}
/* ---------------
6. FOOTER
----------------- */
.site-footer {
    margin-bottom: -30px;
}

.site-footer .wp-block-group {
    margin-bottom: -30px;
    padding-left: 40px;
    padding-right: 40px;
}

.site-footer h2 {
    font-size: 1.6rem;
    filter: none;
    margin-bottom: 0px;
}

.site-footer p {
    font-size: 1rem;
}