/* ==========================================================================
   MSA Footer -- self-contained. Mirrors the header's token names so the two
   stay in step, but declares its own so it renders standalone.
   ========================================================================== */

.msa-footer {
	--msa-crimson: #C42031;
	--msa-black: #000000;
	--msa-white: #FFFFFF;

	--msa-teal: #00B1BA;
	--msa-blue: #264398;
	--msa-yellow: #FFD508;
	--msa-purple: #A73C96;

	--msa-footer-bg: #111111;
	--msa-card-bg: #191919;
	--msa-hairline: rgba(255, 255, 255, 0.12);
	--msa-text-dim: #B5B5B5;
	--msa-text-faint: #7C7C7C;

	--msa-display: "Bebas Neue", Impact, sans-serif;
	--msa-body: "Roboto", Arial, sans-serif;

	--msa-width: 1240px;
	--msa-radius: 6px;

	display: block;
	background: var(--msa-footer-bg);
	font-family: var(--msa-body);
	color: var(--msa-text-dim);
}

.msa-footer *,
.msa-footer *::before,
.msa-footer *::after {
	box-sizing: border-box;
}

.msa-footer .msa-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.msa-footer__inner {
	width: 100%;
	max-width: var(--msa-width);
	margin: 0 auto;
	padding: 72px 20px 0;
}

/* Accent modifiers -- shared vocabulary with the rest of the site. */
.msa-accent--crimson { --msa-accent: var(--msa-crimson); }
.msa-accent--teal    { --msa-accent: var(--msa-teal); }
.msa-accent--blue    { --msa-accent: var(--msa-blue); }
.msa-accent--yellow  { --msa-accent: var(--msa-yellow); }
.msa-accent--purple  { --msa-accent: var(--msa-purple); }

/* ------------------------------------------------ Land acknowledgement */

.msa-footer__land {
	max-width: 760px;
	padding-left: 22px;
	border-left: 3px solid var(--msa-crimson);
}

.msa-footer__eyebrow {
	margin: 0 0 12px;
	font-family: var(--msa-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--msa-white);
}

.msa-footer__land-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--msa-text-dim);
}

.msa-footer__land-text::before { content: "\201C"; }
.msa-footer__land-text::after  { content: "\201D"; }

/* ------------------------------------------------------------ Campuses */

.msa-footer__campuses {
	margin-top: 64px;
}

.msa-footer__heading {
	margin: 0 0 28px;
	font-family: var(--msa-display);
	font-size: 46px;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-white);
}

.msa-footer__campus-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.msa-footer__campus {
	padding: 24px 24px 22px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-card-bg);
}

.msa-footer__campus-name {
	margin: 0 0 14px;
	font-family: var(--msa-display);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--msa-white);
}

.msa-footer__campus-line {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-text-dim);
}

.msa-footer__room {
	display: inline-block;
	margin: 8px 0;
	padding: 4px 11px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.09);
	font-size: 13px;
	line-height: 1.4;
	color: var(--msa-white);
}

.msa-footer__phone {
	margin: 14px 0 0;
}

.msa-footer__phone a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--msa-crimson);
	text-decoration: none;
	transition: color 0.18s ease;
}

.msa-footer__phone a:hover {
	color: var(--msa-white);
}

.msa-footer__phone svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Opening hours sit under the phone number and read as information rather than
   an action, so they take the body colour instead of the link crimson. The clock
   is drawn as strokes, unlike the filled handset above it. */
.msa-footer__hours {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-text-dim);
}

.msa-footer__hours svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------- Brand and columns */

.msa-footer__main {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-top: 68px;
	padding-top: 48px;
	border-top: 1px solid var(--msa-hairline);
}

.msa-footer__logo {
	display: inline-block;
	line-height: 1;
}

.msa-footer__logo img {
	display: block;
	height: 54px;
	width: auto;
}

.msa-footer__tagline {
	margin: 18px 0 0;
	max-width: 260px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-text-dim);
}

