/*
	Theme Name: Firehouse Subs Public Safety Foundation Canada
	Author: Dalton Agency
	Author URI: http://daltonagency.com
*/

/* Variables */
:root {
	--site-pad: 2rem;
	--container: 62rem;
	--red: #b10810;
	--yellow: #ffcc33;
	--f-body: "Open Sans", sans-serif;
	--f-display-cond: "Roboto Condensed", sans-serif;
	--f-display-slab: "Roboto Slab", serif;
	--f-display: "Roboto", sans-serif;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--f-body);
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
textarea,
select {
	font: inherit;
	border: none;
	background: none;
}

button {
	cursor: pointer;
}

input,
textarea,
select {
	width: 100%;
	min-width: 0;
}

html {
	scroll-behavior: smooth;
}

/* Utility */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--site-pad) + var(--site-pad));
	margin: 0 auto;
	padding: 0 var(--site-pad);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.headline-lines {
	text-transform: uppercase;
	font-family: var(--f-display-slab);
	font-size: 1rem;
	display: inline-block;
	position: relative;
	margin: 0 0 1rem 0;
	text-wrap: balance;

	&::before,
	&::after {
		content: "";
		position: absolute;
		inset: 50% calc(100% + 0.6rem) auto auto;
		height: 1px;
		width: 20vw;
		max-width: 300px;
		background: rgba(0, 0, 0, 0.5);
	}
	&::after {
		inset: 50% auto auto calc(100% + 0.6rem);
	}
}

.headline-sm {
	text-transform: uppercase;
	font-family: var(--f-display-cond);
	font-size: 1.8rem;
	line-height: 1em;
	margin: 0 0 1.5rem 0;
	text-wrap: balance;
}
.headline-md {
	font-family: var(--f-display-cond);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1em;
	text-transform: uppercase;
	margin: 0 0 1.6rem 0;
	text-wrap: balance;
}
.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
dialog {
	width: 100%;
	padding: 4rem var(--site-pad);
	max-width: 800px;
	background: none;
	inset: 50% auto auto 50%;
	border: none;
	overflow: hidden;
	transform: translate(-50%, -50%);
	--backdrop-opacity: 0;

	&::backdrop {
		background: rgba(0, 0, 0, 0.6);
		opacity: var(--backdrop-opacity);
		transition: opacity 0.1s ease;
	}

	.close {
		position: absolute;
		inset: -3.5rem 0 auto auto;
		background: var(--red);
		color: #fff;
		font-size: 2rem;
		line-height: 1em;
		border-radius: 50%;
		width: 3rem;
		height: 3rem;
		align-content: center;

		&:hover,
		&:focus-visible {
			background: var(--yellow);
			color: #000;
		}
	}

	iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 1rem;
		overflow: hidden;
	}

	.team-content {
		.person {
			display: block;
			text-align: center;
			max-width: 30rem;
			margin: 0 auto;
			padding: 0;

			.img {
				width: 15rem;
				height: 15rem;
				margin: 0 auto 2rem auto;
				border-radius: 50%;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.txt {
				h3 {
					font-size: 2rem;
					margin: 0 0 0.5rem 0;
				}

				.role {
					font-size: 1.2rem;
					margin: 0 0 2rem 0;
				}

				.bio {
					text-align: left;
					font-size: 1.1rem;
					line-height: 1.6;
				}
			}

			&::before {
				display: none;
			}
		}
	}
}

