/*
 Theme Name:   Joost 2022
 Theme URI:    https://ogalweb.com
 Description:  A GeneratePress Child Theme Designed for Joost de Valk
 Author:       Kyle Van Deusen
 Author URI:   https://ogalweb.com
 Template:     generatepress
 Version:      2022.1
*/


/* --- START DEFAULT THEME TWEAKS --- */

/* Remove bottom margin on last paragraph in container (front end) */
.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

/* Remove bottom margin on last paragraph in container (editor) */
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}


/* Mobile Header Logo - Fixed width & height */

@media (max-width: 768px) {
	.header-image.is-logo-image {
		width: 200px;
		height: 26.8px;
	}
}


/* Set the main content area to a minimum of 65vh */
#main {
	min-height: 65vh;
}

body {

}

/* Site Wrapper to set overall site max width */
.site-wrapper {
	width: 100%;
	max-width: 1920px;

} 



/* HELPER CLASSES */

/* Standard Shadow(s) */

.shadow-standard {
	box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}

/* Max Width(s) */

.max-width-1024 {
	max-width: 1024px;
}


.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}

/* Margin Auto */

.margin-auto{
	margin-left: auto;
	margin-right: auto;
}

/* Position Properties */

.relative{
	position: relative;
}

.absolute{
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky{
	position: sticky;
	top: 24px;
}

/* Bottom align last child in card */
.even-cards .gb-inside-container, .even-cards {
  display: flex;
  height: 100%;
  flex-direction: column; 
}

.even-cards .gb-inside-container >*:last-child {
  margin-top: auto;
}

/* --- END DEFAULT THEME TWEAKS --- */

/* --- START SITE-SPECIFIC THEME TWEAKS --- */

/* Moible Menu Hamburger Icon */
.menu-toggle {
	padding-right: 0px;
}

/* Sticky Navigation */

.has-sticky-branding .main-nav .nav-cta {
	margin-top: 8px;
	margin-bottom: 8px;
}
.has-sticky-branding {
	background-color: var(--brand);
	padding: 0px 0px;
}


/* Mobile menu - background color */
.has-inline-mobile-toggle #site-navigation.toggled {
	background: var(--brand);
}

/* Mobile header tweaks */
@media (max-width: 768px) {

	.site-branding-container{
		max-width: 60%
	}
	
	.site-description{
		font-size: 12px;
		letter-spacing: 0.17em
	}
}

/* Stack logo and Tag line in header */

.site-branding-container {
    flex-direction: column;
    align-items: flex-start;
}

/* Site Description tweaks */
.site-description {
	padding-top: 4px;
	margin-top: 8px;
	border-top: 1px solid #ffffff10;
}

.main-navigation .main-nav ul li.current-page-ancestor a {
	color: #fff;
}


/* Primary Navigation - Contact Button */
@media (min-width: 1140px) {
.main-navigation .main-nav ul li.nav-cta a {
  background: #b9db42;
  color: var(--brand-900);
  padding: 1em 1.5em;
  margin-left: 16px;
  border-radius: 4px;
	line-height: 1;
	transition: .2s all ease-in-out;
  }
	
	.main-navigation .main-nav ul li.nav-cta a:hover {
  background: white;
	color: var(--brand-900) !important;
  transform: translatey(-4px);

  }	
}

/* Sticky Header - Target link adjustment */
:target:before {
content:"";
display:block;
height:90px; 
margin:-90px 0 0; 
}

/* Homepage - Hide background image on "Investments" card on tablet & mobile */
@media (max-width: 1140px) {
.tablet-white:after {
	background: white;
}
}

/* Left container background */

.left-container-bg{
	background-color: var(--brand-100);
	position: relative;
	padding-top: 24px;
	padding-right: 24px;
	padding-bottom: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.left-container-bg:before{
	content:'';
	width: 100vw;
	height: 100%;
	left: 0px;
	position: absolute;
	transform: translatex(-100vw);
	background-color: var(--brand-100);
	margin-top: -24px;
} 

/* Search Field */

.navigation-search input[type="search"] {
	background-color: var(--brand-900) ;
	opacity: 1;
	border: 1px solid var(--brand-500);
	color: var(--brand-100);
}

/* Quix headlines */
.quix-container h2,
.quix-container h3{
	margin-top: 80px !important;
}

/* Yoast FAQ */
.schema-faq-section {
margin-top: 40px;}

.schema-faq-answer img{
	margin-top: 20px;
}

/* Links */

p a,
li:not(.menu-item) a{
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to bottom, var(--brand-200) 0%, var(--brand-200) 100%);
  background-repeat: no-repeat;
  background-size: 100% 00%;
  background-position: 0 111%;
  -webkit-transition: background-size .25s ease-in;
  transition: background-size .25s ease-in;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 2px solid var(--brand-500);
  -webkit-transition: all 0.3s;
  transition: all 0.3s; 
	padding: 0em .1em;
}

p a:hover,
li:not(.menu-item) a:hover{
  background-size: 100% 100%;
}

/* Marketshare Posts */

.cms-marketshare-body h2:not(first-of-type),
.cms-marketshare-body h3, 
.cms-marketshare-body h4 {
	margin-top: 60px;
}

.gb-container-40b0fc03 h2,
.gb-container-40b0fc03 h3{
	margin-top: 0px;
}

