/*
Theme Name: Magnolia Beautification
Author: Happy Prime
Author URI: https://happyprime.co
Description: A WordPress theme for Magnolia Beautification
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
Update URI: false
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: magnoliabeautification
*/

/**
 * From https://github.com/hankchizljaw/modern-css-reset
 */

/* Set core body defaults */

body {
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	scroll-behavior: smooth;
	text-rendering: geometricprecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Box sizing rules */

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Remove list styles on ul, ol elements with a class attribute */

/* stylelint-disable no-duplicate-selectors */

nav ul {
	list-style: none;
}

/* stylelint-enable no-duplicate-selectors */

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Remove animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Wrap pre tag content */

pre {
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* 600px */

/* 781px - WordPress column breakpoint */

/* 900px */

/* 1200px */

/* 1000px */

body {
		/* --- Widths --- */
		--max-width: calc(1218px + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));

		/* --- Speed --- */
		--speed: 0.3s;
		--speed-fast: 0.15s;
}

:root {

	/* --- Colors --- */
	--color-background: var(--wp--preset--color--green-dark);
	--color-text: var(--wp--preset--color--white);
	--color-alt: var(--wp--preset--color--green-light);
	--color-highlight: var(--wp--preset--color--blue-dark);
	--color-highlight-hover: var(--wp--preset--color--green-medium);
	--color-subtitle: var(--wp--preset--color--green-light);
}

@media (prefers-color-scheme: dark) {

:root {
		--color-background: var(--wp--preset--color--green-dark);
		--color-text: var(--wp--preset--color--white);
		--color-alt: var(--wp--preset--color--green-light);
		--color-highlight: var(--wp--preset--color--blue-dark);
		--color-highlight-hover: var(--wp--preset--color--green-medium);
		--color-subtitle: var(--wp--preset--color--green-light);
}
	}

@media (prefers-color-scheme: light) {

:root {
		--color-background: var(--wp--preset--color--blue-lightest);
		--color-text: var(--wp--preset--color--blue-dark);
		--color-alt: var(--wp--preset--color--blue-medium);
		--color-highlight: var(--wp--preset--color--blue-light);
		--color-highlight-hover: #cae6e6;
		--color-subtitle: var(--wp--preset--color--blue-medium);
}
	}

.prefers-color-scheme-dark {
	--color-background: var(--wp--preset--color--green-dark);
	--color-text: var(--wp--preset--color--white);
	--color-alt: var(--wp--preset--color--green-light);
	--color-highlight: var(--wp--preset--color--blue-dark);
	--color-highlight-hover: var(--wp--preset--color--green-medium);
	--color-subtitle: var(--wp--preset--color--green-light);
}

.prefers-color-scheme-light {
	--color-background: var(--wp--preset--color--blue-lightest);
	--color-text: var(--wp--preset--color--blue-dark);
	--color-alt: var(--wp--preset--color--blue-medium);
	--color-highlight: var(--wp--preset--color--blue-light);
	--color-highlight-hover: #cae6e6;
	--color-subtitle: var(--wp--preset--color--blue-medium);
}

/* --- Selection --- */

::selection {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--white);
}

/* --- Anchors --- */

:is(a):not(.wp-element-button) {
	-webkit-text-decoration: underline;
	text-decoration: underline;
	text-decoration-color: currentcolor;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: all var(--speed) linear;
}

:is(a):not(.wp-element-button):hover {
		text-decoration-color: transparent;
	}

p :is(a):not(.wp-element-button) {
		color: var(--wp--preset--color--accent-1);
	}

li:not(.wp-block-navigation-link) :is(a):not(.wp-element-button) {
		color: var(--wp--preset--color--contrast);
		text-decoration-color: rgb(from var(--null,currentColor) r g b / 0.1);
	}

:is(li:not(.wp-block-navigation-link) :is(a):not(.wp-element-button)):hover {
			text-decoration-color: currentcolor;
		}

/* --- List items --- */

li::marker {
		color: var(--wp--preset--color--accent-1);
	}

