/**
 * MSterious Miracles volunteer form.
 *
 * Colours default to the Astra theme's global palette so the form follows the
 * site if the theme colours are ever changed, with the current values as
 * fallbacks for any context where those variables are missing.
 */

.msm-vf {
	--msm-accent: var(--ast-global-color-0, #046bd2);
	--msm-accent-dark: var(--ast-global-color-1, #045cb4);
	--msm-heading: var(--ast-global-color-2, #1e293b);
	--msm-text: var(--ast-global-color-3, #334155);
	--msm-surface: var(--ast-global-color-5, #f0f5fa);
	--msm-border: #d8e0ea;
	--msm-muted: #64748b;
	--msm-error: #b3261e;
	--msm-error-bg: #fdf3f2;
	--msm-success: #146c2e;
	--msm-radius: 8px;

	color: var(--msm-text);
	margin: 0 0 2em;
}

.msm-vf *,
.msm-vf *::before,
.msm-vf *::after {
	box-sizing: border-box;
}

/* ---------- Layout ---------- */

.msm-vf__intro {
	margin: 0 0 .5em;
}

.msm-vf__req-note {
	margin: 0 0 1.75em;
	font-size: .875em;
	color: var(--msm-muted);
}

.msm-vf__section {
	border: 1px solid var(--msm-border);
	border-radius: var(--msm-radius);
	padding: 1.5em 1.5em 1.75em;
	margin: 0 0 1.5em;
	background: #fff;
	min-width: 0;
}

.msm-vf__legend {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--msm-heading);
	padding: 0 .5em;
	margin-left: -.5em;
	line-height: 1.3;
}

.msm-vf__subheading {
	font-size: 1em;
	font-weight: 700;
	color: var(--msm-heading);
	margin: 0 0 .5em;
}

.msm-vf__help {
	display: block;
	font-size: .875em;
	color: var(--msm-muted);
	margin: 0 0 1em;
	line-height: 1.5;
}

.msm-vf__row {
	display: grid;
	gap: 0 1em;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.msm-vf__row--two { grid-template-columns: 1fr 1fr; }
	.msm-vf__row--address { grid-template-columns: 3fr 1fr; }
	.msm-vf__row--city { grid-template-columns: 2fr 1.2fr 1fr; }
}

.msm-vf__field {
	margin: 0 0 1.25em;
	border: 0;
	padding: 0;
	min-width: 0;
}

.msm-vf__field--full { grid-column: 1 / -1; }

/* ---------- Controls ---------- */

.msm-vf__label {
	display: block;
	font-weight: 600;
	font-size: .95em;
	color: var(--msm-heading);
	margin: 0 0 .4em;
	padding: 0;
	line-height: 1.4;
}

.msm-vf__label .msm-vf__help {
	font-weight: 400;
	margin-bottom: 0;
}

.msm-vf__req {
	color: var(--msm-error);
	margin-left: .15em;
}

.msm-vf input[type="text"],
.msm-vf input[type="email"],
.msm-vf input[type="tel"],
.msm-vf input[type="date"],
.msm-vf select,
.msm-vf textarea {
	width: 100%;
	max-width: 100%;
	padding: .6em .75em;
	font: inherit;
	font-size: 1em;
	color: var(--msm-text);
	background: #fff;
	border: 1px solid var(--msm-border);
	border-radius: var(--msm-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.msm-vf select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' 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 .75em center;
	background-size: 12px;
	padding-right: 2.25em;
}

.msm-vf input[type="date"] {
	-webkit-appearance: none;
	min-height: 2.75em;
}

.msm-vf textarea {
	resize: vertical;
	min-height: 6em;
}

.msm-vf input:focus-visible,
.msm-vf select:focus-visible,
.msm-vf textarea:focus-visible,
.msm-vf button:focus-visible {
	outline: 2px solid var(--msm-accent);
	outline-offset: 2px;
	border-color: var(--msm-accent);
}

.msm-vf [aria-invalid="true"] {
	border-color: var(--msm-error);
	background: var(--msm-error-bg);
}

.msm-vf__static {
	margin: 0;
	padding: .6em 0;
	color: var(--msm-muted);
}

/* ---------- Radios and checkboxes ---------- */

.msm-vf__radios {
	display: flex;
	gap: .6em;
	flex-wrap: wrap;
}

.msm-vf__radio {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .5em 1.1em;
	border: 1px solid var(--msm-border);
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.2;
	transition: border-color .15s ease, background-color .15s ease;
}

.msm-vf__radio:hover { border-color: var(--msm-accent); }

.msm-vf__radio:has(input:checked) {
	border-color: var(--msm-accent);
	background: var(--msm-surface);
	font-weight: 600;
	color: var(--msm-heading);
}

.msm-vf__check {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	cursor: pointer;
	line-height: 1.45;
}

.msm-vf__check--consent {
	padding: .9em 1em;
	border: 1px solid var(--msm-border);
	border-radius: var(--msm-radius);
	background: var(--msm-surface);
	font-weight: 500;
	color: var(--msm-heading);
}

.msm-vf__check--consent:has(input:checked) {
	border-color: var(--msm-accent);
}

.msm-vf input[type="checkbox"],
.msm-vf input[type="radio"] {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	margin: .12em 0 0;
	accent-color: var(--msm-accent);
	cursor: pointer;
}

/* ---------- Opportunity cards ---------- */

.msm-vf__cards {
	display: grid;
	gap: .75em;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.msm-vf__cards { grid-template-columns: 1fr 1fr; }
}

.msm-vf__card {
	display: flex;
	gap: .7em;
	align-items: flex-start;
	padding: .9em 1em;
	border: 1px solid var(--msm-border);
	border-radius: var(--msm-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.msm-vf__card:hover { border-color: var(--msm-accent); }

.msm-vf__card:has(input:checked) {
	border-color: var(--msm-accent);
	background: var(--msm-surface);
}

.msm-vf__card-body { display: block; }

.msm-vf__card-title {
	display: block;
	font-weight: 700;
	color: var(--msm-heading);
	margin-bottom: .2em;
}

.msm-vf__card-desc {
	display: block;
	font-size: .85em;
	color: var(--msm-muted);
	line-height: 1.5;
}

/* ---------- Skills ---------- */

.msm-vf__skills {
	display: grid;
	gap: .8em;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.msm-vf__skills { grid-template-columns: 1fr 1fr; }
	.msm-vf__skill:has(.msm-vf__skill-detail:not([hidden])) { grid-column: 1 / -1; }
}

/* Keeps the tick label a comfortable tap target on touch screens. */
.msm-vf__skill .msm-vf__check {
	padding: .4em 0;
	align-items: center;
}

.msm-vf__skill-detail {
	margin: .5em 0 0 1.7em;
}

.msm-vf__sublabel {
	display: block;
	font-size: .8em;
	color: var(--msm-muted);
	margin-bottom: .25em;
}

/* ---------- Agreements ---------- */

.msm-vf__agreement {
	padding: 1.1em 1.2em;
	border: 1px solid var(--msm-border);
	border-radius: var(--msm-radius);
	background: var(--msm-surface);
	margin: 0 0 1.1em;
}

.msm-vf__agreement-text {
	margin: 0 0 .9em;
	font-size: .92em;
	line-height: 1.6;
}

.msm-vf__list {
	margin: 0 0 1em;
	padding-left: 1.2em;
	font-size: .92em;
	line-height: 1.6;
}

.msm-vf__list li { margin-bottom: .6em; }

.msm-vf__initials {
	display: flex;
	align-items: center;
	gap: .7em;
}

.msm-vf__initials .msm-vf__label { margin: 0; }

/* These two need to outrank the shared `.msm-vf input[type="..."]` rule above,
   whose `font: inherit` shorthand would otherwise reset the styling. */
.msm-vf .msm-vf__initials input[type="text"] {
	width: 6em;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-align: center;
	font-weight: 600;
}

.msm-vf .msm-vf__signature input[type="text"] {
	font-size: 1.15em;
	font-style: italic;
}

.msm-vf__conditional {
	margin: -.25em 0 1.25em;
	padding: 1.1em 1.2em .25em;
	border-left: 3px solid var(--msm-accent);
	background: var(--msm-surface);
	border-radius: 0 var(--msm-radius) var(--msm-radius) 0;
}

.msm-vf__age-note {
	margin: -.5em 0 0;
	font-size: .875em;
	color: var(--msm-muted);
}

/* ---------- Submit ---------- */

.msm-vf__actions {
	text-align: center;
	padding: .5em 0 0;
}

.msm-vf__submit {
	display: inline-block;
	padding: .85em 2.5em;
	font: inherit;
	font-size: 1.05em;
	font-weight: 600;
	color: #fff;
	background: var(--msm-accent);
	border: 0;
	border-radius: var(--msm-radius);
	cursor: pointer;
	transition: background-color .15s ease;
}

.msm-vf__submit:hover { background: var(--msm-accent-dark); }

.msm-vf__submit[disabled] {
	opacity: .65;
	cursor: progress;
}

.msm-vf__privacy {
	margin: 1em auto 0;
	max-width: 34em;
	font-size: .82em;
	color: var(--msm-muted);
	line-height: 1.5;
}

/* ---------- Errors ---------- */

.msm-vf__summary {
	border: 1px solid var(--msm-error);
	border-left-width: 4px;
	border-radius: var(--msm-radius);
	background: var(--msm-error-bg);
	padding: 1.1em 1.3em;
	margin: 0 0 1.5em;
}

.msm-vf__summary:focus-visible { outline: 2px solid var(--msm-error); outline-offset: 2px; }

.msm-vf__summary-title {
	margin: 0 0 .5em;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--msm-error);
}

.msm-vf__summary-general { margin: 0 0 .5em; }

.msm-vf__summary ul {
	margin: 0;
	padding-left: 1.2em;
	font-size: .92em;
}

.msm-vf__summary li { margin-bottom: .3em; }

.msm-vf__summary a { color: var(--msm-error); }

.msm-vf__error {
	margin: .4em 0 0;
	font-size: .85em;
	font-weight: 500;
	color: var(--msm-error);
}

/* ---------- Success ---------- */

.msm-vf__success {
	text-align: center;
	padding: 2.5em 1.5em;
	border: 1px solid var(--msm-border);
	border-radius: var(--msm-radius);
	background: var(--msm-surface);
}

.msm-vf__success:focus-visible { outline: 2px solid var(--msm-accent); outline-offset: 2px; }

.msm-vf__success-icon {
	width: 52px;
	height: 52px;
	color: var(--msm-success);
	margin-bottom: .5em;
}

.msm-vf__success-title {
	margin: 0 0 .5em;
	color: var(--msm-heading);
}

.msm-vf__success p {
	max-width: 34em;
	margin: 0 auto .75em;
}

.msm-vf__success-questions {
	font-size: .9em;
	color: var(--msm-muted);
}

/* ---------- Honeypot ---------- */

.msm-vf__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Print ---------- */

@media print {
	.msm-vf__actions,
	.msm-vf__summary { display: none; }
	.msm-vf__section { break-inside: avoid; border-color: #999; }
}