@layer reset, defaults, utilities, design;

@layer defaults {
	/* # Font Imports */
	@font-face {
		font-family: 'Futura Std';
		src: url('/assets/fonts/FuturaStd-Light.woff2') format('woff2'),
		url('/assets/fonts/FuturaStd-Light.woff') format('woff');
		font-weight: 300; font-style: normal; font-display: swap;
	}
	@font-face {
		font-family: 'Futura Std';
		src: url('/assets/fonts/FuturaStd-Medium.woff2') format('woff2'),
		url('/assets/fonts/FuturaStd-Medium.woff') format('woff');
		font-weight: 500; font-style: normal; font-display: swap;
	}
	@font-face {
		font-family: 'Futura Std';
		src: url('/assets/fonts/FuturaStd-Heavy.woff2') format('woff2'),
		url('/assets/fonts/FuturaStd-Heavy.woff') format('woff');
		font-weight: bold; font-style: normal; font-display: swap;
	}

	/*
		CSS Custom Properties
		Naming Convention: --_ is used for *internal* variables that aren't meant to be used directly elsewhere

		NOTES:
		Experimenting with "Custom property values with defaults"
		https://lea.verou.me/2021/10/custom-properties-with-defaults/

		:root {
			--variable-name: value;
		}

		element {
			--_variable-name: var(--variable-name, fallback-if-no-such-variable);
			property: var(--_variable-name);
		}
	*/
		:root {
			/* General measures (also look in screen-row-builder.pcss for grid-based custom properties) */
				--gap: 1em;

				/* "Letter Spacing" translated from PhotoShop */
				--_ps-letter-spacing-expanded:  40;
				--_ps-letter-spacing-condensed: -40;

				--ls-expanded:  calc( (var(--_ps-letter-spacing-expanded,   40) / 1000) * 1em );
				--ls-condensed: calc( (var(--_ps-letter-spacing-condensed, -40) / 1000) * 1em );

				/* Font families */
				--font-family-primary   : Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
				--font-family-headings  : "Libre Baskerville", "Helvetica Neue", Helvetica, Arial, sans-serif;
				--font-family-helvetica : "Helvetica Neue", Helvetica, Arial, sans-serif;

				/*
					Designed text sizes

					Hardcoding pixel sizes is fragile and semi-problematic for accessibility.
					Instead, we define our font sizes based on a Modular Scale, with a fluid base size.
					See https://chrisburnell.com/clamp-calculator/ for the fluid base generation.

					We use the viewport as the reference, rather than a Container.

					This design is set so that the base font size is 16px at 420px, scaling fluidly to 20px at 1200px.
				*/
				--font-size-base: clamp(1rem, 0.865rem + 0.513vi, 1.25rem);

				/* NOTE: you don't need to adjust these lines; define your ideals in the next block. */
				--font-size-diminished:
					calc( (1 / var(--_fs-ideal-px)) * var(--font-size-base) * var(--_fs-ideal-diminished) );
				--font-size-promoted:
					calc( (1 / var(--_fs-ideal-px)) * var(--font-size-base) * var(--_fs-ideal-promoted) );
				--font-size-heading-small:
					calc( (1 / var(--_fs-ideal-px)) * var(--font-size-base) * var(--_fs-ideal-heading-small) );
				--font-size-heading:
					calc( (1 / var(--_fs-ideal-px)) * var(--font-size-base) * var(--_fs-ideal-heading) );
				--font-size-heading-large:
					calc( (1 / var(--_fs-ideal-px)) * var(--font-size-base) * var(--_fs-ideal-heading-large) );

				/*
					Standard font sizes from the design, expressed as pixels, starting at mobile
				*/
				--_fs-ideal-px            : 16;
				--_fs-ideal-diminished    : 14;
				--_fs-ideal-promoted      : 18;
				--_fs-ideal-heading-small : 20;
				--_fs-ideal-heading       : 24;
				--_fs-ideal-heading-large : 28;

				@media screen and (min-width: 680px) {
					--_fs-ideal-px            : 16;
					--_fs-ideal-diminished    : 14;
					--_fs-ideal-promoted      : 18;
					--_fs-ideal-heading-small : 20;
					--_fs-ideal-heading       : 33;
					--_fs-ideal-heading-large : 40;
				}

				@media screen and (min-width: 1200px) {
					--_fs-ideal-px            : 20;
					--_fs-ideal-diminished    : 15;
					--_fs-ideal-promoted      : 24;
					--_fs-ideal-heading-small : 30;
					--_fs-ideal-heading       : 40;
					--_fs-ideal-heading-large : 50;
				}

				/* Colour / theme related
					Working with new colour models : https://12daysofweb.dev/2022/css-color-spaces-relative-color-syntax/
					Why use OKLCH now              : https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
					Picker and converter           : https://oklch.com
					Safely using wide-colour gamut : https://developer.chrome.com/docs/css-ui/migrate-hd-color
				*/

				/* Named Colour Pallet (The colours we use, named as those colours) */
				--c-green-bright : #00ff00;
				--c-red-bright   : #ff0000;

				--c-black        : #000;
				--c-white        : #fff;

				--c-grey-light   : #bbb;
				--c-grey-mid     : #999;
				--c-grey-dark    : #666;
				--c-green        : #74bbb4;
				--c-red          : #dd3355;
				--c-brand        : #ff4de7;  /* This is an sRGB limited version */

				/* Semantic Colours (Map what we use a colour for to one of the pallet colours) */
				--sc-bg-main      : var(--c-grey-light);
				--sc-ui-good      : var(--c-green-bright);
				--sc-ui-bad       : var(--c-red-bright);
				--sc-border-light : var(--c-grey-light);

				/* Examples of how to take advantage of higher quality broader colour capable devices */
				@media (color-gamut: p3) { /* The display supports P3 colour */
					@supports (color: color(display-p3 0 0 0)) { /* The browser understands P3 colours */
						--c-green : oklch(0.7432 0.1741 187.77);
						--c-brand : oklch(0.721 0.349 333.84);
					}
				}
				@media (color-gamut: rec2020) { /* The display supports Rec2020 colour */
					@supports (color: color(rec2020 0 0 0)) { /* The browser understands rec2020 colours */
						--c-green : oklch(0.7432 0.2799 187.77);
						--c-brand : oklch(0.721 0.4112 333.84);
					}
				}

				/* Examples of how to define variations on the base colours using Colour Mix
					https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
				*/
				--_colour-darken:  #000;
				--_colour-lighten: #fff;

				--c-brand-darker: color-mix(
					in oklch,
					var(--c-brand) 90%,
					var(--_colour-darken) 10%
				);
				--c-brand-lighter: color-mix(
					in oklch,
					var(--c-brand) 90%,
					var(--_colour-lighten) 10%
				);
				--c-green-darker: color-mix(
					in oklch,
					var(--c-green) 90%,
					var(--_colour-darken) 10%
				);
				--c-green-lighter: color-mix(
					in oklch,
					var(--c-green) 90%,
					var(--_colour-lighten) 10%
				);

				/* EXPERIMENTAL
					Rotate hue during page scroll, starting at the brand-colour.

					body {
						animation: linear progressHueAdjust both;
						animation-timeline: scroll();
						animation-range: entry 0% entry 100%;

						--c-dynamic:        oklch(from var(--c-brand)   l c calc( h + var(--progressHueAdjust) ));
						--c-dynamic-darker: oklch(from var(--c-dynamic) calc(l * 0.8) c h );
					}
				*/
			}
}

