@layer defaults {
	/* # Font Imports */
	@font-face {
		font-family: 'Toronto Subway';
		src: url('/assets/fonts/TorontoSubway.woff2') format('woff2');
		font-weight: normal; font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Toronto Subway';
		src: url('/assets/fonts/TorontoSubway-Bold.woff2') format('woff2');
		font-weight: bold; font-style: normal;
		font-display: swap;
	}


	/* Colours */
	:root {
		--colour-callout: 133 33% 66%;
		--colour-callout-contrast: 133 33% 100%;

		--ps-letter-spacing: 40;
	}
}

@layer design {
	.skiplink {
		position: absolute; inset: 0 0 auto 0;
		padding-block: 0.5em;
		background-color: hsl( var(--black) ); color: hsl( var(--white) );
		text-decoration: underline;
		clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
		transition: clip-path, var(--very-fast);
	}
	.skiplink:focus {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	body > * {
		padding-inline: var(--gap);
	}
	main > * + * {
		/* This method of getting vertical spacing may end up redundant if margin-trim lands: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim */
		margin-block-start: var(--gap);
	}

	header {
		
	}

	.navSite {
		
	}

	footer {

	}

	a[aria-current="page"] {
		pointer-events: none;
		text-decoration: underline;
	}

	aside {
		border-radius: 0.5rem; padding: var(--gap); border: 1px dashed currentColor;
	}

	article:has( > section + aside ) { /* Firefox doesn't have native support yet... */
		display: grid; grid-template-columns: 3fr 1fr; gap: calc(2 * var(--gap));
	}

	.matrixBuilder {

	}

	/* Entry Types */
	[data-entry-type='image'] {
		figure {
			padding: 0.5em;
			border: 0.1em solid currentColor; border-radius: 0.5em;
		}
		figcaption {
			padding-block-start: 0.5em;
			font-size: var(--font-size-diminished);
		}
		img {
			display: block;
			width: 100%; height: auto; border-radius: 0.25em;
		}
	}

	[data-entry-type='galleryGrid'] {
		container: galleryGrid / inline-size;

		.theImageGrid {
			/* Default values for this component */
				--_gap: 0;
				--_columnCount: 1;

			display: grid;
			gap: var(--_gap);
			grid-template-columns: repeat( var(--_columnCount), minmax(0, 1fr) );
		}

		img {
			display: block;
			width: 100%; height: auto;
		}

		/* Adjust the design based on the chosen options */
			&[data-grid-style='withGap'] {
				.theImageGrid {
					--_gap: var(--gap);
				}
			}

		/* Adjust the design based on the width of the container (not the viewport) */
			@container galleryGrid (min-width: 48ch) {
				.theImageGrid {
					--_columnCount: 2;
				}
			}

			@container galleryGrid (min-width: 82ch) {
				.theImageGrid {
					--_columnCount: 3;
				}
			}
	}

	[data-entry-type="gallerySlider"] {
		swiper-slide {
			img {
				display: block;
				width: 100%; height: auto;
			}
		}

		swiper-container::part(button-prev),
		swiper-container::part(button-next) {
			color: white;
		}
	}

	[data-entry-type='textCallout'] {
		display: grid; place-items: center;
		padding: 0.5em;
		border: 0.1em solid currentColor; border-radius: 0.5em;
		background-color: hsl( var(--colour-callout) );
	}

	[data-entry-type='button'] {
		& > a {
			display: inline-block;
			border: 1px solid currentColor; border-radius: 0.25em;
			padding-inline: 0.5em;
		}
	}

	[data-entry-type='richText'] {
		display: grid; gap: var( --gap );
	}

	[data-entry-type='spacer'] {
		height: var( --gap );

		&[data-size='large'] {
			height: calc( 2 * var( --gap ) );
		}
	}

	/* Adjust the font weight when we hit the full "20px" base size */
	@media screen and (min-width: 1280px) {
		html {
			font-weight: 300;
		}
		:where(h1,h2,h3,h4,h5,h6) {
			font-weight: bold;
		}
	}
}

@layer utilities {
	:where(.uc_callout) {
		padding: 0.25em .5em;
		background-color: hsl( var(--colour-callout) );
		color: hsl( var(--colour-callout-contrast) );
	}

	:where(.uc_uppercase) {
		text-transform: uppercase;
		letter-spacing: calc( (var(--ps-letter-spacing, 40) / 1000) * 1em );
	}
	:where(.uc_uppercase-adjusted) { /* Upper case characters sized down to look visually the same height as lower */
		text-transform: uppercase;
		letter-spacing: calc( (var(--ps-letter-spacing, 40) / 1000) * 1em );
		font-size: 0.875em;
	}
}