/*--------------------------------------------------------------
	# Header
--------------------------------------------------------------*/

.site-header {
	margin: var(--wp--preset--spacing--5) auto 0;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
}

.site-header .wp-block-site-logo {
		height: var(--wp--preset--spacing--12);
		width: var(--wp--preset--spacing--12)
	}

@media (max-width: 1200px) {

.site-header .header-word-mark {
			display: none;
	}
		}

.wp-block-navigation a {
		-webkit-text-decoration: underline;
		text-decoration: underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
		transition: all var(--speed) linear;
	}

:is(.wp-block-navigation a):hover {
			text-decoration-color: var(--wp--preset--color--accent-1);
		}

/*--------------------------------------------------------------
	# Footer
--------------------------------------------------------------*/

.site-footer {
	margin: var(--wp--preset--spacing--14) auto 0;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
}

.footer-nav:not(ul) {
	align-items: flex-end;
	flex-direction: column;
}

/* ------------------------------------------------------------
	# Form styles
------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="url"],
textarea {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: var(--wp--preset--spacing--050);
	box-sizing: border-box;
	color: var(--wp--preset--color--accent-1);
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: 1rem 1.5rem;
	transition: outline var(--speed-fast) ease-in-out;
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
}

label {
	color: var(--wp--preset--color--accent-contrast);
	display: block;
	font-size: var(--wp--preset--font-size--1);
	font-weight: 400;
	margin-bottom: var(--wp--preset--spacing--1);
}

label input,label textarea {
		margin-top: var(--wp--preset--spacing--1);
	}

input[type="submit"] {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: var(--wp--preset--spacing--050);
	box-shadow: var(--wp--preset--shadow--button);
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-top: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	text-transform: uppercase;
	transition: background-color var(--speed) ease-in-out;
}

input[type="submit"]:hover {
		background-color: var(--wp--preset--color--accent-2);
		box-shadow: none;
	}

/*--------------------------------------------------------------
	# Core blocks and variations
--------------------------------------------------------------*/

/* --- Heading block --- */

.wp-block-heading,
.wp-block-post-title {
	text-wrap: pretty;
}

:is(.wp-block-heading,.wp-block-post-title) em {
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--meow-script);
		font-size: 1.35em;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 0.75;
		margin-right: 0.3ch;
	}

/* --- Button block --- */

.wp-block-button .wp-block-button__link {
		-webkit-text-decoration: none;
		text-decoration: none;
		transition: all var(--speed) ease-in-out;
	}

:is(.wp-block-button .wp-block-button__link):hover {
			background-color: var(--wp--preset--color--accent-2);
			box-shadow: 3px 4px 4px 0px transparent !important;
			-webkit-text-decoration: none;
			text-decoration: none;
		}

.is-style-arrow .wp-block-button__link {
		align-items: center;
		background-color: transparent;
		border: none;
		display: flex;
		font-weight: 500;
		box-shadow: none;
		padding: 0;
		-webkit-text-decoration: underline;
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--subtitle);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
		transition: all var(--speed) linear;
	}

:is(.is-style-arrow .wp-block-button__link):hover {
			background-color: transparent;
			text-decoration-color: transparent;
		}

:is(.is-style-arrow .wp-block-button__link):hover::after {
				background-color: var(--wp--preset--color--accent-1);
			}

:is(.is-style-arrow .wp-block-button__link)::after {
			content: "";
			background-color: var(--wp--preset--color--accent-2);
			display: block;
			width: 1.8em;
			height: 1em;
			-webkit-mask-image: url(./images/icon-link-arrow.svg);
			        mask-image: url(./images/icon-link-arrow.svg);
			-webkit-mask-size: contain;
			        mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
			-webkit-mask-position: center;
			        mask-position: center;
			margin-left: var(--wp--preset--spacing--1);
			transition: background-color var(--speed) linear;
		}

/* --- Cover block --- */

.is-vertically-aligned-stretch .wp-block-cover {
		height: 100%;
	}

/* --- Media/Text block --- */

.wp-block-media-text {
	gap: var(--wp--preset--spacing--7);
}

