/*
 * Global custom site CSS.
 *
 * Define client-specific design rules in theme.json first. Add CSS here only
 * when the Global Styles system cannot express the required behaviour.
 */

.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
}

.skip-link:focus {
	inset-block-start: var(--wp--preset--spacing--xx-small);
	inset-inline-start: var(--section-gutter);
	z-index: 100000;
	padding: var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--x-small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--small);
}

/*
 * Template-level page layout. ACF blocks can use alignwide or alignfull in
 * their block.json support settings. Full-width blocks own their inner padding.
 */
.site-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp--style--global--content-size)) minmax(0, 1fr);
	padding-inline: var(--section-gutter);
}

.site-main > * {
	grid-column: 2;
	min-width: 0;
}

.site-main > .alignwide {
	grid-column: 1 / -1;
	width: min(100%, var(--wp--style--global--wide-size));
	justify-self: center;
}

.site-main > .alignfull {
	grid-column: 1 / -1;
	width: calc(100% + (var(--section-gutter) * 2));
	max-width: none;
	margin-inline: calc(var(--section-gutter) * -1);
}