/**
 * Global design tokens for Pristine Components.
 * Overridden per-site via Settings → Theme Settings (see includes/Assets.php).
 */
:root {
	--pc-color-primary: #002a71;
	--pc-color-secondary: #6c63ff;
	--pc-color-accent: #f7941d;
	--pc-color-dark: #10131a;
	--pc-color-light: #ffffff;
	--pc-color-muted: #6b7280;

	--pc-container-width: 1280px;
	--pc-gutter: clamp(1rem, 4vw, 2.5rem);

	--pc-font-heading: inherit;
	--pc-font-body: inherit;

	--pc-radius-sm: 6px;
	--pc-radius-md: 12px;
	--pc-radius-lg: 24px;

	--pc-shadow-sm: 0 1px 2px rgba(16, 19, 26, 0.06);
	--pc-shadow-md: 0 8px 24px rgba(16, 19, 26, 0.08);
	--pc-shadow-lg: 0 20px 48px rgba(16, 19, 26, 0.12);

	--pc-hero-height: 90vh;

	--pc-transition: 200ms ease;
}

/* Desktop-only wider gutter, matching the theme's own --gutter token
 * (see assets/scss/base/_variables.scss) so .pc-container lines up with
 * the header/footer edges exactly. Left untouched below 1025px so
 * mobile/tablet padding doesn't change. */
@media (min-width: 1025px) {
	:root {
		--pc-gutter: clamp(2rem, 5vw, 4rem);
	}
}

.pc-container {
	max-width: var(--pc-container-width);
	padding-inline: var(--pc-gutter);
}

/* Responsive visibility utilities, shared by every block's Inspector controls. */
@media (min-width: 1025px) {
	.pc-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.pc-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.pc-hide-mobile {
		display: none !important;
	}
}

/* Shared button component. */
.pc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	border-radius: var(--pc-radius-sm);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	transition: transform var(--pc-transition), box-shadow var(--pc-transition), background-color var(--pc-transition), color var(--pc-transition);
	border: 2px solid transparent;
}

.pc-btn:hover,
.pc-btn:focus-visible {
	transform: translateY(-1px);
}

.pc-btn:focus-visible {
	outline: 3px solid var(--pc-color-accent);
	outline-offset: 2px;
}

.pc-btn--primary {
	background: var(--pc-color-primary);
	color: var(--pc-color-light);
}

.pc-btn--primary:hover,
.pc-btn--primary:focus-visible {
	box-shadow: var(--pc-shadow-md);
}

.pc-btn--secondary {
	background: var(--pc-color-light);
	color: var(--pc-color-primary);
}

.pc-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.pc-btn__icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
}

.pc-btn__icon svg {
	width: 100%;
	height: 100%;
}

/* Inline icon component. */
.pc-icon {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
}

.pc-icon svg {
	width: 100%;
	height: 100%;
}

/* Scroll-in animation, activated by assets/js/animations.js. */
[data-pc-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease, transform 600ms ease;
}

[data-pc-animate].pc-animate-in {
	opacity: 1;
	transform: translateY(0);
}

[data-pc-animate="fade-in"] {
	transform: none;
}

[data-pc-animate="zoom-in"] {
	transform: scale(0.94);
}

[data-pc-animate="zoom-in"].pc-animate-in {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-pc-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}