/*
 * Event Form — public form styles.
 *
 * Theme first, polish second.
 *
 * Everything visual lives in the `event-form` cascade layer. Any unlayered
 * rule — which is every rule a theme or Global Styles ships — beats a layered
 * one whatever its specificity, so the theme's own input, button and heading
 * styling always wins and this file only fills in what the theme leaves
 * unstyled. Colours are derived from the inherited text colour with
 * `color-mix()`, so the same rules work on light and dark themes. The accent
 * follows the theme's primary colour (`--color-primary`, or the block theme
 * `primary` preset) unless a form sets its own.
 *
 * Only structural rules (grid, visibility, honeypot) sit outside the layer,
 * because a theme must not be able to break the form's layout by accident.
 *
 * Tunable per site (e.g. from theme CSS): --ef-accent, --ef-on-accent,
 * --ef-radius, --ef-gap, --ef-max-width, --ef-surface, --ef-input-bg,
 * --ef-error, --ef-sticky-offset (height of a sticky theme header, so the
 * mobile progress bar sits below it).
 */

@layer event-form;

/* Structural rules: never themed away. */

.event-form,
.event-form *,
.event-form *::before,
.event-form *::after {
	box-sizing: border-box;
}

.event-form [hidden] {
	display: none !important;
}

.event-form__row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.event-form__column {
	grid-column: span var(--ef-span, 12);
	min-width: 0;
}

.event-form-list__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--ef-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-form-list__items > li {
	display: flex;
	margin: 0;
	padding: 0;
}

.event-form-list__items > li::marker {
	content: none;
}

/* Narrow container (a form in a sidebar collapses on a wide screen too). */
@container event-form (max-width: 560px) {
	.event-form__column {
		grid-column: 1 / -1;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.event-form__column {
			grid-column: 1 / -1;
		}
	}
}

