/******************************************************************

Stylesheet: Main Stylesheet

Here's where the magic happens. Here is where you import
all of your Sass files so they can compile into one
CSS file. 

******************************************************************/

.hide-for-small {
	display: none !important;
}
@media screen and (min-width: 1025px) {
	.hide-for-large {
		display: none !important;
	}
}
@media screen and (min-width: 1025px) {
	.show-for-large {
		display: initial !important;
	}
}


.site-branding .custom-logo {
	padding: 20px;
}


.mobile-only-break {
	display: none;
}
@media (max-width: 768px) {
    .mobile-only-break {
    	display: block;
    }
}
.desktop-only-break {
	display: none;
}
@media (min-width: 1024px) {
	.desktop-only-break {
		display: block;
	}
}


h1.hero-title {
	font-size: clamp(50px, 8vw, 130px) !important;

	.home & {
		font-size: clamp(70px, 9vw, 167px) !important;
	}
}
h2.hero-title {
	font-size: clamp(40px, 7vw, 120px) !important;
}



.font-weight-normal {
	font-weight: normal;
}

.image-shadow {
	box-shadow: 20px -20px 0 0 var(--global-palette1);
}
@media screen and (min-width: 1025px) {
	.image-shadow {
		box-shadow: 30px -30px 0 0 var(--global-palette1);
	}
}


body.bg-flower.content-style-unboxed .site, 
body.single-download .site,
body.single-post .site {
	background: 
	url('../images/bg-flower.png'),
	url('../images/bg-flower.png');
	background-color: white;
    background-repeat: no-repeat;
    background-position: right -650px top 0, left -650px bottom 20%;
}
body.bg-flower.transparent-header {
	background-position: right -650px top 20%, left -650px bottom 20%;
}


/*********************
HEADER
*********************/

.site-header-row-container-inner .site-container {
    max-width: 1920px;
}
.transparent-header {
	& .site-branding .custom-logo {
		filter: invert(100%);
	}
	& #mobile-toggle svg line {
	    stroke: white;
	}
	& .joints-cart-icon svg {
		fill: white;
	}
	& .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button {
		color: black;
		background: white;

		&:hover {
			color: var(--global-palette1);
		}
	}
	& .kadence-sticky-header.item-is-stuck:not(.item-at-start) {
		& .site-branding .custom-logo {
			filter: invert(0);
		}
		& #mobile-toggle svg line {
		    stroke: black;
		}
		& .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button {
			color: white;
			background: black;
		}
		& .joints-cart-icon svg {
			fill: black;
		}
	}
	& .site-main-header-wrap .site-header-row-container-inner {
		transition: 0.2s ease-out background;
	}

}

.kadence-sticky-header.item-is-stuck:not(.item-at-start) {

	& .site-header-row-container-inner {
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
		background: white !important;
	}
}
.popup-drawer.active .drawer-overlay {
    backdrop-filter: blur(4px);
	background-color: rgba(0,0,0,0);
}
#mobile-drawer.popup-drawer {
	& .menu-toggle-close {
		margin-right: -10px;
	}
	& .drawer-inner {
		max-width: 100%;
	}
	@media screen and (min-width: 768px) {
		& .drawer-content {
			padding: 0 4rem 4rem;
		}
	}
}
.mobile-navigation ul li a {
    padding-top: 0.6em;
    padding-bottom: 0.3em;
    padding-left: 0;
	padding-right: 0;
}

#mobile-toggle {
	& .menu-toggle-icon svg {
		filter: drop-shadow(0px 0px 0 rgba(248, 155, 22, 0.3));
		transition: 0.1s ease-out all;
	}
	&:hover {
		& .menu-toggle-icon svg {
			filter: drop-shadow(-3px 2px 3px rgba(248, 155, 22, 1));
		}
	}
}

.mobile-header-button-wrap {
	margin-right: 20px;
	
	@media screen and (max-width: 639px) {
		display: none;
	}
	@media screen and (min-width: 1024px) {
		margin-right: 30px;
	}
}



