/*
 Theme Name:   Off The Couch
 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. ELEMENTS
-- 2.1 BUTTONS
-- 2.2 SITCKY NOTE COLUMNS
-- 2.3 WAVY UNDERLINE
-- 2.4 COLOR BLOCKS
-- 2.6 CTAs
-- 2.7 LATEST POSTS / ARTICLES
-- 2.8 WIDGETS / SIDEBARS
* 3. NAVIGATION
* 4. HOMEPAGE
-- 4.1 HOMEPAGE HERO
-- 4.2 HOMEPAGE PURPLE BLOCK
-- 4.3 STAFF BLOCKS
-- 4.4 HOMEPAGE LEMON BLOCK
* 5. SINGLE POSTS AND PAGES
-- 5.1 ARCHIVES
-- 5.2 SINGLE POSTS
* 6. FOOTER
*/

/* ---------------
0. FONTS AND COLORS
----------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Poller+One&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*
font-family: "Caveat", serif;
font-family: "Poller One", serif;
font-family: "Prompt", serif;
 */

:root {
    --navy: #213159;
	--green: #00a385;
	--lavender: #8b85c1;
	--lemon: #f8fcda;
	--orange: #f5895f;
}

body {
    background-color: white;
    color: black;
		font-family: "Prompt", serif;
}

.inside-article {
    background-color: transparent;
}

/* ---------------
1. TYPOGRAPHY
----------------- */
h1, h2, h3, h4, h5, h6{
	font-family: "Poller One", serif;
}

.large-text{
	font-size: 3.5em;
}
.caveat{
	font-family: "Caveat", serif !important;
}
body{
	color: var(--navy);
}

@media (max-width: 767px){
	.large-text{
		font-size: 2.5em;
	}
	h1{
		font-size: 2em;
	}
	h2{
		font-size: 1.8em;
	}
	h3{
		font-size: 1.5em
	}
	h4{
		font-size: 1.2em
	}
}
/* ---------------
2. ELEMENTS
----------------- */
/* override wp-styles */
.site, .inside-article{
	margin-bottom:0px !important;
	margin-top: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}
.header-wrap, .page-hero{
	background-color: white;
}
/* ---------------
-- 2.1 BUTTONS
----------------- */
.wp-block-buttons a.wp-block-button__link, input[type=submit].gform_button{
	background-color: transparent;
	color: var(--green);
	font-family: "Poller One", serif;
	font-size: 1.2em;
	line-height: 1.2em;
	padding: 0px;
	transition: all .5s;
}
.wp-block-buttons a.wp-block-button__link:hover, .gform_button:hover{
		background-color: transparent;
	color: var(--orange);
}
.wp-block-buttons.large-button a.wp-block-button__link{
	font-size: 2em;
}
.wp-block-button{
		align-items: center;
	display: flex !important;
	flex-wrap: nowrap;
}
.wp-block-buttons.large-button img{
	height: 40px;
	margin-top: -15px;
	padding-right: 10px;
}
.wp-block-buttons.no-text img{
	height: 40px;
	padding-right: 10px;
}
.wp-block-buttons.no-text a{
	font-size: 0px;
}
.wp-block-buttons img, .gform_footer img{
	height: 40px;
	margin-top: -15px;
	padding-right: 10px
}
.lavender-block > .wp-block-group__inner-container > .wp-block-buttons a.wp-block-button__link{
	color: var(--orange);
}
.lavender-block > .wp-block-group__inner-container > .wp-block-buttons a.wp-block-button__link:hover{
	color: white;
}
@media (max-width: 767px){
	.wp-block-buttons.large-button a.wp-block-button__link{
	font-size: 1.5em;
}
}
/* ---------------
-- 2.2 SITCKY NOTE COLUMNS
----------------- */
.sticky-note-cols .wp-block-group__inner-container{
	padding: 0px;
}
.sticky-note-cols .wp-block-column{
	background-color: var(--lemon);
	 -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 40px, calc( 100% - 40px) 0);
	padding: 20px;
	position:relative;
}
.sticky-note-cols .sub-heading{
	font-family: "Caveat", serif;
	margin-bottom: 10px;
}
.sticky-note-cols .sub-heading a{
	color: var(--navy);
	text-decoration: none;
}