@layer design {
	.devWarning {
		text-align: center; padding: 0.3em;
		background-color: red; color: white;
	}

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

		&:focus {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}

	.tip {
		opacity: 0.5;
	}

	/* Navigation */
		nav {
			--padding: 1em;

			margin: var(--padding); padding: var(--padding); border: 1px solid var(--c-grey-light);
			display: grid; gap: 0.5em;

			ul {
				display: flex; gap: var(--padding);
				list-style: none;
				margin-inline-start: 0;
			}

			.divider {
				border-inline-start: 1px solid currentColor;
				padding-inline-start: var(--padding);
			}
		}

	footer {
		padding-block: var(--gap); margin-block-start: var(--gap);
		border-block-start: 1px solid currentColor;
	}

	main {
		--padding: 1em;

		padding: var(--padding) var(--padding) calc(3 * var(--padding)) var(--padding);
	}

	hr {
		display: block;
		height: 1px; background-color: currentColor;
		margin-block: 2em;
	}

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

	/* Block types */
		[data-block-type="rowPageHeader"] {
			img {
				display: block;
				width: 100%; height: auto;
			}

			h1, p {
				grid-column: narrow; grid-row: 1/1;
				z-index: 2;
			}

			svg {
				width: 100%; height: auto;
			}
			[data-logo-colour="lightLogo"] {
				svg path {
					fill: var(--c-grey-light) !important;
				}
			}
			[data-logo-colour="darkLogo"] {
				svg path {
					fill: var(--c-brand) !important;
				}
			}

			& > .wrapper {
				display: grid; place-items: center; grid-template-columns: subgrid;
				width: 100%;

				.theImage {
					width: 100%;
					grid-column: full; grid-row: 1/1;
				}
			}
		}

	/* Entry Types */
		[data-entry-type="rowBanner"] {
			background-color: var(--c-black);

			swiper-container::part(button-prev),
			swiper-container::part(button-next) {
				color: var(--c-white);
				top: auto; bottom: 20px;
			}

			swiper-container {
				display: grid; align-items: stretch;
			}

			swiper-slide {
				display: grid; align-items: stretch;

				.bannerBlock.videoBanner {
					overflow: hidden;

					.uc_embedContainer {
						height: 100%;
					}
				}
			}

			img {
				width: 100%;
				height: auto; min-height: 100%; object-fit: cover;
				opacity: 0.8;
			}

			.textOverlay {
				z-index: 2;
				margin-block: 160px 80px; /* Ensure it doesn't overflow into the main menu, and seems visually centered vertically */
			}

			.bannerText {
				margin-block-start: 1em;
				font-size: var(--font-size-promoted);
			}

			[data-entry-type="groupButtons"] {
				font-size: var(--font-size-base);
			}

			/* .videoBanner {
				position: relative;

				&::after {
					content: "";
					position: absolute;
					inset: 0;
				}
			} */

			.bannerBlock {
				align-items: center;

				img {
					grid-column: full; grid-row: 1 / -1;
				}

				.textOverlay {
					grid-column: content-start / narrow-end;
					grid-row: 1 / -1;
					color: var(--c-white);
					z-index: 3;
				}

				&:has(.textOverlay) {
					/* Add minor gradient behind text so it's slightly more likely to be readable */
					&::after {
						display: block; width: 100%; height: 100%;
						content: "";
						background-image: linear-gradient(
							to top,
							hsl(0, 0%, 0%) 0%,
							hsla(0, 0%, 0%, 0.987) 8.1%,
							hsla(0, 0%, 0%, 0.951) 15.5%,
							hsla(0, 0%, 0%, 0.896) 22.5%,
							hsla(0, 0%, 0%, 0.825) 29%,
							hsla(0, 0%, 0%, 0.741) 35.3%,
							hsla(0, 0%, 0%, 0.648) 41.2%,
							hsla(0, 0%, 0%, 0.55) 47.1%,
							hsla(0, 0%, 0%, 0.45) 52.9%,
							hsla(0, 0%, 0%, 0.352) 58.8%,
							hsla(0, 0%, 0%, 0.259) 64.7%,
							hsla(0, 0%, 0%, 0.175) 71%,
							hsla(0, 0%, 0%, 0.104) 77.5%,
							hsla(0, 0%, 0%, 0.049) 84.5%,
							hsla(0, 0%, 0%, 0.013) 91.9%,
							hsla(0, 0%, 0%, 0) 100%);
						grid-column: full; grid-row: 1 / -1;
						z-index: 2; opacity: 0.3;
					}
				}
			}

			.bannerBlock[data-alignment="centre"] {
				justify-items: center;
				text-align: center;

				.textOverlay {
					grid-column: narrow;
				}
			}
			.bannerBlock[data-alignment="right"] {
				justify-items: end;
				text-align: right;

				.textOverlay {
					grid-column: narrow-start / content-end;
				}
			}
			.bannerBlock[data-text-position="bottom"] {
				align-items: end;

				.textOverlay {
					margin-block: 160px 2em; /* Ensure it doesn't overflow into the main menu */
				}
			}
		}

		[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'] {
			:where(
				&[data-callout-type="information"],
				&[data-callout-type="warning"]
			){
				display: grid; place-items: center;
				padding: 0.5em;
				border: 0.1em solid currentColor; border-radius: 0.5em;

				.title {
					font-weight: bold;
				}
			}

			&[data-callout-type="warning"] {
				background-color: var(--c-ui-bad);
				color: var(--c-white);
			}

			&[data-callout-type="decorative"] {
				color: var(--c-brand);
				font-weight: 200;
				text-align: center;

				.uc_richText {
					padding-block: 0.5em;
					font-size: var(--font-size-heading);
				}

				&::before,
				&::after {
					content: "";
					display: block; height: 1px; width: 33.3333%;
					background-color: var(--c-border-light);
					margin-inline: auto;
				}
			}
		}

		[data-entry-type='button'] {
			display: contents;

			&[data-button-style="textWithArrow"] {
				a, button {
					display: inline-flex; align-items: center;
					gap: 0.5em;
					text-decoration: underline;
					text-decoration-color: transparent;
					transition: text-decoration-color var(--fast);

					&:hover {
						text-decoration-color: currentColor;
					}
				}

				svg {
					display: inline-flex; width: 2em; height: 2em;
					path {
						fill: currentColor;
					}
				}
			}


			&[data-button-style="justText"] {
				a, button {
					display: inline-flex; align-items: center;
					gap: 0.5em;
					border: 1px transparent solid; border-radius: 0.5em;
					padding: 0.5em 0;
					text-decoration: underline;
					text-decoration-color: transparent;
					text-decoration-thickness: 2px;
					transition: text-decoration-color var(--fast);

					&:hover {
						text-decoration-color: var(--c-brand);
					}
				}
			}

			&[data-button-style="genericButton"] {
				a, button {
					display: inline-flex; align-items: center;
					gap: 0.5em;
					border: 1px currentColor solid; border-radius: 0.5em;
					padding: 0.5em 1em;
					text-decoration: none;
					transition: background-color var(--fast);

					&:hover {
						background-color: var(--c-brand);
						color: var(--c-white);
					}
				}

			}

			&[data-button-style="customImage"] {
				img {
					display: block; width: auto; height: calc( 1.33 * var(--font-size-base) * 2 );
				}
			}
		}

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

			.theButtons {
				display: flex; flex-wrap: wrap; align-items: center;
				gap: var(--gap);
			}

			/* Adjust the design based on the chosen options */
				&[data-alignment='centre'] {
					.theButtons {
						justify-content: center;
					}
				}

				&[data-alignment='right'] {
					.theButtons {
						justify-content: flex-end;
					}
				}
		}

		[data-entry-type="groupCards"] {
			container: groupCards / inline-size;

			.theCards {
				--_gap: 2em 1em;
				display: grid; gap: var(--_gap);
				grid-template-columns: 1fr;

				@container groupCards (min-width: 620px) {
					grid-template-columns: 1fr 1fr;
				}

				@container groupCards (min-width: 960px) {
					grid-template-columns: 1fr 1fr 1fr;
				}

				/* If we get to 1200px wide AND there are 4 or more cards, then bump it to 4 columns - there's enough space */
				@container groupCards (min-width: 1200px) {
					&:has(> *:nth-child(4)) {
						grid-template-columns: 1fr 1fr 1fr 1fr;
					}
				}
			}
		}
		[data-entry-type="cardTextOnTopOfImage"] {
			container: card / inline-size;
			display: grid;

			border-radius: 0.5rem;
			overflow: clip;

			picture {
				grid-area: 1 / 1;

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

			&::after {
				content: "";
				grid-area: 1 / 1; z-index: 2; width: 100%; height: 100%;
				background-image: linear-gradient(to bottom, transparent, oklch(from var(--c-black) l c h / 0.4 ));
			}

			.text {
				z-index: 3;
				grid-area: 1 / 1;
				align-self: end;
				padding: var(--page-grid-gap-small);
				color: var(--c-white);
			}

			h3 {
				font-size: 11cqw;
				font-weight: bold;
				line-height: 1.14;
			}

			a {
				display: inline-block; width: fit-content;
				font-size: var(--font-size-heading-small);
				font-weight: 900;

				&::after {
					content: '»';
				}
			}
		}
		[data-entry-type="cardTextBelowImage"] {
			container: card / inline-size;
			display: grid; grid-template-rows: auto 1fr;
			background-color: var(--c-white);
			padding: var(--page-grid-gap-small);
			border-radius: 0.5rem;
			overflow: clip;

			img {
				display: block; min-width: 100%; height: auto;
				border-radius: 0.3rem;
				margin-block-end: var(--page-grid-gap-small);
			}

			h3 {
				font-size: var(--font-size-heading-small);
				color: var(--c-brand);
				font-weight: bold;
				line-height: 1.14;
			}

			.text {
				display: flex; flex-direction: column;

				.uc_rich-text {
					flex-grow: 1;
				}
			}

			.uc_rich-text + a {
				margin-block-start: var(--page-grid-gap-small);
				width: 100%; justify-content: center;
			}
		}

		/* CKEditor fields that have Entries inside them should have those entries spaced out more than the general text */
		[data-entry-type='richText'] {
			& > div {
				margin-block: calc( 2 * var(--_vertical-spacing) );
			}

			& > div:last-child {
				margin-block-end: 0;
			}
		}

		[data-entry-type='richText'],
		[data-entry-type="rowRichText"],
		[data-entry-type="richTextWithEntries"],
		[data-field-type='richText'] {
			--_vertical-spacing: 1em;

			@supports (margin-trim: block) {
				/*
					https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim
					https://12daysofweb.dev/2024/css-margin-trim-line-height-units/
				*/
				margin-trim: block;

				& > *,
				.entryTypeSeries > * {
					margin-block-start: var(--_vertical-spacing);
				}
			}

			@supports not (margin-trim: block) {
				& > * + * {
					/* 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(--_vertical-spacing);
				}

				.entryTypeSeries {
					& > * + * {
						margin-block-start: var(--_vertical-spacing);
					}
				}
			}
		}

		[data-entry-type="pullQuote"] {
			&[data-text-position="textOnLeft"] {
				float: left;
				width: min(24em, 40%);
				margin: 2em 2em 2em 0;
			}

			&[data-text-position="textOnRight"] {
				float: right;
				width: min(24em, 40%);
				margin: 2em;
			}
		}

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

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

		[data-entry-type="blockQuote"] {
			position: relative;
			padding-block: 2rem;
			text-align: center;

			&:before,
			&:after {
				position : absolute; inset-block-start: 0; inset-inline-start: 50%;
				content: "";
				display: block; height: 1px; width: 180px;
				transform: translateX( -50% );
			}

			&:after {
				inset: auto auto 0 50%;
			}

			[data-field-type="attribution"] {
				margin-block-start: 1rem;
			}
		}

		[data-entry-type='rowTextByMedia'] {
			row-gap: var(--page-grid-gap-block);
			align-items: center;

			&[data-row-alignment="top"] {
				align-items: start;
			}
			&[data-row-alignment="bottom"] {
				align-items: end;
			}

			&[data-text-justification="right"] {
				[data-field-type="richText"] {
					text-align: end;
				}
			}

			&[data-text-justification="centre"] {
				[data-field-type="richText"] {
					text-align: center;
				}
			}

			& >	div:nth-of-type(2) { /* The media div, which may be any number of entry-types */
				display: block;
				width: 100%; height: auto;
			}

			/* Ok, this gets long-winded because we can't math on grid line-numbers... */
			@container pageGridContainer (min-width: 640px) {
				/* Define the start and end cols, assuming media on left for now, and adapting to parent content width */
					--text-col-start  : 1;
					--text-col-end    : 7;
					--media-col-start : 8;
					--media-col-end   : 15;
					--center-col      : 7/8;

					&[data-content-span="widest"],
					&[data-content-span="wide"] {
						--text-col-start : wide-start;
						--media-col-end : wide-end;
					}
					&[data-content-span="normal"],
					&[data-content-span="content"] {
						--text-col-start : content-start;
						--media-col-end : content-end;
					}
					&[data-content-span="narrow"] {
						--text-col-start : narrow-start;
						--media-col-end : narrow-end;
					}

					/* Add the "divider line" */
						&::after {
							content: ""; display: block; height: 100%; width: 2px; margin-inline: auto;
							grid-row: 1/1; grid-column: var(--center-col);
							background-color: var(--c-brand);
						}

				/* Flip them if the text is on the right */
					&[data-text-position='textOnRight'] {
						--media-col-start : 1;
						--media-col-end   : 8;
						--text-col-start  : 9;
						--text-col-end    : 15;
						--center-col      : 8/9;

						&[data-content-span="widest"],
						&[data-content-span="wide"] {
							--media-col-start : wide-start;
							--text-col-end : wide-end;
						}
						&[data-content-span="normal"],
						&[data-content-span="content"] {
							--media-col-start : content-start;
							--text-col-end : content-end;
						}
						&[data-content-span="narrow"] {
							--media-col-start : narrow-start;
							--text-col-end : narrow-end;
						}
					}

				/* Put them side-by-side */
					[data-field-type="richText"] {
						grid-column:  var(--text-col-start) / var(--text-col-end);
						grid-row: 1/1;

						& + div {
							grid-column:  var(--media-col-start) / var(--media-col-end);
							grid-row: 1/1;
						}
					}
			}

			@media screen and (prefers-reduced-motion: no-preference) {
				@supports (animation-timeline: scroll()) {
					view-timeline-name: --rowTextByMediaTimeline;
					view-timeline-axis: block;

					[data-field-type="richText"] {
						animation: ease-in-out scroll-reveal-in both;
						animation-timeline: --rowTextByMediaTimeline;
						animation-range:
							entry 5vh
							entry calc(5vh + 200px);
					}
					[data-entry-type="image"] {
						overflow: clip;

						img {
							animation: ease-in-out scaleDown both;
							animation-timeline: --rowTextByMediaTimeline;
							animation-range:
								entry 5vh
								entry calc(5vh + 400px);
						}
					}
				}
			}
		}

		[data-entry-type="featuredEntries"] {
			container: featuredEntries / inline-size;

			& > div {
				display: grid; gap: var(--gap);
			}

			@container featuredEntries (min-width: 540px) {
				& > div {
					grid-template-columns: 1fr 1fr;
				}
			}

			@container featuredEntries (min-width: 740px) {
				&[data-entry-count="3"] > div {
					grid-template-columns: 1fr 1fr 1fr;
				}
			}
		}
		[data-entry-type="featuredEntry"] {
			a {
				display: block;

				&:hover {
					img {
						transform: scale(1.05);
					}
				}
			}
			.imageWrapper {
				width: 100%; height: auto;
				overflow: clip;
			}
			img {
				display: block;
				height: auto; width: 100%;

				transition: transform var(--fast);
			}
			.theTitle {
				font-family: var(--font-family-headings);
				font-weight: bold;
				font-style: italic;
				font-size: var(--font-size-heading-small);
				color: var(--c-green);
			}
		}

		[data-entry-type="rowImageCompare"] {
			img {
				width: 100%; height: auto;
			}
			figcaption {
				margin-block-start: 0.75em;
				font-size: var(--font-size-diminished);
			}

			figure {
				display: block;
			}
			figure + figure {
				margin-block-start: var(--page-grid-gap-block);
			}
		}

		:where([data-entry-type='downloads']) {
			:where(dl) {
				display: grid; row-gap: 1em;

				:where(a) {
					padding: var(--page-grid-gap-small);
					padding-inline-start: calc( var(--page-grid-gap-small) + 4em);
					border-radius: 0.5rem;

					background:
						var(--c-white)
						url("/dist/images/icon-download-file.svg")
						var(--page-grid-gap-small) 50% / 2em auto
						no-repeat
					;

					text-decoration: none;

					&:hover {
						:where(dt) {
							text-decoration: currentColor underline;
						}
						:where(dd) {
							text-decoration: none !important;
						}
					}
				}

				:where(dt) {
					font-size: var(--font-size-promoted);
					font-weight: bold;
				}
				:where(dd) {
					font-size: var(--font-size-diminished);
					text-transform: uppercase;
				}
			}
		}

		[data-entry-type="rowNewsListings"],
		.rowUpcomingEvents,
		.rowPreviousEvents {
			container: rowListings / inline-size;

			& > div {
				display: grid;
				gap: var(--page-grid-gap-block);
			}

			.theItems {
				display: grid; gap: var(--page-grid-gap-block);
			}

			h2 {
				margin-block-end: var(--page-grid-gap-block);
				grid-column: 1/-1;
				font-size: var(--font-size-heading);
			}
			aside {
				h2 {
					font-size: var(--font-size-heading-small);
				}
			}

			.pagination-controls {
				h3 {
					display: none;
				}
			}

			@container rowListings (min-width: 960px) {
				& > div:has(aside) {
					grid-template-columns: 3fr 1fr;
				}
				.theItems {
					grid-template-columns: 1fr 1fr;
				}
			}
		}

		.cardListing {
			img {
				width: 100%; height: auto;
			}
		}

	/* Field Types */
		[data-field-type="quotation"] {
			font-family: var(--font-family-headings);
			font-size: var(--font-size-heading-small);
			font-style: italic;

			& > p:first-of-type::before {
				content: open-quote;
			}
			& > p:last-of-type::after {
				content: close-quote;
			}
		}
		[data-field-type="attribution"] {
			font-family: var(--font-family-headings);
			text-transform: uppercase;
			color: var(--c-brand);
			letter-spacing: var(--ls-expanded);
		}

		[data-field-type="rowCards"] {
			&[data-card-style="textBelowImage"] {
				[data-entry-type="card"] {
					position: relative;

					a {
						position: absolute; inset: 0; z-index: 2;
						display: block; width: 100%; height: 100%;
						text-indent: -999em; overflow: clip;
					}

					&:has(a) {
						&:after {
							content: "";
							position: absolute; top: 10px; right: 10px; z-index: 3;
							display: block; width: 30px; height: 30px;
							background: url(/dist/images/arrow-uturn-right.svg);
							background-size: contain;
							opacity: 0; transform: scale(0.75); transition: transform, opacity, var(--fast); pointer-events: none;
							filter: drop-shadow( 0 0 10px var(--c-black) );
						}

						&:hover,
						&:focus-within {
							&:after {
								opacity: 1; transform: scale(1)
							}
						}
					}
				}
			}

			&[data-card-style="textOverImage"] {
				.theCards {
					gap: 0;
				}

				[data-entry-type="card"] {
					position: relative;
					display: grid; gap: 0;
					overflow: clip;

					&:has(a:hover),
					&:focus-within {
						img {
							transform: scale(1.05);
						}

						.text {
							text-shadow: 0 0 0.5em oklch(from var(--c-black) l c h / 0.4 );
						}
					}
				}

				img {
					width: 100%; height: auto;
					grid-row: 1/2;
					grid-column: 1/2;
					transition: transform var(--fast);
				}

				.text {
					padding: var(--gap);
					grid-row: 1/2;
					grid-column: 1/2;
					z-index: 2; align-content: end;
					background-image: linear-gradient(to bottom, transparent, oklch(from var(--c-black) l c h / 0.4 ));
					color: var(--c-white);

					transition: text-shadow var(--fast);
				}

				.listingExcerpt {
					display: none;
				}

				hgroup {
					line-height: 1.2;

					p {
						font-size: var(--font-size-heading-small);
					}
				}
				h3 {
					margin-block-start: auto;
					font-size: var(--font-size-heading);
					font-weight: bold;
				}

				a {
					position: absolute; inset: 0; z-index: 2;
					display: block; width: 100%; height: 100%;
					text-indent: -999em; overflow: clip;
				}
			}
		}

		[data-field-type="showPageBreadcrumbs"] {
			font-size: var(--font-size-diminished);
			margin-block-end: 1em;

			ul {
				list-style-type: "";
				display: flex; gap: 1.5em; margin-inline-start: 0;
				flex-wrap: wrap;
			}

			li + li::before {
				position: absolute;
				content: "/";
				transform: translate( calc( -0.75em - 50%) );
			}
		}

		:where(
			[data-field-type="showSiblingPages"],
			[data-field-type="showChildPages"]
		) {
			padding-block: 0.5em;
			text-box: trim-both cap alphabetic;
			border-block-start: 1px solid var(--c-border-light);

			:where(dl) {
				display: flex;

				dt {
					width: 7em;
					font-weight: bold;
					flex-shrink: 0;
				}

				:where(ul) {
					display: flex; gap: 0.5em 1.5em;
					flex-wrap: wrap;

					:where(a:not(:hover)) {
						text-decoration-color: currentColor;
					}
				}
			}
		}

	/* reusable blocks */
		:where(a[data-fslightbox]){
			position:relative;
			display: block;

			& img {
				transition: opacity var(--fast);
			}

			&:before {
				content: "";
				position: absolute; top: 11px; right: 9px; z-index: 2;
				display: block; width: 30px; height: 30px;
				background: url(/dist/images/maximize-black.svg);
				background-size: contain; filter: blur(2px);
				opacity: 0; transform: scale(0.75); transition: transform, opacity, var(--fast); pointer-events: none;
			}

			&:after {
				content: "";
				position: absolute; top: 10px; right: 10px; z-index: 3;
				display: block; width: 30px; height: 30px;
				background: url(/dist/images/maximize-white.svg);
				background-size: contain;
				opacity: 0; transform: scale(0.75); transition: transform, opacity, var(--fast); pointer-events: none;
			}

			&:hover,
			&:focus {
				&:before {
					opacity: 0.5; transform: scale(1)
				}
				&:after {
					opacity: 1; transform: scale(1)
				}
			}
		}
		.userProfile {
			container: userProfile / inline-size;

			.text {
				& > * + * {
					margin-block-start: 1rem;
				}
			}
			hgroup {
				font-family: var(--font-family-headings);
				font-style: italic;
			}
			h2 {
				font-size: var(--font-size-heading-small);
				color: var(--c-green);
			}

			img {
				height: auto; max-width: 200px;
				border-radius: 50%;
			}

			@container userProfile (min-width: 450px) {
				& > div {
					display: flex; gap: 2rem;
				}
			}
		}

		:where(.pagination-controls) {
			margin-block-start: var(--gap);
			border-block-start: 1px solid currentColor;
			padding-block-start: var(--gap);

			h3 {
				font-size: var(--font-size-heading-small);
			}

			ul {
				display: flex; flex-wrap: wrap; align-items: center;
				justify-content: space-between;

				li:not(:has(a,button)) {
					opacity: 0.3;
					pointer-events: none;
				}
			}

			.previous span:before {
				content: "« ";
			}
			.next span:after {
				content: " »";
			}
		}

		.logInOut {
			a {
				--_bgColour:    var( --c-ui-bad );
				--_hoverColour: var( --c-white );
			}
		}

	/* social media icons */
		.sm {
			& ul {
				display: flex; align-items: center; flex-wrap: wrap; gap: calc( 0.5 * var(--gap) );
				list-style: none;
				margin-bottom: 0;
			}

			& li {
				& a {
					display: block;
					transition: all .3s; transform-origin: 50% 50%;
				}
			}

			& svg {
				display: block;
			}

			&.brand-compliant {
				& a {
					width: 42px;

					&:hover,
					&:focus {
						transform: scale(1.1);
					}
				}

				& svg {
					width: 42px; height: 42px;
				}
			}

			&.outline	{
				& a {
					width: 36px;

					&:hover,
					&:focus {
						transform: scale(1.1);
					}
				}

				& svg {
					width: 36px; height: 36px;

					& path,
					& circle {
						fill: currentColor;
					}
				}
			}
		}

	/* 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 {
	/* Utility classes start with a uc_ prefix, so they're obvious in markup */

	:where(.uc_uppercase) {
		text-transform: uppercase;
		letter-spacing: var(--ls-expanded);
	}

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

	/*
		Base grid layouts THAT DON'T RELY ON THE PAGE GRID
		Reference: https://cdpn.io/pen/debug/NPGqygv/74fb1ff7c7690bc2a0ee70443ebef4c3

		<div
			class="uc_grid"
			data-layout="halves|thirds"
			data-align-rows="top"
		>
			<div>
				<div>This is the title area</div>
				<div>This is the content area</div>
			</div>

			<div>
				<div>This is the title area and is longer than the other slides to throw off the alignment</div>
				<div>This is the content area and will align with the other blocks if data-align-rows="top" is set</div>
			</div>

			<div>
				<div>This is the title area</div>
				<div>This is the content area</div>
			</div>
		</div>
	*/
		.uc_grid[data-layout] {
			--_grid-placement: auto-fit;

			&[data-layout='halves'] {
				--_grid-min-item-size: clamp(16rem, 50%, 20rem);
			}
			&[data-layout='thirds'] {
				--_grid-min-item-size: clamp(16rem, 33.333333%, 20rem);
			}

			display: grid;
			grid-template-columns: repeat(
						var(--_grid-placement, auto-fill),
						minmax(var(--_grid-min-item-size, 16rem), 1fr)
					);
			gap: var(--page-grid-gap-inline, 20px);

			&[data-align-rows="top"] > * {
				display: grid;
				grid-template-rows: subgrid;
				gap: 0;
				grid-row: span 2;
			}
		}

	/*
		<marquee> replacement
		REF https://medium.com/@idorenyinudoh10/how-to-implement-marquees-on-the-web-146db3ba99e0

		Duplicate the marquee-content such that it would overflow the horizontal space for the elements to create overflow.

		<div
			class="uc_marquee"
			data-pause-on-hover
		>
			<div class="marquee-content">
				<div>Some element</div>
				<div>Another element</div>
				<div>And another</div>
			</div>

			<div class="marquee-content">
				<div>Some element</div>
				<div>Another element</div>
				<div>And another</div>
			</div>

			<div class="marquee-content">
				<div>Some element</div>
				<div>Another element</div>
				<div>And another</div>
			</div>
		</div>
	*/
		.uc_marquee {
			--_speed: 10s;         /* How long it takes to scroll fully one time */
			--_inline-space: 40px; /* The gap between each element in the marquee */
			--_masked-edges: 5vw;  /* The width of an alpha-gradient fade at each edge */

			display: flex;
			align-items: center;
			overflow-x: clip;
			mask-image:
				linear-gradient(
					to right,
					transparent,
					white var(--_masked-edges),
					white calc(100% - var(--_masked-edges)),
					transparent
				);

			:where(.marquee-content) {
				display: flex;
				align-items: center;
				column-gap: var(--_inline-space);
				padding-inline: calc( var(--_inline-space) / 2 );
				animation: marquee-scroll var(--_speed) linear infinite;

				> * {
					white-space: nowrap;
				}
			}

			&[data-pause-on-hover]:hover .marquee-content {
				animation-play-state: paused;
			}
		}
		@keyframes marquee-scroll {
			to {
				transform: translateX(-100%);
			}
		}

	/* Heading styles should not be set on the naked elements. Doing so often encourages people to use the wrong heading level purely to get the right look. Instead, use the right semantic heading level and apply a class to get the appropriate look. */
		:where(
			.uc_h1,
			.uc_h2,
			.uc_h3,
			.uc_h4
		) {
		/*
			REMEMBER TO COPY THESE STYLES INTO THE uc_richText class lower down this stylesheet so that headings inside CKEditors match
		*/
		font-family   : var(--font-family-headings);
		font-weight   : bold;
		letter-spacing: var(--ls-expanded);
		text-wrap     : balance;
	}

		:where(.uc_h1) { font-size: var(--font-size-heading-large) }
		:where(.uc_h2) { font-size: var(--font-size-heading) }
		:where(.uc_h3) { font-size: var(--font-size-heading-small) }
		:where(.uc_h4) { font-size: var(--font-size-promoted) }

	/* Make uc_button the same as button... I wish we had mixins! */
		:where(
				.vca-form-styles button,
				.uc_button
			) {
			--_bgColour:     transparent;
			--_borderColour: currentColor;
			--_textColour:   currentColor;
			--_focusColour:  var( --c-black );

			--_hoverBgColour:     oklch(from currentColor l c h / 0.2);
			--_hoverBorderColour: currentColor;
			--_hoverTextColour:   currentColor;

			--_padding: 0.5em 1em;
			--_borderRadius: 0.25em;
			--_font-size: auto;

			&.primary {
				--_bgColour:     var( --c-brand );
				--_borderColour: var( --c-brand );
				--_textColour:   var( --c-white );
				--_focusColour:  var( --c-black );

				--_hoverBgColour:     var( --c-white );
				--_hoverBorderColour: var( --c-brand );
				--_hoverTextColour:   var( --c-brand );
			}

			&:where(.remove,.delete) {
				--_borderColour: var( --c-red );
				--_textColour:   var( --c-red );

				--_hoverBgColour:     var( --c-red );
				--_hoverBorderColour: var( --c-red );
				--_hoverTextColour:   var( --c-white );
			}

			&.small {
				--_padding: 0.25em 0.5em;
				--_font-size: var(--font-size-diminished);
			}

			display: inline-flex; align-items: center; gap: 0.5em;
			padding: var(--_padding);
			border: 1px solid var(--_borderColour); border-radius: 0.25em;
			background-color: var(--_bgColour);

			text-box: trim-both cap; /* New, useful: https://developer.chrome.com/blog/css-text-box-trim */
			letter-spacing: var(--ls-expanded);
			color: var(--_textColour) !important;
			transition: background-color var(--fast);
			font-weight: bold; font-size: var(--_font-size);

			&:hover,
			&:focus-visible {
				cursor: pointer;
				outline-color: var(--_focusColour);
				background-color: var(--_hoverBgColour);
				color: var(--_hoverTextColour) !important;
				border-color: var(--_hoverBorderColour);
				text-decoration: none;
			}
		}

	/* Styling "blocks" of text such as from a Rich Text Editor, that contains multiple types of mostly text mark-up, such as paragraphs, ul, li, etc */
		:where(.uc_rich-text) {
			--_vertical-spacing: 1em;

			em, i {
				font-style: italic;
			}
			strong, b {
				font-weight: bold;
			}

			@supports (margin-trim: block) {
				/*
					https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim
					https://12daysofweb.dev/2024/css-margin-trim-line-height-units/
				*/
				margin-trim: block;

				& > *:not(.uc_hide-visually) {
					margin-block-start: var(--_vertical-spacing);
				}
			}

			@supports not (margin-trim: block) {
				& > *:not(.uc_hide-visually) + * {
					/* 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(--_vertical-spacing);
				}
			}

			/* Don't allow hard to read line-lengths unless there's a data attribute to say to allow it
				&:not([data-allow-long-lines]) > * {
					max-inline-size: 72ch;
				}
			*/

			/*
				Styling Headings

				This is where CSS's lack of "mixin" feature hurts. In a "rich text" area, it's unlikely that the CMS would allow the addition of classes to headings - and even if it did many people aren't going to do that. So, we must try to scope our heading styles onto "raw heading tags" when we're inside a Rich Text area. That's what I'm doing here - if a heading *does not have a utility class on it* then we apply these styles to it.

				In an ideal world we'd define our heading styles as re-usable chunks of CSS rulesets, and include them where we need them. Something like:

				@mixin h1 {
					// all the visual styles that make up a h1
				}

				.anything {
					@output-mixin h1; // dumps all those styles into this selector ruleset
				}

				But no such pattern exists in CSS and the alternative - add the selectors you want to the same ruleset - is a method that disallows all sorts of organisational methodology in authoring.
			*/

			& :where(
					h1,h2,h3,h4
				):not([class*="uc_h"]) {
				font-family   : var(--font-family-headings);
				font-weight   : bold;
				letter-spacing: var(--ls-expanded);
				text-wrap     : balance;
			}

			& h1:not([class*="uc_h"]) { /* A h2 that doesn't have any heading related utility class on it */
				font-size: var(--font-size-heading-large);
			}
			& h2:not([class*="uc_h"]) { /* A h2 that doesn't have any heading related utility class on it */
				font-size: var(--font-size-heading);
			}
			& h3:not([class*="uc_h"]) { /* A h3 that doesn't have any heading related utility class on it */
				font-size: var(--font-size-heading-small);
			}
			& h4:not([class*="uc_h"]) { /* A h4 that doesn't have any heading related utility class on it */
				font-size: var(--font-size-promoted);
			}

			& a:not([class]) { /* Anchors that have a class likely have some unique styling */
				text-decoration: underline;
				text-underline-offset: 0.15em;
			}
			& [data-entry-type="button"] > a {
				text-decoration: none;
			}

			& li + li {
				margin-block-start: calc( var(--_vertical-spacing) / 3 );
			}

			li > ul {
				margin-block-start: calc( var(--_vertical-spacing) / 3 );
			}

			& ol {
				margin-left: 1.7em;

				& li::marker {
					font-family: monospace; font-size: 0.875em;
				}
			}

			& ul {
				margin-left: 1.2em;
			}

			& blockquote {
				padding: 1em; margin-block-end: var(--_vertical-spacing);

				& p:last-child {
					margin-bottom: 0;
				}
			}

			& iframe {
				display: block;
			}
		}

	/* Blocks of content that are loaded via things like an iframe don't have an intrinsic known aspect-ratio, and setting "width: 100%" does not change the height as needed, like it would with an image element. This is how we work around that.
	Note that we can use either a data property of a known value, or provide a custom aspect ratio in the mark-up:
	<div class="uc_embedComtainer" data-aspect="widescreen">...</div>
	or
	<div class="uc_embedComtainer" style="--aspect: 23/17">...</div>
	*/
		:where(.uc_embedContainer) {
			--_aspect: var(--aspect, 4/3);

			/* Force the embeded video to cover the whole area without "built in" black bars from the video service itself */
			&:has(iframe) {
				container: embedContainer / size;
			}

			position: relative;
			width: 100%; aspect-ratio: var(--_aspect);
			overflow: clip; /* overflow: hidden; creates a scroll container which is usually undesirable, see https://www.bram.us/2024/02/14/scroll-driven-animations-you-want-overflow-clip-not-overflow-hidden/ */

			& > *:not(iframe) {
				position: absolute; inset: 0 auto auto 0;
				width: 100% !important; height: 100% !important;

				* {
					box-sizing: content-box;
				}

				img {
					width: auto; max-width: none;
				}
			}

			/* Force the embedded video to cover the whole area without "built in" black bars from the video service itself */
			& > iframe {
				position: absolute; inset: 50% auto auto 50%;
				transform: translate(-50%,-50%);
				width: auto !important; height: 100cqh;
				aspect-ratio: var(--_aspect);

				* {
					box-sizing: content-box;
				}

				img {
					width: auto; max-width: none;
				}
			}

			&[data-aspect-ratio="widescreen"] {
				--_aspect: 16 / 9;
			}

			&[data-aspect-ratio="cinema185"] {
				--_aspect: 1.85 / 1;
			}

			&[data-aspect-ratio="cinema239"] {
				--_aspect: 2.39 / 1;
			}
		}

	/*
		uc_glow
		WHAT IT DOES: Creates a "glowing background halo" on any element, including video (and is animated with the video).
		REQUIREMENT: The SVG below must be present in the markup of the page using the CSS class
		NOTE: You can't animate the effect itself, like on hover.

		<svg width="0" height="0">
			<filter
				id="blur-and-scale"
				x="-50%"
				y="-50%"
				width="200%"
				height="200%"
			>
				<feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blurred" />
				<feColorMatrix type="saturate" in="blurred" values="4" />
				<feComposite in="SourceGraphic" operator="over" />
			</filter>
		</svg>
	*/
		:where(.uc_glow) {
			filter: url(#blur-and-scale);
		}

	/*
		Automatic visual weight adjustments for logos with any aspect ratio's when in a row.
		See: https://9elements.com/blog/building-the-perfect-logo-strip/

		NOTE: Requires CSS --width and --height set up on the HTML <img/> elements too
		NOTE2: @property can not be nested.

		EXAMPLE MARKUP:
		<div class="uc_logo-row">
			<a href="/">
				<img
					src="..."
					width=100 height=500
					style="--width: 100; --height: 500"
					class="logo"
			</a>
			<a href="/">
				<img
					src="..."
					width=200 height=50
					style="--width: 200; --height: 50"
					class="logo"
			</a>
		</div>
	*/
		@property --_captured-length {
			syntax: "<length>";
			initial-value: 0px;
			inherits: false;
		}
		:where(.uc_logo-row) {
			--_strength: 1;
			--_base-height: 4rem;
			--_logo-min-size-factor: 0.375;
			--_logo-max-size-factor: 1.25;
			--_icon-gap: 2rem 3rem;

			display: flex;
			justify-content: start;
			align-items: center;
			flex-wrap: wrap;
			gap: var(--_icon-gap, 2rem 3rem);
			container-type: inline-size;

			.logo {
				display: block;
				--_captured-length: var(--_base-height);
				--_area: pow(
					tan(atan2(var(--_captured-length), 1px)),
					2
				);
				--_diff: sqrt(
					var(--_area)
					/
					(var(--width) * var(--height)) /* These are set on the HTML element itself */
				);

				--_scaled-height: calc(1px * var(--height) * var(--_diff));

				width: auto;
				height: clamp(
					var(--_base-height) * var(--_logo-min-size-factor),
					var(--_base-height) + (var(--_scaled-height) - var(--_base-height)) * var(--_strength),
					var(--_base-height) * var(--_logo-max-size-factor)
				);
			}
		}
}