/*
 * Syndicate theme: the Careers page's application form (template-parts/careers-form.php), loaded on that page
 * only (inc/careers.php). The theme's tokens from main.css; one column at every width, the first and last name
 * side by side from 720 pixels. Boxes are 16 pixels or more, so a phone does not zoom in on them. An error is
 * always said in words beside its box; the colour only joins them.
 */

.syn-careers {
	--syn-careers-bad: #a4281d;
	max-width: 720px;
	margin-top: 2em;
	padding-top: 1.4em;
	border-top: 1px solid var(--syn-line);
}

/* A part the script hides, whatever display a rule below gives it. */
.syn-careers [hidden] {
	display: none !important;
}

.syn-careers__title {
	margin: 0 0 0.6em;
	font: 700 30px/1.1 var(--syn-display);
	letter-spacing: 0.01em;
}

.syn-careers__intro,
.syn-careers__grouphint,
.syn-careers__note,
.syn-careers__closed,
.syn-careers__elsewhere {
	margin: 0 0 0.8em;
	color: var(--syn-ink-2);
	font-size: 15.5px;
	line-height: 1.55;
}

.syn-careers__intro a,
.syn-careers__alert a,
.syn-careers__elsewhere a {
	color: var(--syn-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.syn-careers__note,
.syn-careers__closed,
.syn-careers__done,
.syn-careers__alert {
	padding: 14px 16px;
	background: var(--syn-surface);
	border: 1px solid var(--syn-line-2);
	border-left-width: 4px;
	border-radius: var(--syn-radius);
}

.syn-careers__done {
	border-left-color: var(--syn-accent);
}

.syn-careers__done p {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

.syn-careers__alert {
	margin: 0 0 1.2em;
	color: var(--syn-ink);
	border-color: var(--syn-careers-bad);
}

.syn-careers__alert p,
.syn-careers__alert ul {
	margin: 0 0 0.5em;
}

.syn-careers__alert > :last-child {
	margin-bottom: 0;
}

.syn-careers__alert ul {
	padding-left: 1.3em;
	list-style: disc;
}

.syn-careers__alert li {
	margin-bottom: 0.25em;
}

/* ---------- Groups and boxes ---------- */

.syn-careers__form {
	margin: 0;
}

.syn-careers__group {
	min-width: 0;
	margin: 0 0 1.4em;
	padding: 0;
	border: 0;
}

.syn-careers__legend {
	margin: 0 0 0.6em;
	padding: 0;
	font: 700 22px/1.15 var(--syn-display);
	letter-spacing: 0.01em;
}

.syn-careers__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 14px;
}

.syn-careers__label {
	color: var(--syn-ink);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
}

.syn-careers__optional {
	color: var(--syn-muted);
	font-weight: 400;
}

.syn-careers__hint {
	color: var(--syn-muted);
	font-size: 14px;
	line-height: 1.45;
}

.syn-careers__error {
	color: var(--syn-careers-bad);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
}

.syn-careers__form input[type="text"],
.syn-careers__form input[type="email"],
.syn-careers__form input[type="tel"],
.syn-careers__form select,
.syn-careers__form textarea {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 9px 12px;
	background: var(--syn-surface);
	color: var(--syn-ink);
	font-size: 16px;
	line-height: 1.4;
	border: 1px solid var(--syn-line-2);
	border-radius: var(--syn-radius);
}

.syn-careers__form textarea {
	min-height: 11em;
	resize: vertical;
}

.syn-careers__form input[type="file"] {
	max-width: 100%;
	font-size: 16px;
}

/* A box with an error: a thicker border in the error's colour, beside the words. */
.syn-careers__form [aria-invalid="true"]:not([type="radio"]) {
	border: 2px solid var(--syn-careers-bad);
}

.syn-careers__question {
	min-width: 0;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.syn-careers__question > .syn-careers__label {
	margin: 0 0 4px;
	padding: 0;
}

.syn-careers__question > .syn-careers__hint,
.syn-careers__question > .syn-careers__error {
	display: block;
	margin-bottom: 4px;
}

.syn-careers__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.syn-careers__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 16px;
}

.syn-careers__choice input {
	width: 20px;
	height: 20px;
	margin: 0;
}

.syn-careers__count {
	margin: -8px 0 14px;
	color: var(--syn-muted);
	font-size: 14px;
}

.syn-careers__actions {
	margin: 1.2em 0 0;
}

.syn-careers__send {
	width: 100%;
	min-height: 48px;
	padding-inline: 22px;
	font-size: 16px;
}

.syn-careers__send:disabled {
	opacity: 0.6;
	cursor: default;
}

/* From 720 pixels the two names stand side by side, and the button takes its own width. */
@media (min-width: 720px) {
	.syn-careers__names {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 16px;
	}

	.syn-careers__send {
		width: auto;
	}
}

@media print {
	.syn-careers__form,
	.syn-careers__alert,
	.syn-careers__note {
		display: none;
	}
}