/**
 * Common stylesheet for admin and frontend.
 *
 * @since       1.0.0
 * @since       5.7.0     Define a common style for all pNet sites.
 * @since       5.12.0    Split into public and common styles.
 * @since       6.0.0     Implement new UI.
 * @package     pNet
 * @copyright   2024 Keith Pfeiffer
 */

/* =============================================================================
# Custom properties
*/

:root {
	--pnet-width: 1200px;
	--pnet-text-width: 75ch;
	--pnet-form-width: 75ch;
	--pnet-h-space: 1rem;
	--pnet-h-half-space: calc(var(--pnet-h-space) * 0.5);
	--pnet-h-double-space: calc(var(--pnet-h-space) * 2);
	--pnet-v-space: 1.424rem;
	--pnet-v-half-space: calc(var(--pnet-v-space) * 0.5);
	--pnet-v-double-space: calc(var(--pnet-v-space) * 2);
	--pnet-grid-gap: 1.424rem;
	--pnet-header-height: 120px;
	--pnet-hero-height: 38vh;
	--pnet-dim: 0.87;
	--pnet-disabled: 0.38;
	--pnet-text-title: 2.027rem;
	--pnet-text-huge: 1.802rem;
	--pnet-text-xxxl: 1.602rem;
	--pnet-text-xxl: 1.424rem;
	--pnet-text-xl: 1.266rem;
	--pnet-text-l: 1.125rem;
	--pnet-text: 1rem;
	--pnet-text-s: 0.889rem;
	--pnet-text-xs: 0.790rem;
	--pnet-text-xxs: 0.702rem;
	--pnet-border-radius: 4px;
	--pnet-shadow-elevation-1:
		0 1px 1px 0 var(--shadow-400),
		0 2px 1px -1px var(--shadow-350),
		0 1px 3px 0 var(--shadow);
	--pnet-shadow-elevation-2:
		0 2px 2px 0 var(--shadow-400),
		0 3px 1px -2px var(--shadow-350),
		0 1px 5px 0 var(--shadow);
	--pnet-shadow-elevation-4:
		0 4px 5px 0 var(--shadow-400),
		0 1px 10px 0 var(--shadow-350),
		0 2px 4px -1px var(--shadow);
	--pnet-shadow-elevation-6:
		0 6px 10px 0 var(--shadow-400),
		0 1px 18px 0 var(--shadow-350),
		0 3px 5px -1px var(--shadow);
	--pnet-shadow-elevation-8:
		0 8px 10px 1px var(--shadow-400),
		0 3px 14px 2px var(--shadow-350),
		0 5px 5px -3px var(--shadow);
	--pnet-transition: all 0.5s ease 0s;
	--pnet-card-image-aspect: 4 / 3;
	--pnet-negative-margin-desktop: calc((1200px - var(--pnet-text-width)) / 2 * -1);
	--pnet-negative-margin: calc((100vw - var(--pnet-text-width)) / 2 * -1);
	--pnet-overlay-blur: 2px;
}

/* =============================================================================
# Progress indicator
*/

#main:has(.pnet-progress-overlay) {
	position: relative;
}

.pnet-progress-overlay {
	background-color: var(--scrim);
	bottom: 0;
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: var(--pnet-transition);
	z-index: 100;
}

.pnet-spinner-container {
	display: block;
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
}

.pnet-spinner {
	animation: spin 1s ease-in-out 0s infinite;
	border: var(--pnet-h-half-space) solid var(--primary);
	border-radius: 50%;
	border-right-color: transparent;
	height: 4rem;
	width: 4rem;
}

/* =============================================================================
# Keyframes
*/

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@media screen and (not (prefers-reduced-motion)) {
	@keyframes ripple {
		from {
			opacity: 1;
			transform: scale(0);
		}

		to {
			opacity: 0;
			transform: scale(100%);
		}
	}
}