/*
 * RMHN child styles. Only what the Blocksy Customizer can't do (D11).
 * Source: RMHN Design System.dc.html + DESIGN_NOTES.md "Global".
 * Breakpoints follow Blocksy: mobile < 690px, tablet < 1000px.
 */

/* ---------------------------------------------------------------- tokens */
:root {
	--rmhn-red: #A81916;
	--rmhn-red-hover: #8A1411;
	--rmhn-ink: #1A1A1A;
	--rmhn-muted: #5C5550;
	--rmhn-bg: #FBF7F3;
	--rmhn-sand: #F3ECE4;
	--rmhn-blush: #F8E9E7;
	--rmhn-border: #E6DDD3;
	--rmhn-white: #FFFFFF;
	--rmhn-success: #1F6B3A;
	--rmhn-error: #8F4700;

	--rmhn-font-heading: Montserrat, sans-serif;
	--rmhn-font-body: Inter, sans-serif;

	--rmhn-radius-field: 8px;
	--rmhn-radius-button: 12px;
	--rmhn-radius-callout: 16px;
	--rmhn-radius-card: 20px;
	--rmhn-radius-story: 24px;
	--rmhn-radius-photo: 28px;

	--rmhn-container: 1200px;
	--rmhn-gutter: 20px;
	--rmhn-section-y: 48px;
	--rmhn-card-pad: 20px;
}

@media (min-width: 690px) {
	:root {
		--rmhn-gutter: 24px;
		--rmhn-card-pad: 32px;
	}
}

@media (min-width: 1000px) {
	:root {
		--rmhn-section-y: 96px;
	}
}

/* ---------------------------------------------------------------- focus */
/* One rule sitewide: 3px ink ring, 2px offset. Neutral so it reads on bg, sand and blush. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
	box-shadow: none;
}

:where(.entry-content, .rmhn-prose) :where(p, li) a:focus-visible {
	outline-offset: 4px;
}

/* Blocksy skip link, styled per the design system header board. */
.skip-link:focus {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: var(--rmhn-ink);
	color: var(--rmhn-white);
	border-radius: 10px;
	font: 600 16px/1 var(--rmhn-font-body);
	outline: 3px solid var(--rmhn-red);
	outline-offset: 2px;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------- type helpers */
.rmhn-eyebrow {
	font: 600 13px/1.3 var(--rmhn-font-heading);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rmhn-muted);
}

.rmhn-lead {
	font-size: 19px;
	line-height: 1.55;
}

.rmhn-small {
	font-size: 15px;
	line-height: 1.5;
	color: var(--rmhn-muted);
}

@media (min-width: 1000px) {
	.rmhn-lead {
		font-size: 22px;
	}
}

/* ---------------------------------------------------------------- buttons */
/* Primary takes its colours from the Customizer (buttonColor); these classes are for links styled as buttons. */
.rmhn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 2px solid transparent;
	border-radius: var(--rmhn-radius-button);
	font: 600 17px/1 var(--rmhn-font-body);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rmhn-btn--primary {
	background: var(--rmhn-red);
	color: var(--rmhn-white);
}

.rmhn-btn--primary:hover {
	background: var(--rmhn-red-hover);
	color: var(--rmhn-white);
}

.rmhn-btn--outline {
	background: transparent;
	border-color: var(--rmhn-ink);
	color: var(--rmhn-ink);
}

.rmhn-btn--outline:hover {
	background: var(--rmhn-sand);
	color: var(--rmhn-ink);
}

.rmhn-btn--lg {
	min-height: 54px;
}

.rmhn-btn--block {
	display: flex;
	width: 100%;
}

.rmhn-btn[disabled],
.rmhn-btn.is-disabled {
	background: var(--rmhn-border);
	border-color: transparent;
	color: var(--rmhn-muted);
	cursor: not-allowed;
}

.rmhn-btn.is-loading {
	background: var(--rmhn-red-hover);
	pointer-events: none;
}

.rmhn-btn.is-loading::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: rmhn-spin 0.8s linear infinite;
}

