/* styles for anything within the main element */

.main-content--sustainability {
}

.body-content {
	display: flex;
	/* flex-direction: column; */
	justify-content: center;
	/* padding-inline-start: 6rem;
	padding-inline-end: 3rem; 
	padding-block-start: 2rem; */
}

/* @media (min-width: 992px) {
	.body-content {
		flex-direction: row;
	}
} */

/* wrapper div - maybe move this to global as it's a utility */
.limit-width-wrapper {
	/* min() here so content doesn't get too wide on large displays */
	width: min(100%, 75rem);

	/* temp padding and gap so we can see what's happening */
	/* padding: 0.3rem; */
	/* gap: 0.2rem; */
	/* border: 1px solid hotpink; */
}

.limit-width-wrapper--single-column {
	padding-inline: 1rem;
}

@media (min-width: 992px) {
	/* .limit-width-wrapper--single-column {
		padding: 0;
	} */
}
/* flex utility, mostly used in conjunction with the limit width wrapper */
.flex {
	display: flex;
}

/* flex-direction utility, again used with the limit width wrapper */
/* it'll be direction row for desktop, column for anything below 992 */
.direction {
	flex-direction: column;
}

@media (min-width: 992px) {
	.direction {
		flex-direction: row;
	}
}

.body-content--light {
	color: var(--text);
}

.body-content--dark {
	color: hsl(var(--white));
	background-color: hsl(var(--navy));
}

.body-content__text {
	/* flex-basis: 50%; */
	display: flex;
	/* if this is column, we can make the text container stretch to full height */
	flex-direction: column;
	/* direction is column so align-items is the horizontal alignment */
	align-items: center;
	/* padding-block-start: 3rem; */
	/* padding-inline-start: 6rem; */

	/* align-items: center;
	justify-content: center; */
	font-size: 0.9rem;

	padding-block: 2rem;
	padding-inline: 1rem;

	/* border: 1px solid aqua; */
}

@media (min-width: 992px) {
	.body-content__text {
		padding: 0;
		flex-basis: 50%;
	}
}

/* full height container for the text div so the text div can be vertically centered */
/* and the bottom border of this container  serves as the little divider */
/* yeah, it's a lot of divs but I think it's the most elegant and practical solution */

.body-content__text-container {
	/* make it 100% of the height of its parent */
	flex-basis: 100%;

	/* make it the max-width that we want the text to be */
	max-width: 25rem;

	display: flex;
	align-items: center;

	/* background-color: papayawhip; */
}

/* the bottom border needs to be different colour depending on the background */
/* only for desktop though so the class has no border by default and we apply the border with @media */

.show-border {
	/* put a bottom border on it that serves as the lttle divider */
	/* border-bottom: 1px solid hsl(var(--white)); */
	border: none;
}

@media (min-width: 992px) {
	.body-content--light .show-border {
		/* put a bottom border on it that serves as the lttle divider */
		/* border-bottom: 1px solid var(--text); */
		border-bottom: 1px solid hsl(var(--navy) / 0.5);
		/* border-bottom: 1px solid fuchsia; */
	}

	.body-content--dark .show-border {
		/* put a bottom border on it that serves as the lttle divider */
		/* border-bottom: 1px solid hsl(var(--white)); */
		border-bottom: 1px solid hsl(var(--white) / 0.75);
	}
}

.body-content__text-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	/* border: 1px solid goldenrod; */
	/* border-bottom: 1px solid var(--text); */
}

.body-content__text h2 {
	font-size: 2rem;
	line-height: 1.2;
	text-wrap: balance;
	margin-bottom: 0.5rem;
}

.body-content__text .cta-link {
	color: hsl(var(--white));
	background-color: hsl(var(--pink));

	margin-block-start: 3rem;
	width: 10rem;
}

.body-content__img {
	/* flex-basis: 50%; */
	display: flex;
	align-items: center;
	justify-content: center;
	/* any padding here has to symmetrical b/c everything's centred */
	/* padding-block-start: 3rem;
	padding-block-end: 1rem; */
	/* padding-block: 1rem; */

	/* border: 1px solid yellowgreen; */
}

@media (min-width: 992px) {
	.body-content__img {
		flex-basis: 50%;
		padding-block: 3rem;
	}
}

.body-content--dark .body-content__img {
	/* any padding here has to symmetrical b/c everything's centred */
	padding-block-start: 2rem;
	padding-block-end: 1rem;
}

