/*
 * Get Help, About, Get Involved, Contact and 404 (Prompt 11). Everything shared with other pages
 * (cards, contact buttons, notes, pills, cta pair) lives in rmhn.css; this file is only what these
 * five layouts add.
 */

/* ---------------------------------------------------------------- shared bits */
.rmhn-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmhn-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 17px;
	line-height: 1.55;
}

.rmhn-check-list li + li {
	margin-top: 12px;
}

.rmhn-check-list .rmhn-icon {
	margin-top: 3px;
	color: var(--rmhn-red);
}

.rmhn-quote {
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--rmhn-red);
}

.rmhn-quote p {
	margin: 0;
	font-size: 19px;
	line-height: 1.7;
}

@media (min-width: 1000px) {
	.rmhn-quote p {
		font-size: 21px;
	}
}

/* Static map picture (Get Help, Contact). */
.rmhn-map {
	border-radius: var(--rmhn-radius-callout);
	overflow: hidden;
	background: var(--rmhn-sand);
}

.rmhn-map img {
	display: block;
	width: 100%;
	height: auto;
}

.rmhn-map__placeholder {
	/* Not flex: whitespace between the label and the [TBC] tag would be dropped. */
	min-height: 200px;
	margin: 0;
	padding: 90px 16px;
	text-align: center;
	border: 1px dashed var(--rmhn-border);
	border-radius: var(--rmhn-radius-callout);
	color: var(--rmhn-muted);
}

/* ---------------------------------------------------------------- Get Help */
.rmhn-help-intro {
	background: var(--rmhn-blush);
	padding-block: 40px 36px;
}

.rmhn-help-intro h1 {
	margin: 0 0 12px;
}

.rmhn-help-intro .rmhn-lead {
	margin: 0;
}

.rmhn-help-contacts {
	padding-block: 28px;
}

.rmhn-help-contacts__grid {
	display: grid;
	gap: 12px;
}

.rmhn-help-expect__grid,
.rmhn-involved-cards__grid,
.rmhn-involved-ways__grid {
	display: grid;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rmhn-help-expect__card h3,
.rmhn-involved-cards__grid h3 {
	margin: 12px 0 6px;
	font-size: 19px;
}

.rmhn-help-expect__card p,
.rmhn-involved-cards__grid p {
	margin: 0;
	color: var(--rmhn-muted);
}

.rmhn-help-visit__grid {
	display: grid;
	gap: 24px;
}

.rmhn-help-visit__body h2 {
	margin: 0 0 16px;
}

.rmhn-help-visit__body .rmhn-btn {
	margin-top: 4px;
}

.rmhn-help-visit__note {
	margin: 16px 0 0;
	color: var(--rmhn-muted);
}

.rmhn-help-form__inner h2 {
	margin: 0 0 12px;
}

.rmhn-help-form__inner .rmhn-lead {
	margin: 0 0 24px;
}

.rmhn-help-form__note {
	margin: 16px 0 0;
	color: var(--rmhn-muted);
	text-align: center;
}

.rmhn-service-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rmhn-service-links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 8px 20px;
	border: 1px solid var(--rmhn-border);
	border-radius: 999px;
	background: var(--rmhn-white);
	color: var(--rmhn-ink);
	font-weight: 600;
	text-decoration: none;
}

.rmhn-service-links a:hover,
.rmhn-service-links a:focus-visible {
	border-color: var(--rmhn-ink);
}

.rmhn-service-links .rmhn-icon {
	color: var(--rmhn-red);
}

.rmhn-help-emergency {
	padding-top: 0;
}

@media (min-width: 690px) {
	.rmhn-help-contacts__grid,
	.rmhn-help-expect__grid,
	.rmhn-involved-cards__grid,
	.rmhn-involved-ways__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1000px) {
	.rmhn-help-intro {
		padding-block: 72px 64px;
	}

	.rmhn-help-intro__inner {
		max-width: calc(820px + 2 * var(--rmhn-gutter));
	}

	.rmhn-help-contacts {
		padding-block: 40px;
	}

	.rmhn-help-expect__grid,
	.rmhn-involved-cards__grid,
	.rmhn-involved-ways__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.rmhn-help-visit__grid {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 56px;
	}

	.rmhn-help-form__inner {
		max-width: calc(760px + 2 * var(--rmhn-gutter));
	}
}

