/* Extra styles beyond theme.json. Keep them small: theme.json is preferred. */

:root {
	--site-transition: 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	hyphens: manual;
	word-break: normal;
	overflow-wrap: normal;
	text-wrap: balance;
}

a,
.wp-block-button__link,
.wp-element-button,
.wp-block-navigation-item__content,
button,
input,
select,
textarea {
	transition: color var(--site-transition), background-color var(--site-transition),
		opacity var(--site-transition), box-shadow var(--site-transition),
		transform var(--site-transition);
}

a:hover {
	opacity: 0.8;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

a:active,
.wp-block-button__link:active,
.wp-element-button:active,
button:active {
	transform: scale(0.98);
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

main > .wp-block-group,
main > .wp-block-columns,
main > section {
	padding-block: var(--wp--preset--spacing--60);
}

main {
	animation: site-content-in 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

header.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

footer.site-footer {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--secondary);
}

footer.site-footer small,
footer.site-footer .has-small-font-size {
	color: var(--wp--preset--color--secondary);
}

@keyframes site-content-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}