.btn1,
.btn2,
.btn3 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2em;
	padding: 1rem 1.5rem 0.8rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	background: var(--yellow);
	color: #000;
	border-radius: 50px;
	text-wrap: balance;
	position: relative;
	transition: scale 0.1s ease;
	align-content: center;

	&:hover,
	&:focus-visible {
		background: #fff;
	}

	&:active {
		scale: 0.95;
	}

	&.coins {
		padding: 1rem 1.5rem 0.8rem 3rem;

		&::before {
			content: "";
			position: absolute;
			inset: 50% auto auto 1rem;
			translate: 0 -50%;
			background: url("./media/images/icon_coins.svg") center center / contain
				no-repeat;
			width: 1.5rem;
			height: 1.5rem;
		}
	}

	&.write {
		padding: 1rem 1.5rem 0.8rem 3rem;

		&::before {
			content: "";
			position: absolute;
			inset: 50% auto auto 1rem;
			translate: 0 -50%;
			background: url("./media/images/icon_write.svg") center center / contain
				no-repeat;
			width: 1.5rem;
			height: 1.5rem;
		}
	}

	@media (width < 600px) {
		width: 100%;
		display: block;
		height: 100%;
		min-height: 60px;
	}
}
.btn2 {
	background: var(--red);
	color: #fff;

	&:hover,
	&:focus-visible {
		background: var(--yellow);
		color: #000;
	}
}
.btn3 {
	background: transparent;
	color: #fff;
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border: 2px solid #fff;
		border-radius: 50px;
	}

	&:hover,
	&:focus-visible {
		background: var(--red);
	}
}