/* ---------------------------------------------------------------- About */
.rmhn-about-intro__grid,
.rmhn-involved-intro__grid {
	display: grid;
	gap: 28px;
	align-items: center;
}

.rmhn-about-intro h1,
.rmhn-involved-intro h1 {
	margin: 0 0 16px;
}

.rmhn-about-intro .rmhn-lead,
.rmhn-involved-intro .rmhn-lead {
	margin: 0;
}

/* Who we are runs to several paragraphs: the lead, then body text, then the closing line. */
.rmhn-about-intro__text p + p {
	margin: 16px 0 0;
}

.rmhn-about-intro__text p:not(.rmhn-lead):not(.rmhn-about-intro__tagline) {
	color: var(--rmhn-muted);
}

.rmhn-about-intro__text .rmhn-about-intro__tagline {
	margin-top: 24px;
	font-family: var(--rmhn-font-heading);
	font-weight: 600;
	font-size: 19px;
	color: var(--rmhn-red);
}

.rmhn-about-mv__grid {
	display: grid;
	gap: 20px;
}

.rmhn-about-mv__card h2 {
	margin: 16px 0 12px;
	font-size: 26px;
}

.rmhn-about-mv__card p {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
}

/* Timeline: a row of milestones on a computer, a simple list on a phone. */
.rmhn-timeline {
	display: grid;
	gap: 28px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.rmhn-timeline__year {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--rmhn-red);
	color: var(--rmhn-white);
	font: 700 17px/1 var(--rmhn-font-heading);
}

.rmhn-timeline__year--tbc {
	background: var(--rmhn-white);
	border: 1px solid var(--rmhn-border);
	color: var(--rmhn-muted);
	font-size: 15px;
}

.rmhn-timeline__title {
	margin: 14px 0 8px;
	font-size: 20px;
}

.rmhn-timeline p {
	margin: 0;
	color: var(--rmhn-muted);
}

.rmhn-about-story__note {
	margin: 24px 0 0;
	color: var(--rmhn-muted);
}

