/*
Theme Name: PSL Prairie
Theme URI: https://psl-prairie.com
Author: PSL Prairie
Author URI: https://psl-prairie.com
Description: PSL Prairie is a theme for the PSL Prairie website.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: psl-prairie
Template: ollie
*/

/* Override Ollie styles */
div[class*="wp-block-"] figcaption {
	margin-top: var(--wp--preset--spacing--medium);
	text-align: left;
}

.single .wp-block-group .wp-block-post-terms, .blog .wp-block-group .wp-block-post-terms {
	margin-bottom: inherit !important;
}

/* Seo links */
.seo-container {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

a.seo-target::before,
.seo-target > a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	content: "";
}

/* Mega menu behavior */
header:has(>.is-position-sticky) {
	position: fixed;
	width: 100%;
}

header:has(>.is-position-sticky) + main > header,
header:has(>.is-position-sticky) + main .wp-pattern-hero-page {
	padding-top: clamp(3.75rem, -0.3125rem + 13vw, 7rem) !important;
}

.site-header .is-style-background-blur {
	transition: background-color .25s ease, border-radius .25s ease;
}

.site-header:has(.mega-menu__toggle[aria-expanded="true"]) .is-style-background-blur {
	background-color: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: none;
}

/* Shapes Background */
*[class*="is-style-shape-"] {
	position: relative;
	z-index: 1;
}

*[class*="is-style-shape-"]::before,
*[class*="is-style-shape-"]::after {
	background-position: var(--parallax-start);

	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-repeat: no-repeat;
	animation-name: parallax;
	animation-timeline: view(); /* Relative to the parent */
	animation-timing-function: linear;
}

/* Shape 1, Cuboid, Torus Knot and Icosahedron */
.is-style-shape-1::before {
	--parallax-start: calc(50% - 700px) 7em;
	--parallax-end: calc(50% - 700px) -7em;

	background-image: url(assets/images/shapes/cuboid-icosahedron.png);
	background-size: 840px 600px;
}

.is-style-shape-1::after {
	--parallax-start: calc(50% + 450px) -10em;
	--parallax-end: calc(50% + 450px) -26em;

	background-image: url(assets/images/shapes/torus-knot.png);
	background-size: 1030px 1030px;
}

/* Shape 2, Torus, Cone and Sphere */
.is-style-shape-2::before {
	--parallax-start: calc(50% - 550px) 40em;
	--parallax-end: calc(50% - 550px) 20em;

	background-image: url(assets/images/shapes/torus.png);
	background-size: 1426px 1426px;
}

.is-style-shape-2::after {
	--parallax-start: calc(50% + 300px) -5em;
	--parallax-end: calc(50% + 300px) -12em;

	background-image: url(assets/images/shapes/cone-sphere.png);
	background-size: 760px 625px;
}

/* Shape 3, Torus, Cuboid and Icosahedron */
.is-style-shape-3::before {
	--parallax-start: calc(50% - 350px) 7em;
	--parallax-end: calc(50% - 350px) 20em;

	background-image: url(assets/images/shapes/torus.png);
	background-size: 1426px 1426px;
}

.is-style-shape-3::after {
	--parallax-start: calc(50% + 500px) -3em;
	--parallax-end: calc(50% + 500px) -12em;

	background-image: url(assets/images/shapes/icosahedron-cuboid.png);
	background-size: 760px 625px;
}

/* Shape 4, Shpere, Torus Knot and Icosahedron */
.is-style-shape-4::before {
	--parallax-start: calc(50% - 550px) 22em;
	--parallax-end: calc(50% - 550px) 13em;

	background-image: url(assets/images/shapes/sphere.png);
	background-size: 518px 518px;
}

.is-style-shape-4::after {
	--parallax-start: calc(50% + 320px) -43em;
	--parallax-end: calc(50% + 320px) -36em;

	background-image: url(assets/images/shapes/torus-knot-icosahedron.png);
	background-size: 1537px 1596px;
}

@keyframes parallax {
	0% {
		background-position: var(--parallax-start);
	}
	100% {
		background-position: var(--parallax-end);
	}
}


/* WPGB */
.wpgb-facet > fieldset:last-child {
	margin-bottom: 0 !important;
}

/* Cards */
.wp-pattern-event-card,
.wp-pattern-post-card {
	height: 100%;
}

.wp-pattern-event-card__header {
	position: relative;
	min-height: 224px;
}

.wp-pattern-event-card .wp-pattern-event-card__dates {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	z-index: 1;
}

.wp-pattern-event-card__dates {
	justify-self: flex-start;
}

.wp-pattern-event-card__dates > div:empty {
	display: none;
}

.wp-pattern-event-card__dates > div:last-child:not(:only-child):has(> p) {
	padding-left: var(--wp--preset--spacing--medium);
	margin-left: var(--wp--preset--spacing--medium);
	border-left: 1px solid var(--wp--preset--color--primary-alt-200);
}

/* Query */
.wp-pattern-mega-menu--one-col-posts .wp-pattern-post-list-posts .wp-block-post:first-child {
	grid-row: 1 / 3;
}

.wp-block-post-template li > .wp-block-template-part {
	height: 100%;
}

@media (min-width: 600px) and (max-width: 979px) {
	.wp-pattern-post-list-profiles .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 980px) {
	.wp-pattern-post-list-profiles .wp-block-post-template li {
		grid-column: span 2;
	}
	
	.wp-pattern-post-list-profiles .wp-block-post-template li:nth-child(-n+4) {
		grid-column: span 3;
	}
}

/* Forms */
input:not([type="submit"]),
select, textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea,
.acf-field input[type=text], .acf-field input[type=password], .acf-field input[type=date], .acf-field input[type=datetime], .acf-field input[type=datetime-local], .acf-field input[type=email], .acf-field input[type=month], .acf-field input[type=number], .acf-field input[type=search], .acf-field input[type=tel], .acf-field input[type=time], .acf-field input[type=url], .acf-field input[type=week], .acf-field textarea, .acf-field select {
	border: 1px solid var(--wp--preset--color--main);
	border-radius: var(--wp--preset--spacing--x-small);
}

/* ACF */
label {
	color: var(--wp--preset--color--primary);
}

.acf-form {
	padding-top: var(--wp--preset--spacing--xx-large);
	padding-bottom: var(--wp--preset--spacing--xx-large);

	.acf-fields {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--medium);

		&.-border {
			border: none;
		}

		>.acf-field {
			padding: 0;
			border: none;

			input[type="text"],
			input[type="email"],
			input[type="tel"],
			input[type="url"],
			input[type="search"],
			input[type="number"],
			input[type="date"] {
				padding: var(--wp--preset--spacing--small);
				font-size: var(--wp--preset--font-size--small);
			}
		}
	}

	.select2-container .select2-selection--single,
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 43px;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: var(--wp--preset--color--main);
		line-height: 43px;
	}

	.acf-link .link-wrap {
		border: 1px solid var(--wp--preset--color--main);
		border-radius: var(--wp--preset--spacing--x-small);
		width: 100%;
	}
}

.acf-form-message--updated {
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--medium);
	border-radius: var(--wp--preset--spacing--small);
	border: 2px solid #448000;
	margin-bottom: var(--wp--preset--spacing--medium) !important;

	p {
		margin: 0;
	}
}

.acf-form-message--error {
	background-color: #f8d7da;
	padding: var(--wp--preset--spacing--medium);
	border-radius: var(--wp--preset--spacing--small);
	border: 2px solid #dc3545;
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--medium) !important;

	p {
		margin: 0;
	}
}