/* Home */
header.main {
	background-color: #000;
	background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.7) 20px,
			rgba(0, 0, 0, 0) 250px
		),
		url("./media/images/hero_bg.webp") center center / cover no-repeat;
	color: #fff;
	position: relative;
	padding: 2rem 0 5rem 0;
	z-index: 2;
	overflow-x: clip;

	&::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 100%;
		z-index: -1;
		background: linear-gradient(
			12deg,
			rgba(0, 0, 0, 0.7) 0%,
			rgba(0, 0, 0, 0) 50%
		);
		pointer-events: none;
	}

	.top {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.logo {
		width: 100%;
		max-width: 8.75rem;
	}

	nav {
		display: flex;
		align-items: end;
		gap: 1rem;
		position: relative;
		width: 100%;

		&::after {
			content: "";
			position: absolute;
			inset: auto auto 0 0.5rem;
			width: 100vw;
			height: 1px;
			background-color: #f0debc;
			opacity: 0.5;
			z-index: 2;
			pointer-events: none;
		}

		> div {
			padding: 0.5rem 0;
		}

		a:not(.btns a) {
			font-family: var(--f-display);
			font-weight: 700;
			color: #fff;
			text-decoration: none;
			text-transform: uppercase;
			padding: 0.5rem;

			&:hover,
			&:focus-visible {
				color: var(--yellow);
			}
		}

		.btns {
			margin: 0 0 0 auto;
			display: flex;
			gap: 0.5rem;

			a {
				margin: -2.5rem 0 0.5rem 0;
				font-size: 0.8rem;

				&:hover,
				focus-visible {
					background: #fff;
					color: #000;
				}
			}

			@media (width < 1010px) {
				width: 100%;
				gap: 1rem;

				flex-direction: column;
				margin: unset;

				a {
					margin: 0;
					text-align: center;
					width: 100%;
					padding: 1rem 1.5rem 0.8rem 1.5rem;
				}
			}
		}

		.dropdown {
			position: relative;
			z-index: 2;

			> a:not(.btns a) {
				position: relative;
				padding: 0.5rem 1.2rem 0.5rem 0.5rem;
			}

			> a::after {
				content: "";
				position: absolute;
				inset: 50% 0 auto auto;
				translate: 0 -50%;
				background: url("./media/images/arrow.svg") center center / contain
					no-repeat;
				width: 0.8rem;
				height: 0.8rem;
			}

			.subnav {
				position: absolute;
				inset: -3px -10px auto -5px;
				background: var(--red);
				padding: 3.5rem 0 0.8rem 0;
				z-index: -1;
				text-align: left;
				border-radius: 9px;
				display: flex;
				flex-direction: column;
				clip-path: inset(0 0 100% 0);
				transition: clip-path 0.15s ease;

				a {
					padding: 0.3rem 0.8rem;
					font-weight: 400;
				}
			}

			&:hover,
			&:focus-within {
				.subnav {
					clip-path: inset(0 0 0 0);
				}
			}
		}

		@media (width < 1010px) {
			position: absolute;
			flex-direction: column;
			align-items: flex-start;
			inset: 0 0 auto auto;
			background: var(--red);
			padding: 7.5rem 2rem 2rem 2rem;
			z-index: 2;
			border-radius: 20px 0 0 20px;
			transform: translate(101%, 0);
			transition: translate 0.2s ease;
			max-width: 300px;

			&[data-nav="closed"] {
				translate: 0 0;
			}

			&[data-nav="opened"] {
				translate: -100% 0;
			}

			&::after {
				display: none;
			}

			> div {
				padding: 0;
			}

			a {
				font-size: 1.2rem;
			}

			.dropdown {
				display: flex;
				flex-direction: column;
				gap: 1rem;

				> a::after {
					display: none;
				}

				.subnav {
					gap: 1rem;
					position: unset;
					clip-path: unset;
					padding: 0;

					a {
						font-size: 1.2rem;
						font-weight: 700;
						padding: 0.5rem;
					}
				}
			}
		}
	}

	.toggle {
		background: var(--yellow);
		border-radius: 50%;
		width: 3.5rem;
		height: 3.5rem;
		padding: 1rem;
		position: absolute;
		inset: 2rem 2rem auto auto;
		display: none;
		transition: scale 0.15s ease;
		z-index: 3;

		@media (width < 1010px) {
			display: block;
		}

		&:active {
			scale: 0.9;
		}

		&[data-nav="closed"] {
			img:first-child {
				display: block;
			}

			img:last-child {
				display: none;
			}
		}

		&[data-nav="opened"] {
			img:first-child {
				display: none;
			}
			img:last-child {
				display: block;
			}
		}
	}

	.country {
		position: absolute;
		inset: 0.5rem 0.5rem auto auto;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: rgba(0, 0, 0, 0.4);
		padding: 0.5rem 0.5rem 0.5rem 0.8rem;
		border-radius: 2rem;
		z-index: 2;

		label {
			color: #ffffff;
			font-size: 0.7rem;
		}

		.custom-select {
			position: relative;
			user-select: none;
			cursor: pointer;
		}

		.select-button {
			background: transparent;
			color: #000;
			background: #fff;
			font-size: 1rem;
			padding: 0.8rem;
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1rem;
			height: 1rem;
			position: relative;
			z-index: 1;

			&:hover,
			&:focus {
				background-color: var(--yellow);
			}

			.selected-option {
				place-content: center;
				img {
					max-width: unset;
					width: 1rem;

					display: block;
				}
			}
		}

		.options-list {
			position: absolute;
			top: 100%;
			right: 0;
			background: #000;
			border-radius: 0.5rem;
			margin-top: 0.5rem;
			padding: 0.5rem;
			list-style: none;
			display: none;
			min-width: 10rem;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			z-index: 2;

			&[aria-hidden="false"] {
				display: block;
			}

			li {
				color: #fff;
				padding: 0.5rem 1rem;
				cursor: pointer;
				border-radius: 0.25rem;
				transition: background-color 0.2s ease;
				font-size: 0.75rem;
				display: flex;
				gap: 0.5rem;

				&:hover,
				&:focus-visible {
					background-color: rgba(255, 255, 255, 0.1);
				}

				img {
					max-width: unset;
					width: 1rem;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}

		@media (width < 1010px) {
			opacity: 0;
			inset: 2.6rem 10rem auto auto;
			transition-property: opacity;
			transition-timing-function: ease;
			transition-duration: 0.1s;
			transition-delay: 0s;

			&:focus-within {
				opacity: 1;
			}
		}
	}

	.txt {
		margin: 14rem 0 0 0;

		.tag {
			font-family: var(--f-display-slab);
			background: var(--red);
			font-size: 1rem;
			line-height: 1em;
			text-transform: uppercase;
			display: inline-block;
			padding: 0.4em 0.5em 0.4em 1em;
			position: relative;
			margin: 0 0 1.5rem 0;
			text-wrap: balance;
			letter-spacing: 0.05em;
			font-weight: 700;

			&::before {
				content: "";
				position: absolute;
				inset: 0 auto 0 0;
				width: 0.5rem;
				height: 100%;
				background: var(--yellow);
			}

			@media (width < 700px) {
				font-size: 1.2rem;
			}
		}

		.page-headline {
			font-family: var(--f-display-cond);
			font-size: 5rem;
			line-height: 0.9em;
			text-transform: uppercase;
			margin: 0 0 1.1rem -0.2rem;

			@media (width < 700px) {
				font-size: 4rem;
				text-wrap: balance;
			}
		}

		p {
			font-size: 1.25rem;
			font-weight: 500;
			max-width: 38.75rem;
			line-height: 1.4em;

			@media (width < 700px) {
				font-size: 1.4rem;
			}
		}
	}

	@media (width < 700px) {
		background: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.7) 0px,
				rgba(0, 0, 0, 0) 200px
			),
			url("./media/images/hero_bg.webp") center center / cover no-repeat;
	}
}

