/* 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
			*/
			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 > 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-card > :where(img, video):only-child {
		grid-column: 1 / -1;
	}
	
	mrc-left, mrc-right, mrc-grid {
		mrc-card {
			p {
				padding-inline: var(--column-gap);
			}
			&:has(p) {
				padding-bottom: var(--column-gap);
			}
			&: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;
		}
	}
	
	:where(mrc-left, mrc-right){
		/*
		Don't vertically align, since the mrc-faq's height would change in ways that would
		negatively affect readability.
		*/
		&:has(mrc-faq) {
			align-content: start;
		}
		/*
		Making the mrc-faq sticky means it can be used as an aside for more details (for the content
		in the other column).
		*/
		mrc-card:has(mrc-faq) {
			position: sticky;
			top: 5rem;
		}
	}
	mrc-faq {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: inherit;
		
		& > details {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: inherit;
			
			position: relative;
			
			interpolate-size: allow-keywords;
			
			border-top: 1px solid oklch(from var(--c-copy) l c h / 0.25);
			&:first-child {
				border-top: none;
			}
			
			/* Question */
			summary {
				list-style: none;
				cursor: pointer;
				
				/*
				UGLY: Ensure the clickable area of <summary> is the full width of the <details>
				element on the appliance pages.
				*/
				grid-column: 1 / -1;
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 1rem;
				padding: 1rem var(--column-gap);
				
				& > :where(h1, h2, h3, h4, h5, h6) {
					margin: 0;
					color: inherit;
					transition: color 0.3s;
				}
				
				&:hover {
					background: var(--c-primary-light);
				}
				
				position: relative;
				
				--button-width: 1rem;
				--button-thickness: 3px;
				&::before, &::after {
					pointer-events: none;
					content: "";
					display: block;
					position: absolute;
					
					right: calc(var(--column-gap) - var(--button-width));
					
					width: var(--button-width);
					height: var(--button-thickness);
					border-radius: var(--button-thickness);
					background: var(--c-primary-vibrant);
				}
				
				&::after {
					transform: scaleY(1) rotate(90deg);
					transition: transform 0.3s;
				}
			}
			
			&[open] > summary {
				color: var(--c-primary-vibrant);
			}
			
			&[open] > summary::after {
				transform: scaleY(0) rotate(90deg);
			}
			
			&::before, &::after {
				pointer-events: none;
				content: "";
				display: block;
				position: absolute;
				inset-block: 0;
				z-index: 1;
				width: 2px;
				background: transparent;
				transition: background 0.3s;
			}
			
			&::before {
				left: 0;
			}
			&::after {
				right: 0;
			}
			
			&::details-content {
				grid-column: inherit;
				display: grid;
				grid-template-columns: subgrid;
				
				padding: 0rem var(--column-gap);
				overflow: clip;
				height: 0;
				
				@supports(interpolate-size: allow-keywords){
					@media (prefers-reduced-motion: no-preference) {
						transition:
							height 0.3s,
							padding 0.3s,
							content-visibility 0.3s
						;
						transition-behavior: allow-discrete;
					}
				}
			}
			
			&[open]::details-content {
				height: auto;
				
				padding: 1rem var(--column-gap);
			}
			&[open] {
				/* Override p's styling in an mrc-card since ::details-content has its own padding */
				p {
					padding-inline: 0;
				}
				
				&::before, &::after {
					background: var(--c-primary-vibrant);
				}
			}
			
			/*
			UGLY: There is currently no way to target elements within the ::details-content
			pseudo-element.
			
			We want the ::details-content pseudo-element to have layout control of its children,
			through padding. So we need the first element inside ::details-content to remove its
			margin-top and last element inside ::details-content to remove its margin-bottom.
			
			We can write selectors to target <details>'s children, so we do have a way to remove the
			margins from the correct elements.
			
			However, we can't just select the first/last/n-th elements within <details> because the
			<summary> element may be taking any place within <details>, so we have to check where it
			is first.
			
			These selectors find the correct elements, they're just ugly.
			*/
			&:has(> summary:nth-child(1)) {
				& > *:nth-child(2) {
					margin-top: 0;
				}
			}
			&:not(:has(> summary:nth-child(1))) {
				& > *:nth-child(1) {
					margin-top: 0;
				}
			}
			&:has(> summary:nth-last-child(1)) {
				& > *:nth-last-child(2) {
					margin-bottom: 0;
				}
			}
			&:not(:has(> summary:nth-last-child(1))) {
				& > *:nth-last-child(1) {
					margin-bottom: 0;
				}
			}
		}
	}
	
	/*
	HACK: Microsoft's form sets widths on page-load, but don't listen for window resizing. This
	breaks any page with the form on it if the page is loaded on a large viewport then resized to a
	smaller viewport. So, we're forced to override the form's css to fix this.
	
	Note: This should be removed if the Microsoft forms are removed
	*/
	div[data-form-api-url], div[data-form-api-url] *[style*=width] {
		max-width: 100%;
		width: auto !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
	*/
	div[style*="56"] {
		margin-top: 1rem;
	}
}