.msa-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.msa-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: var(--msa-white);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.msa-footer__social a:hover {
	background: var(--msa-crimson);
	border-color: var(--msa-crimson);
}

.msa-footer__social svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.msa-footer__column-heading {
	margin: 0 0 16px;
	font-family: var(--msa-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--msa-text-faint);
}

.msa-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msa-footer__links li {
	margin: 0 0 11px;
}

.msa-footer__links a {
	font-size: 14px;
	line-height: 1.4;
	color: var(--msa-text-dim);
	text-decoration: none;
	transition: color 0.18s ease;
}

.msa-footer__links a:hover,
.msa-footer__links .current-menu-item > a {
	color: var(--msa-white);
}

.msa-footer__empty {
	margin: 0;
	font-size: 13px;
	font-style: italic;
	color: #6E6E6E;
}

/* -------------------------------------------------------- Legal bar */

.msa-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 52px;
	padding: 22px 0 34px;
	border-top: 1px solid var(--msa-hairline);
}

.msa-footer__copyright {
	margin: 0;
	font-size: 13px;
	color: var(--msa-text-faint);
}

/*
 * Google's required reCAPTCHA wording. Fine print, on its own line under the
 * legal bar, because it is a legal obligation rather than something anyone is
 * meant to read.
 */
.msa-footer__recaptcha {
	margin: 0;
	padding-bottom: 30px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--msa-muted);
}

.msa-footer__recaptcha a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.msa-footer__recaptcha a:hover {
	color: var(--msa-white);
}

/* A link in the legal line -- the web credit -- reads as part of the sentence. */
.msa-footer__copyright a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.msa-footer__copyright a:hover {
	color: var(--msa-white);
}

.msa-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msa-footer__legal-links a {
	font-size: 13px;
	color: #9A9A9A;
	text-decoration: none;
	transition: color 0.18s ease;
}

.msa-footer__legal-links a:hover {
	color: var(--msa-white);
}

/* ------------------------------------------------------------ Focus */

.msa-footer a:focus-visible {
	outline: 2px solid var(--msa-white);
	outline-offset: 3px;
}

/* --------------------------------------------- Collapsible columns */

/*
 * On narrow screens the three link columns collapse behind their headings, so
 * the footer is a few taps rather than several screens of scrolling. The button
 * is only interactive while .msa-footer--collapsed is present, which the script
 * adds and removes with the media query -- on a wide screen the heading has to
 * read as a heading again, not a control.
 */
.msa-footer__column-toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: default;
}

.msa-footer__column-chevron {
	display: none;
}

.msa-footer--collapsed .msa-footer__column {
	border-bottom: 1px solid var(--msa-hairline);
}

.msa-footer--collapsed .msa-footer__column-heading {
	margin: 0;
}

.msa-footer--collapsed .msa-footer__column-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	/* A full-width row with a real target height, rather than a line of text. */
	min-height: 52px;
	cursor: pointer;
}

.msa-footer--collapsed .msa-footer__column-chevron {
	display: block;
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.18s ease;
}

.msa-footer--collapsed .msa-footer__column.is-open .msa-footer__column-chevron {
	transform: rotate(-135deg) translateY(-2px);
}

.msa-footer--collapsed .msa-footer__links {
	padding-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.msa-footer__column-chevron {
		transition: none;
	}
}

/* ------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.msa-footer__main {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 36px 28px;
	}

	.msa-footer__brand {
		grid-column: 1 / -1;
	}

	.msa-footer__tagline {
		max-width: 420px;
	}
}

@media (max-width: 860px) {
	.msa-footer__campus-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.msa-footer__heading {
		font-size: 38px;
	}
}

@media (max-width: 600px) {
	.msa-footer__inner {
		padding-top: 56px;
	}

	.msa-footer__main {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 52px;
	}

	.msa-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 40px;
	}

	.msa-footer__campuses {
		margin-top: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-footer a,
	.msa-footer__social a {
		transition: none;
	}
}