@keyframes rmhn-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Text link with arrow ("Learn more →"). */
.rmhn-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 600;
	color: var(--rmhn-red);
	text-decoration: none;
}

.rmhn-link:hover {
	color: var(--rmhn-red-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rmhn-link .rmhn-icon {
	width: 18px;
	height: 18px;
}


/* ---------------------------------------------------------------- form basics */
/* Field labels sit above the field: 600 / 16px. Labels wrapping a radio or checkbox stay body size. */
form label:not(:has(input)),
form legend {
	font: 600 16px/1.4 var(--rmhn-font-body);
	color: var(--rmhn-ink);
}

form fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

input[type="radio"],
input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: var(--rmhn-red);
	vertical-align: -4px;
	margin-inline-end: 10px;
}

/* ---------------------------------------------------------------- icons */
.rmhn-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
	color: inherit;
}

.rmhn-icon-holder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--rmhn-blush);
	color: var(--rmhn-red);
}

/* ---------------------------------------------------------------- layout rhythm */
.rmhn-container {
	width: 100%;
	max-width: calc(var(--rmhn-container) + 2 * var(--rmhn-gutter));
	margin-inline: auto;
	padding-inline: var(--rmhn-gutter);
}

.rmhn-section {
	padding-block: var(--rmhn-section-y);
	background: var(--rmhn-bg);
}

.rmhn-section--sand {
	background: var(--rmhn-sand);
}

/* One faint loop per page, bleeding off a sand section. Decorative only. */
.rmhn-section--accent {
	position: relative;
	overflow: hidden;
}

.rmhn-section--accent > .rmhn-accent-loop {
	position: absolute;
	right: -80px;
	bottom: -40px;
	width: 420px;
	height: 140px;
	color: var(--rmhn-red);
	opacity: 0.08;
	pointer-events: none;
}

/* Loop-line divider: 1px stroke, centred, 120px wide. */
.rmhn-divider {
	display: flex;
	justify-content: center;
	color: var(--rmhn-border);
}

.rmhn-divider .rmhn-icon {
	width: 120px;
	height: 40px;
	stroke-width: 1px;
}

/* ---------------------------------------------------------------- cards */
.rmhn-card {
	background: var(--rmhn-white);
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-card);
	padding: var(--rmhn-card-pad);
}

.rmhn-card--story {
	border-radius: var(--rmhn-radius-story);
	padding: 12px;
}

.rmhn-card--story .rmhn-card__image {
	border-radius: calc(var(--rmhn-radius-story) - 12px);
	overflow: hidden;
}

.rmhn-card--flush {
	padding: 0;
	overflow: hidden;
}

.rmhn-photo {
	border-radius: var(--rmhn-radius-photo);
	overflow: hidden;
}

.rmhn-photo--circle {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Large contact button (Get Help, Contact). */
.rmhn-contact-btn {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 88px;
	padding: 18px 20px;
	background: var(--rmhn-white);
	border: 2px solid var(--rmhn-border);
	border-radius: 16px;
	color: var(--rmhn-ink);
	text-decoration: none;
}

.rmhn-contact-btn:hover,
.rmhn-contact-btn:focus-visible {
	border-color: var(--rmhn-ink);
	color: var(--rmhn-ink);
}

.rmhn-contact-btn--primary {
	border-color: var(--rmhn-red);
}

.rmhn-contact-btn__title {
	display: block;
	font: 600 20px/1.3 var(--rmhn-font-heading);
}

.rmhn-contact-btn__sub {
	display: block;
	font-size: 15px;
	line-height: 1.4;
	color: var(--rmhn-muted);
}

/* ---------------------------------------------------------------- callouts */
.rmhn-callout,
.rmhn-note {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 24px;
	border-radius: var(--rmhn-radius-callout);
	font-size: 18px;
	line-height: 1.6;
}

.rmhn-callout > .rmhn-icon,
.rmhn-note > .rmhn-icon {
	width: 26px;
	height: 26px;
}

/* Blush info callout: small, red icon. */
.rmhn-callout {
	background: var(--rmhn-blush);
}

.rmhn-callout > .rmhn-icon {
	color: var(--rmhn-red);
}

/* Neutral note, also used for "Not an emergency service": no red, no warning triangle. */
.rmhn-note {
	background: var(--rmhn-sand);
	border: 1px solid var(--rmhn-border);
}

.rmhn-note > .rmhn-icon {
	color: var(--rmhn-muted);
}

.rmhn-callout > div > :last-child,
.rmhn-note > div > :last-child {
	margin-bottom: 0;
}

/* Confirmation and error messages: never colour alone. */
.rmhn-message {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px 18px;
	border: 1px solid currentColor;
	border-radius: var(--rmhn-radius-button);
	background: var(--rmhn-white);
}

.rmhn-message--success {
	color: var(--rmhn-success);
}

.rmhn-message--error {
	color: var(--rmhn-error);
}

.rmhn-message > span {
	color: var(--rmhn-ink);
}

.rmhn-field-error {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--rmhn-error);
}