.donate {
	background: url("./media/images/tread.webp") center center / cover no-repeat;
	padding: 5rem 0;
	text-align: center;
	overflow: hidden;

	h2 {
		font-family: var(--f-display-cond);
		font-size: 2.5rem;
		line-height: 1.2em;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		margin: 0 0 3rem 0;
		text-wrap: balance;
	}

	.group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		max-width: 28.125rem;
		margin: 0 auto 3rem auto;

		a {
			flex: 1;
			aspect-ratio: 1;
			border-radius: 50%;
			background: #7d0000;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			max-width: 6.25rem;
			font-family: var(--f-display-cond);
			font-weight: 800;
			text-decoration: none;
			transition: scale 0.1s ease;

			small {
				font-size: 1.5rem;
				translate: 0 -0.2em;

				@media (width < 450px) {
					font-size: 5vw;
				}
			}

			p {
				font-size: 2.5rem;

				@media (width < 450px) {
					font-size: 8vw;
				}
			}

			&:hover {
				color: var(--yellow);
				scale: 1.1;
			}

			&:last-of-type p {
				font-size: 1.25rem;
				text-transform: uppercase;

				@media (width < 450px) {
					font-size: 4vw;
				}
			}
		}
	}
}

.numbers {
	padding: 7.5rem 0;

	.group {
		display: flex;
		justify-content: space-between;
		gap: 1rem;

		.item {
			font-family: var(--f-display-cond);
			text-align: center;
			border-radius: 50%;
			border: 3px solid var(--yellow);
			aspect-ratio: 1;
			flex: 1;
			padding: 2rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			max-width: 300px;

			p {
				font-family: var(--f-display);
				font-size: clamp(1rem, 2vw, 1.2rem);
				line-height: 1.1em;
				text-wrap: balance;

				strong {
					font-family: var(--f-display-cond);
					font-size: clamp(1rem, 2vw, 1.5rem);
					line-height: 1.1em;
					text-transform: uppercase;
					display: block;
				}
			}

			.number {
				font-weight: 800;
				font-size: clamp(2rem, 10vw, 5rem);
				color: var(--red);
			}
		}

		@media (width < 700px) {
			flex-direction: column;
			align-items: center;

			.item {
				max-width: 200px;
			}
		}
	}

	@media (width < 700px) {
		padding: 4rem 0;
	}
}

.about_cta {
	background: url("./media/images/concrete_light.webp") center center / cover
		no-repeat;
	padding: 4rem 0;
	overflow: hidden;

	.group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 2rem;

		.img {
			max-width: 30rem;
			flex: 1;
		}

		.txt {
			flex: 1;
			text-align: center;
			font-family: var(--f-display-cond);
			max-width: 450px;

			h2 {
				text-transform: uppercase;
				font-size: clamp(2rem, 5vw, 3.5rem);
				line-height: 1em;
				margin: 0 0 2rem 0;
				text-wrap: balance;
			}
		}

		@media (width < 600px) {
			flex-direction: column;

			.img {
				max-width: 25rem;
			}
		}
	}
}

