/* Breeze Event Submission — front-end form.

   Everything is nested inside `.breeze-event-form`, which is not just tidiness:
   nesting compiles each rule to `.breeze-event-form .breeze-event-form__input`
   (0,2,0), so a theme's `.entry-content input` (0,1,1) or a builder's
   `.ct-section input` no longer wins on specificity. `&.breeze-event-form`
   pushes the container itself to 0,2,0 for the same reason.

   Requires native CSS nesting: Chrome 112+, Safari 16.5+, Firefox 117+. Every
   nested selector is written with an explicit leading `&` so it parses on the
   earliest of those.

   Element-level resets are included for the things page builders reliably
   restyle — fieldset, legend, ul, button, input — because inheriting those is
   what makes an embedded form look broken.

   Every colour, radius and spacing value is a custom property, so restyling
   means redeclaring them rather than fighting the cascade:

     .breeze-event-form { --bes-accent: #0b5; --bes-radius: 4px; }
*/

.breeze-event-form {
	--bes-accent: #1f6feb;
	--bes-accent-contrast: #ffffff;
	--bes-accent-soft: rgba(31, 111, 235, 0.12);
	--bes-text: #16181d;
	--bes-muted: #667085;
	--bes-surface: #ffffff;
	--bes-surface-alt: #f7f8fa;
	--bes-border: #dfe3e8;
	--bes-border-strong: #b9c0c9;
	--bes-error: #c0392b;
	--bes-error-soft: rgba(192, 57, 43, 0.08);
	--bes-success: #1e7c53;
	--bes-success-soft: rgba(30, 124, 83, 0.09);
	--bes-radius: 10px;
	--bes-radius-sm: 6px;
	--bes-gap: 20px;

	/* Doubling the class lifts the container to the same specificity as its
	   nested rules, so a builder cannot restyle the wrapper out from under it. */
	&.breeze-event-form {
		max-width: 780px;
		margin-inline: auto;
		padding: 0;
		color: var(--bes-text);
		font-size: 16px;
		line-height: 1.5;
		text-align: start;
	}

	& *,
	& *::before,
	& *::after {
		box-sizing: border-box;
	}

	/* ---------- Notices ---------- */

	& .breeze-event-form__notice {
		margin: 0 0 24px;
		padding: 14px 18px;
		border: 1px solid transparent;
		border-radius: var(--bes-radius);
		font-size: 15px;

		& p {
			margin: 0;
			padding: 0;
			color: inherit;
			font-size: inherit;
		}

		&:focus {
			outline: 2px solid var(--bes-accent);
			outline-offset: 2px;
		}

		&.breeze-event-form__notice--success {
			border-color: var(--bes-success);
			background: var(--bes-success-soft);
			color: var(--bes-success);
		}

		&.breeze-event-form__notice--error {
			border-color: var(--bes-error);
			background: var(--bes-error-soft);
			color: var(--bes-error);
		}
	}

	/* ---------- Layout ---------- */

	& .breeze-event-form__title {
		margin: 0 0 24px;
		padding: 0;
		color: inherit;
		font-size: 1.75rem;
		line-height: 1.2;
	}

	& .breeze-event-form__form {
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	& .breeze-event-form__section {
		display: block;
		min-inline-size: 0;
		margin: 0 0 12px;
		padding: 24px;
		border: 1px solid var(--bes-border);
		border-radius: var(--bes-radius);
		background: var(--bes-surface);

		&.breeze-event-form__section--submit {
			background: var(--bes-surface-alt);
		}
	}

	& .breeze-event-form__legend {
		float: none;
		width: auto;
		padding: 0 8px;
		margin: 0 0 0 -8px;
		color: inherit;
		font-size: 1.05rem;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.01em;

		&.breeze-event-form__legend--sr {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
			border: 0;
		}
	}

	& .breeze-event-form__field {
		margin-top: var(--bes-gap);
	}

	& .breeze-event-form__section > .breeze-event-form__field:first-of-type,
	& .breeze-event-form__row > .breeze-event-form__field {
		margin-top: 0;
	}

	& .breeze-event-form__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bes-gap);
		margin-top: var(--bes-gap);

		&.breeze-event-form__row--three {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		&.is-locked {
			opacity: 0.55;
			pointer-events: none;
		}
	}

	& .breeze-event-form__venue-fields.is-locked {
		opacity: 0.55;
		pointer-events: none;
	}

	/* ---------- Controls ---------- */

	& .breeze-event-form__label {
		display: block;
		margin: 0 0 6px;
		padding: 0;
		color: inherit;
		font-size: 0.9rem;
		font-weight: 600;
		line-height: 1.4;
		text-transform: none;
		letter-spacing: normal;
	}

	& .breeze-event-form__req {
		margin-inline-start: 2px;
		color: var(--bes-error);
	}

	& .breeze-event-form__input {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 11px 13px;
		border: 1px solid var(--bes-border-strong);
		border-radius: var(--bes-radius-sm);
		background: var(--bes-surface);
		box-shadow: none;
		color: var(--bes-text);
		font: inherit;
		line-height: 1.4;
		text-transform: none;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&::placeholder {
			color: var(--bes-muted);
			opacity: 1;
		}

		&:focus {
			border-color: var(--bes-accent);
			box-shadow: 0 0 0 3px var(--bes-accent-soft);
			outline: none;
		}

		&[aria-invalid="true"] {
			border-color: var(--bes-error);

			&:focus {
				box-shadow: 0 0 0 3px var(--bes-error-soft);
			}
		}

		&[readonly] {
			background: var(--bes-surface-alt);
			cursor: default;
		}

		&.breeze-event-form__textarea {
			min-height: 120px;
			resize: vertical;
		}

		&.breeze-event-form__select {
			appearance: none;
			padding-inline-end: 38px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 14px center;
			background-size: 11px;
		}
	}

	/* Native pickers hide their indicator on some themes' input resets. */
	& input[type="date"],
	& input[type="datetime-local"] {
		&::-webkit-calendar-picker-indicator {
			cursor: pointer;
			opacity: 0.6;

			&:hover {
				opacity: 1;
			}
		}
	}

	& .breeze-event-form__static {
		margin: 0;
		padding: 11px 13px;
		border: 1px dashed var(--bes-border-strong);
		border-radius: var(--bes-radius-sm);
		background: var(--bes-surface-alt);
		color: var(--bes-muted);
	}

	& .breeze-event-form__hint {
		margin: 6px 0 0;
		padding: 0;
		color: var(--bes-muted);
		font-size: 0.82rem;
		line-height: 1.45;

		& a {
			color: inherit;
		}
	}

	& .breeze-event-form__error {
		margin: 6px 0 0;
		padding: 0;
		color: var(--bes-error);
		font-size: 0.85rem;
		font-weight: 500;
	}

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

	/* ---------- Checkboxes ---------- */

	& .breeze-event-form__check {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
		padding: 10px 0;
		color: inherit;
		font-size: 0.95rem;
		font-weight: 400;
		cursor: pointer;

		& input[type="checkbox"] {
			flex: 0 0 auto;
			width: 18px;
			height: 18px;
			min-width: 0;
			margin: 2px 0 0;
			padding: 0;
			appearance: auto;
			accent-color: var(--bes-accent);
			cursor: pointer;
		}

		&.breeze-event-form__check--confirm {
			padding: 14px 16px;
			border: 1px solid var(--bes-border);
			border-radius: var(--bes-radius-sm);
			background: var(--bes-surface-alt);
			font-weight: 500;
		}
	}

	& .breeze-event-form__reveal {
		animation: breeze-event-form-reveal 0.18s ease;
	}

	/* ---------- Rich text editor ---------- */

	& .breeze-event-form__editor {
		border: 1px solid var(--bes-border-strong);
		border-radius: var(--bes-radius-sm);
		background: var(--bes-surface);
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&.is-focused {
			border-color: var(--bes-accent);
			box-shadow: 0 0 0 3px var(--bes-accent-soft);
		}

		&.is-invalid {
			border-color: var(--bes-error);
		}
	}

	& .breeze-event-form__toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		margin: 0;
		padding: 6px;
		border-bottom: 1px solid var(--bes-border);
		background: var(--bes-surface-alt);
		border-radius: var(--bes-radius-sm) var(--bes-radius-sm) 0 0;
	}

	& .breeze-event-form__tool {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 32px;
		height: 32px;
		margin: 0;
		padding: 0 8px;
		border: 1px solid transparent;
		border-radius: 5px;
		background: transparent;
		box-shadow: none;
		color: var(--bes-text);
		font: inherit;
		font-size: 0.85rem;
		line-height: 1;
		text-transform: none;
		cursor: pointer;
		transition: background 0.12s ease;

		&:hover {
			background: rgba(0, 0, 0, 0.06);
		}

		&:focus-visible {
			outline: 2px solid var(--bes-accent);
			outline-offset: 1px;
		}

		&.is-active {
			background: var(--bes-accent-soft);
			border-color: var(--bes-accent);
		}
	}

	& .breeze-event-form__richtext {
		min-height: 160px;
		padding: 13px;
		outline: none;
		overflow-wrap: break-word;

		/* JS keeps .is-empty in sync — :empty alone fails once the browser
		   drops a stray <br> into the contenteditable. */
		&.is-empty::before {
			content: attr(data-placeholder);
			color: var(--bes-muted);
			pointer-events: none;
		}

		& > *:first-child {
			margin-top: 0;
		}

		& > *:last-child {
			margin-bottom: 0;
		}
	}

	/* ---------- Autocomplete ---------- */

	& .breeze-event-form__combo {
		position: relative;
	}

	/* Keep the typed name clear of the spinner while a lookup is in flight. */
	& .is-loading .breeze-event-form__input {
		padding-inline-end: 38px;
	}

	& .breeze-event-form__spinner {
		position: absolute;
		top: 50%;
		inset-inline-end: 12px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		border: 2px solid var(--bes-accent-soft);
		border-top-color: var(--bes-accent);
		border-radius: 50%;
		animation: breeze-event-form-spin 0.6s linear infinite;
		pointer-events: none;
	}

	& .breeze-event-form__suggestions {
		position: absolute;
		z-index: 30;
		inset-inline: 0;
		top: calc(100% + 4px);
		max-height: 260px;
		margin: 0;
		padding: 4px;
		overflow-y: auto;
		list-style: none;
		border: 1px solid var(--bes-border-strong);
		border-radius: var(--bes-radius-sm);
		background: var(--bes-surface);
		box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
	}

	& .breeze-event-form__suggestion {
		margin: 0;
		padding: 9px 11px;
		border-radius: 5px;
		color: inherit;
		font-size: 0.93rem;
		line-height: 1.4;
		list-style: none;
		cursor: pointer;

		&::marker {
			content: none;
		}

		&:hover,
		&.is-active {
			background: var(--bes-accent-soft);
		}

		&.breeze-event-form__suggestion--empty,
		&.breeze-event-form__suggestion--loading {
			color: var(--bes-muted);
			font-size: 0.86rem;
			cursor: default;

			&:hover {
				background: transparent;
			}
		}

		&.breeze-event-form__suggestion--loading {
			display: flex;
			align-items: center;
			gap: 9px;

			&::before {
				content: "";
				flex: 0 0 auto;
				width: 13px;
				height: 13px;
				border: 2px solid var(--bes-accent-soft);
				border-top-color: var(--bes-accent);
				border-radius: 50%;
				animation: breeze-event-form-spin 0.6s linear infinite;
			}
		}
	}

	& .breeze-event-form__suggestion-meta {
		display: block;
		margin-top: 2px;
		color: var(--bes-muted);
		font-size: 0.8rem;
	}

	& .breeze-event-form__linked {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin: 8px 0 0;
		padding: 9px 12px;
		border-radius: var(--bes-radius-sm);
		background: var(--bes-accent-soft);
		color: inherit;
		font-size: 0.85rem;
	}

	& .breeze-event-form__linkbtn {
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		color: var(--bes-accent);
		font: inherit;
		font-weight: 600;
		text-transform: none;
		text-decoration: underline;
		cursor: pointer;
	}

	/* ---------- File upload ---------- */

	& .breeze-event-form__upload {
		position: relative;

		&.is-dragging .breeze-event-form__dropzone {
			border-color: var(--bes-accent);
			background: var(--bes-accent-soft);
		}
	}

	& .breeze-event-form__file {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;

		&:focus-visible + .breeze-event-form__dropzone {
			outline: 2px solid var(--bes-accent);
			outline-offset: 2px;
		}
	}

	& .breeze-event-form__dropzone {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 26px 18px;
		border: 1.5px dashed var(--bes-border-strong);
		border-radius: var(--bes-radius-sm);
		background: var(--bes-surface-alt);
		color: inherit;
		font-weight: 400;
		text-align: center;
		cursor: pointer;
		transition: border-color 0.15s ease, background 0.15s ease;

		&:hover {
			border-color: var(--bes-accent);
			background: var(--bes-accent-soft);
		}
	}

	& .breeze-event-form__dropzone-icon {
		color: var(--bes-accent);
		font-size: 1.2rem;
		line-height: 1;
	}

	& .breeze-event-form__dropzone-text {
		font-size: 0.93rem;
		font-weight: 600;
	}

	& .breeze-event-form__preview {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-top: 12px;
		padding: 10px;
		border: 1px solid var(--bes-border);
		border-radius: var(--bes-radius-sm);

		& img {
			width: 84px;
			height: 62px;
			max-width: none;
			margin: 0;
			object-fit: cover;
			border-radius: 5px;
		}
	}

	& .breeze-event-form__preview-name {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		font-size: 0.88rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* ---------- Submit ---------- */

	& .breeze-event-form__submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 200px;
		height: auto;
		margin: var(--bes-gap) 0 0;
		padding: 14px 30px;
		border: 0;
		border-radius: var(--bes-radius-sm);
		background: var(--bes-accent);
		box-shadow: none;
		color: var(--bes-accent-contrast);
		font: inherit;
		font-weight: 600;
		line-height: 1.2;
		text-transform: none;
		text-decoration: none;
		cursor: pointer;
		transition: filter 0.15s ease, transform 0.05s ease;

		&:hover {
			background: var(--bes-accent);
			color: var(--bes-accent-contrast);
			filter: brightness(0.93);
		}

		&:active {
			transform: translateY(1px);
		}

		&:focus-visible {
			outline: 2px solid var(--bes-accent);
			outline-offset: 3px;
		}

		&[disabled] {
			opacity: 0.6;
			cursor: progress;
		}
	}

	/* ---------- Honeypot ---------- */

	& .breeze-event-form__hp {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* ---------- Responsive ---------- */

	@media (max-width: 640px) {
		& .breeze-event-form__row,
		& .breeze-event-form__row--three {
			grid-template-columns: minmax(0, 1fr);
		}

		& .breeze-event-form__section {
			padding: 18px;
		}

		& .breeze-event-form__submit {
			width: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		& .breeze-event-form__reveal {
			animation: none;
		}

		& .breeze-event-form__spinner,
		& .breeze-event-form__suggestion--loading::before {
			animation-duration: 1.5s;
		}
	}
}

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

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