/* This file is css that never appears above-the-fold */

@layer components {
	blockquote {
		background: var(--c-primary-light);
		
		grid-column: breakout;
		margin: 0;
		margin-top: 1em;
		padding: var(--column-gap);
		
		& > *:first-child {
			margin-top: 0;
		}
	}
	
	hr {
		width: 100%;
		border: none;
		color: inherit;
		border-bottom: 1px solid currentColor;
	}
	
	mrc-card {
		/* Customisable styles */
		/*
		Allow shadow tinting based on containing element by overwriting this custom property.
		Note: this must be overridden manually for custom background colors because advanced attr()
		support hasn't reached baseline and we don't want to lose out of our background
		layering support.
		
		This can be set in such a way to change the card from an opaque object obscuring a light
		source to the card itself becoming an emissive object.
		
		TODO(2028): Look at moving these into a CSS function so they can inherit values from local
		custom properties falling back to custom properties defined on :root. Or if the `inherits()`
		proposal gets added and reaches baseline, use that.
		*/
		--c-shadow-base: oklch(from var(--c-copy) l c h);
		--box-shadow:
			0px 0.3px  0.6px 0px oklch(from var(--c-shadow-base) l c h / 0.05),
			0px 2.4px  4.8px 0px oklch(from var(--c-shadow-base) l c h / 0.14),
			0px 7.7px 15.4px 0px oklch(from var(--c-shadow-base) l c h / 0.23)
		;
		
		/* Default styles */
		box-shadow: var(--box-shadow);
		border-radius: 0.25rem;
		overflow: clip;
		
		/* Allow space to show box-shadow */
		margin-block: 0.5rem;
		
		/* Dock the first element to the top edge of the card */
		& > *:first-child {
			margin-top: 0;
		}
		
		/* Card content is special, so tweak typography for emphasis */
		* {
			text-wrap: balance;
			line-height: 1.8;
			word-break: break-word;
		}
		
		/* Use the page's background color, unless a background component is within this card */
		&:not(:has(:where(mrc-background, mrc-background-mobile, mrc-background-desktop))){
			background: var(--c-background);
		}
		
		/*
		By default, break-out of regular page content so that content within the card is aligned
		with the page's content.
		
		This is overridden below when an mrc-card is placed within a layout component
		*/
		grid-column: breakout;
		
		/* Allow mrc-left / mrc-right layout components within card */
		display: grid;
		grid-template-columns: subgrid;
	}
	
	/* Allow cards to be placed with mrc-left / mrc-right layout components */
	mrc-left, mrc-right {
		/* Remove regular grid alignment for mrc-cards and internal content already inside layout components */
		mrc-card {
			grid-column: initial;
			* {
				grid-column: initial;
			}
		}
		
		/*
		When left/right layout components contain a card component, set left/right layout components
		to breakout column on mobile so child card can also use breakout column, keeping the card's
		children in the content column.
		*/
		&:has(mrc-card){
			grid-column: breakout;
		}
		
		/*
		If the left/right layout component contains a card, set padding on all non-card children so
		non-card content is aligned with card's child content.
		*/
		&:has(mrc-card) > *:not(mrc-card) {
			padding-inline: var(--column-gap);
		}
	}
	/*
	Move left/right layout components into breakout columns as needed to keep card's child
	content aligned.
	*/
	@media (min-width: 130rch/*DO NOT CHANGE, READ ALL "@media" RELATED NOTES */) {
		mrc-left:has(mrc-card) {
			grid-column: breakout-start / left-end;
		}
		mrc-right:has(mrc-card){
			grid-column: right-start / breakout-end;
		}
	}
	
	/* Allow cards to set their own grid */
	mrc-grid {
		display: grid;
		grid-column: breakout;
		
		/* Todo:
		May be able to replace this with a
		grid-template-columns: repeat(auto-fit/autofill, minmax(something, something)),
		but we'd need to be mindful of minimizing awkward orphans on common viewports
		(see: https://www.youtube.com/watch?v=HvhSEsFEsAg). We should go through it in a design
		meeting first to see if it's even necessary.
		*/
		grid-template-columns: 1fr;
		/* On desktop, have variable columns */
		@media (min-width: 130rch/*DO NOT CHANGE, READ ALL "@media" RELATED NOTES */) {
			/*
			TODO: Replace above line and other occurrences with @custom-media at-rule once it
			reaches baseline support
			*/
			&:has(mrc-card + mrc-card),
			&:has(mrc-card + mrc-card + mrc-card + mrc-card) {
				grid-template-columns: 1fr 1fr;
			}
			&:has(mrc-card + mrc-card + mrc-card),
			&:has(mrc-card + mrc-card + mrc-card + mrc-card + mrc-card) {
				grid-template-columns: 1fr 1fr 1fr;
			}
		}
		
		& > mrc-card {
			/* Break out of page layout's grid and use mrc-grid's grid */
			grid-column: initial;
			
			/* Align contents with other mrc-cards in this mrc-grid */
			display: grid;
			grid-template-columns: subgrid;
			grid-template-rows: subgrid;
			
			/*
			Pre-calculate 40 rows (with 0 row gap) in grid layout
			
			Note: This number should be larger than the maximum number of children in all mrc-cards,
			but small enough that it doesn't negatively affect the browser's layout timing.
			
			We can reconsider this if the children-count() proposal reaches baseline.
			See: https://github.com/w3c/csswg-drafts/issues/11068
			
			BUG: There is a bug with firefox related to this rule that affects the height of all
			direct child <img> elements with on small viewports. The width of the img is reduced to
			the width of the card correctly, but the height of the img is locked to the height of
			the linked file's dimensions. But the bug disappears as soon as the <img> is not a
			direct child or <mrc-card>. Instances of this bug can be found with the following regex:
				<mrc-card(.|\n(?!<\/mrc-card>))*media
			There are a few instances of grid and img related sizing bugs in firefox:
			- See: https://bugzilla.mozilla.org/show_bug.cgi?id=1969498
			- See: https://bugzilla.mozilla.org/show_bug.cgi?id=1857365
			- See: https://bugzilla.mozilla.org/show_bug.cgi?id=1725206
			WORKAROUND: Simply ensure that every <img> is wrapped in a <div> or <p> (depending on
			whether you want the <img> to have <p>'s padding or not). Once the <img> is wrapped, it
			is no longer a direct child of <mrc-card> which means it is no longer affected by
			the bug.
			*/
			grid-row: span 40;
		}
		/*
		Zero-out row-gap to allow for mrc-card's internal content to align with other cards using
		the collapsible grid-row span subgrid hack above.
		*/
		gap: 0 1rem;
	}
	
	mrc-card > :where(img, video):only-child,
	mrc-card > div:not([class],[style]):has(> :where(img, video)) > :where(img, video):only-child {
		grid-column: 1 / -1;
	}
	
	/* Add fix for wrapping element needed around every <img> inside <mrc-card> for firefox layout bug (described above) */
	mrc-card > div:not([class],[style]):has(> :where(img, video):only-child) {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
	}
	
	mrc-card > mrc-card-title {
		grid-column: 1 / -1;
		background: var(--c-primary-vibrant);
		
		padding: 0.5rem;
		
		place-content: center;
		
		* {
			text-align: center;
			font-size: 1.5rem;
			line-height: 1.5;
			font-weight: 600;
			color: var(--c-background);
			margin: 0;
			padding: 0;
		}
	}
	
	mrc-left, mrc-right, mrc-grid {
		mrc-card {
			:where(h1, h2, h3, h4, h5, h6, p) {
				/* padding-inline: var(--column-gap); */
				/* Todo: make this and --column-gap eventually consistent, we can't use it right now because --column-gap is being used for non-column related spacing (i.e. mega menu) */
				padding-inline: max(1rem, 2svw);
			}
			&:has(p) {
				padding-bottom: 2rem;
			}
			&:has(& > p:first-child, & > center:first-child > p:first-child) {
				padding-top: var(--column-gap);
			}
			&:has(& > mrc-card-title:first-child) {
				padding-top: 0;
			}
			&:has(mrc-faq) {
				padding-bottom: 0;
			}
		}
	}
	
	dl {
		padding: 0;
		margin: 0;
		
		dt {
			padding: 0.5rem 0 0;
			color: var(--c-primary-vibrant);
			font-weight: 700;
		}
		
		dd {
			margin: 0;
			/* Todo: Review what this color is supposed to be */
			color: var(--c-dark);
		}
		
		/* Divider after every description except the last one */
		dd:not(:last-of-type) {
			border-bottom: 1px solid var(--c-heading);
			padding-bottom: 0.5rem;
		}
	}
	
	img, video {
		border-radius: 0.5rem;
	}
	mrc-card, mrc-hero, mrc-background, mrc-background-desktop, mrc-background-mobile {
		mrc-left, mrc-right {
			img, video {
				border-radius: 0.5rem;
			}
		}
		
		img, video {
			border-radius: 0;
		}
	}
	
	mrc-carousel {
		grid-column: breakout;
		
		:where(h1, h2) {
			color: var(--c-heading);
			margin-block-start: 0;
			margin-block-end: var(--column-gap);
			margin-inline: auto;
			text-align: center;
			
			&::after {
				display: none;
			}
		}
		
		sl-carousel {
			--c-scroll-indicator: var(--c-background);
			
			--aspect-ratio: auto;
			--scroll-hint: 15%;
			--edge-fade-width: clamp(2rem, 8svw, 3.5rem);
			--edge-fade-inset: 0;
			counter-reset: carousel-page;
			
			position: relative;
			/* Keep the edge-fade overlays layered within the carousel instead of competing with neighboring breakout content. */
			isolation: isolate;
			
			* {
				grid-column: initial;
			}
			
			html.js &::before,
			html.js &::after {
				content: "";
				position: absolute;
				inset-block-start: 0;
				inset-block-end: 3rem;
				inline-size: var(--edge-fade-width);
				pointer-events: none;
				z-index: 10;
			}
			
			html.js &::before {
				inset-inline-start: var(--edge-fade-inset);
				background: linear-gradient(
					to right,
					var(--c-scroll-indicator) 35%,
					transparent
				);
			}
			
			html.js &::after {
				inset-inline-end: var(--edge-fade-inset);
				background: linear-gradient(
					to left,
					var(--c-scroll-indicator) 35%,
					transparent
				);
			}
			
			&::part(base) {
				gap: 0;
			}
				
			&::part(scroll-container) {
				grid-template-rows: auto auto auto;
				padding-block-end: 1rem;
			}
			
			&::part(navigation-button) {
				display: none;
			}
			
			&::part(pagination) {
				gap: 0.75rem;
				margin-block-start: 1.5rem;
			}
			
			&::part(pagination-item) {
				counter-increment: carousel-page;
				background: var(--c-primary-light);
				color: var(--c-primary-vibrant);
				inline-size: 2rem;
				block-size: 2rem;
				font-size: 0.875rem;
				font-weight: 750;
				line-height: 1;
				opacity: 1;
			}
			
			&::part(pagination-item)::before {
				content: counter(carousel-page);
			}
			
			&::part(pagination-item--active) {
				background: var(--c-primary-vibrant);
				color: var(--c-background);
				transform: scale(1.2);
			}
			
			@media (min-width: 130rch) {
				--scroll-hint: 0;
				--edge-fade-width: clamp(2rem, 4svw, 4rem);
				--edge-fade-inset: clamp(3rem, 4svw, 4rem);
				
				&::part(base) {
					gap: var(--sl-spacing-medium);
				}
				
				&::part(navigation-button) {
					display: flex;
					inline-size: 3rem;
					block-size: 3rem;
				}
			}
			
			sl-carousel-item.carousel-step {
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				gap: var(--column-gap);
				grid-template-areas:
					"label"
					"description"
					"image";
				place-items: center;
				padding: clamp(1rem, 2vw, 2rem);
				grid-row: 1 / -1;
				grid-template-rows: subgrid;
				
				.step-label {
					grid-area: label;
					color: var(--c-primary-vibrant);
					text-decoration: underline;
					text-decoration-thickness: 0.2rem;
					text-underline-offset: 0.35rem;
					font-weight: 750;
				}
				
				.step-description {
					grid-area: description;
					color: var(--c-copy);
					text-wrap: pretty;
				}
				
				> img {
					grid-area: image;
					margin-block-start: 1rem;
					border-radius: 1rem;
					--c-shadow-base: oklch(from var(--c-copy) l c h);
					--box-shadow:
						0px 0.3px  0.6px 0px oklch(from var(--c-shadow-base) l c h / 0.05),
						0px 2.4px  4.8px 0px oklch(from var(--c-shadow-base) l c h / 0.14),
						0px 7.7px 15.4px 0px oklch(from var(--c-shadow-base) l c h / 0.23);
					box-shadow: var(--box-shadow);
					object-position: center;
				}
				
				@media (min-width: 130rch) {
					grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
					gap: 1rem clamp(1.5rem, 3svw, 3rem);
					grid-template-areas:
						"label       image"
						"description image";
					justify-items: stretch;
					align-items: stretch;
					padding-inline: clamp(2rem, 4svw, 4rem);
					
					.step-label {
						align-self: end;
					}
					
					> img {
						margin-block-start: 0;
					}
				}
			}
		}
		
		.carousel-note {
			color: var(--c-primary-vibrant);
			font-size: var(--step-2);
			font-weight: 750;
			margin-block-start: 1.5rem;
			margin-block-end: 0;
			text-align: center;
		}
	}
	
	/*
	HACK: Safari 26.5 and below have a subgrid related browser bug that affects the carousels on
	small viewports. The bug is fixed in a Safari Technical Preview after 26.5. A script has been
	placed at the top of the layout which will detect the Safari version and add it to the document 
	so that CSS can target it. The simple fix is to remove subgrid for affected Safari versions.
	
	TODO(2026 July): Check that this hack is not affecting the version of Safari after 26.5
	*/
	html[safari^="1"], html[safari^="26"] {
		sl-carousel-item.carousel-step {
			grid-template-rows: auto auto auto !important;
		}
	}
	
	/*
	HACK: Microsoft's form editor is built on a crappy WYSIWYG editor designed for HTML emails. The
	form is full of email-style html which causes the rest of the page layout to overflow and break.
	This hack removes the email-style html element's default styles and maps them onto our page's
	grid layout.
	
	This means that content editors and marketers can still use the CRM's crappy WYSIWYG editor and
	make/change/move form fields around, and this hack here will clean up the form's styles to fit
	into our website's styles.
	
	Note: This can all be removed if we switch away from using Microsoft Dynamic's forms (provided
	through: "Customer Insights - Journeys").
	*/
	div[data-form-api-url] {
		grid-column: breakout;
		
		& > div:not(.formLoader) {
			width: 100% !important;
		}
		
		& .formLoader {
			width: 120px !important;
			height: 120px !important;
			margin-inline: auto !important;
		}
	}
	
	/* Scoped so as not to affect the captcha */
	@scope (div[data-form-api-url]) to (div#ms_captcha_holder) {
		[data-layout="true"] {
			width: 100% !important;
			max-width: 900px !important;
			margin-inline: auto !important;
		}
		
		[data-section="true"]:not([style*="display: none;"]) {
			display: flex !important;
			flex-wrap: wrap !important;
			width: 100% !important;
		}
		
		[data-container-width="100"] {
			width: 100% !important;
			flex: 0 0 100% !important;
		}
		
		[data-container-width="50"],
		[data-container-width="50.00"] {
			width: 100% !important;
			flex: 0 0 100% !important;
			
			@media (min-width: 130rch/*DO NOT CHANGE, READ ALL "@media" RELATED NOTES */) {
				width: 50% !important;
				flex: 0 0 50% !important;
			}
		}
		
		:where(
			.textFormFieldBlock,
			.lookupFormFieldBlock,
			.optionSetFormFieldBlock,
			.dateTimeFormFieldBlock,
			.multiOptionSetFormFieldBlock,
			.twoOptionFormFieldBlock
		) {
			width: 100% !important;
			padding: 0.5rem !important;
		}
		
		.lookupFormFieldBlock {
			position: relative !important;
			overflow: visible !important;
		}
		
		:where(label, label p, label a, label span, input, select, textarea, button) {
			font-size: 1rem !important;
			line-height: 1.45 !important;
			
			@media (min-width: 130rch/*DO NOT CHANGE, READ ALL "@media" RELATED NOTES */) {
				font-size: 1.125rem !important;
			}
		}
		
		:where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
			width: 100% !important;
			min-height: 3.25rem !important;
			padding: 0.875rem 1rem !important;
			border-radius: 0.25rem;
		}
		
		textarea {
			min-height: 10rem !important;
		}
		
		label {
			display: inline-block;
			padding: 0 0 0.625rem !important;
		}
		
		label p {
			margin: 0 !important;
		}
		
		input[type="checkbox"],
		input[type="radio"] {
			width: 1.125rem !important;
			height: 1.125rem !important;
			transform: scale(1.35);
			transform-origin: center;
		}
		
		.radiobuttons > div,
		.twooption_checkbox > div {
			display: flex !important;
			align-items: center !important;
			gap: 0.75rem !important;
		}
		
		.radiobuttons > div label,
		.twooption_checkbox > div label {
			padding: 0 !important;
		}
		
		.submitButton {
			padding: 0.875rem 1.5rem !important;
		}
		
		.onFormSubmittedFeedback,
		.onFormSubmittedFeedbackInternalContainer,
		.onFormSubmittedFeedbackMessage {
			font-family: inherit !important;
		}
		
		.onFormSubmittedFeedbackMessage {
			font-size: 1rem !important;
			line-height: 1.45 !important;
			font-weight: 600 !important;
			
			@media (min-width: 130rch/*DO NOT CHANGE, READ ALL "@media" RELATED NOTES */) {
				font-size: 1.125rem !important;
			}
		}
	}

	
	/*
	HACK: Vimeo's embedded videos uses some less than great css. (the famous 56.25 padding hack)
	Rather than fix all the embeds, we can patch up their embedded styles here
	
	Note: This can be removed if Vimeo updates their embed code.
	*/
	div[style*="56"] {
		margin-top: 1rem;
	}
	
	a[href^=tel] {
		text-wrap: nowrap;
	}
}