.sticky-note-cols .sub-underline .wp-block-group__inner-container{
	color: var(--navy);
	font-size: 18px;
	font-weight: bold;
	margin: 0px;
	margin-top: -15px;
	padding: 0px !important;
}
.sticky-note-cols h2{
	color: var(--green);
		font-family: "Prompt", serif;
	font-size: 1.3em;
	font-weight: bold;
}
.sticky-note-cols .note-corner{
  border-bottom: 40px solid #e3ddaa;
  border-left: 40px solid transparent;
  border-right: -40px solid transparent;
  height: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: rotate(90deg);
	width: 0;
}

.sticky-note-cols .wavy-line{
	width: calc(100% - 40px);
}

.sticky-note-cols.overlap{
	margin-bottom: -100px;
	position: relative;
	z-index: 20
}

.sticky-note-cols.white-note .wp-block-column{
	background-color: white;
}

.sticky-note-cols.white-note .note-corner{
	border-bottom: 40px solid  rgba(0,0,0,0.075);
}
.sticky-note-cols.latest-posts-home {
	color: var(--navy);
}
.sticky-note-cols.latest-posts-home .author{
	font-size: .8em;
}
.sticky-note-cols.latest-posts-home p{
	margin-bottom: 10px;
}
/* .sticky-note-cols.latest-posts-home img{
	margin-top: 10px;
} */
/* ---------------
-- 2.3 WAVY UNDERLINE
----------------- */
.sub-underline{
	position: relative;
}
.sub-underline, .sub-underline .wp-block-group__inner-container{
	margin: 0px;
	padding: 0px;
}
.wavy-line {
  --s: 7px; /* size of the wave */
  --b: 2px; /* thickness of the line */
  --m: .9; /* curvature of the wave [0 2] */
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
	bottom: 15px;
	height: calc(2*var(--R));
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
	position: relative;
	  width: 100%;
}
.lightgray-line.sub-underline .wavy-line{
	background: lightgray;
}
.orange-line.sub-underline .wavy-line{
	background: var(--orange);
}

