:root {
	--font-family-headings: Barlow,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* The manufacturing sub-site only */
html.manufacturing {
	--primaryColor: 22, 41, 63;

	.breadcrumbs {
		list-style: none;
		font-size: 0.8rem;
		margin-block-end: 0;

		display: flex; flex-wrap: wrap; gap: 0em;
		justify-content: center;

		li + li::before {
			content: '/'; margin-inline: 0.5em;
		}
	}

	.childpages {
		ul {
			list-style: none;
			font-size: 0.8rem;
			margin-block-end: 0;

			display: flex; flex-wrap: wrap; gap: 0em;
			justify-content: center;

			li + li::before {
				content: '|'; margin-inline: 0.5em;
			}
		}
	}

	.mixedContent {
		text-align: left;
		margin-block-start: 4em;

		.spacer {
			&.small  { height: 2em; }
			&.medium { height: 4em; }
			&.large  { height: 8em; }
		}

		.contentTypeImages.grid .outerWrapper {
			gap: 20px;
		}

		.cms-textblock {
			ul {
				li {
					background-image: url(../images/chevron-right-black.svg);

					& + li {
						margin-block-start: 0.5em;
					}
				}
			}
		}
		.blockquote {
			border-left-color: rgb(var(--primaryColor));
		}

		.mixedContentFiles h2 {
			display: none;
		}
	}

	.featuredImageArea {
		/* undo old styling, we want positioning on not just the h1 */
		h1 { position: relative; inset: inherit; pointer-events: none; }

		.textbox {
			color: white;
			position: absolute; bottom: 20px; left: 20px;
		}

		.breadcrumbs {
			justify-content: start; z-index: 10;
			margin: 0 0 1em 20px;
		}
	}
}

/* The new main homepage for all sites */
.threeColumnImages {
	display: grid;
	grid-template-columns: 1fr;

	.block {
		display: grid;

		> * {
			grid-area: 1 / 1;
		}

		.text {
			z-index: 3;
			padding: 20px;
		}
		.image {
			opacity: 0.5;
		}
		img {
			transition: all ease 0.3s;
		}

		&:hover {
			.image {
				img {
					transform: scale(1.2);
				}
				&:after {
					transform: scale(1.5) rotate(4deg) translateX(0%);
				}
			}
		}
	}

	h2 {
		font-family: var(--font-family-headings);
		font-size: 50px;
		text-transform: uppercase;
	}

	@media screen and (min-width: 700px) {
		.block > .image {
			picture, img {
				height: 33vh;
				min-height: 240px;
			}
		}
	}

	@media screen and (min-width: 1024px) {
		grid-template-columns: 1fr 1fr 1fr;
		height: calc(100vh - 200px);

		.block > .image {
			picture, img {
				height: 100%; width: 100%;
				object-fit: cover;
			}
		}

		.block {
			position: relative;
			overflow: clip;

			.text {
				color: white;
			}
			.image {
				opacity: 1;
			}

			.image::after {
				position: absolute;
				content: "";
				inset: 0; z-index: 2;
				background-color: oklch(from rgb(var(--primaryColor)) l c h / 0.7);
				transition: all ease 0.3s;
				transform: scale(1.1) rotate(4deg) translateX(-50%);
			}
		}

		.manufacturing .text {
			align-self: center;
		}
		.marine .text {
			align-self: end;
		}
	}

	@media screen and (min-width: 1280px) {
		gap: 20px;
	}
}