/* ==========================================================================
   The Hope Delivery Foundation — volunteer registration
   --------------------------------------------------------------------------
   Two things: the invitation band on the page, and the dialog it opens.

   The dialog deliberately reuses the donation dialog's chrome — .hdf-modal,
   .hdf-field, .hdf-input, .hdf-error, .hdf-btn, .hdf-alert, .hdf-done — from
   hdf-donate.css, which loads first. Those rules already solve the awkward
   parts (dvh sizing, the short-viewport ladder, the bottom-sheet layout on a
   phone), and reusing them is what makes the two forms on this site feel like
   one system. Only what is genuinely new to volunteering lives here.

   Every colour is written as var(--token, #literal). Elementor inlines a
   literal beside all 984 of its own var() calls, so a rule that trusted the
   token alone would lose to the theme; the literal is the one that renders.
   ========================================================================== */

/* ============================================================ the band === */

.hdf-volunteer {
	overflow: hidden;
}

.hdf-volunteer__band {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-radius: 28px;
	background-color: var(--cleenhearts-base, #361650);
	overflow: hidden;
}

/* A slow drift of colour behind the copy. Cheap — two radial gradients on one
   compositor-friendly transform — and it stops a flat purple block from
   reading as an advertisement. */
.hdf-volunteer__glow {
	position: absolute;
	top: -40%;
	right: -20%;
	width: 90%;
	height: 180%;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(var(--cleenhearts-secondary-rgb, 210, 168, 81), .34), transparent 70%),
		radial-gradient(closest-side, rgba(var(--cleenhearts-purple-rgb, 120, 60, 170), .5), transparent 72%);
	background-position: 20% 30%, 75% 70%;
	background-size: 62% 62%, 70% 70%;
	background-repeat: no-repeat;
	animation: hdf-volunteer-drift 18s ease-in-out infinite alternate;
}

@keyframes hdf-volunteer-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-6%, 5%, 0) scale(1.12); }
}

.hdf-volunteer__media {
	position: relative;
	z-index: 1;
	min-height: 240px;
}

/* Absolutely positioned so the photograph fills whatever height the copy
   column ends up being, rather than the photograph's own aspect ratio
   dictating the height of the band and leaving empty purple beneath it. */
.hdf-volunteer__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.hdf-volunteer__copy {
	position: relative;
	z-index: 1;
	padding: 40px 34px 44px;
}

.hdf-volunteer__tagline {
	margin: 0 0 10px;
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cleenhearts-secondary, #D2A851);
}