.event-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.event-form__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@layer event-form {
	.event-form,
	.event-form-list,
	.event-form__notice {
		--ef-c-accent: var(--ef-accent, var(--color-primary, var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, #2563eb))));
		--ef-c-on-accent: var(--ef-on-accent, #fff);
		--ef-c-error: var(--ef-error, #c62828);
		--ef-c-success: #1a7f37;
		--ef-c-warning: #b45309;
		--ef-c-surface: var(--ef-surface, var(--wp--preset--color--base, Canvas));
		--ef-c-line: color-mix(in srgb, currentColor 24%, transparent);
		--ef-c-line-strong: color-mix(in srgb, currentColor 48%, transparent);
		--ef-c-muted: color-mix(in srgb, currentColor 68%, transparent);
		--ef-c-tint: color-mix(in srgb, currentColor 5%, transparent);
		--ef-c-accent-tint: color-mix(in srgb, var(--ef-c-accent) 9%, transparent);
		--ef-c-accent-ring: color-mix(in srgb, var(--ef-c-accent) 30%, transparent);
		--ef-r: var(--ef-radius, 8px);
		--ef-space: var(--ef-gap, 16px);
	}

	.event-form {
		container: event-form / inline-size;
		width: 100%;
		max-width: var(--ef-max-width, 720px);
		margin-inline: auto;
		color: inherit;
		font: inherit;
		line-height: 1.5;
	}

	/* Title and copy */

	.event-form__title {
		margin: 0 0 1.25em;
		font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.2;
	}

	.event-form__heading {
		margin: 0 0 0.35em;
		line-height: 1.25;
	}

	.event-form__paragraph {
		margin: 0 0 1em;
		color: var(--ef-c-muted);
	}

	.event-form__paragraph > *:last-child {
		margin-bottom: 0;
	}

	.event-form__paragraph a {
		color: var(--ef-c-accent);
		text-underline-offset: 0.18em;
	}

	.event-form__paragraph ul,
	.event-form__paragraph ol {
		margin: 0 0 0.75em;
		padding-left: 1.4em;
	}

	.event-form__paragraph ul {
		list-style: disc outside;
	}

	.event-form__paragraph ol {
		list-style: decimal outside;
	}

	.event-form__page-description {
		margin: -0.5em 0 1.5em;
		color: var(--ef-c-muted);
	}

	.event-form__divider {
		margin: 0.5em 0 1.5em;
		border: 0;
		border-top: 1px solid var(--ef-c-line);
	}

	.event-form__spacer {
		height: 1.5rem;
	}

	/* Capacity meter and progress */

	.event-form__capacity {
		margin: 0 0 1.5em;
		padding: 0.8em 1em;
		border: 1px solid var(--ef-c-line);
		border-radius: var(--ef-r);
		background: var(--ef-c-tint);
	}

	.event-form__capacity--low {
		border-color: color-mix(in srgb, var(--ef-c-warning) 55%, transparent);
		background: color-mix(in srgb, var(--ef-c-warning) 10%, transparent);
	}

	.event-form__capacity-copy {
		display: flex;
		justify-content: space-between;
		gap: 0.75em;
		margin-bottom: 0.5em;
		font-size: 0.9em;
	}

	.event-form__capacity-copy strong {
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.event-form__capacity-track,
	.event-form__progress-track {
		height: 6px;
		overflow: hidden;
		border-radius: 999px;
		background: var(--ef-c-line);
	}

	.event-form__capacity-track span,
	.event-form__progress-track span {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: var(--ef-c-accent);
	}

	.event-form__capacity--low .event-form__capacity-track span {
		background: var(--ef-c-warning);
	}

	.event-form__progress-track span {
		transition: width 220ms ease;
	}

	.event-form__progress {
		margin-bottom: 1.75em;
	}

	.event-form__progress-copy {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1em;
		margin-bottom: 0.6em;
	}

	.event-form__progress-copy span {
		color: var(--ef-c-muted);
		font-size: 0.85em;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.event-form__progress-copy strong {
		font-weight: 600;
	}

	/* Layout rhythm */

	.event-form__row {
		gap: var(--ef-space);
		margin-bottom: var(--ef-space);
	}

	.event-form__field {
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 0;
	}

	.event-form__page:not([hidden]) {
		animation: event-form-in 220ms ease both;
	}

	/* Labels, help, errors */

	.event-form__label {
		display: block;
		margin: 0 0 0.4em;
		padding: 0;
		font-size: 0.95em;
		font-weight: 600;
	}

	.event-form__required {
		margin-left: 0.15em;
		color: var(--ef-c-error);
	}

	.event-form__help {
		margin: 0.4em 0 0;
		color: var(--ef-c-muted);
		font-size: 0.875em;
		line-height: 1.45;
	}

	.event-form__error {
		display: flex;
		align-items: baseline;
		gap: 0.4em;
		margin: 0.45em 0 0;
		color: var(--ef-c-error);
		font-size: 0.875em;
		font-weight: 500;
	}

	.event-form__error span {
		flex-shrink: 0;
		font-size: 0.6em;
		transform: translateY(-0.15em);
	}

	/* Text controls */

	.event-form__input {
		display: block;
		width: 100%;
		min-height: 3rem;
		margin: 0;
		padding: 0.65em 0.9em;
		border: 1px solid var(--ef-c-line-strong);
		border-radius: var(--ef-r);
		background-color: var(--ef-input-bg, transparent);
		color: inherit;
		font: inherit;
		line-height: 1.4;
		transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
	}

	.event-form__input::placeholder {
		color: color-mix(in srgb, currentColor 45%, transparent);
		opacity: 1;
	}

	.event-form__input:hover:not(:disabled) {
		border-color: color-mix(in srgb, currentColor 70%, transparent);
	}

	.event-form__input:focus {
		border-color: var(--ef-c-accent);
		outline: 2px solid transparent;
		box-shadow: 0 0 0 3px var(--ef-c-accent-ring);
	}

	.event-form__input:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.event-form__input:user-invalid,
	.event-form__field--error .event-form__input {
		border-color: var(--ef-c-error);
	}

	.event-form__field--error .event-form__input:focus {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--ef-c-error) 28%, transparent);
	}

	.event-form__textarea {
		min-height: 7rem;
		resize: vertical;
	}

	select.event-form__input {
		padding-right: 2.5em;
		appearance: none;
		background-image:
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%);
		background-position:
			calc(100% - 1.15em) 50%,
			calc(100% - 0.8em) 50%;
		background-size: 0.35em 0.35em;
		background-repeat: no-repeat;
		cursor: pointer;
	}

	/* Choice cards */

	.event-form__options {
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 0;
	}

	.event-form__option {
		display: block;
		margin-top: 0.5em;
		padding: 0.75em 0.9em;
		border: 1px solid var(--ef-c-line);
		border-radius: var(--ef-r);
		font-weight: 400;
		cursor: pointer;
		transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
	}

	.event-form__option:first-of-type {
		margin-top: 0;
	}

	.event-form__option:hover {
		border-color: var(--ef-c-line-strong);
		background: var(--ef-c-tint);
	}

	.event-form__option:has(input:checked) {
		border-color: var(--ef-c-accent);
		background: var(--ef-c-accent-tint);
	}

	.event-form__option:has(input:focus-visible) {
		outline: 2px solid transparent;
		box-shadow: 0 0 0 3px var(--ef-c-accent-ring);
	}

	.event-form__option-row {
		display: flex;
		align-items: center;
		gap: 0.7em;
	}

	.event-form__option-row input {
		flex-shrink: 0;
		width: 1.15em;
		height: 1.15em;
		min-height: 0;
		margin: 0;
		accent-color: var(--ef-c-accent);
		cursor: pointer;
	}

	.event-form__option-row span {
		flex: 1;
	}

	.event-form__consent .event-form__option {
		margin-top: 0;
	}

	.event-form__field--error .event-form__option {
		border-color: var(--ef-c-error);
	}

	/* Buttons */

	.event-form__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75em;
		margin-top: 0.5em;
	}

	.event-form__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		min-height: 3rem;
		margin: 0;
		padding: 0.65em 1.6em;
		border: 1px solid transparent;
		border-radius: var(--ef-r);
		font: inherit;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		transition: filter 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
	}

	.event-form__button:focus-visible {
		outline: 2px solid transparent;
		box-shadow: 0 0 0 3px var(--ef-c-accent-ring);
	}

	.event-form__button:active:not(:disabled) {
		transform: translateY(1px);
	}

	.event-form__button:disabled {
		opacity: 0.65;
		cursor: progress;
	}

	.event-form__button--primary {
		border-color: var(--ef-c-accent);
		background: var(--ef-c-accent);
		color: var(--ef-c-on-accent);
	}

	.event-form__button--primary:hover:not(:disabled) {
		filter: brightness(0.92);
	}

	.event-form__button--secondary {
		border-color: var(--ef-c-line-strong);
		background: transparent;
		color: inherit;
	}

	.event-form__button--secondary:hover:not(:disabled) {
		background: var(--ef-c-tint);
	}

	.event-form__form--submitting .event-form__submit::after {
		content: "";
		width: 1em;
		height: 1em;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: event-form-spin 700ms linear infinite;
	}

	/* Notices */

	.event-form__notice {
		max-width: var(--ef-max-width, 720px);
		margin: 1em auto;
		padding: 0.9em 1.1em;
		border: 1px solid var(--ef-c-line);
		border-inline-start: 4px solid var(--ef-c-line-strong);
		border-radius: var(--ef-r);
		background: var(--ef-c-tint);
	}

	.event-form__notice--info {
		border-inline-start-color: var(--ef-c-accent);
		background: var(--ef-c-accent-tint);
	}

	.event-form__notice--success {
		border-inline-start-color: var(--ef-c-success);
		background: color-mix(in srgb, var(--ef-c-success) 10%, transparent);
	}

	.event-form__notice--success::before {
		content: "✓";
		content: "✓" / "";
		margin-right: 0.5em;
		color: var(--ef-c-success);
		font-weight: 700;
	}

	.event-form__notice--error {
		margin: 0 0 1.25em;
		border-inline-start-color: var(--ef-c-error);
		background: color-mix(in srgb, var(--ef-c-error) 8%, transparent);
	}

	.event-form__notice--error ul {
		margin: 0.5em 0 0 1.25em;
		padding: 0;
	}

	.event-form__notice--error a {
		color: inherit;
		text-underline-offset: 0.18em;
	}

	.event-form__waitlist {
		display: flex;
		align-items: center;
		gap: 0.5em;
		margin-top: 0.6em;
		font-weight: 600;
		cursor: pointer;
	}

	.event-form__waitlist input {
		accent-color: var(--ef-c-accent);
	}

	/* Form list: pick one of several related forms */

	.event-form-list {
		width: 100%;
		max-width: var(--ef-max-width, 720px);
		margin-inline: auto;
		color: inherit;
		font: inherit;
		line-height: 1.5;
	}

	.event-form-list__card {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.35em;
		padding: 1.1em 1.2em;
		border: 1px solid var(--ef-c-line);
		border-radius: var(--ef-r);
		color: inherit;
		text-decoration: none;
		transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
	}

	a.event-form-list__card:hover,
	a.event-form-list__card:focus-visible {
		border-color: var(--ef-c-accent);
		background: var(--ef-c-accent-tint);
		transform: translateY(-1px);
	}

	a.event-form-list__card:focus-visible {
		outline: 2px solid transparent;
		box-shadow: 0 0 0 3px var(--ef-c-accent-ring);
	}

	.event-form-list__card.is-unavailable {
		opacity: 0.6;
		background: var(--ef-c-tint);
	}

	.event-form-list__title {
		font-size: 1.15em;
		font-weight: 700;
		line-height: 1.25;
	}

	.event-form-list__meta {
		color: var(--ef-c-muted);
		font-size: 0.9em;
	}

	.event-form-list__meta--open {
		color: var(--ef-c-success);
		font-weight: 600;
	}

	.event-form-list__meta--waitlist {
		color: var(--ef-c-warning);
		font-weight: 600;
	}

	.event-form-list__cta {
		margin-top: auto;
		padding-top: 0.6em;
		color: var(--ef-c-accent);
		font-weight: 600;
	}

	.event-form-list__cta::after {
		content: " \2192";
		display: inline-block;
		transition: transform 140ms ease;
	}

	a.event-form-list__card:hover .event-form-list__cta::after {
		transform: translateX(3px);
	}

	.event-form-list__back {
		display: inline-block;
		margin: 0 auto 1.25em;
		color: var(--ef-c-muted);
		font-size: 0.95em;
		text-decoration: none;
	}

	.event-form-list__back::before {
		content: "\2190  ";
	}

	.event-form-list__back:hover {
		color: var(--ef-c-accent);
	}

	.event-form-list--chosen {
		max-width: none;
	}

	.event-form-list--chosen > .event-form-list__back {
		display: block;
		width: 100%;
		max-width: var(--ef-max-width, 720px);
		margin-inline: auto;
	}

	/* Narrow containers: sticky progress and full-width buttons. */

	@container event-form (max-width: 560px) {
		.event-form__progress-copy {
			align-items: flex-start;
			flex-direction: column-reverse;
			gap: 0.2em;
		}

		.event-form__progress {
			position: sticky;
			top: var(--ef-sticky-offset, var(--wp-admin--admin-bar--height, 0px));
			z-index: 5;
			padding: 1em 0 0.6em;
			background: var(--ef-c-surface);
		}

		.event-form__actions .event-form__button {
			flex: 1 1 100%;
		}
	}

	@media (forced-colors: active) {
		.event-form-list__card,
		.event-form__input,
		.event-form__option,
		.event-form__button {
			border-color: CanvasText;
		}

		.event-form__button--primary {
			border-color: ButtonText;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.event-form *,
		.event-form *::before,
		.event-form *::after {
			animation-duration: 0.01ms !important;
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
		}
	}

	@keyframes event-form-in {
		from {
			opacity: 0;
			transform: translateY(4px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes event-form-spin {
		to {
			transform: rotate(360deg);
		}
	}
}