.gb-container-40b0fc03 {
	margin-block: 60px;
}

.cms-marketshare-body p{
	line-height: 1.8;
}

.cms-marketshare-body li{
	line-height: 1.8;
	margin-bottom: 1em;
}

.cms-marketshare-body 	figcaption{
	color: var(--text-light);
	font-size: .8em;
	text-align: center;
}

.cms-marketshare-body .wp-block-image{
	border: 1px solid var(--brand-200);
	border-radius: 4px !important;
	box-shadow: 0px 10px 60px -10px var(--brand-200);
}

@media (min-width: 1025px) {
.cms-marketshare-body .wp-block-image{
	margin-left: -80px;
	margin-right: -80px;
	margin-block: 40px
	}
}

.marketshare-feat-img {
	margin-top: -250px;
}

@media (max-width: 768px)  {
.marketshare-feat-img {
	margin-top: -100px;
}
}


/* Blog Tweaks */
.blog-content-wrapper h2,
.blog-content-wrapper h3,
.blog-content-wrapper h4,
.blog-content-wrapper h5,
.blog-content-wrapper h6{
	margin-top: 48px;
}


.blog-content-wrapper p {
	line-height: 1.8;
	font-size: 1.25rem;
	margin-bottom: 2.25rem;
}

.blog-content-wrapper p code{
	font-size: 1.25rem;
	color: var(--brand-900);
	background-color: #B9DB4250;
	padding: 0px .2em;
 }

.blog-content-wrapper li{
	margin-bottom: 1em;
	font-size: 1.25rem
}

.blog-content-wrapper .author-name{
	font-size: 2.5rem;
	margin-bottom: 8px;
	line-height: 1.4
}

.blog-content-wrapper .author-bio {
	font-size: 1rem;
	line-height: 1.4;

}

.comments-area{
	background-color: var(--brand-100);
	padding: 120px 24px;
	position: relative;
	z-index: 50;
}

#comments {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}

.one-container .comments-area {
	margin-top: -1.5em;
}

.blog-content-wrapper .wp-block-preformatted {
	background-color: var(--brand-100);
	border: 1px solid var(--brand-200);
	border-radius: 4px;
}

.blog-content-wrapper .wp-block-quote{
	margin-left: 0px;

	background-color: var(--brand-100);
	border-radius: 4px;
	padding: 32px;
	border-left: 4px solid var(--accent)
}

.wp-block-quote p,
.wp-block-quote code
{
	font-family: Outfit;
	font-size: 1.5rem;
	color: var(--text-light);
}

.wp-block-quote.is-large:not(.is-style-plain), .wp-block-quote.is-style-large:not(.is-style-plain) {
	padding: 32px;
}

.wp-block-quote.is-large:not(.is-style-plain) p, .wp-block-quote.is-style-large:not(.is-style-plain) p{
	font-size: 1.5rem;
}

.wp-block-quote.is-large:not(.is-style-plain) cite, .wp-block-quote.is-large:not(.is-style-plain) footer, .wp-block-quote.is-style-large:not(.is-style-plain) cite, .wp-block-quote.is-style-large:not(.is-style-plain) footer {
    font-size: .7em;
	text-transform: uppercase;
	font-style: normal;
}

blockquote{
	border-left: 5px solid var(--brand-500);
}

.wp-block-quote cite{
	text-transform: uppercase;
	font-size: .7em;
	font-style: normal;
	letter-spacing: .04em;
}

.wp-block-embed figcaption {
	font-size: .8rem;
	max-width: 70%;
	color: var(--text-light);
	margin-bottom: 20px;
}

table{
 margin-bottom: 0px
}

/* Blog Pagination */ 
.paging-navigation{
	margin-top: 24px;
}

.paging-navigation .nav-links .page-numbers
{
	background-color: var(--brand-100);
	color: var(--brand);
	border: 1px solid var(--brand-200);
	padding: .8em 2em;
	transition: .2s all ease-in;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
}

.paging-navigation .nav-links .page-numbers:hover
{
	background-color: var(--brand);
	color: var(--white);
	border: 1px solid var(--brand);
}

.paging-navigation .nav-links .current {
		background-color: var(--brand);
	color: var(--white);
	border: 1px solid var(--brand);
}


/* Gravity Forms Button */
.gform_button.button {
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-family: Outfit;
	transition: .2s all ease-in-out;
}

/* Serach on 404 */

.wp-block-search__button{
	background-color: var(--accent);
	border: none;
	border-radius: 4px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border: none;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
	border-radius: 4px !important;
	padding: 8px;
}

/* Marketshare TOC sidebar */

.cms-marketshare-body {
	position: relative;
	isolation: isolate;
}

.marketshare-toc{
	font-size: 1rem;	
}

.marketshare-toc li{
	font-size: 1rem;	
	margin-bottom: 0px;
}

.marketshare-toc ul{
	margin-left: 24px;
}

@media (min-width: 1554px) { 

.marketshare-toc h2{
	font-size: 1.75rem;
	margin-top: 0px !important;
}

.marketshare-toc {
	position: fixed;
	top: 25%;
	left: 2vw;
	background-color: var(--brand-100);
	border: 1px solid var(--brand-200);
	padding: 24px;
	max-width: 350px;
}

.header-wrap {
	background-color: #0D373B;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}