/*
 * Contact forms (templates/components/contact-form.php), on tokens.css.
 *
 * Ported from Forms-Studio (A · Contact the studio, desktop 1280 + phone 390, "after
 * sending") and ShowPage3's "Contact the show" (.skdr-contact-*, verbatim values; BRIEF
 * §18i, §18m). Board colours are the brand tokens; #EAEAEA (card ring) and #F9F0F1 (soft
 * pink behind the sent tick) are the boards' own. The board's two-field rows become one
 * grid, so an admin's field order still fills two columns; a long field is full width.
 * The drawn Turnstile stand-in is Cloudflare's real widget here.
 *
 * Colours on links, inputs and the pill are set with two classes, so Kreeti's
 * `.aft-default-mode button` and `a:visited` rules can't override them.
 */

.skdr-contact-card,
.skdr-form-done {
	font-family: var(--skdr-font);
}

.skdr-contact-card,
.skdr-contact-card *,
.skdr-form-done,
.skdr-form-done * {
	box-sizing: border-box;
}

/* The card: intro column + form */
.skdr-contact-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 64px;
	padding: 40px;
	border: 1px solid #EAEAEA;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
}

.skdr-contact-card .skdr-form-h2 {
	margin: 0 0 16px;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h2);
	font-weight: var(--skdr-fw-bold);
	line-height: var(--skdr-lh-h2);
}

.skdr-contact-card .skdr-contact-intro {
	max-width: 360px;
	margin: 0;
	color: var(--skdr-gray);
	font-size: 16px;
	line-height: 26px;
}

/* Quiet side notes */
.skdr-contact-card .skdr-form-aside {
	max-width: 360px;
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid #EAEAEA;
	list-style: none;
}

.skdr-form-aside li {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid #EAEAEA;
}

.skdr-form-aside b {
	display: block;
	color: var(--skdr-ink);
	font-size: 15px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 22px;
}

.skdr-form-aside span {
	display: block;
	margin-top: 2px;
	color: var(--skdr-gray);
	font-size: 14px;
	line-height: 22px;
}

/* Text link with a chevron */
.skdr-contact-card .skdr-form-link,
.skdr-form-done .skdr-form-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--skdr-tap);
	border-radius: 2px;
	color: var(--skdr-dark);
	font-size: 14px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 22px;
	text-decoration: none;
}

.skdr-contact-card .skdr-form-link:hover,
.skdr-form-done .skdr-form-link:hover {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* The form */
.skdr-contact-card .skdr-contact-form {
	display: grid;
	gap: 20px;
	margin: 0;
}

.skdr-contact-form .skdr-contact-req {
	margin: 0;
	color: var(--skdr-muted);
	font-size: 13px;
	line-height: 20px;
}

.skdr-contact-form .skdr-contact-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
}

.skdr-contact-fields .skdr-contact-f {
	min-width: 0;
}

.skdr-contact-fields .skdr-contact-f--full {
	grid-column: 1 / -1;
}

.skdr-contact-form .skdr-contact-lbl {
	display: block;
	margin: 0 0 8px;
	color: var(--skdr-ink);
	font-size: 14px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 22px;
}

.skdr-contact-form .skdr-contact-opt {
	color: var(--skdr-muted);
	font-weight: var(--skdr-fw-regular);
}

.skdr-contact-form .skdr-contact-in {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-chip);
	background: var(--skdr-white);
	box-shadow: none;
	color: var(--skdr-ink);
	font-family: var(--skdr-font);
	font-size: 16px;
	line-height: 24px;
}

.skdr-contact-form .skdr-contact-in::placeholder {
	color: var(--skdr-muted);
	opacity: 1;
}

.skdr-contact-form .skdr-contact-in:hover,
.skdr-contact-form .skdr-contact-in:focus {
	border-color: var(--skdr-dark);
}

.skdr-contact-form textarea.skdr-contact-in {
	height: 160px;
	padding: 12px 16px;
	resize: vertical;
}

.skdr-contact-form .skdr-contact-help {
	margin: 4px 0 0;
	color: var(--skdr-muted);
	font-size: 13px;
	line-height: 20px;
}

.skdr-contact-form .skdr-contact-count {
	margin: 6px 0 0;
	color: var(--skdr-muted);
	font-size: 13px;
	line-height: 20px;
	text-align: right;
}

/* Bots fill this in; people never see it */
.skdr-contact-form .skdr-contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cloudflare Turnstile (flexible width, 65px tall) */
.skdr-contact-form .skdr-contact-ts {
	min-height: 65px;
	max-width: 100%;
}

/* Privacy box */
.skdr-contact-form .skdr-contact-ok {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--skdr-tap);
	color: var(--skdr-ink);
	font-size: 14px;
	line-height: 22px;
	cursor: pointer;
}

.skdr-contact-form .skdr-contact-ok input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--skdr-red);
}