@media (min-width: 992px) {
	.body-content--dark .body-content__img {
		/* any padding here has to symmetrical b/c everything's centred */
		padding-block: 1rem;
	}
}

/* extra padding for first and last body-content sections on the sustainability page???? */
.body-content--sustainability:first-of-type {
	padding-block-start: 0.3rem;
}

.body-content--sustainability:last-of-type {
	padding-block-end: 0.3rem;
}

/* less padding for the images on the sustainability page */
.body-content--sustainability .body-content__img {
	padding-block: 0.5rem;
}

.body-content--contact .body-content__text {
	flex-basis: 33%;
}

.body-content--contact .body-content__text-container {
	/* max-width: 36ch; */
	text-wrap: balance;
}

@media (min-width: 992px) {
	.body-content--contact .body-content__text-container {
		max-width: 36ch;
		/* text-wrap: balance; */
	}
}

.body-content--contact address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.body-content--contact address a {
	color: var(--text);
	outline: none;
}

.body-content--contact address a:is(:hover, :focus-visible) {
	background-image: linear-gradient(to left, hsl(var(--blue)), hsl(var(--pink)), hsl(var(--yellow)));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* .body-content--contact .address__company {
	font-weight: 700;
} */

.body-content__img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.body-content--light .body-content__img img {
	/* limit the size of the image */
	/* max-width: 30rem; */
	/* max-width here MUST include the 100% becuase it's overriding the max-width 100% rule from reset.css */
	max-width: min(30rem, 100%);
}

.body-content--dark .body-content__img img {
	/* image is bigger in body-content--dark */
	/* max-width: 35rem; */
	/* max-width here MUST include the 100% becuase it's overriding the max-width 100% rule from reset.css */
	max-width: min(35rem, 100%);
}

.body-content__map {
	flex-basis: 66%;
	display: flex;
	/* align-items: center; */
	justify-content: end;
	/* any padding here has to symmetrical b/c everything's centred */
	padding-block: 1.5rem;

	/* border: 1px solid greenyellow; */
}

@media (min-width: 992px) {
	.body-content__map {
		/* any padding here has to symmetrical b/c everything's centred */
		/* padding-block: 1.5rem; */
	}
}

/* google-map-div (the div that the map is injected into) is using padding to control width and height */
/* so we need an extra container if we want padding and suchlike */
/* probably only need vertical padding */
.body-content__map-container {
	flex-basis: 100%;
	/* padding-block: 2rem; */
	/* height: 20rem; */
	/* display: flex; */

	/* min-width: 42rem; */
	/* aspect-ratio: 4 / 3; */
	/* min-height: 25rem; */
	/* temporary placeholder image */
	/* background-image: url(/img/google-map-placeholder.webp); */
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
	/* border: 1px dashed orchid; */
}

@media (min-width: 992px) {
	.body-content__map-container {
		padding-block: 2rem;
	}
}

/* the cta buttons in main (not the home page ctas though) */

.cta-link--services {
	color: var(--text);
	/* background-color: hsl(var(--blue)); */
	/* because the text is white, this can't end on yellow */
	/* actually gonna try just two colours here */
	/* lighthouse will probably cmplain about contrast here */
	background-image: linear-gradient(to right, hsl(var(--pink)) 0% 33%, hsl(var(--blue)) 66% 100%);
	background-size: 300%;
	background-position: 0 0;

	transition: background-position 0.5s ease-in;
}

.cta-link--services:is(:hover, :focus-visible) {
	/* color: var(--text); */
	/* background-color: hsl(var(--blue)); */
	/* background-image: linear-gradient(to left, hsl(var(--blue)), hsl(var(--pink)), hsl(var(--yellow))); */
	/* background-size: 200%; */
	background-position: 100% 0;
}

/* more ways we can help section */

.wecanhelp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;

	padding-block-start: 5rem;
	padding-block-end: 3.4rem;
	color: var(--text);

	/* border: 1px solid aqua; */
}

.wecanhelp h2 {
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	text-wrap: balance;

	padding-inline: 1rem;

	/* border: 1px solid darkcyan; */
}

.wecanhelp p {
	text-align: center;
	max-width: 85ch;

	/* border: 1px solid blueviolet; */
}

