/*
Theme Name: The Wizard Workshop Child
Description: Update-safe child theme for The Wizard Workshop.
Author: The Wizard Workshop
Template: generatepress
Version: 0.15.0
Text Domain: the-wizard-workshop-child
*/

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/SourceSerif4Display-Semibold.ttf.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/SourceSans3-Regular.ttf.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/SourceSans3-Semibold.ttf.woff2") format("woff2");
}

:root {
	/* Colour */
	--tww-color-midnight: #0b132b;
	--tww-color-forest: #163a2b;
	--tww-color-amber: #f2a93b;
	--tww-color-brass: #b08d57;
	--tww-color-parchment: #f4e8cc;
	--tww-color-ink: #211a15;
	--tww-color-crystal: #a9dff5;
	--tww-color-ember: #b64035;

	/* Typography */
	--tww-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--tww-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
	--tww-font-weight-regular: 400;
	--tww-font-weight-semibold: 600;

	/* Spacing */
	--tww-space-1: 0.25rem;
	--tww-space-2: 0.5rem;
	--tww-space-3: 0.75rem;
	--tww-space-4: 1rem;
	--tww-space-5: 1.5rem;
	--tww-space-6: 2rem;
	--tww-space-7: 3rem;
	--tww-space-8: 4rem;
	--tww-space-9: 6rem;
	--tww-section-space: clamp(var(--tww-space-7), 7vw, var(--tww-space-9));
	--tww-page-gutter: 1.25rem;

	/* Layout and controls */
	--tww-content-max: 72rem;
	--tww-prose-max: 42rem;
	--tww-target-min: 2.75rem;
	--tww-radius-control: 0.375rem;
	--tww-focus-ring: 0 0 0 2px var(--tww-color-parchment), 0 0 0 5px var(--tww-color-midnight);

	/* Motion */
	--tww-motion-feedback: 120ms;
	--tww-motion-interface: 200ms;
	--tww-motion-transition: 350ms;
	--tww-motion-entrance: 1200ms;
	--tww-motion-reduced-fade: 100ms;
	--tww-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 48rem) {
	:root {
		--tww-page-gutter: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--tww-motion-feedback: 0ms;
		--tww-motion-interface: 0ms;
		--tww-motion-transition: 0ms;
		--tww-motion-entrance: 0ms;
	}
}

body {
	background-color: var(--tww-color-parchment);
	color: var(--tww-color-ink);
	font-family: var(--tww-font-body);
	font-weight: var(--tww-font-weight-regular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tww-font-display);
	font-weight: var(--tww-font-weight-semibold);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	box-shadow: var(--tww-focus-ring);
	outline: 0;
}

.page-id-20 .entry-title,
.page-id-20 .entry-content > h2:first-child,
.page-id-21 .entry-content > p:first-child {
	text-align: center;
}

:where(.wp-element-button, button, input[type="submit"], input[type="button"], input[type="reset"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button) {
	background-color: var(--tww-color-amber);
	border: 2px solid var(--tww-color-brass);
	border-radius: var(--tww-radius-control);
	color: var(--tww-color-ink);
	font-family: var(--tww-font-body);
	font-weight: var(--tww-font-weight-semibold);
	min-block-size: var(--tww-target-min);
	padding: var(--tww-space-3) var(--tww-space-5);
	transition: background-color var(--tww-motion-feedback) var(--tww-ease-standard), border-color var(--tww-motion-feedback) var(--tww-ease-standard), box-shadow var(--tww-motion-feedback) var(--tww-ease-standard), color var(--tww-motion-feedback) var(--tww-ease-standard), transform var(--tww-motion-feedback) var(--tww-ease-standard);
}

:where(.wp-element-button, button, input[type="submit"], input[type="button"], input[type="reset"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button):hover {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-amber);
	box-shadow: 0 0 0 2px rgb(169 223 245 / 20%), 0 0 1rem rgb(169 223 245 / 28%);
	color: var(--tww-color-ink);
}