.stories_cta {
	background: url("./media/images/stories_bg.webp") center center / cover
		no-repeat;
	padding: 180px 0;
	text-align: center;
	overflow: hidden;

	h3 {
		font-family: var(--f-display-cond);
		font-size: 48px;
		line-height: 1em;
		text-transform: uppercase;
		margin: 0 0 1.6rem 0;
		text-wrap: balance;
	}

	.btn2 {
		&:hover,
		&:focus-visible {
			background: #fff;
		}
	}
}

.grant_cta {
	background: url("./media/images/concrete_dark.webp") center center / cover
		no-repeat;
	padding: 5rem 0;
	text-align: center;
	overflow: hidden;
	h2 {
		font-family: var(--f-display-cond);
		text-transform: uppercase;
		color: #fff;
		font-size: 2.1rem;
		line-height: 1.2em;
		margin: 0 0 1.5rem 0;
		text-wrap: balance;
	}

	.group {
		display: flex;
		gap: 1rem;
		align-items: center;
		justify-content: center;

		@media (width < 550px) {
			flex-direction: column;
		}
	}
}

footer.main {
	background: #000;
	padding: 2.125rem 0;
	overflow: hidden;
	text-align: center;

	.logo {
		max-width: 5.125rem;
		position: relative;
		margin: 0 0 3rem 0;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 50% calc(100% + 0.6rem) auto auto;
			height: 1px;
			width: 100vw;
			background: rgba(255, 255, 255, 0.1);
		}
		&::after {
			inset: 50% auto auto calc(100% + 0.6rem);
		}
	}

	.links {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin: 0 0 5rem 0;
		flex-wrap: wrap;

		a {
			font-family: var(--f-display);
			font-size: 0.9375rem;
			line-height: 1.2em;
			color: #fff;
			text-decoration: none;
			text-transform: uppercase;

			&:hover,
			&:focus-visible {
				color: var(--yellow);
			}
		}
	}

	.legal {
		p {
			color: #fff;
			font-size: 0.75rem;
			margin: 0 0 1rem 0;
		}
	}
}