.wecanhelp ul {
	/* reset the default ul behaviour */
	list-style: none;
	padding: 0;
	/* kp's video on this pattern */
	/* https://youtu.be/OZ6qKoq7RJU */
	--min-col-width: 10rem;
	display: grid;
	/* we have 2 values for the second argument in repeat (the track listings) because we always want either 2 or 4 columns never 3 */
	/* see another kp video https://www.youtube.com/shorts/scaiYZISGpk */
	/* prettier-ignore */
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(min(var(--min-col-width), 45%), 1fr)
			minmax(min(var(--min-col-width), 45%), 1fr)
		);
	gap: 1rem;
	/* align-items: center; */
	justify-items: center;
	padding-block: 2rem;

	/* margin-block-start: 2rem; */
	width: min(95%, 75rem);
	/* border: 1px solid blueviolet; */
}

@media (min-width: 992px) {
	.wecanhelp ul {
		/* flex-direction: row; */
		gap: 0;
		/* padding-block: 4rem; */
	}
}

.wecanhelp li {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	/* gap: 0.5rem; */
	/* this should ensure they're all the same width */
	/* flex-basis: 100%; */
	/* min-width: 15rem; */
	/* min-height: 18rem; */

	padding-block-start: 8rem;

	background-repeat: no-repeat;
	background-size: 8.5rem;
	background-position: top center;
	/* border: 1px solid firebrick; */
}

.wecanhelp li h3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 4rem;
	margin-block-end: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	max-width: 20ch;
	text-wrap: balance;

	/* border: 1px solid firebrick; */
}

@media (min-width: 992px) {
	.wecanhelp li h3 {
		font-size: 1.3rem;
		font-weight: initial;
		line-height: 1.3;
	}
}

.wecanhelp li div {
	font-size: 0.9rem;
	text-align: center;
	text-wrap: balance;
	max-width: 22ch;
}

.wecanhelp-bullet--scouring {
	background-image: url(/svg/wecanhelp-icon-yellow.svg);
}

.wecanhelp-bullet--winding {
	background-image: url(/svg/wecanhelp-icon-blue.svg);
}

.wecanhelp-bullet--various {
	background-image: url(/svg/wecanhelp-icon-green.svg);
}

.wecanhelp-bullet--collections {
	background-image: url(/svg/wecanhelp-icon-pink.svg);
}

.secondary-cta {
	min-height: 6.5rem;
	background: linear-gradient(to right, hsl(var(--blue)), hsl(var(--pink)), hsl(var(--yellow)));

	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.secondary-cta a {
	/* font-family for the cta link is handled by the serif utility class whcih is in global.css */
	/* we have a utility class for the serif font */
	/* otherwise we have to update every heading class */
	/* everytime we decide to change the font */
	font-size: 2rem;
	color: hsl(var(--white));
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	padding: 0.5rem;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* position: relative; */
	transition: opacity 0.2s ease-in-out;

	/* we need to make this wider than it needs so the hover ::after doesn't shift the text */
	/* min-width: 50ch; */
}

.secondary-cta a:hover {
	/* scale: 87.5%; */
	opacity: 75%;
	/* outline: 1px dotted hsl(var(--white)); */
}

.secondary-cta a:focus-visible {
	outline: 1px dotted hsl(var(--white));
}

.pagebreak-gradient {
	height: 2rem;
	background: linear-gradient(to left, hsl(var(--blue)), hsl(var(--pink)), hsl(var(--yellow)));
}

/* privacy page stuff */

.body-content--single-column {
	justify-content: center;
	/* border: 1px solid fuchsia; */
}
.body-content--single-column h1 {
	font-size: 3rem;
	font-weight: 500;
	padding-block: 2rem;
}

.body-content--single-column h2 {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--muted);
	/* margin-top: 2rem; */
	margin-bottom: 2rem;
}

.body-content--single-column h2:not(:first-of-type) {
	margin-top: 4rem;
}

.body-content--single-column p {
	max-width: 80ch;
	margin-block-end: 1rem;
}

.body-content--single-column ul {
	max-width: 75ch;
	color: hsl(var(--darkergrey));
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.body-content--single-column ul li {
	margin-bottom: 1rem;
}

.body-content--single-column address {
	font-style: normal;
}

.body-content--single-column a {
	/* color: var(--text); */
	color: var(--accent-2);
	text-decoration: none;
}

.body-content--single-column a:is(:hover, :focus-visible) {
	color: var(--accent-2);
	/* text-decoration: none; */
	border-bottom: 1px dotted var(--accent-2);
}