/* General typography styles */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-block-start: 0;
}

/* Custom block style for Media & Text block: Card */
.wp-block-media-text.is-style-card {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
	border-radius: 3em;
	overflow: hidden;

	& > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--70);
	}
}
@media screen and (max-width: 767px) {
	.wp-block-media-text.is-style-card > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--50);
	}
}

/* Admin only styles */
@media (max-width: 782px) {
	#wpadminbar {
		overflow-x: hidden;
	}
}

/* Footer */
footer {
	margin: 0;
}

/* Mobile navigation menu */
.wp-block-navigation__responsive-dialog {
	padding: 2em;
}
.wp-block-navigation__responsive-container-close {
	margin: 2em;
}

/* Forms, Inputs, & Buttons */
.nf-form-cont
	input:not(
		[type='submit'],
		[type='button'],
		[type='checkbox'],
		[type='radio']
	),
.nf-form-cont select,
.nf-form-cont textarea {
	padding: 1em;
	border-radius: 2em;
	border: 1px solid var(--wp--preset--color--custom-primary);
	color: var(--wp--preset--color--custom-primary);
	box-shadow: 0.3em 0.3em
		rgb(from var(--wp--preset--color--custom-primary) r g b / 0.25);
	font-family: inherit;
}

.nf-form-cont textarea {
	resize: vertical;
	min-height: 1em;
}
.wp-block-navigation-link.button,
input[type='submit'],
input[type='button'] {
	background-color: var(--wp--preset--color--custom-primary);
	border-width: 0;
	color: var(--wp--preset--color--custom-background);
	font-family: var(--wp--preset--font-family--grandstander);
	font-size: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 2em;
	cursor: pointer;
}

/* Utilities */
* {
	scroll-margin: var(--wp--preset--spacing--80);
}

picture[style*='width'] img {
	width: inherit;
}
picture[style*='height'] img {
	height: inherit;
}

@media screen and (max-width: 767px) {
	.mobile-justify-center {
		justify-content: center;
	}
	.mobile-text-align-center {
		text-align: center;
	}
	.mobile-text-align-left {
		text-align: left;
	}
	.mobile-width-100 {
		width: 100%;
	}
}
.sticky-order-image {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 1;

	img {
		transition: transform 0.5s cubic-bezier(0.47, 1.64, 0.41, 0.8);
	}

	& a:hover img,
	& a:focus img {
		transform: rotate(360deg) scale(1.1);
	}
}