@media (max-width: 48.8125em) {

.wp-block-media-text {
		grid-template-columns: 1fr;
}

		.wp-block-media-text .wp-block-media-text__media {
			grid-column: 1;
			grid-row: 1;
		}

		.wp-block-media-text .wp-block-media-text__content {
			grid-column: 1;
			grid-row: 2;
		}

		.wp-block-media-text.has-media-on-the-right {
			grid-template-columns: 1fr;
		}

			.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
				grid-column: 1;
				grid-row: 1;
			}

			.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
				grid-column: 1;
				grid-row: 2;
			}
	}

.wp-block-media-text .wp-block-media-text__media {
		border-radius: var(--wp--preset--spacing--2);
		overflow: clip;
	}

.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}

/* --- Group block for program cards in Loops --- */

@media (max-width: 48.8125em) {

.program-card {
		flex-wrap: wrap !important;
}
	}

/* --- Single program --- */

@media (max-width: 48.8125em) {

.single-program .post-header {
			grid-template-columns: 1fr;
	}
		}

/* Show/Hide */

.wp-block-happyprime-show-hide-group li a {
		-webkit-text-decoration: underline;
		text-decoration: underline;
		text-decoration-color: rgb(from var(--color-alt) r g b / 0.25);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
		transition: all var(--speed) linear;
	}

:is(.wp-block-happyprime-show-hide-group li a):hover {
			text-decoration-color: var(--color-alt);
		}

.wp-block-happyprime-show-hide-summary {
	cursor: pointer;
	transition: color var(--speed) ease-in-out;
}

.wp-block-happyprime-show-hide-summary::marker {
		color: var(--wp--preset--color--accent-1);
		transition: color var(--speed) ease-in-out;
	}

.wp-block-happyprime-show-hide-summary:hover::marker {
			color: var(--wp--preset--color--accent-2);
		}

/*--------------------------------------------------------------
	# Classed components
--------------------------------------------------------------*/

.is-card {
	background-color: var(--color-highlight);
	border: 1px solid var(--wp--preset--color--green-light);
	border-radius: var(--wp--preset--spacing--2);
	height: 100%;
	outline: 1px solid transparent;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	transition: all var(--speed) ease-in-out;
}

.is-card  > * {
		text-wrap: pretty;
	}

.is-card a {
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.is-card.js-make-card-anchored {
		cursor: pointer;
	}

.is-card.js-make-card-anchored:hover {
			background-color: var(--color-highlight-hover);
			outline: 1px solid var(--wp--preset--color--green-light);
		}

.event-meta * + *::before {
		content: '•';
		margin-inline: 0.5ch;
	}

/* --- Flower basket --- */

.is-style-flower-basket {
	padding-right: 1.34lh;
	position: relative;
}

.is-style-flower-basket::after {
		content: "";
		background-color: var(--wp--preset--color--accent-4);
		margin-left: 0.34lh;
		-webkit-mask-image: url(./images/icon-flower-basket.svg);
		        mask-image: url(./images/icon-flower-basket.svg);
		-webkit-mask-size: contain;
		        mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		        mask-repeat: no-repeat;
		-webkit-mask-position: center;
		        mask-position: center;
		position: absolute;
		height: 1lh;
		width: 1lh;
	}

/* --- CSS columns style for lists --- */

.wp-block-column:has(.is-style-columns) {
	container-type: inline-size;
	container-name: supporters-column;
}

.is-style-columns {
	column-count: 1;
	column-gap: var(--wp--preset--spacing--5);
}

.is-style-columns li {
		page-break-inside: avoid;
		break-inside: avoid;
	}

@container supporters-column (min-width: 400px) {
	.is-style-columns {
		column-count: 2;
	}
}

@container supporters-column (min-width: 600px) {
	.is-style-columns {
		column-count: 3;
	}
}

/*--------------------------------------------------------------
	# Utility classes
--------------------------------------------------------------*/

.no-shrink,
.is-style-no-shrink {
	flex-shrink: 0;
}

.alignfull {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width);
}