/* pages: About, Contact, Schedule, 404 and plain pages. A banner (parts/page-banner.html) opens main,
   then .page-body holds the content. */
.page-body {
	margin-top: 0;
	padding-top: 143px;
	padding-bottom: 130px;
}

/* Centred uppercase heading with a short rule underneath. */
.section-heading {
	margin: 0 0 100px;
	text-align: center;
	text-transform: uppercase;
}

.section-heading::after {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	margin: 24px auto 0;
	background-color: var(--wp--preset--color--contrast);
}

/* About: one row per host, photo plus text; the second host's photo sits on the right. */
.about-hosts .section-heading {
	margin-bottom: 170px;
}

.host {
	gap: 40px;
	margin-bottom: 40px;
}

.host-photo {
	text-align: center;
}

.host-photo .wp-block-image {
	margin: 0 auto;
}

.host-text {
	padding-inline: 20px;
}

.host-text h3 {
	margin: 0;
}

.host-label {
	margin: 4px 0 24px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.host-bio {
	margin: 0 0 25px;
	text-align: center;
}

.host-email {
	margin: 16px 0 0;
	text-align: center;
}

.host-email__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

.host-email__link:hover,
.host-email__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
}

@media (min-width: 782px) {
	.host--flip .host-photo {
		order: 2;
	}
}

@media (max-width: 781px) {
	.host {
		gap: 24px;
	}

	.host-text {
		text-align: center;
	}
}

/* 404: the search box is a centred, single bordered field with the icon inside. */
.not-found .wp-block-search__inside-wrapper {
	margin-inline: auto;
	padding: 4px;
	border: 1px solid #E0E0E0;
	border-radius: 0;
}

.not-found .wp-block-search__input {
	border: 0;
}

.not-found .wp-block-search__button,
.not-found .wp-block-search__button:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 600px) {
	.page-body {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.section-heading {
		margin-bottom: 60px;
		font-size: 32px;
	}

	.about-hosts .section-heading {
		margin-bottom: 60px;
	}
}