.site-header,
.site-footer {
	padding: var(--wp--preset--spacing--30) max(var(--wp--preset--spacing--30), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.site-header {
	border-bottom: var(--wp--custom--border--width) solid color-mix(in srgb, var(--wp--preset--color--foreground) 14%, transparent);
}

.site-footer {
	border-top: var(--wp--custom--border--width) solid color-mix(in srgb, var(--wp--preset--color--foreground) 14%, transparent);
	color: var(--wp--preset--color--muted);
}

.site-main {
	padding-block: var(--wp--preset--spacing--50);
}

.skip-link {
	position: fixed;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 10000;
	transform: translateY(-200%);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--button--radius);
	color: var(--wp--preset--color--bg);
}

.skip-link:focus {
	transform: translateY(0);
	outline: var(--wp--custom--border--accent-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--preset--spacing--10);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--wp--custom--border--accent-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--preset--spacing--10);
}