.rmhn-about-approach__grid {
	display: grid;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rmhn-about-approach__grid h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.rmhn-about-approach__grid p {
	margin: 0;
	color: var(--rmhn-muted);
}

.rmhn-about-why__inner h2 {
	margin: 0 0 20px;
}

.rmhn-values-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rmhn-value-card {
	padding: 16px 8px;
	text-align: center;
}

@media (min-width: 690px) {
	.rmhn-value-card {
		padding: var(--rmhn-card-pad);
	}
}

.rmhn-value-card h3 {
	margin: 12px 0 8px;
	font-size: 15px; /* "Empowerment" fits on one line in a 2-up row at 360px */
	hyphens: none;
}

@media (min-width: 690px) {
	.rmhn-value-card h3 {
		font-size: 18px;
	}
}

.rmhn-value-card p {
	margin: 0;
	font-size: 16px;
	color: var(--rmhn-muted);
}

@media (min-width: 690px) {
	.rmhn-about-mv__grid {
		grid-template-columns: 1fr 1fr;
	}

	.rmhn-about-approach__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.rmhn-about-intro__grid,
	.rmhn-involved-intro__grid {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}

	.rmhn-about-mv__grid {
		gap: 32px;
	}

	.rmhn-about-mv__card {
		padding: 40px;
	}

	.rmhn-timeline {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	/* The line that joins the milestones, behind the year markers. */
	.rmhn-timeline__item {
		position: relative;
	}

	.rmhn-timeline__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 31px;
		left: 74px;
		right: -40px;
		height: 1px;
		background: var(--rmhn-border);
	}

	.rmhn-about-why__inner {
		max-width: calc(880px + 2 * var(--rmhn-gutter));
		margin-inline: auto;
	}

	.rmhn-values-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ---------------------------------------------------------------- Get Involved */
.rmhn-involved-form-section__grid {
	display: grid;
	gap: 28px;
}

.rmhn-involved-form-section__form h2 {
	margin: 0 0 12px;
}

.rmhn-involved-form-section__form .rmhn-lead {
	margin: 0 0 24px;
}

.rmhn-involved-form-section__note {
	margin: 16px 0 0;
	color: var(--rmhn-muted);
	text-align: center;
}

.rmhn-involved-why h2 {
	margin: 0 0 20px;
}

.rmhn-involved-why p {
	margin: 0;
}

.rmhn-involved-why p + p {
	margin-top: 16px;
}

/* The one red-bordered block on the site: the youth counsellor training. */
.rmhn-training__box {
	display: grid;
	gap: 24px;
	padding: 24px;
	border: 2px solid var(--rmhn-red);
	border-radius: var(--rmhn-radius-card);
	background: var(--rmhn-white);
}

.rmhn-training__body h2 {
	margin: 16px 0 12px;
}

.rmhn-training__body p {
	margin: 0 0 20px;
	color: var(--rmhn-muted);
}

.rmhn-training__list {
	padding: 20px;
	border-radius: var(--rmhn-radius-callout);
	background: var(--rmhn-sand);
}

.rmhn-training__list h3 {
	margin: 0 0 16px;
	font-size: 20px;
}

@media (min-width: 1000px) {
	.rmhn-involved-form-section__grid--split {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: start;
	}

	.rmhn-involved-form-section__grid:not(.rmhn-involved-form-section__grid--split) {
		max-width: calc(760px + 2 * var(--rmhn-gutter));
	}

	.rmhn-training__box {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		padding: 40px;
		align-items: start;
	}

	.rmhn-training__list {
		padding: 28px;
	}
}

/* ---------------------------------------------------------------- Contact */
.rmhn-contact-intro {
	padding-bottom: 0;
}

.rmhn-contact-intro h1 {
	margin: 0 0 12px;
}

.rmhn-contact-intro__lead {
	max-width: 720px;
	margin: 0;
	color: var(--rmhn-muted);
}

.rmhn-contact-main__grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

.rmhn-contact-details h2 {
	margin: 0 0 16px;
}

.rmhn-contact-details .rmhn-map {
	margin: 24px 0 16px;
}

.rmhn-contact-socials__title {
	margin: 32px 0 16px;
	font-size: 22px;
}

.rmhn-contact-socials .ct-social-box {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Outlined circles, as on the board (the footer set has its own colours). */
.rmhn-contact-socials .ct-social-box a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--rmhn-border);
	border-radius: 50%;
	color: var(--rmhn-ink);
}

.rmhn-contact-socials .ct-social-box a:hover,
.rmhn-contact-socials .ct-social-box a:focus-visible {
	border-color: var(--rmhn-ink);
	background: var(--rmhn-ink);
	color: var(--rmhn-white);
}

.rmhn-contact-socials .ct-social-box svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.rmhn-contact-form__note {
	margin: 16px 0 0;
	color: var(--rmhn-muted);
	text-align: center;
}

.rmhn-contact-form__signpost {
	margin-top: 24px;
	font-size: 16px;
}

@media (min-width: 1000px) {
	.rmhn-contact-main__grid {
		grid-template-columns: 5fr 7fr;
		gap: 56px;
	}

	.rmhn-contact-form {
		padding: 40px;
	}
}

/* ---------------------------------------------------------------- 404 */
.rmhn-404__inner {
	max-width: calc(680px + 2 * var(--rmhn-gutter));
	text-align: center;
}

.rmhn-404__motif {
	display: block;
	margin-bottom: 20px;
	color: var(--rmhn-red);
	opacity: 0.4;
}

.rmhn-404__inner h1 {
	margin: 0 0 16px;
}

.rmhn-404__inner .rmhn-lead {
	margin: 0 0 28px;
}

.rmhn-404__search label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.rmhn-404__search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.rmhn-404__search input[type="search"] {
	flex: 1 1 240px;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-field);
	background-color: var(--rmhn-white);
	font-size: 17px;
}

.rmhn-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}

/* Grid children keep their own min-content width by default, which can push a row past a 360px
   screen. Let them shrink instead. */
.rmhn-values-grid > *,
.rmhn-involved-cards__grid > *,
.rmhn-involved-ways__grid > *,
.rmhn-help-expect__grid > *,
.rmhn-about-approach__grid > *,
.rmhn-about-mv__grid > *,
.rmhn-involved-form-section__grid > *,
.rmhn-contact-main__grid > *,
.rmhn-timeline > * {
	min-width: 0;
}