:root {
	/* 
	Elevate these CustomProps to :root so we can use them in
		- the site-header, and 
		- the site-footer
	*/
	--container-max-inline-size: 68rem;
	/* 1088px */
	--container-padding-block: 2rem;
	/* 48px */
	--container-padding-inline: 2rem;
	/* 32px */
}

.container,
.container_framework {
	--container-color-background: var(--color-white);
	--container-color-foreground: var(--color-brown-600);
	--container-background-position: 50% 50%;
	--container-background-repeat: no-repeat;
	--container-background-size: cover;

	position: relative;
	z-index: 0;
	max-inline-size: var(--container-max-inline-size);
	margin-inline: auto;
	padding-block: var(--container-padding-block);
	padding-inline: var(--container-padding-inline);
	color: var(--container-color-foreground);
}

.container .heading {
	color: var(--color-black-950);
}

:is(.container[data-theme="rich"],
	.container[data-theme="emphasis"]) .heading {
	color: var(--color-white);
}

.container_header {
	margin-block-end: calc(var(--container-padding-block) / 2);
}

.container_footer {
	margin-block-start: calc(var(--container-padding-block) / 2);
}

:is(.container_header,
	.container_footer)[data-align="center"] {
	text-align: center;
}

:is(.container, .container_framework)::after {
	display: block;
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	margin-inline-start: -50vw;
	z-index: -1;
	background-color: var(--container-color-background);
	background-image: var(--container-background-image);
	background-position: var(--container-background-position);
	background-repeat: var(--container-background-repeat);
	background-size: var(--container-background-size);
}

/* Remove margins from paragraphs and headings to stop them conflicting with the container's padding */
.container>.layout :is(p, .heading):first-child,
.container> :is(p, .heading):first-child {
	margin-block-start: 0 !important;
}

.container>.layout :is(p, .heading):last-child,
.container> :is(p, .heading):last-child {
	margin-block-end: 0 !important;
}

@media (min-width: 720px) {

	/* Set double bottom padding, so that subsequent content has space to edge in */
	.container_foundation {
		padding-block-end: calc(var(--container-padding-block) * 2) !important;
	}

	/* A mechanism for shifting content up outside of the container */
	.container .container_elevator {
		margin-block-start: calc(var(--container-padding-block) * -2);
	}
}

/* CSS Container query for handling the location lookup form */
:is(.container, .container_framework)[data-mode="lookup-form"] {
	container-type: inline-size;
	container-name: form-condensed;
	/* See ../form.css */
}

/* 
	Container theming
	=========================================================
*/
:is(.container, .container_framework)[data-theme="alternate"] {
	/* The subtle grey alternate to the default white container */
	--container-color-background: var(--color-surface-lighter);
}

:is(.container, .container_framework)[data-theme="glow"] {
	--container-background-image: linear-gradient(180deg,
			hsla(18, 28%, 93%, 1) 0%,
			hsla(0, 0%, 100%, 1) 30%,
			hsla(0, 0%, 100%, 1) 70%,
			hsla(16, 27%, 86%, 1) 100%);
}

:is(.container, .container_framework)[data-theme="rich"] {
	/* The coffee-coloured and inverted container */
	--container-color-background: var(--color-brown-600);
	--container-color-foreground: var(--color-white);
}

:is(.container, .container_framework)[data-theme="emphasis"] {
	/* Mostly used for the call-us banner, black background, yellow links. */
	--container-color-background: var(--color-red-400);
	--container-color-foreground: var(--color-brown-100);
	--container-background-image: url('../../img/bg_container_swirl.svg');
	--container-background-position: 50% 50%;
	--container-background-size: cover;
}

:is(.container, .container_framework)[data-theme="special"] {
	/* Rainbow gradient with infinity swirl */
	--container-background-image:
		url('../../img/bg_container_swirl.svg'),
		linear-gradient(270deg,
			var(--color-orange-500) 0%,
			var(--color-red-500) 50%,
			var(--color-purple-500) 100%);
	--container-background-position: 50% 50%, 0 0;
	--container-background-size: cover, cover;
}

:is(.container, .container_framework)[data-theme="spectral"] {
	/* Horizontal spectral gradient. */
	--container-background-image:
		linear-gradient(270deg,
			var(--color-white) -10%,
			var(--color-purple-200) 5%,
			var(--color-red-200) 45%,
			var(--color-red-200) 55%,
			var(--color-orange-200) 95%,
			var(--color-white) 110%);
}

:is(.container, .container_framework)[data-theme="stripped"] {
	/* Removes any default background color */
	--container-color-background: transparent;
}

/* 
	Container background image positioning
	========================================================= 
*/
:is(.container, .container_framework)[data-anchor="top"] {
	--container-background-position: 50% 0;
}

:is(.container, .container_framework)[data-anchor="center"] {
	--container-background-position: 50% 50%;
}

:is(.container, .container_framework)[data-anchor="bottom"] {
	--container-background-position: 50% 100%;
}

/* 
	Container nesting
	========================================================= 
	If a container is nested within another container, we'll want to bypass the
	usual `vw` based calculations, and instead fill the allocated space only.
*/
.container .container::after {
	inset: 0;
	block-size: 100%;
	inline-size: 100%;
	margin-inline-start: 0;
}

/* 
	Container masthead
	========================================================= 
	The first container in the `<main>` element can apply this mode, and therefore run
	its background beneath the `<site-header>`.
*/
.container[data-mode="masthead"]::after {
	inset-block-start: calc(var(--site-header-height) * -1);
	z-index: -2;
}

.container_masthead_background {
	position: absolute;
	inset-block-start: calc(var(--site-header-height) * -1);
	inset-block-end: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	margin-inline-start: -50vw;
	z-index: -1;
}

.container_masthead_background img {
	object-fit: cover;
	inline-size: 100%;
	block-size: 100%;
	object-position: 50% 50%;
	position: relative;
	z-index: 0;
}

@media (min-width: 1600px) {
	.container_masthead_background {
		inline-size: 1600px;
		margin-inline-start: -800px;
	}

	.container_masthead_background::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		inset-block: 0;
		inset-inline-start: 50%;
		inline-size: 1600px;
		margin-inline-start: -800px;
		background-image: linear-gradient(90deg,
				var(--container-color-background) 0%,
				transparent 15%,
				transparent 85%,
				var(--container-color-background) 100%);
	}

	.container_masthead_background img {
		inline-size: 1600px;
		object-fit: cover;
	}
}