.joints-cart-icon {
	display: flex;
	align-items: center;
	position: relative;
	margin-right: 15px;
	@media screen and (min-width: 1024px) {
		margin-right: 25px;
	}

	& svg {
		width: 40px;
		height: 40px;
		fill: black;
		display: block;
		filter: drop-shadow(0px 0px 0 rgba(248, 155, 22, 0.3));
		transition: 0.1s ease-out all;
	}
	&:hover svg {
		filter: drop-shadow(-3px 2px 3px rgba(248, 155, 22, 1));
	}
	& .cart-indicator {
		position: absolute;
		top: -2px;
        right: -3px;
		height: 16px;
		width: 16px;
		background: transparent;
		border-radius: 50%;
	}
	&.active .cart-indicator {
		background: var(--global-palette1); /* e.g., highlight when cart has items */
	}

}

/*********************
FONTS
*********************/

	

/*********************
BUTTONS
*********************/

.kb-button.kb-btn-global-fill {
    border: 2px solid var(--global-palette-btn-bg);
    border-radius: 0;
}

.button-longdash {
	
	& p {
		display: inline-block;
		transition: 0.1s ease-out all;

		&::before {
			content: " ";
			display: inline-block;
			margin-right: 10px;
			height: 4px;
			width: 55px;
			background-color: var(--global-palette1);
			vertical-align: middle;
			transform: translateY(-60%);
			transition: 0.1s ease-out all;
		}
	}
	&:hover {
		& p {
			text-shadow: -2px 2px #f7f7f7; 

			&::before {
				transform: translate(3px, -60%);
			}
		}
	}
}

.button-style-secondary {
	transition: 0.1s ease-out all;

	& .kt-btn-inner-text::before {
		content: " ";
		display: inline-block;
		margin-right: 10px;
		height: 4px;
		width: 80px;
		background-color: var(--global-palette1);
		vertical-align: middle;
		transform: translateY(-60%);
		transition: 0.1s ease-out all;
	}
	&:hover .kt-btn-inner-text {				
		&::before {
			transform: translate(3px, -60%);
		}
	}
}

.post-more-link, .kt-blocks-post-readmore {
	display: inline-block;
	transition: 0.1s ease-out all;
	font-size: 16px !important;
	text-transform: uppercase;
	font-weight: normal !important;

	&::before {
		content: " ";
		display: inline-block;
		margin-right: 10px;
		height: 4px;
		width: 80px;
		background-color: var(--global-palette1);
		vertical-align: middle;
		transform: translateY(-60%);
		transition: 0.1s ease-out all;
	}
	
	&:hover {
		text-shadow: -2px 2px #f7f7f7; 

		&::before {
			transform: translate(3px, -60%);
		}
	}
	& .kadence-svg-iconset {
		display: none;
	}
}



/* 
.wp-block-button__link {

}
.wp-block-button__link::after {

}
@media screen and (min-width: 768px) {
	.wp-block-button__link::after {
	
	}
}
.wp-block-button__link:hover::after {
   
} */


/*********************
ANIMATIONS
*********************/

.kb-query-item {
	transition: 2s all ease-in-out;
	opacity: 0;
	animation: fadeIn 1.5s 1;
	animation-fill-mode: forwards;
	animation-delay: 0ms;
}

.fadein {
	animation: fadeIn 0.9s 1;
	animation-fill-mode: forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}


/*********************
OTHER ELEMENTS
*********************/

