/* Styles for Bellissimo Theme for erinwilsonmusic.com */

:root {
	--forest: #3A4928;
	--leaf: #659051;
	--fern: #4B6B3C;
	--bark: #3B2E1E;
	--chestnut: #894B32;
	--light-brown: #907A48;
	--sand: #D4BF88;
	--parchment: #EFEAD2;
	--white: #FAF8F0;
	--white-film: rgba(250, 248, 240, .75);
	--color-white: var(--parchment);
	--smoke: #0E0B07;
	--black: var(--smoke);
	--color-black: var(--smoke);
	--sunflower: #FFBF00;
	--yellow: var(--sunflower);

	--font-size-sx: calc(calc(var(--font-size-xs) + var(--font-size-sm)) / 2);
	--font-size-ms: calc(calc(var(--font-size-md) + var(--font-size-sm)) / 2);
	--font-size-ml: calc(calc(var(--font-size-md) + var(--font-size-lg)) / 2);
	--font-size-lx: calc(calc(var(--font-size-xl) + var(--font-size-lg)) / 2);

	--button-border-radius: 8px;
	--button-background: var(--fern);
	--button-background-hover: var(--fern);
	transition: all .5s;
	--button-border: 2px solid var(--button-background);
	--button-border-hover: 2px solid var(--button-pseudo-background, var(--button-background-hover));
	--button-pseudo-background: var(--forest);
	--button-secondary-background: transparent;
	--button-secondary-background-hover: transparent;

	--ecw-transition: all ease-in 100ms;
	--ecw-border-radius: 1rem;
	--ecw-filter: blur(2px) saturate(115%);
	
	--faq-item-border: 1px solid var(--bark);

}

body.single-post {
	--body-font-size: var(--font-size-ml) !important;
}

.button,
button {
	transition: box-shadow .75s ease !important;

}

.button.button-secondary,
button.button-secondary {
	--button-secondary-color: var(--fern);
	--button-secondary-color-hover: var(--white);
	--button-pseudo-background: var(--chestnut);
	--button-border-hover: 2px solid var(--button-pseudo-background, var(--button-background-hover));
}

.button-chestnut .button,
.button.button-chestnut {
	--button-color: var(--white);
	--button-background: var(--chestnut);
	--button-border: 2px solid var(--chestnut);
	--button-pseudo-background: var(--fern);
	--button-border-hover: 2px solid var(--fern);
}

.button:not(.button-link):hover {
	box-shadow: inset 8em 0 0 0 var(--button-pseudo-background), inset -8em 0 0 0 var(--button-pseudo-background);
}

.button.button-link {
	--button-border: none;
	--button-border-hover: none;
	--button-text-decoration-hover: underline;
	--button-color-hover: var(--sunflower);
	gap: 4px;
	transition: var(--ecw-transition);
	padding: 0;
}

.button.button-link:hover {
	gap: 8px;
}

.wp-block-cover.is-light .button.button-link {
	--button-color: var(--leaf);
	--button-color-hover: var(--leaf);
}


/* Starter preheading, heading, and subheading styling with variables */
.preheading {
	color: var(--preheading-color, inherit);
	font-size: var(--font-size-ms);
	font-family: var(--preheading-font-family, var(--body-font-family, inherit));
	font-weight: var(--preheading-font-weight, 400);
	font-style: var(--preheading-font-style, inherit);
	line-height: var(--preheading-line-height, 1.1);
	text-transform: var(--preheading-text-transform, uppercase);
	text-decoration: var(--preheading-text-decoration, none);
	letter-spacing: var(--preheading-letter-spacing, 1px);
}

.heading {
	color: var(--heading-color, inherit);
	font-size: var(--font-size-xxxxl);
	font-family: var(--heading-font-family, inherit);
	font-weight: var(--heading-font-weight, 600);
	font-style: var(--heading-font-style, inherit);
	line-height: var(--heading-line-height, 1.1);
	text-transform: var(--heading-text-transform, none);
	text-decoration: var(--heading-text-decoration, none);
	letter-spacing: var(--heading-letter-spacing, normal);
}

.subheading {
	color: var(--subheading-color, inherit);
	font-size: var(--subheading-font-size, 2rem);
	font-family: var(--subheading-font-family, var(--body-font-family, inherit));
	font-weight: var(--subheading-font-weight, 600);
	font-style: var(--subheading-font-style, inherit);
	line-height: var(--subheading-line-height, 1.1);
	text-transform: var(--subheading-text-transform, none);
	text-decoration: var(--subheading-text-decoration, none);
	letter-spacing: var(--subheading-letter-spacing, normal);
}

html {
	scroll-behavior: smooth;
}

/* WP Overrides */
:root :where(.wp-block-cover h1:not(.has-text-color)),
:root :where(.wp-block-cover h2:not(.has-text-color)),
:root :where(.wp-block-cover h3:not(.has-text-color)),
:root :where(.wp-block-cover h4:not(.has-text-color)),
:root :where(.wp-block-cover h5:not(.has-text-color)),
:root :where(.wp-block-cover h6:not(.has-text-color)) {
	color: var(--heading-color, var(--color-heading));
}

:root :where(.wp-block-cover p:not(.has-text-color)) {
	color: var(--body-color, var(--color-body));
}

.curved img {
	border-radius: var(--ecw-border-radius);
}

/* Menu */
a.site-title-link {
	--link-filter-hover: none;
	--link-color-hover: var(--sunflower);
}

.menu-item-link-current,
.menu-item-link:focus-visible,
.menu-item-link:hover {
	filter: none;
	color: var(--sunflower);
}

/* Home Header Hero */
@media only screen and (min-width: 782px) {
	.home-hero span.wp-block-cover__background {
		opacity: 0 !important;
	}

	.home-hero-mobile-image {
		visibility: hidden;
	}
}

.home-hero-content {
	background: var(--white-film);
	padding: var(--spacing-xl)var(--spacing-lg);
	border-radius: var(--ecw-border-radius);
	backdrop-filter: var(--ecw-filter);
	-webkit-backdrop-filter: var(--ecw-filter);
	isolation: isolate;
}

.home-hero-content {
	--body-color: var(--bark);
	color: var(--bark);
}

.home-hero-mobile-image img {
	border-radius: var(--ecw-border-radius);
}

/* Homepage Services */
.services h3 em {
	font-family: var(--body-font-family);
	font-style: normal;
	text-transform: uppercase;
	font-size: var(--font-size-md);
	letter-spacing: 2px;
	display: block;
}

/* Forest Block */
.forest-block-inner {
	background: var(--white-film);
	border-radius: var(--ecw-border-radius);
	padding: var(--spacing-xl);
	backdrop-filter: var(--ecw-filter);
	-webkit-backdrop-filter: var(--ecw-filter);
}

/* Popup Maker */
button.pum-close {
	border: 2px solid var(--bark) !important;
}

button.pum-close:hover {
	background: transparent !important;
	color: var(--bark) !important;
}

/* Footer */
.footer-credits p {
	color: var(--white);
	--link-color: var(--white);
	--link-color-hover: var(--sunflower);
}