/*
 * PCCIL Get Involved public page (/get-involved/).
 *
 * Mirrors the visual language of the /requests/ form but with its own
 * class namespace so the two can evolve independently. Two-column
 * layout that stacks under 820px.
 */

.pccc-get-involved {
	background: #ffffff;
}

.pccc-get-involved__layout {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 48px;
	align-items: flex-start;
}

@media (max-width: 820px) {
	.pccc-get-involved__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.pccc-get-involved__left { max-width: 520px; }

.pccc-get-involved__intro p { margin: 0 0 12px; }

.pccc-get-involved__types-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pccc-get-involved__types-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
}
.pccc-get-involved__type-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pccc-color-primary, #398aa0);
	flex-shrink: 0;
}

/* --- Form --- */

.pccc-get-involved__form {
	background: var(--pccc-color-surface, #ffffff);
	border: 1px solid var(--pccc-color-border, #e5e8ec);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pccc-get-involved__fieldset {
	border: 1px solid var(--pccc-color-border, #e5e8ec);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0;
}
.pccc-get-involved__fieldset legend {
	padding: 0 6px;
	font-weight: 600;
	font-size: 0.9rem;
}

.pccc-get-involved__checks {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
@media (min-width: 560px) {
	.pccc-get-involved__checks { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}

.pccc-get-involved__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.95rem;
	cursor: pointer;
	line-height: 1.35;
}
.pccc-get-involved__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}
.pccc-get-involved__check--stack { margin: 4px 0; }

.pccc-get-involved__label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pccc-get-involved__label > span {
	font-weight: 600;
	font-size: 0.9rem;
}
.pccc-get-involved__label input,
.pccc-get-involved__label textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pccc-color-border, #d1d5db);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
}
.pccc-get-involved__label textarea { resize: vertical; min-height: 120px; }
.pccc-get-involved__label input:focus,
.pccc-get-involved__label textarea:focus {
	outline: 2px solid var(--pccc-color-primary, #398aa0);
	outline-offset: 2px;
}

.pccc-get-involved__row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 560px) {
	.pccc-get-involved__row-2 { grid-template-columns: 1fr; }
}

.pccc-get-involved__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.pccc-get-involved__actions .pccc-btn { align-self: flex-start; }
@media (max-width: 560px) {
	.pccc-get-involved__actions .pccc-btn { align-self: stretch; text-align: center; }
}

.pccc-get-involved__success {
	background: #f0f9ef;
	border: 1px solid #b6dcb0;
	border-radius: 12px;
	padding: 20px;
}