/* ---------------------------------------------------------------- tags */
.rmhn-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--rmhn-sand);
	font: 600 13px/1.3 var(--rmhn-font-body);
	color: var(--rmhn-ink);
}

.rmhn-tag--blush {
	background: var(--rmhn-blush);
	color: var(--rmhn-red-hover);
}

/* TBC tag: only shown to logged-in editors, so placeholders are obvious in preview (R12).
   Visitors still see the placeholder text itself, e.g. "[TBC]". */
.rmhn-tbc {
	display: none;
}

.rmhn-show-tbc .rmhn-tbc {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 1px 6px;
	border: 1px solid var(--rmhn-border);
	border-radius: 5px;
	font: 600 11px/1.4 var(--rmhn-font-body);
	letter-spacing: 0.06em;
	color: var(--rmhn-error);
	vertical-align: middle;
}

/* ---------------------------------------------------------------- motion */
/* Fade-and-rise, once, on .rmhn-reveal. Only when JS is running, and never under reduced motion. */
.rmhn-js .rmhn-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.rmhn-js .rmhn-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rmhn-js .rmhn-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- utilities */
.rmhn-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- header (Prompt 02) */
/* Header CTAs: Text element (Need help now?) + Button element (Donate), N1-a. */
[data-header*="type-1"] .ct-header .rmhn-header-help,
[data-header*="type-1"] .ct-header .rmhn-header-donate {
	min-height: 48px;
	padding: 0 22px;
	font: 600 17px/1 var(--rmhn-font-body);
	border-radius: var(--rmhn-radius-button);
}

.ct-header .rmhn-label-short {
	display: none;
}

.ct-header [data-id="text"] .entry-content,
.ct-header [data-id="text"] p {
	margin: 0;
}

@media (max-width: 689.98px) {
	[data-header*="type-1"] .ct-header .rmhn-header-help,
	[data-header*="type-1"] .ct-header .rmhn-header-donate {
		min-height: 44px;
		padding: 0 14px;
		font-size: 16px;
	}

	.ct-header [data-row*="middle"] [data-items] {
		gap: 10px;
	}
}

/* "Need help now?" shortens to "Get help" where 360px gets tight. */
@media (max-width: 400px) {
	.ct-header .rmhn-label-long {
		display: none;
	}

	.ct-header .rmhn-label-short {
		display: inline;
	}
}

/* Trigger: 44px target. */
.ct-header-trigger {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

/* Desktop dropdown: soft card. */
.ct-header .sub-menu {
	border: 1px solid var(--rmhn-border);
	box-shadow: 0 12px 32px rgba(26, 26, 26, 0.08);
}

/* ---------------------------------------------------------------- off-canvas (Global States board) */
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent,
#offcanvas .mobile-menu > ul > li > a {
	min-height: 56px;
}

#offcanvas .mobile-menu .sub-menu a {
	min-height: 52px;
	padding-inline-start: 16px;
}