.edd-blocks__download {

	& .download-title {
		transition: 0.2s ease-out color;
	}
	& .edd-blocks__download-content {
		font-size: 18px;
	}
	& .kb-query-item {
    	overflow: visible !important;

		&.download {
			& .download-title {
				font-size: 20px;
			}
			& .wp-block-post-excerpt__excerpt {
				margin-bottom: 0.5rem;
				font-family: futura-pt-condensed, sans-serif;
				line-height: 1.3;
			}
			& .download-learn-more {
				font-size: 16px;

				& .kt-btn-inner-text::before {
					width: 55px;
				}
			}
		}
		
    }
    & .wp-block-post-excerpt__excerpt {
    	margin-bottom: 10px;
    }
	& .excerpt {
		margin-bottom: 0.8rem;
	}
}
.edd-blocks__download-image, .edd-blocks__download-image-link {
	margin-bottom: 0;
	position: relative;
	display: block;
	filter: drop-shadow(-20px 23px 0 rgba(248, 155, 22, 0.3));
	transform: translateZ(0);
	will-change: transform;
	transition: all 0.1s ease-out;

	& a {
		display: inline-block;
		border: 1px solid #F7F4ED;
		transform: translateZ(0);
		will-change: transform;
		transition: all 0.1s ease-out;
		
	}
}
.edd-blocks__download-image-link:hover {
	filter: drop-shadow(-20px 23px 0 rgba(248, 155, 22, 0.6));

	& a {
		transform: translateY(-3px);
	}
}

/*.edd-blocks__download-image-link img {
	border: 1px solid #ccc;
	filter: drop-shadow(-20px 23px 0 rgba(248, 155, 22, 0.6));
	transform: translateZ(0);
	transition: filter 0.1s linear;
}*/

 .edd-blocks__buy-button {
	padding: 1rem;
	background-color: var(--global-palette7);
 }

.edd-learn-more a {
    display: inline-block;
    margin-top: 0.5em;
    color: #0073aa;
    text-decoration: underline;
}
.edd-learn-more a:hover {
    color: #005177;
}
.edd-submit.button {
	background: var(--global-palette1) !important;
	color: white !important;
	border: 2px solid var(--global-palette-btn-bg) !important;
	font-size: 18px !important;

	&:hover {
		background: #f7f7f7 !important;
		color: var(--global-palette-btn-bg) !important;
		border-color: var(--global-palette-btn-bg) !important;

	}
}


.single-download {
	/* h2 {
		font-size: clamp(2rem, 1vw, 2.2rem);
	}
	h3 {
		font-size: clamp(1.8rem, 1vw, 2rem);
	}
	h4 {
		font-size: clamp(1.6rem, 1vw, 1.8rem);
	}
	h5 {
		font-size: clamp(1.4rem, 1vw, 1.6rem);
	} */

	/* &.download-cat_print-music {
		.edd_download_purchase_form {
			display: none;
		}
	} */
}


.edd_download_purchase_form {
    /* display: flex; */

	& div {
		margin-right: 5px !important;
	}
	& .edd_price_options li label, & .edd_price_options li input {
		cursor: pointer;
		transform: scale(1.5);
	}
}
.edd-learning-track-notice {
	padding: 15px;
    background: var(--global-palette7);
	font-size: 80%;
}



.posts-query-loop {
	&.grid-cols, & .kt-post-grid-wrap {
		row-gap: 4rem;
	}
	@media screen and (min-width: 768px) {
		&.grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
			grid-template-columns: 2fr 5fr;
		}
	}
	& .post-thumbnail, & .featured-image, & .kadence-post-image-inner-wrap {

			margin-left: 10px;
			margin-top: 13px;
			filter: drop-shadow(-10px -13px 0 rgba(248, 155, 22, 0.3));
			border: 1px solid #f0f0f0;
			background: #f7f7f784;
			transform: translateZ(0);
			transition: filter 0.1s ease-out;

			&:hover {
				filter: drop-shadow(-10px -13px 0 rgba(248, 155, 22, 1));
			}

	}
	& .kadence-post-image {
		@media screen and (max-width: 767px) {
			max-width: 320px;
		}
	}
	& .post-title {
		margin-top: 0;
		font-size: 20px;
		@media screen and (min-width: 1024px) {
			font-size: 24px;
		}
	}
	& .entry-content {
		& p {
			margin-bottom: 0.5em;
			@media screen and (min-width: 641px) {
				margin-bottom: 1em;
			}
		}
	}
	& .taxonomy-category {
		margin-bottom: 0.8em;
		font-size: 16px;
		text-transform: uppercase;
	
		& a {
			text-decoration: none;
		}
	}
}