/* Underlined, not told apart by colour alone (WCAG 1.4.1; axe link-in-text-block). */
.skdr-contact-form .skdr-contact-ok a,
.skdr-contact-form .skdr-contact-ok a:visited {
	color: var(--skdr-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.skdr-contact-form .skdr-contact-ok a:hover {
	color: var(--skdr-red);
}

/* Send pill */
.skdr-contact-form .skdr-contact-send {
	justify-self: start;
	height: 48px;
	margin-top: 4px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-red);
	color: var(--skdr-white);
	font-family: var(--skdr-font);
	font-size: 16px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.skdr-contact-form .skdr-contact-send:hover {
	background: var(--skdr-red-h);
	color: var(--skdr-white);
}

.skdr-contact-form .skdr-contact-send[disabled] {
	cursor: progress;
	opacity: 0.7;
}

/* What went wrong (a quiet panel, Dark Red text; never red on red) */
.skdr-contact-form .skdr-form-error {
	margin: 0;
	padding: 12px 16px;
	border-left: 4px solid var(--skdr-dark);
	border-radius: var(--skdr-r-chip);
	background: #F9F0F1;
	color: var(--skdr-dark);
	font-size: 14px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 22px;
}

/* Sent */
.skdr-form-done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px;
	border: 1px solid #EAEAEA;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
}

.skdr-form-done .skdr-form-done__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #F9F0F1;
	color: var(--skdr-red);
}

.skdr-form-done .skdr-form-done__t {
	margin: 4px 0 0;
	color: var(--skdr-ink);
	font-size: 18px;
	font-weight: var(--skdr-fw-bold);
	line-height: 26px;
}

.skdr-form-done .skdr-form-done__s {
	margin: 0;
	color: var(--skdr-gray);
	font-size: 14px;
	line-height: 22px;
}

/* The sent panel in the card's right column (the heading stays on the left): no second frame */
.skdr-contact-card .skdr-form-done {
	align-self: start;
	padding: 0;
	border: 0;
}

/* Focus ring: 2px white + 4px red halo; inputs also take the Dark Red border */
.skdr-contact-card :is(a, button, input, textarea):focus-visible,
.skdr-form-done a:focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

.skdr-contact-form .skdr-contact-in:focus-visible {
	border-color: var(--skdr-dark);
}

/* The result panels take focus only so screen readers announce them; they aren't controls */
.skdr-form-done:focus,
.skdr-contact-form .skdr-form-error:focus {
	outline: none;
}

/*
 * The volunteer application (templates/components/apply-form.php; Forms-Apply B, values verbatim):
 * "what happens next", two fields to a row, the role tick boxes in two groups, and the link
 * in the duplicate answer.
 */
.skdr-contact-form .skdr-contact-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
}

.skdr-contact-two > * {
	min-width: 0;
}

.skdr-contact-card .skdr-form-steps {
	max-width: 360px;
	margin: 32px 0 0;
	padding: 0;
	counter-reset: skdrstep;
	list-style: none;
}

.skdr-form-steps li {
	position: relative;
	min-height: 32px;
	margin: 0;
	padding: 4px 0 0 48px;
	color: var(--skdr-ink);
	font-size: 15px;
	line-height: 24px;
	counter-increment: skdrstep;
}

.skdr-form-steps li + li {
	margin-top: 16px;
}

.skdr-form-steps li::before {
	content: counter(skdrstep);
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F9F0F1;
	color: var(--skdr-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

.skdr-form-steps small {
	display: block;
	color: var(--skdr-gray);
	font-size: 14px;
	line-height: 22px;
}

.skdr-contact-form .skdr-form-set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.skdr-form-set legend {
	padding: 0;
}

.skdr-contact-form .skdr-form-set__help {
	margin: -4px 0 8px;
}

.skdr-form-group + .skdr-form-group {
	margin-top: 16px;
}

.skdr-form-group__t {
	margin: 0 0 8px;
	color: var(--skdr-ink);
	font-size: 12px;
	font-weight: var(--skdr-fw-semibold);
	letter-spacing: 0.08em;
	line-height: 18px;
	text-transform: uppercase;
}

.skdr-form-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}

.skdr-contact-form .skdr-form-check {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-chip);
	background: var(--skdr-white);
	color: var(--skdr-ink);
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}

.skdr-contact-form .skdr-form-check:hover,
.skdr-contact-form .skdr-form-check:focus-within {
	border-color: var(--skdr-dark);
}

.skdr-contact-form .skdr-form-check:has(input:checked) {
	border-color: var(--skdr-dark);
	background: #F9F0F1;
}

.skdr-form-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--skdr-red);
}

/* The duplicate answer's "Contact us", after its sentence (Dark Red on the quiet panel) */
.skdr-contact-form .skdr-form-error .skdr-form-link {
	display: inline-flex;
	min-height: 0;
	margin-left: 4px;
	color: var(--skdr-dark);
	text-decoration: underline;
}

/* Phones (Forms-Studio 390 frames: one column, 24px card padding, 24px heading) */
@media (max-width: 760px) {
	.skdr-contact-form .skdr-contact-two,
	.skdr-form-checks {
		grid-template-columns: minmax(0, 1fr);
	}

	.skdr-contact-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px;
	}

	.skdr-contact-form .skdr-contact-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.skdr-contact-card .skdr-form-h2 {
		font-size: var(--skdr-fs-h2-phone);
		line-height: var(--skdr-lh-h2-phone);
	}
}