/*
 Theme Name:   Chamomile Mental Health
 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.0 OVERRIDE WP STYLES
-- 2.1 BUTTONS
-- 2.2 BORDER LINES
-- 2.3 BORDER COLUMNS
* 3. NAVIGATION
* 4. HOMEPAGE
-- 4.1 HOMEPAGE HERO
* 5. SINGLE POSTS AND PAGES
* 6. FOOTER
*/

/* ---------------
0. FONTS AND COLORS
----------------- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro: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&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

/*
font-family: "Playfair Display SC", serif;
font-family: "Be Vietnam Pro", sans-serif;
*/

:root {
	--plum: #2B061E;
	--lt-plum: #684e5f;
	--moss: #3F4630;
	--lt-moss: #95a48a;
	--slate: #1E1E1E;
	--rust: #B02E0C;
	--lt-rust: #f5e0d5;
}

body {
    background-color: white;
    color: var(--moss);
	font-family: "Be Vietnam Pro", sans-serif;
}
p{
	font-weight: 300;
}
.inside-article {
    background-color: white;
}

/* ---------------
1. TYPOGRAPHY
----------------- */
h1, h2, h3, h4, h5, h6, nav a, a.wp-block-button__link{
	font-family: "Playfair Display SC", serif;
	text-transform: uppercase;
}

h1, h2 {
	text-wrap: balance;
}




@media (max-width: 834px){
	.has-x-large-font-size, h1{
		font-size: 34px !important;
	}
	h2,
	.second-stacked h3{
		font-size: 30px;
	}
	h3{
		font-size: 28px;
	}
	h4{
		font-size: 26px;
	}
	h5{
		font-size: 22px;
	}
	h6{
		font-size: 18px;
	}
}
@media screen and (max-width:480px) {
	.home-hero h1 {
		font-size: 1.7em !important;
	}
	
	h2,
	.second-stacked h3{
		font-size: 1.3em;
	}
	
	h3 {
		font-size: 1.2em;
	}
}

/* ---------------
2. ELEMENTS
----------------- */
/* ---------------
-- 2.0 OVERRIDE WP STYLES
----------------- */
.separate-containers .site-main {
	margin: 0px;
} 
.separate-containers .inside-article{
	padding-bottom: 0px;
	padding-top: 0px;
}
.wp-block-group{
	padding: 40px 40px 60px 40px
}
.wp-block-separator{
	margin: 0px 40px;
	border-top: 1px;
}
@media (max-width: 781px){
	.wp-block-group{
		padding: 40px 20px;
	}

	.wp-block-columns .first-stacked{
		order: 1;
	}
	.wp-block-columns .second-stacked{
		order: 2;
	}
	.entry-content .wp-block-pullquote blockquote{
		margin-right: 0px;
	}
	.entry-content .wp-block-pullquote blockquote p{
		padding: 10px;
	}
	.entry-content .wp-block-pullquote blockquote cite{
		padding-top: 20px;
	}
}


/* ---------------
-- 2.1 BUTTONS
----------------- */
.wp-block-button__link, .gform_wrapper.gravity-theme .gform_footer input{
	background-color:transparent;
	border: 1px var(--rust) solid;
	border-radius: 0px;
	color: var(--rust);
	font-size: 1.2em !important;
	font-weight: 700;
	transition: all .5s;
}
.wp-block-button__link:hover, .gform_wrapper.gravity-theme .gform_footer input:hover{
	color: var(--plum);
}
.wp-block-cover .wp-block-button__link{ 
	border: 1px white solid;
	color: white;
}
.wp-block-cover .wp-block-button__link:hover{
	background-color: var(--lt-plum);
}
/* ---------------
-- 2.2 BORDER LINES
----------------- */
.border-line-left, .border-line-right {
	padding-bottom: 120px;
	position: relative;
}
.border-line-left{
	padding-left: 80px;
}
.border-line-right{
	padding-right: 80px;
}
.border-line-left .wp-block-group__inner-container, .border-line-right .wp-block-group__inner-container{
	margin-top: -120px;
	padding-bottom: 0px;
	padding-top: 180px;
}
.border-line-left .wp-block-group__inner-container{
	border-left: 1px solid;
}
.border-line-right .wp-block-group__inner-container{
	border-right: 1px solid;
}
.lt-moss-line .wp-block-group__inner-container{
	border-color: var(--lt-moss);
}
.lt-plum-line .wp-block-group__inner-container{
	border-color: var(--lt-plum);
}
/* ---------------
-- 2.3 BORDER COLUMNS
----------------- */
.border-columns .wp-block-group__inner-container{
	border-bottom: 1px var(--lt-moss) solid;
	border-top: 1px var(--lt-moss) solid;
}
.border-columns .wp-block-group__inner-container p{
	margin: 0px;
}
.border-columns .wp-block-columns{
	gap: 20px;
	margin-bottom: 0px;
}
.border-columns .wp-block-column:not(:first-child){
	border-left: 1px var(--lt-moss) solid;
	padding-left: 30px;
}
.big-numbers h3 {
	font-size: 3em;
}