/* ---------------
-- 2.4 COLOR BLOCKS
----------------- */
.white-block,
.lavender-block,
.navy-block,
.lemon-block{
	padding-bottom: 40px;
	padding-top: 40px;
}
.white-block{
	background-color: white;
}
.lavender-block{
	background-color: var(--lavender);
	color: white;
}
.lemon-block{
	background-color: var(--lemon);

}
.navy-block{
	background-color: var(--navy);
	color: white;
}
.border-top{
	margin-top: -20px;
	--mask:
    radial-gradient(11.66px at 50% 16px,#000 99%,#0000 101%) calc(50% - 20px) 0/40px 100%,
    radial-gradient(11.66px at 50% -6px,#0000 99%,#000 101%) 50% 10px/40px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
	position: relative;
}
.border-bottom{
	margin-bottom: -40px;
	 --mask:
    radial-gradient(11.66px at 50% calc(100% - 16px),#000 99%,#0000 101%) calc(50% - 20px) 0/40px 100%,
    radial-gradient(11.66px at 50% calc(100% + 6px),#0000 99%,#000 101%) 50% calc(100% - 10px)/40px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

/* ---------------
-- 2.5 ICON LISTS
----------------- */
.icon-list-item, .icon-list-item .wp-block-group__inner-container{
	margin: 0px;
	padding:0px;
}

/* ---------------
-- 2.6 CTAs
----------------- */
.cta{
	background-color: var(--navy);
	color: white;
	padding-bottom: 40px;
	padding-top: 40px;
	
}
/* ---------------
-- 2.7 LATEST POSTS / ARTICLES
----------------- */
.latest-post .text-img-wrap .text{
	min-width: 60%;
}
.latest-posts-columns{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.latest-posts{
	display: flex;
	flex-wrap: wrap;
		gap: 20px;
	padding: 0px;
	position: relative;
	width: 100%;
}
.latest-post-wrap{
	max-width: 100%;
		min-width: 100%;
	position:relative;
}
/* .first-column .latest-post-wrap:nth-child(2){
	margin-top: 200px;
} */
.latest-post{
	background-color: white;
	display: flex;
	gap: 20px;
	margin: 10px 0px;
	padding: 60px 20px 20px 20px;
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 40px, calc( 100% - 40px) 0);
	position: relative;
}
.latest-posts .sub-underline .wp-block-group__inner-container{
	color: var(--navy);
	font-size: 1.2em;
	margin: 0px;
	padding: 0px !important;
}
.latest-posts h2{
	color: var(--green);
		font-family: "Prompt", serif;
	font-size: 1.3em;
	font-weight: bold;
}
.latest-posts .note-corner{
  border-bottom: 40px solid  rgba(0,0,0,0.075);
  border-left: 40px solid transparent;
  border-right: -40px solid transparent;
  height: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: rotate(90deg);
	width: 0;
}
.latest-post{
	display: flex;
	flex-direction: column
}
.latest-post .text-img-wrap{
	align-items: center;
	display: flex;
	gap: 20px;
}

.latest-posts .wavy-line{
	width: 100%;
}
.latest-posts .latest-post_meta{
	display: flex;
	gap: 10px;
	margin-right: 80px;
	position:absolute;
	left:20px;
	top: -15px;
	width: calc(100% - 70px);
	z-index: 25;
}
.latest-posts .latest-post_meta .sub-underline{
	bottom: 15px;
	display: flex;
	flex-direction: column;
	justify-content:flex-end;
	position: relative;
 	right: 0;
	width: calc(100% - 80px);
}
.latest-posts .cat{
	font-family: "Caveat", serif;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 7px;
	text-align: right;
}
.latest-posts .date{
	background-color: var(--green);
	color: white;
	font-family: "Caveat", serif;
	font-size: 20px;
	font-weight: bold;
	height: 70px;
	line-height: 20px;
	padding: 10px;
	width: 80px;
}
.latest-post h2{
	margin-bottom: 0px;
}
.latest-post h2 a{
	color: var(--green);
	font-size: 20px;
	line-height: 20px;
	text-decoration: none;

}
.latest-post .read-more{
	display: none;
}
.latest-post .button-arrow{
	align-items: flex-end;
	display:flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
}
.latest-posts-image{
	height: 300px;
	left: -5px;
	overflow: hidden;
	position: absolute;
	min-width: calc(100% + 10px);
}
.latest-post .button-arrow img{
	height: 40px;
	max-width: 50.703px;
}

.latest-articles .latest-posts{
	width: 100%;
}
.latest-articles .latest-post-wrap, .latest-articles .articles-intro{
	width: calc(33.33% - 20px)
}
.articles-intro h2{
	font-size: 3em
}
.homepage-posts .latest-posts{
	display: flex;
	flex-direction:column;
}
@media (max-width: 600px){
	.latest-posts{
				width: 100%;
	}
}
@media (max-width: 782px){
	.latest-post .text-img-wrap{
	flex-wrap: wrap !important;
}
	.latest-post .text-img-wrap div{
		width: 100%;
	}
}
/* ---------------
2.8 WIDGETS / SIDEBARS
----------------- */
.widget-area .widget{
	padding: 0px;
}
/* ---------------
3. NAVIGATION
----------------- */
.main-navigation{
	background-color: transparent;
}

.main-navigation .sub-menu {
	background: var(--lemon);
}

.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items, .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--green);
	font-family: "Poller One", serif;
	transition: all .5s;
}
.main-navigation .main-nav ul li a:hover, .main-navigation .menu-toggle:hover, .main-navigation .menu-bar-items:hover, .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover{
	color: var(--orange) !important;
}
		
@media (min-width: 1000px){
        .main-navigation .gp-icon svg{
                display: none !important;
        }
}
/* ---------------
4. HOMEPAGE
----------------- */

/* ---------------
-- 4.1 HOMEPAGE HERO
----------------- */
.home-hero{
	min-height: 500px;
	padding: 200px 0px 200px 40px;
}
.home-hero.page-hero h1{
	color: var(--navy);
	max-width: 40%;
}
@media (min-width: 1280px){
	.home-hero{
		padding-left: 120px;
	}
}
/* ---------------
-- 4.2 HOMEPAGE PURPLE BLOCK
----------------- */
.lavender-block.homepage .sticky-note-cols{
 	margin-top: -160px;
	margin-bottom: 60px;
}
.arrow-headers > .wp-block-columns{
	gap: 0px;
}
.arrow-headers > .wp-block-columns > .wp-block-column:first-child{
	margin-top: -10px;
}

.arrow-headers img{
	height: 40px;
	width: 50.703px
}
@media (min-width: 400px){
	.arrow-headers > .wp-block-columns {
		flex-wrap: nowrap !important;
	}
		.arrow-headers > .wp-block-columns > .wp-block-column:first-child{
			max-width: 55px;
	}
}
@media (max-width: 400px){
			.arrow-headers > .wp-block-columns > .wp-block-column:first-child{
				display: none
	}
}
/* ---------------
-- 4.3 STAFF BLOCKS
----------------- */
.staff-block h3{
	font-family: inherit;
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 0px;
}
.staff-block h4{
	font-family: inherit;
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 0px;
}
.staff-block .wp-block-buttons{
	padding-top: 10px;
}
.staff-block .wp-block-buttons .wp-block-button__link{
	margin-top: -5px;
}
.staff-wrap .wp-block-image {
	margin: auto;
	max-width: 250px;
}
@media (min-width:650px) and (max-width:1000px){
	.staff-wrap{
		display: flex;
	}
	.staff-wrap .staff-block{
		width: calc(50% - 20px)
	}
} 
/* ------------
-- 4.4 HOMEPAGE LEMON BLOCK
 * ---------------- */
@media (max-width:1000px){
	.lemon-block.homepage > .wp-block-group__inner-container > .wp-block-columns{
		display: flex;
		flex-wrap: wrap !important;
	}
		.lemon-block.homepage > .wp-block-group__inner-container > .wp-block-columns .wp-block-column:first-child{
			order: 2;
	}
		.lemon-block.homepage > .wp-block-group__inner-container > .wp-block-columns .wp-block-column:last-child{
			order: 1;
	}
		.lemon-block.homepage .wp-block-column{
			min-width: 100%;
	}
}
/* ----------------------
5. SINGLE PAGES AND POSTS
----------------------- */

/* ----------------------
-- 5.1 ARCHIVES
----------------------- */

.archive{
	background-color: var(--lemon);
}
.archive .site-content{
	padding: 80px;
}
.archive .latest-posts{
	width: 100%;
}
.archive .latest-post{
	display: block;
}
.archive .latest-post .read-more{
	display: none;
}
.archive .latest-post .button-arrow{
	align-items:flex-end;
	display: flex;
	justify-content: flex-end;
}
/* ---------------
5.2 SINGLE POSTS
----------------- */

.single .content-area{
	padding: 40px;
	padding-bottom: 80px;
}
/* ---------------
6. FOOTER
----------------- */
.site-footer{
	display: none;
}
.footer{
	color: white;
  background-color: var(--lavender);
	margin-top: -40px;
	padding-top: 60px;
}
.footer img{
	padding-left: 40px;
	width: 200px
}
.footer a{
	color: white;
	font-family: "Poller One", serif;
	text-decoration: none;
}