.our-foundation {
	header.main {
		background: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.8) 20px,
				rgba(0, 0, 0, 0) 250px
			),
			url("./media/images/our-foundation_hero.webp") center center / cover
				no-repeat;

		&::after {
			content: "";
			position: absolute;
			inset: auto 0 0 0;
			height: 100%;
			z-index: -1;
			background: linear-gradient(
				12deg,
				rgba(0, 0, 0, 0.8) 20%,
				rgba(0, 0, 0, 0) 60%
			);
			pointer-events: none;
		}
		padding: 2em 0;
	}

	.video {
		padding: 6rem 0;
		background: url("./media/images/foundation-video_bg.webp") center right /
			cover no-repeat;
		text-align: center;
		color: #fff;

		.headline-lines {
			&::before,
			&::after {
				background: rgba(255, 255, 255, 1);
			}
		}
	}

	.btn3 {
		&:hover,
		&:focus-visible {
			background: #000;
		}
	}

	.history {
		padding: 4rem 0;
		text-align: center;
		overflow: hidden;
		background: #fff;

		p {
			max-width: 600px;
			margin: 0 auto;
		}
	}

	.funding {
		background: #f1f1f1;
		padding: 4rem 0;
		text-align: center;
		justify-content: center;
		overflow: hidden;

		h2 {
			margin: 0 0 3rem 0;
		}

		.group {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;

			.item {
				text-align: left;
				background: #fff;
				border-radius: 0.5rem;
				padding: 2rem;

				h3 {
					font-family: var(--f-display-slab);
					font-size: 1.5rem;
					color: var(--red);
					line-height: 1.2em;
					margin: 0 0 0.8rem 0;
				}
				.description {
					font-weight: 600;
					margin: 0 0 1rem 0;
				}
				&:last-child {
					grid-column: 1 / -1;
					max-width: 60%;
					margin: 0 auto;
				}
			}

			@media (width < 750px) {
				grid-template-columns: 1fr;

				.item {
					&:last-child {
						grid-column: unset;
						max-width: unset;
					}
				}
			}
		}
	}

	.team {
		text-align: center;
		padding: 4rem 0;
		overflow: hidden;

		.headline-sm {
			font-family: var(--f-display);
		}

		.headline-lines {
			color: var(--red);
			font-weight: 600;

			&::before,
			&::after {
				background: var(--red);
				width: 10vw;
			}
		}

		.wrapper {
			max-width: 34.375rem;
			margin: 0 auto 3rem auto;
		}

		.group {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			gap: 3rem;
			margin: 0 0 5rem 0;
			flex-wrap: wrap;
		}

		.person {
			flex: 1;
			max-width: 15rem;
			position: relative;
			min-width: 15rem;

			@media (width < 530px) {
				min-width: 9.375rem;
			}

			.img {
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 0.5rem;
					filter: grayscale(100%);
				}
			}

			h3 {
				font-family: var(--f-display-slab);
				font-size: 1.5rem;
				color: var(--red);
				line-height: 1.2em;
				margin: 0.8rem 0 0.5rem 0;
			}

			.role {
				font-family: var(--f-display-cond);
				font-size: 1rem;
				line-height: 1.2em;
			}

			&::before {
				content: "";
				position: absolute;
				inset: -1rem;
				background: var(--yellow);
				z-index: -1;
				border-radius: 0.8rem;
				opacity: 0;
			}

			&:hover,
			&:focus-visible {
				h3 {
					color: #000;
				}
				&::before {
					opacity: 1;
				}
			}
		}

		.team-dialog {
			.content {
				background: #fff;
				border-radius: 1rem;
				display: flex;
				padding: 2rem;
				gap: 2rem;

				.img {
					border-radius: 0.5rem;
					overflow: hidden;
					flex: 2;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.txt {
					flex: 3;
					text-align: left;
					max-height: 400px;
					overflow: auto;
					padding: 0 1rem 0 0;

					&::-webkit-scrollbar {
						width: 0.5rem;
						margin-right: -1rem;
					}

					&::-webkit-scrollbar-track {
						background: #f1f1f1;
						border-radius: 4px;
					}

					&::-webkit-scrollbar-thumb {
						background: var(--yellow);
						border-radius: 4px;
					}

					h3 {
						font-family: var(--f-display-slab);
						font-size: 1.5rem;
						color: var(--red);
						line-height: 1.2em;
						margin: 0.8rem 0 0.5rem 0;
					}

					.role {
						font-family: var(--f-display-cond);
						font-size: 1rem;
						line-height: 1.2em;
						margin: 0 0 1rem 0;
					}

					.bio p:not(:last-child) {
						margin: 0 0 1rem 0;
					}
				}

				@media (width < 650px) {
					flex-direction: column;
					align-items: center;
					max-height: 80vh;

					.img {
						flex: unset;
						max-width: 250px;
						max-height: 300px;
					}
					.txt {
						flex: unset;
						max-height: 30vh;
					}
				}
			}
		}
	}
	#senior-staff {
		scroll-margin-top: 3rem;
	}
}

/* default page */

.page {
	header.main {
		padding: 2rem 0;

		.txt {
			margin: 5rem 0 0 0;
		}
	}

	main {
		padding: 4rem 0;

		p {
			margin: 0 0 1rem 0;
		}

		h2 {
			font-size: 1.2rem;
			margin: 0 0 1rem 0;
		}

		h3 {
			font-size: 1.1rem;
			margin: 0 0 1rem 0;

			strong {
				font-weight: 700;
			}
		}
		ul {
			padding: 0 0 1rem 2rem;
		}
	}
}

/* donate form styles */

#processForm {
	background-color: #f1f1f1;
	border-bottom: 20px solid #f1f1f1;
}