.hdf-volunteer__title {
	margin: 0 0 16px;
	font-family: var(--cleenhearts-heading-font2, "Castoro", serif);
	font-size: 34px;
	line-height: 1.2;
	color: var(--cleenhearts-white, #fff);
}

.hdf-volunteer__title__inner {
	color: var(--cleenhearts-secondary, #D2A851);
	font-style: italic;
}

.hdf-volunteer__intro {
	margin: 0 0 22px;
	font-size: 16.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
}

.hdf-volunteer__points {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.hdf-volunteer__points li {
	position: relative;
	margin-bottom: 9px;
	padding-left: 30px;
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}

.hdf-volunteer__points li::before {
	position: absolute;
	top: .5em;
	left: 0;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border-radius: 50%;
	background-color: rgba(var(--cleenhearts-secondary-rgb, 210, 168, 81), .22);
	content: "";
}

.hdf-volunteer__points li::after {
	position: absolute;
	top: .5em;
	left: 6px;
	width: 4px;
	height: 8px;
	margin-top: -6px;
	border: solid var(--cleenhearts-secondary, #D2A851);
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate(45deg);
}

/* The theme button, on a dark ground. */
.hdf-volunteer__cta {
	cursor: pointer;
}

/* --------------------------------------------------------- band layout --- */

@media (min-width: 768px) {
	.hdf-volunteer__band {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: stretch;
	}

	.hdf-volunteer__copy {
		padding: 52px 48px 56px;
	}
}

@media (min-width: 1200px) {
	.hdf-volunteer__copy {
		padding: 66px 64px 70px;
	}

	.hdf-volunteer__title {
		font-size: 40px;
	}
}

@media (max-width: 480px) {
	.hdf-volunteer__band {
		border-radius: 20px;
	}

	.hdf-volunteer__copy {
		padding: 32px 22px 36px;
	}

	.hdf-volunteer__title {
		font-size: 28px;
	}

	.hdf-volunteer__intro {
		font-size: 15.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hdf-volunteer__glow {
		animation: none;
	}
}

/* =========================================================== the dialog === */

/* Wider than the donation dialog: this form has two-column rows and a
   ten-option checkbox grid, and 520px would make both cramped. */
.hdf-vol-modal .hdf-modal__dialog {
	max-width: 620px;
}

.hdf-vol-group {
	margin: 0 0 20px;
	padding: 0;
	border: none;
}

.hdf-vol-group + .hdf-vol-group {
	padding-top: 20px;
	border-top: 1px solid var(--cleenhearts-white3, #DCD5CA);
}

.hdf-vol-legend {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--cleenhearts-base, #361650);
}

.hdf-vol-optional {
	margin-left: 6px;
	font-family: var(--cleenhearts-font, "DM Sans", sans-serif);
	font-size: 13px;
	font-weight: 400;
	color: var(--cleenhearts-text-gray2, #888888);
}

.hdf-vol-hint {
	margin: -6px 0 12px;
	font-size: 13.5px;
	color: var(--cleenhearts-text-gray2, #888888);
}

.hdf-vol-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 14px;
}

@media (min-width: 480px) {
	.hdf-vol-row {
		grid-template-columns: 1fr 1fr;
	}
}

.hdf-vol-hours {
	margin-top: 16px;
	max-width: 320px;
}

.hdf-textarea {
	height: auto;
	padding: 12px 18px;
	line-height: 1.55;
	resize: vertical;
}

select.hdf-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23783CAA' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	cursor: pointer;
}

/* ------------------------------------------------------------ check boxes */

.hdf-checks {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px 18px;
}

@media (min-width: 480px) {
	.hdf-checks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hdf-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
	color: var(--cleenhearts-base, #361650);
}

/* The native box is hidden but still focusable and still the thing a screen
   reader announces — the square below is only paint. */
.hdf-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.hdf-check__box {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1.5px solid var(--cleenhearts-border-color, #DCD5CA);
	border-radius: 6px;
	background-color: var(--cleenhearts-white, #fff);
	transition: border-color 180ms ease, background-color 180ms ease;
}

.hdf-check__box::after {
	position: absolute;
	top: 3px;
	left: 6.5px;
	width: 5px;
	height: 9px;
	border: solid var(--cleenhearts-white, #fff);
	border-width: 0 2.5px 2.5px 0;
	opacity: 0;
	content: "";
	transform: rotate(45deg) scale(.7);
	transition: opacity 150ms ease, transform 150ms ease;
}

.hdf-check input:checked + .hdf-check__box {
	border-color: var(--cleenhearts-purple, #783CAA);
	background-color: var(--cleenhearts-purple, #783CAA);
}

.hdf-check input:checked + .hdf-check__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.hdf-check input:focus-visible + .hdf-check__box {
	border-color: var(--cleenhearts-purple, #783CAA);
	box-shadow: 0 0 0 3px rgba(var(--cleenhearts-purple-rgb, 120, 60, 170), .22);
}

.hdf-check:hover .hdf-check__box {
	border-color: var(--cleenhearts-purple, #783CAA);
}

/* An invalid checkbox group marks the boxes; there is no single input to put
   a red border on. */
.hdf-vol-group.has-error .hdf-check__box {
	border-color: #C0392B;
}

.hdf-vol-group.has-error .hdf-error {
	display: block;
}

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   plainly hidden, and a real person never reaches it because of tabindex="-1"
   and aria-hidden on the wrapper. */
.hdf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hdf-vol-done .hdf-done__ref {
	margin-top: 18px;
}

/* ------------------------------------------- clickable theme CTA cards --- */

/* Two of the volunteer calls to action are theme cards with no anchor of
   their own. Rather than restructure the theme's markup, the title becomes a
   link whose ::after covers the whole card. */
.about-one__donate,
.inspiring-one__inner__content {
	position: relative;
}

.hdf-stretch {
	color: inherit;
	text-decoration: none;
}

.hdf-stretch::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
}

.hdf-stretch:hover {
	color: var(--cleenhearts-secondary, #D2A851);
}

.about-one__donate:focus-within,
.inspiring-one__inner__content:focus-within {
	outline: 2px solid var(--cleenhearts-secondary, #D2A851);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.hdf-check__box,
	.hdf-check__box::after {
		transition: none;
	}
}