.rmhn-offcanvas-extras {
	display: grid;
	gap: 12px;
	width: 100%;
	margin-top: 24px;
}

.rmhn-offcanvas-extras .rmhn-contact-list {
	margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
	#offcanvas .ct-panel-inner,
	#offcanvas {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- contact list */
.rmhn-contact-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmhn-contact-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-height: 28px;
}

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

.rmhn-contact-list a {
	color: inherit;
	text-decoration: none;
}

.rmhn-contact-list a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- footer (dark ink, Home board) */
.ct-footer {
	--rmhn-footer-muted: rgba(255, 255, 255, 0.7);
}

.ct-footer .rmhn-contact-list .rmhn-icon {
	color: rgba(255, 255, 255, 0.86);
}

.ct-footer .rmhn-footer-logo img {
	display: block;
	width: 128px;
	height: auto;
	padding: 10px 12px;
	background: var(--rmhn-white);
	border-radius: 12px;
}

.ct-footer .widget-menu ul,
.ct-footer .menu {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-footer .rmhn-registration,
.ct-footer .rmhn-emergency-line {
	margin: 0;
}

.ct-footer .rmhn-registration {
	margin-top: 12px;
	color: var(--rmhn-footer-muted);
	font-size: 15px;
}

.ct-footer .rmhn-tbc-text {
	color: var(--rmhn-footer-muted);
}

.ct-footer .rmhn-show-tbc .rmhn-tbc,
.rmhn-show-tbc .ct-footer .rmhn-tbc {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
}

.ct-footer :focus-visible {
	outline-color: #FFFFFF;
}

/* ---------------------------------------------------------------- newsletter (the site's own form) */
.rmhn-newsletter__blurb {
	margin: 0 0 16px;
}

.rmhn-newsletter__form,
.rmhn-newsletter__field,
.rmhn-newsletter__submit {
	margin: 0;
}

.rmhn-newsletter__field {
	margin-bottom: 12px;
}

.rmhn-newsletter__field label {
	display: block;
	margin-bottom: 8px;
	font: 600 16px/1.4 var(--rmhn-font-body);
}

.rmhn-newsletter__field input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-field);
	background: var(--rmhn-white);
	color: var(--rmhn-ink);
	font: 400 18px/1 var(--rmhn-font-body);
}

.rmhn-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rmhn-newsletter__button {
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--rmhn-radius-button);
	background: var(--rmhn-red);
	color: var(--rmhn-white);
	font: 600 17px/1 var(--rmhn-font-body);
	cursor: pointer;
}

.rmhn-newsletter__button:hover {
	background: var(--rmhn-red-hover);
}

.rmhn-newsletter__message {
	margin: 0 0 12px;
	padding: 12px 16px;
	border-radius: var(--rmhn-radius-field);
	background: var(--rmhn-white);
	color: var(--rmhn-ink);
	border-left: 4px solid var(--rmhn-success);
	font-weight: 600;
}

.rmhn-newsletter__message.is-error {
	border-left-color: var(--rmhn-error);
}

.ct-footer .rmhn-newsletter__field label {
	color: #FFFFFF;
}

/* Header CTA labels never wrap. */
.ct-header .rmhn-header-help,
.ct-header .rmhn-header-donate {
	white-space: nowrap;
}

.ct-header [data-id="text"],
.ct-header [data-id="button"] {
	flex: none;
}

/* Board: clear gap between the nav and the two CTAs on desktop. */
@media (min-width: 1000px) {
	.ct-header [data-device="desktop"] [data-id="text"] {
		--margin: 0 10px 0 48px;
	}
}

@media (max-width: 689.98px) {
	.ct-header [data-device="mobile"] [data-id="logo"] img {
		width: auto;
	}
}

/* 360 budget (DESIGN_NOTES "Header"): items sit 10px apart. Blocksy adds 10px margins on top of the
   row gap, which overflowed into the logo. */
