/**
 * Site footer.
 *
 * Figma: footer 1720:32702 — desktop variant 1560:40640 (1440 wide),
 * mobile variant 1720:32701 (390 wide).
 *
 * Mobile first. Desktop from 64rem.
 */

/* ==================================================================
 * Frame
 * ================================================================ */

.site-footer {
	position: relative;
	isolation: isolate;
	padding-block: 4rem; /* 64 */
	overflow: hidden;
	background-color: var(--color-background-purple);
	/* Two of the three decorative shapes (1720:32599, 1720:32600), pinned to the top. */
	background-image:
		url("../images/footer/shape-square.svg"),
		url("../images/footer/shape-tall.svg");
	background-repeat: no-repeat;
	background-position:
		left -1.25rem top -3.125rem,   /* x -20, y -50 */
		right 1.25rem top -6.5625rem;  /* right 20, y -105 */
	background-size: 15.625rem 15.625rem, 4.75rem 11.25rem; /* 250x250, 76x180 */
}

.site-footer__inner {
	padding-inline: var(--gutter-mobile);
}

/* ==================================================================
 * Link columns and contact
 * ================================================================ */

.site-footer__top {
	display: grid;
	gap: 2rem; /* columns to contact, 586 -> 618 */
}

.footer-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.125rem; /* row 16, column 18 */
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10 on mobile */
	padding-left: 1rem;
	border-left: 1px solid var(--color-primary);
}

.footer-column__title {
	font: var(--type-header-2xs);
	color: var(--color-text-dark);
}

.footer-column__title a {
	color: inherit;
	text-decoration: none;
}

.footer-column__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Type on the item, not only the link: the <li> line box would otherwise
 * inherit the body's 21px line height and add 3px per row. */
.footer-column__list > li {
	font: var(--type-body-xs);
}

.footer-column__list a {
	font: inherit;
	color: var(--color-text-dark);
	text-decoration: none;
}

.footer-column__list a:hover,
.footer-column__title a:hover {
	color: var(--color-primary);
}

/* A column whose links are set in the heading style (1560:40516).
 * Add the CSS class footer-column--strong to the column's menu item. */
.footer-column--strong {
	grid-column: 1 / -1;
	gap: 0.5rem;
}

.footer-column--strong .footer-column__list {
	display: contents;
}

.footer-column--strong .footer-column__list > li {
	font: var(--type-header-2xs);
}

/* ---- Contact (1560:40534) ---- */

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer-contact__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer-contact__title {
	font: var(--type-header-2xs);
	color: var(--color-text-dark);
}

.footer-contact__details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-contact__row {
	display: flex;
	gap: 0.375rem;
	align-items: flex-start;
	color: var(--color-text-dark);
}

.footer-contact__row--location {
	align-items: center;
}

.footer-contact__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.footer-contact__icon svg {
	width: 100%;
	height: 100%;
}

.footer-contact__address {
	max-width: 12.1875rem; /* 195 */
	font: var(--type-body-xs);
}

.footer-contact__address strong {
	font-weight: var(--font-weight-semibold);
}

.footer-contact__phone {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.footer-contact__phone a {
	font: var(--type-subtitle-m);
	color: var(--color-text-dark);
	text-decoration: none;
}

.footer-contact__hours {
	font: var(--type-subtitle-s);
	color: var(--color-text-grey);
}

.footer-contact .button {
	width: 100%;
}

/* ==================================================================
 * Accreditation (logo area 1720:32206 / 1720:32664)
 * ================================================================ */

.site-footer__accreditation {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

.site-footer__accreditation-text {
	font: var(--type-body-xs);
	color: var(--color-text-dark);
}

.footer-logos {
	display: flex;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-logos__item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	max-width: calc((100% - 1rem) / 3);
	height: 2.8125rem; /* 45: 10 + 22.7 image + 10 + borders */
	padding: 0.625rem 0.75rem;
	overflow: hidden;
	background-color: var(--color-background-white);
	border: 1px solid var(--color-border-light);
	border-radius: 0.5rem;
}

.footer-logos__item a {
	display: flex;
	width: 100%;
	height: 100%;
}

.footer-logos__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

/* ==================================================================
 * Wordmark and legal line
 * ================================================================ */

.site-footer__wordmark {
	position: relative;
	display: flex;
	align-items: center;
	width: 21.8125rem; /* 349 */
	max-width: 100%;
	aspect-ratio: 349 / 72;
	margin: 10.75rem auto 0; /* 172: leaves room for the wide shape */
	color: var(--color-text-dark);
	--logo-mark-color: var(--color-primary);
}

.site-footer__wordmark .logo {
	width: 100%;
	height: auto;
}

/* Third decorative shape (1720:32598), sits behind the wordmark and runs off the right edge. */
.site-footer__wordmark::before {
	position: absolute;
	top: -3.625rem;  /* 58 above the wordmark */
	left: 10.375rem; /* 186 from the frame edge, less the 20px gutter */
	z-index: -1;
	width: 22.625rem; /* 362 */
	height: 6.25rem;  /* 100 */
	content: "";
	background: url("../images/footer/shape-wide.svg") no-repeat 0 0 / 100% 100%;
}

.site-footer__legal {
	margin-top: 1.75rem; /* 28 */
	font: var(--type-subtitle-s);
	color: var(--color-text-grey);
}

/* ==================================================================
 * Desktop
 * ================================================================ */

@media (min-width: 64rem) {
	.site-footer {
		padding-block: 5.25rem; /* 84 */
		background-image: url("../images/footer/bg-desktop.svg");
		background-position: center top;
		background-size: 90rem 53.6875rem; /* 1440x859 */
	}

	.site-footer__inner {
		max-width: calc(var(--container-max) + 2 * var(--gutter-mobile)); /* 1220 */
		margin-inline: auto;
	}

	/* Column starts at 110, 400, 732 and 1083 in a 1220 container. */
	.site-footer__top {
		grid-template-columns: minmax(0, 1fr) 15.4375rem; /* contact 247 */
		gap: 0;
	}

	.footer-menu {
		grid-template-columns: minmax(0, 290fr) minmax(0, 332fr) minmax(0, 351fr);
		gap: 0;
	}

	.footer-column {
		gap: 1rem;
	}

	.footer-column--strong {
		grid-column: auto;
		justify-content: space-between;
		gap: 0;
		white-space: nowrap;
	}

	.footer-contact {
		gap: 1.5rem;
	}

	.site-footer__accreditation {
		flex-direction: row;
		gap: 2rem;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 4rem; /* 347 -> 411 */
	}

	.site-footer__accreditation-text {
		flex: 0 1 32.9375rem; /* 527 */
	}

	.footer-logos {
		flex: 0 1 37.375rem; /* 598 */
		gap: 1rem;
	}

	/* Three slots across 598px, 16px apart, even when fewer logos are set.
	 * Figma insets the image 8 top, 10 left and right, ~6 bottom. */
	.footer-logos__item {
		max-width: calc((100% - 2rem) / 3);
		height: 3.625rem; /* 58 */
		padding: 0.5rem 0.625rem 0.375rem;
	}

	.site-footer__wordmark {
		width: 50.0625rem; /* 801 */
		aspect-ratio: 801 / 166;
		margin: 3.875rem 0 0; /* 62 */
	}

	.site-footer__wordmark::before {
		display: none;
	}

	.site-footer__legal {
		margin-top: 3.875rem; /* 62 */
		text-align: center;
	}
}