/*
 * Attendee registration form (page-attendee-registration.php). Built on
 * exhibitor-form.css: the same masthead, intro band, step cards, fields,
 * choices and buttons, in the expo's colours. Only what's new is here: a
 * single column (there's nothing to total), answer grids for the show's
 * questions, and the closing opt-in and button.
 */

.att-layout,
.ecf-att .ecf-success,
.ecf-att .ecf-closed {
	max-width: 808px;
}

.att-layout {
	margin-top: 32px;
}

/* ---------------------------------------------------------------- */
/* Questions                                                         */
/* ---------------------------------------------------------------- */

.ecf-step__title + .att-questions,
.ecf-step__title + .att-question {
	margin-top: 18px;
}

.att-question + .att-question {
	margin-top: 22px;
	padding-top: 22px;
	/* A rule between questions; a border would run through a fieldset's legend. */
	box-shadow: inset 0 1px 0 var(--ecf-line);
}

/* Floated so the legend sits inside the fieldset's padding like any label,
   rather than on its top edge. */
.att-question legend {
	float: left;
	width: 100%;
	padding: 0 0 10px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-wrap: balance;
}

.att-question legend + * {
	clear: both;
}

.att-question .ecf-error {
	margin-top: 8px;
}

.att-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.att-options .ecf-choice {
	display: flex;
	min-height: 46px;
	line-height: 1.35;
	transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.att-options .ecf-choice:hover {
	border-color: var(--ecf-ink);
}

.att-options .ecf-choice:has(input:checked) {
	border-color: var(--ecf-accent-ink);
	box-shadow: inset 0 0 0 1px var(--ecf-accent-ink);
}

.att-options .ecf-choice:has(input:focus-visible) {
	outline: 3px solid var(--ecf-accent-ink);
	outline-offset: 2px;
}

.att-options--yesno {
	grid-template-columns: repeat(2, minmax(0, 150px));
}

/* An unanswered group: the fieldset is marked, not its radios (the
   shared invalid-input style would square them off). */
.att-question[aria-invalid="true"] .ecf-choice {
	border-color: var(--ecf-danger);
}

/* Which show (only when the expo has more than one open). */
.att-options--shows {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.att-show {
	align-items: flex-start;
	padding-top: 12px;
	padding-bottom: 12px;
}

.att-show input {
	margin-top: 3px;
}

.att-show__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.att-show__date {
	font-weight: 700;
	font-size: 1rem;
}

.att-show__venue {
	color: var(--ecf-muted);
	font-size: 0.875rem;
}

/* A field only bots fill in (see ecf_att_handle_submission()). */
.att-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* Opt-in and submit                                                 */
/* ---------------------------------------------------------------- */

.att-finish {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 4px 0 8px;
}

.att-optin {
	background: var(--ecf-surface);
	line-height: 1.4;
}

.att-finish .ecf-alert {
	margin: 0;
	align-self: stretch;
}

.att-submit {
	width: auto;
	min-width: 220px;
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 640px) {
	.att-options {
		grid-template-columns: minmax(0, 1fr);
	}
	.att-options--yesno {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.att-submit {
		align-self: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.att-options .ecf-choice {
		transition: none;
	}
}