.latest-news-query-loop {
	@media screen and (min-width: 768px) {
		&.grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
			grid-template-columns: 1fr 1fr;
		}
	}
	& .post-thumbnail, & .featured-image, & .kadence-post-image-inner-wrap {
		margin-right: 20px;
		filter: drop-shadow(20px -23px 0 rgba(248, 155, 22, 1));
		border: 1px solid #f0f0f0;
		background: #f7f7f784;

		@media screen and (min-width: 768px) {
			order: 2;
		}
	}
	& .entry-content-wrap {
		@media screen and (min-width: 768px) {
			margin-top: 5rem;
		}
	}
	& .post-title {
		margin-top: 0;
		font-size: 20px;
		@media screen and (min-width: 1024px) {
			font-size: 24px;
		}
	}
	& .entry-content {
		& p {
			margin-bottom: 0.5em;
			@media screen and (min-width: 641px) {
				margin-bottom: 1em;
			}
		}
	}
	& .entry-taxonomies {
		margin-top: 1em;
		margin-bottom: 0.5em;
		font-size: 24px;
		text-transform: uppercase;
		font-family: 'futura-pt-condensed', sans-serif;
	
		& a {
			text-decoration: none;
			font-weight: normal;
		}
	}
}

.featured-score-query-loop {
	& .post-thumbnail, & .featured-image, & .kadence-post-image-inner-wrap {
		margin-left: 10px;
		filter: drop-shadow(-20px 23px 0 rgba(248, 155, 22, 0.3));
		border: 1px solid #f0f0f0;
		background: #f7f7f784;
	}
	& .post-title {
		margin-top: 0;
	}
}

.featured-album-query-loop {
	@media screen and (min-width: 768px) {
		&.grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
			grid-template-columns: 1fr 1fr;
		}
	}
	& .post-thumbnail, & .featured-image, & .kadence-post-image-inner-wrap {
		margin-bottom: 2em !important;
		margin-left: 10px;
		filter: drop-shadow(-20px 23px 0 rgba(248, 155, 22, 0.3));
		border: 1px solid #f0f0f0;
		background: #f7f7f784;
	}
	& .entry-content-wrap {
		@media screen and (min-width: 768px) {
			margin-top: 5rem;
		}
	}
	& .post-title {
		margin-top: 0;
		font-size: 20px;
		@media screen and (min-width: 1024px) {
			font-size: 28px;
		}
	}
	& .entry-content {
		& p {
			margin-bottom: 0.5em;
			@media screen and (min-width: 641px) {
				margin-bottom: 1em;
			}
		}
	}
	& .entry-taxonomies {
		margin-top: 1em;
		margin-bottom: 0.5em;
		font-size: 24px;
		text-transform: uppercase;
		font-family: 'futura-pt-condensed', sans-serif;
	
		& a {
			text-decoration: none;
			font-weight: normal;
		}
	}
}





.catalogue-carousel {
	& .kadence-post-image {
		margin-left: 10px;
		margin-top: 13px;
		filter: drop-shadow(-10px 13px 0 rgba(248, 155, 22, 0.3));
		border: 1px solid #f0f0f0;
		background: #f7f7f784;
	}
	& .kb-splide .splide__track {
		overflow: visible;
	}
	&.kt-post-grid-layout-carousel .splide.kb-slider-arrow-position-outside-bottom-left .splide__arrows {
		left: 0;
	}
	& .kt-post-grid-layout-carousel-wrap[data-show-pause-button=true] .kb-post-grid-pause-button {
		bottom: -60px;
		right: 0;
	}
}



/*********************
FOOTER
*********************/

@media screen and (min-width: 1400px) {
	.lets-connect > .kt-row-column-wrap > .wp-block-kadence-column {
		margin-left: -80px;
	}
}

/* .site-footer .logo-white {

}
@media screen and (min-width: 1025px) {
	.site-footer .logo-white {

	}
} */