@media (max-width: 689.98px) {
	.ct-header [data-device="mobile"] [data-row*="middle"] [data-items] > [data-id] {
		--margin: 0;
	}
}

/* Off-canvas close: 44px bordered target (Global States board). */
#offcanvas .ct-toggle-close[data-type="type-2"] {
	width: 44px;
	height: 44px;
	border-width: 2px;
}

.ct-footer .widget_nav_menu li + li {
	margin-top: 12px;
}

.ct-footer [data-id="socials"] {
	--margin: 20px 0 0;
}

/* ---------------------------------------------------------------- shared page components (Prompt 05+) */
/* Designed templates render their own sections edge to edge inside Blocksy's <main>. */
.rmhn-page {
	overflow-x: clip;
}

.rmhn-page h2 {
	margin: 0;
}

/* Visibility helpers only ever hide, so each element keeps its own display value. */
@media (max-width: 689.98px) {
	.rmhn-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 690px) {
	.rmhn-show-mobile {
		display: none !important;
	}
}

.rmhn-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 24px;
}

.rmhn-section-head__link {
	display: none;
}

.rmhn-section-foot {
	margin-top: 16px;
}

@media (min-width: 690px) {
	.rmhn-section-head {
		margin-bottom: 40px;
	}

	.rmhn-section-head__link {
		display: inline-flex;
	}
}

/* Whole card is clickable through its title link; the visible "Learn more" is decoration. */
.rmhn-card-link {
	position: relative;
}

.rmhn-card-link :is(h2, h3) a {
	color: inherit;
	text-decoration: none;
}

.rmhn-card-link :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rmhn-card-link:hover {
	border-color: var(--rmhn-ink);
}

.rmhn-card-link:focus-within {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

.rmhn-card-link :is(h2, h3) a:focus-visible {
	outline: none;
}

.rmhn-icon-holder--sm {
	width: 44px;
	height: 44px;
}

.rmhn-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.rmhn-pills li {
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--rmhn-white);
	font-weight: 600;
	font-size: 16px;
}

.rmhn-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--rmhn-muted);
}

/* Impact numbers (Home + Impact). */
.rmhn-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmhn-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	background: var(--rmhn-white);
	border-radius: var(--rmhn-radius-card);
}

.rmhn-stat__value {
	font: 700 26px/1.1 var(--rmhn-font-heading);
	color: var(--rmhn-red);
}

.rmhn-stat--heading .rmhn-stat__value {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.rmhn-stat__label {
	font-size: 15px;
	line-height: 1.45;
}

@media (min-width: 1000px) {
	.rmhn-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	.rmhn-stat {
		gap: 10px;
		padding: 32px;
	}

	.rmhn-stat__value {
		font-size: 44px;
	}

	.rmhn-stat--heading .rmhn-stat__value {
		font-size: 28px;
		line-height: 1.15;
	}

	.rmhn-stat__label {
		font-size: 17px;
	}
}

/* Event card (Home, Events). */
.rmhn-event-grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmhn-event-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	height: 100%;
	padding: 20px;
}

.rmhn-date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: none;
	min-width: 64px;
	margin: 0;
	padding: 10px 8px;
	border-radius: 12px;
	background: var(--rmhn-sand);
	font-family: var(--rmhn-font-heading);
}

.rmhn-date-block__day {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.rmhn-date-block__month {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rmhn-muted);
}

.rmhn-event-card__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.rmhn-event-card__meta {
	display: grid;
	gap: 4px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--rmhn-muted);
}

.rmhn-event-card__meta li {
	display: flex;
	gap: 8px;
	align-items: center;
}

.rmhn-event-card__meta .rmhn-icon {
	color: var(--rmhn-red);
}

@media (min-width: 690px) {
	.rmhn-event-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.rmhn-event-card {
		padding: 28px;
	}

	.rmhn-event-card__title {
		font-size: 20px;
	}

	.rmhn-event-card__meta {
		gap: 8px;
		font-size: 16px;
	}
}

