/*
Theme Name: Joyful Mysteries
Theme URI: https://joyfulmysteries.com
Description: Child theme of Twenty Twenty-Four. Content site for Catholic printables that link out to Etsy and Teachers Pay Teachers.
Author: Bancroft Place Digital LLC
Template: twentytwentyfour
Version: 1.5.3
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: joyful-mysteries
*/

:root {
	--jm-cream: #faefa5;
	--jm-sky: #bbd9f5;
	--jm-teal: #74d4ce;
	--jm-marigold: #f9c651;
	--jm-link: #1e6fa8;
	--jm-outline-ink: #2a1f17;
	--jm-brown: #43301f;
	--jm-page: #fffcf5;
	--jm-outline: 2px solid var(--jm-outline-ink);
}

body {
	background-color: var(--jm-page);
	color: #3b2e23;
	font-family: "EB Garamond", Georgia, serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-query-title,
.wp-block-heading {
	font-family: "EB Garamond", Georgia, serif;
	font-weight: 500;
	color: var(--jm-brown);
}

.wp-block-site-title,
.wp-block-site-title a,
.wp-block-navigation,
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__label {
	font-family: "Baloo 2", sans-serif;
	font-weight: 700;
}

a {
	color: var(--jm-link);
}

/*
 * Default outlined buttons and image frames.
 * Shop colour, leaving arrow, cards, burst, aside: Additional CSS class(es).
 */
body .wp-block-button .wp-block-button__link.wp-element-button,
body .wp-element-button,
body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 48px;
	border: var(--jm-outline);
	border-radius: 999px;
	padding: 0.7em 1.3em;
	background-color: var(--jm-cream);
	color: var(--jm-brown);
	font-family: "Baloo 2", sans-serif;
	font-weight: 600;
	text-decoration: none;
}

body .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--jm-ink, var(--jm-outline-ink));
}

.wp-block-image:not(.wp-block-site-logo) img,
.wp-block-post-featured-image img,
.wp-block-cover,
.wp-block-media-text .wp-block-media-text__media img,
.wp-block-gallery .wp-block-image img {
	border: var(--jm-outline);
	border-radius: 12px;
}

.wp-block-site-logo img,
.custom-logo {
	border: 0;
	border-radius: 0;
}

/*
 * Outline system — apply via block Additional CSS class(es).
 * Do not copy these rules into page or Custom CSS.
 * jm-framed | jm-rule | jm-out jm-out--etsy|tpt|free | jm-burst | jm-aside
 */
:root {
	--jm-ink: #2a1f17;
	--jm-outline: 2px solid var(--jm-ink);
}

.jm-framed {
	border: var(--jm-outline);
	border-radius: 12px;
	overflow: hidden;
}

.jm-rule {
	height: 0;
	border-top: 4px dotted var(--jm-ink);
	margin: 2rem 0;
}

hr.wp-block-separator.jm-rule {
	background: none;
	border: 0;
	border-top: 4px dotted var(--jm-ink);
	height: 0;
	width: 100%;
}

.jm-out {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 48px;
	border: var(--jm-outline);
	border-radius: 999px;
	padding: 0.7em 1.3em;
	font-family: "Baloo 2", sans-serif;
	font-weight: 600;
	color: var(--jm-ink);
	text-decoration: none;
}

.jm-out--etsy {
	background: var(--wp--preset--color--cream);
}

.jm-out--tpt {
	background: var(--wp--preset--color--sky);
}

.jm-out--free {
	background: var(--jm-ink);
	color: #fffcf5;
}

.jm-out::after {
	content: "→";
}

.wp-block-button.jm-out {
	border: 0;
	background: none;
	padding: 0;
	min-height: 0;
	box-shadow: none;
}

.wp-block-button.jm-out::after {
	content: none;
}

.wp-block-button.jm-out .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 48px;
	border: var(--jm-outline);
	border-radius: 999px;
	padding: 0.7em 1.3em;
	font-family: "Baloo 2", sans-serif;
	font-weight: 600;
	color: var(--jm-ink);
	text-decoration: none;
}

.wp-block-button.jm-out .wp-block-button__link::after {
	content: "→";
}

.wp-block-button.jm-out--etsy .wp-block-button__link {
	background: var(--wp--preset--color--cream);
}

.wp-block-button.jm-out--tpt .wp-block-button__link {
	background: var(--wp--preset--color--sky);
}

.wp-block-button.jm-out--free .wp-block-button__link {
	background: var(--jm-ink);
	color: #fffcf5;
}

.jm-burst {
	background: var(--jm-ink);
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 5rem;
	clip-path: polygon(
		50% 0%,
		63.4% 17.7%,
		85.4% 14.6%,
		82.3% 36.6%,
		100% 50%,
		82.3% 63.4%,
		85.4% 85.4%,
		63.4% 82.3%,
		50% 100%,
		36.6% 82.3%,
		14.6% 85.4%,
		17.7% 63.4%,
		0% 50%,
		17.7% 36.6%,
		14.6% 14.6%,
		36.6% 17.7%
	);
}

.jm-burst > * {
	background: var(--wp--preset--color--marigold);
	clip-path: inherit;
	width: calc(100% - 5px);
	height: calc(100% - 5px);
	display: grid;
	place-items: center;
	font-family: Caveat, cursive;
	font-weight: 700;
}

.jm-aside {
	font-family: Caveat, cursive;
	font-weight: 700;
	font-size: 1.35rem;
	color: #c4562c;
}

.jm-eyebrow {
	font-family: "Baloo 2", sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--jm-brown);
}

.jm-wordmark,
.jm-wordmark a {
	font-family: "Baloo 2", sans-serif;
	font-weight: 700;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.1;
	color: var(--jm-brown);
	text-decoration: none;
	margin: 0;
}

.jm-wordmark a:hover {
	color: var(--jm-link);
}

.wp-block-image.is-style-rounded img,
.jm-circle img {
	border-radius: 999px;
}

.jm-email-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	justify-content: center;
}

.jm-email-form input[type="email"] {
	min-height: 48px;
	min-width: 16rem;
	border: var(--jm-outline);
	border-radius: 999px;
	padding: 0.7em 1.3em;
	font-family: "EB Garamond", Georgia, serif;
	font-size: 1.1rem;
	background: var(--jm-page);
	color: var(--jm-brown);
}

.jm-footer,
.jm-footer .wp-block-site-title,
.jm-footer .wp-block-site-title a,
.jm-footer .wp-block-navigation a,
.jm-footer .wp-block-navigation .wp-block-navigation-item__label {
	color: var(--jm-page);
}

.jm-footer .wp-block-site-title a {
	font-family: "Baloo 2", sans-serif;
	font-weight: 700;
	text-decoration: none;
}