@media (max-width: 781px){
	.wp-block-group{
		padding: 40px 20px;
	}
	.border-line-left{
		padding-left: 20px;
	}
	.border-line-right{
		padding-right: 20px;
	}
	.border-columns .wp-block-column:not(:first-child) {
		border: 0px !important;
		padding-left: 0 !important;
	}
	.border-columns.big-numbers:not(.is-not-stacked-on-mobile)>.wp-block-column,
	.border-columns.big-numbers:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-wrap: wrap;
		flex-basis: 100% !important;
	}
}

/* ---------------
 * 2.4 PULLQUOTES
 * --------------- */

.wp-block-pullquote {
	padding-top: 0;
}

.wp-block-pullquote p {	
	color: var(--lt-plum);
	font-family: "Playfair Display", serif;
	font-size: 20px;
	padding: 0 40px 40px 40px;
	position: relative;
	text-align: justify;
	z-index: 1;
}

.wp-block-pullquote blockquote:before, 
.wp-block-pullquote blockquote:after{
	font-family: "Playfair Display", serif;
	font-size: 250px;
	color: var(--lt-rust);
	line-height: 170px;
	position: absolute;
	opacity: 0.5;
}

.wp-block-pullquote blockquote:before {
	content: '“';
	left: 0px;
	top: 0;
	z-index: 0;
}

.wp-block-pullquote blockquote:after {
	bottom: 0;
	content: '”';
	right: 40px;
	z-index: 0;
}

.wp-block-pullquote blockquote {

	border-left: 1px solid var(--lt-moss);
	margin-right: 50px;
}

.wp-block-pullquote cite {
	color: var(--moss);
	font-family: "Playfair Display", serif;
	font-size: 20px;
	margin-top: -50px;
	padding-left: 40px;
}


/* ---------------
3. NAVIGATION
----------------- */
.site-header{
	background: linear-gradient(180deg,rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, 0) 100%) !important;
}
.main-navigation a{
	font-weight: 700;
}
.main-navigation a::after{
	  background-color: white;
      bottom: 10px;
	  content: "";
      height: 1px;
      left: 20px;
	position: absolute;
	transform: scaleX(0);
      transform-origin: bottom right;
      transition: transform 0.5s ease-out;
	width: calc(100% - 40px);
}
.main-navigation a:hover::after{
		transform: scaleX(1);
      transform-origin: bottom left;
}
.main-navigation .current-menu-item > a::after{
	transform: scaleX(1);
}
.has-inline-mobile-toggle #site-navigation.toggled{
	background-color: rgb(63, 70, 48, 0.8);
}
@media (min-width:769px){
	.main-nav .gp-icon{
		display: none;
	}
}
@media (max-width: 781px){
	.site-footer .wp-block-group.row-continer, .site-footer .wp-block-group.row-continer .wp-block-group__inner-container{
		padding: 0px;
	}
	.site-footer .wp-block-column:last-child{
		align-items: flex-start !important;
	}
}
/* ---------------
4. HOMEPAGE
----------------- */
/* ---------------
-- 4.1 HOMEPAGE HERO
----------------- */
.home-hero{
	color: white;
}
.home-hero .wp-block-button__link{ 
	border: 1px white solid;
	color: white;
}
.home-hero .wp-block-button__link:hover{
	background-color: var(--lt-plum);
}
/* ----------------------
5. SINGLE PAGES AND POSTS
----------------------- */

/* ---------------
6. FOOTER
----------------- */
.site-footer .wp-block-group__inner-container{
	padding-left: 40px;
	padding-right: 40px;
}
.site-footer .wp-block-column:last-child{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.site-footer .row-container{
	width: fit-content;
}
.site-footer a{
	color: white !important;
	font-family: "Playfair Display SC", serif;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}
.site-footer svg{
	height: 20px;
	margin-bottom: -5px;
}
.site-footer svg path{
	fill: white
}

.site-footer .badges,
.site-footer .badges .wp-block-group__inner-container {
	padding: 0px;
	text-align: left;
}

.site-footer .badges .wp-block-image {
	display: inline-block !important;
	max-width: 150px;
	padding: 0 10px 0 0;
}