/* Mini post card (program related stories, story related posts). */
.rmhn-mini-grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmhn-mini-card__media {
	aspect-ratio: 16 / 9;
}

.rmhn-mini-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rmhn-mini-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 20px 20px;
}

.rmhn-mini-card__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
}

.rmhn-mini-card__body .rmhn-small {
	margin: 0;
}

@media (min-width: 690px) {
	.rmhn-mini-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.rmhn-mini-card {
		display: grid;
		grid-template-columns: 200px 1fr;
	}

	.rmhn-mini-card__media {
		aspect-ratio: auto;
		min-height: 170px;
	}

	.rmhn-mini-card__body {
		justify-content: center;
		padding: 24px;
	}
}

.rmhn-icon-holder--lg {
	width: 72px;
	height: 72px;
}

@media (max-width: 689.98px) {
	.rmhn-btn--block-mobile {
		display: flex;
		width: 100%;
	}
}

/* Body copy from the classic editor: lists get the design's check marks. */
.rmhn-prose > :first-child {
	margin-top: 0;
}

.rmhn-prose ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.rmhn-prose ul li {
	position: relative;
	margin-bottom: 10px;
	padding-inline-start: 36px;
}

.rmhn-prose ul li::before {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 0;
	width: 22px;
	height: 22px;
	background: var(--rmhn-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- featured post card (Home, Stories & News) */
.rmhn-feature__media {
	aspect-ratio: 16 / 10;
}

.rmhn-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rmhn-feature__body {
	padding: 20px;
}

.rmhn-feature__title {
	margin: 0 0 12px;
	font-size: 21px;
}

.rmhn-feature__title a {
	color: inherit;
	text-decoration: none;
}

.rmhn-feature__title a:hover {
	text-decoration: underline;
}

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

.rmhn-pseudonym {
	margin: 0 0 20px;
}

.rmhn-feature .rmhn-btn {
	width: 100%;
}

@media (min-width: 690px) {
	.rmhn-feature .rmhn-btn {
		width: auto;
	}
}

@media (min-width: 1000px) {
	.rmhn-feature {
		display: grid;
		grid-template-columns: 46% 1fr;
	}

	.rmhn-feature__media {
		aspect-ratio: auto;
		min-height: 440px;
	}

	.rmhn-feature__body {
		align-self: center;
		padding: 48px;
	}

	.rmhn-feature__title {
		font-size: 32px;
		line-height: 1.2;
	}
}


/* Info card (program sidebar, event sidebar). */
.rmhn-info-card h2 {
	margin: 0 0 10px;
	font-size: 20px;
}

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

@media (min-width: 1000px) {
	.rmhn-info-card {
		padding: 28px 28px 32px;
	}
}

/* Breadcrumbs (program and event singles). Links are underlined so they don't rely on colour. */
.rmhn-breadcrumbs {
	margin-bottom: 20px;
	font-size: 15px;
	color: var(--rmhn-muted);
}

.rmhn-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Page intro (designed templates): H1 + lead in a narrower, offset column (boards: Impact, Team). */
.rmhn-page-intro {
	padding-bottom: 32px;
}

.rmhn-page-intro h1 {
	margin: 0 0 16px;
}

.rmhn-page-intro .rmhn-lead {
	margin: 0;
	color: var(--rmhn-muted);
}

@media (min-width: 1000px) {
	.rmhn-page-intro {
		padding-bottom: 64px;
	}

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

/* Closing card pair (Programs archive, Impact page). */
.rmhn-cta-pair {
	display: grid;
	gap: 24px;
}

.rmhn-cta-pair h2 {
	margin: 0 0 12px;
	font-size: 22px;
}

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

.rmhn-cta-pair__help {
	background: var(--rmhn-sand);
	border-color: transparent;
}

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

	.rmhn-cta-pair > .rmhn-card {
		padding: 40px;
	}

	.rmhn-cta-pair h2 {
		font-size: 30px;
	}
}

/* ---------------------------------------------------------------- quiet footer (Get Help, Donate) */
/* Emergency line (or the donation line) and the copyright only, as on those boards. */
.rmhn-quiet-footer .ct-footer [data-row="middle"] {
	display: none;
}

.rmhn-donate__footer-line {
	margin: 0 0 8px;
	padding-inline: var(--rmhn-gutter);
	font-size: 15px;
	color: var(--rmhn-muted);
}

/* ---------------------------------------------------------------- cookie banner (Prompt 14) */
/* Global States board: a bar across the bottom, and Accept and Decline identical — same size,
   weight and outline, neither of them the red primary. Blocksy injects its own banner CSS at
   runtime, after this file, so these rules carry a "body" prefix to win. */
body .cookie-notification {
	border-top: 1px solid var(--rmhn-border);
	background: var(--rmhn-white);
	box-shadow: 0 -6px 20px rgba(26, 26, 26, 0.08);
}

body .cookie-notification > div {
	padding: 16px var(--rmhn-gutter);
}

body .cookie-notification .container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: calc(var(--rmhn-container) + 2 * var(--rmhn-gutter));
	margin-inline: auto;
	padding: 0;
	background: none;
	box-shadow: none;
}

body .cookie-notification .ct-cookies-content p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

body .cookie-notification .ct-cookies-content a {
	color: var(--rmhn-red);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .cookie-notification .ct-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body .cookie-notification .ct-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 48px;
	padding: 0 28px;
	border: 2px solid var(--rmhn-ink);
	border-radius: var(--rmhn-radius-button);
	background: transparent;
	color: var(--rmhn-ink);
	font: 600 17px/1 var(--rmhn-font-body);
	cursor: pointer;
}

body .cookie-notification .ct-button:hover {
	background: var(--rmhn-ink);
	color: var(--rmhn-white);
}

@media (min-width: 690px) {
	body .cookie-notification .container {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	body .cookie-notification .ct-cookies-content {
		flex: 1;
	}

	body .cookie-notification .ct-button-group,
	body .cookie-notification .ct-button {
		flex: none;
	}
}

/* Header cart (Shop, step 6): Blocksy hides an empty cart with this rule in its WooCommerce stylesheet,
   which only loads on shop screens (R8). The same rule here hides it everywhere else. A donation in
   the cart counts as empty (rmhn-core navigation.php). */
.ct-header-cart[data-cart="hide-empty"]:has([data-count="0"]) {
	display: none;
}

/* The count badge, from the same Blocksy WooCommerce stylesheet (dynamic-counter.scss), for the pages
   where that stylesheet isn't loaded. */
.ct-header-cart [class*="ct-dynamic-count"] {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 1;
	top: -9px;
	inset-inline-end: -9px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	font-style: normal;
	color: var(--theme-cart-badge-text, #fff);
	background: var(--theme-cart-badge-background, var(--theme-palette-color-1));
}

.ct-header-cart [class*="ct-dynamic-count"][data-count="0"] {
	display: none;
}

/* ---------------------------------------------------------------- floating WhatsApp button */
/* WhatsApp's green, darkened so the white mark and the button's edge both pass 3:1. It sits under the
   cookie bar, so the bar is answered first. */
.rmhn-wa-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--rmhn-white);
	border-radius: 50%;
	background: #1A9E4B;
	color: var(--rmhn-white);
	box-shadow: 0 4px 14px rgba(26, 26, 26, 0.22);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.rmhn-wa-float:hover,
.rmhn-wa-float:focus-visible {
	background: #168640;
	color: var(--rmhn-white);
}

.rmhn-wa-float:hover {
	transform: translateY(-2px);
}

.rmhn-wa-float:focus-visible {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

.rmhn-wa-float .rmhn-icon {
	width: 30px;
	height: 30px;
}

@media (min-width: 1000px) {
	.rmhn-wa-float {
		right: 24px;
		bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rmhn-wa-float {
		transition: none;
	}

	.rmhn-wa-float:hover {
		transform: none;
	}
}

@media print {
	.rmhn-wa-float {
		display: none;
	}
}