/*
 * Selectors stay at one class on purpose, with element names inside :where(), so anything in
 * the Custom CSS setting overrides them. Only the rules that hide things are stronger.
 */

.rcontrib {
	font-size: 1em;
	margin-block: 2.5em;
}

.rcontrib :where(input, button) {
	font-size: inherit;
	padding: 0.35em 0.75em;
}

.rcontrib :where(button) {
	cursor: pointer;
}

.rcontrib-item {
	margin-block-end: 2em;
	padding-block-end: 2em;
	border-block-end: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.rcontrib-meta :where(time) {
	opacity: 0.7;
	font-size: 0.875em;
	margin-inline-start: 0.5em;
}

.rcontrib-text {
	overflow-wrap: anywhere;
}

.rcontrib-text :where(p) {
	margin: 0;
}

.rcontrib-photo {
	display: block;
	max-width: 100%;
	height: auto;
	margin-block-start: 0.5em;
}

.rcontrib-video {
	margin-block-start: 0.5em;
	max-width: 100%;
}

.rcontrib-video :where(iframe) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.rcontrib-card {
	padding: 1.5em;
	border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 12px;
}

.rcontrib-form-heading {
	margin-block: 0 1em;
}

.rcontrib-form {
	margin-block-start: 1em;
}

.rcontrib-form :where(label) {
	display: block;
	margin-block-end: 0.25em;
}

.rcontrib-form :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.rcontrib-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25em 1.5em;
	align-items: start;
	margin-block-end: 1.25em;
}

.rcontrib-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rcontrib-field > :where(label, legend) {
	display: block;
	padding: 0;
	font-weight: 600;
}

.rcontrib-field > :where(small) {
	display: block;
	margin-block-end: 0.5em;
	opacity: 0.7;
}

.rcontrib-types :where(label) {
	display: inline-block;
	margin-inline-end: 1em;
}

.rcontrib-consent {
	margin-block-start: 1.25em;
}

.rcontrib-consent :where(label) {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
}

.rcontrib-note {
	opacity: 0.8;
}

.rcontrib-status {
	font-weight: 600;
}

.filepond--root {
	margin-block-end: 0;
}

@media (max-width: 640px) {
	.rcontrib-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stronger on purpose: custom CSS setting a display value shouldn't reveal hidden parts. */
.rcontrib-card[hidden],
.rcontrib-open[hidden],
.rcontrib-field[hidden] {
	display: none;
}

.rcontrib-open-status:empty,
.rcontrib-status:empty {
	display: none;
}

/* Hidden from people but not removed, so bots still find and fill it. */
.rcontrib-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}