/*
 * Every public form on this site.
 *
 * The markup in Fields.php was already right — real labels, hints tied with
 * aria-describedby, errors in words before the control, a focusable summary at
 * the top. What it had no stylesheet at all, so browsers rendered their 1997
 * defaults: a 20-character text box, a fieldset with a groove border, and a
 * label sitting on the same line as its control.
 *
 * Nothing here changes what the form *means*. It is presentation over markup
 * that was already accessible, plus the two accessibility properties that only
 * exist at this layer: a touch target big enough to hit (WCAG 2.5.5) and a
 * font size large enough that iOS does not zoom the page when a field is
 * focused.
 *
 * Values come from the theme's tokens with fallbacks, so ac-core still looks
 * deliberate if it is ever dropped into a site that does not define them.
 */

.ac-field {
	border: 0;
	margin: 0 0 var( --wp--preset--spacing--30, 1.25rem );
	padding: 0;
}

/*
 * A label is inline by default, which is why the control used to sit beside
 * the words rather than beneath them. This one line is most of the fix.
 */
.ac-field__label {
	display: block;
	margin-bottom: 0.35rem;
}

/*
 * "(required)" in words, because an asterisk is a convention people have to
 * already know, and lighter than the label so the label still reads first.
 */
.ac-field__required {
	color: var( --wp--preset--color--muted, #58625d );
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	font-weight: 400;
}

.ac-field__hint {
	color: var( --wp--preset--color--muted, #58625d );
	margin: 0 0 0.5rem;
	max-width: var( --wp--custom--measure--prose, 68ch );
}

/*
 * The error, in the danger colour *and* in bold *and* in words. Three signals,
 * because colour alone is not one (WCAG 1.4.1) and the words are the only one
 * that survives a screen reader, a monochrome display or bright sunlight.
 */
.ac-field__error {
	color: var( --wp--preset--color--danger, #96231c );
	margin: 0 0 0.5rem;
}

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

.ac-field__control {
	background-color: var( --wp--preset--color--base, #fff );
	border: 1px solid var( --wp--custom--field--border, #7c8783 );
	border-radius: var( --wp--custom--field--radius, 0.375rem );

	/*
	 * Without this, `width: 100%` means 100% *plus* the padding and the border,
	 * so every field hangs a couple of centimetres past its fieldset. It is
	 * invisible on a wide screen and glaring on a phone, which is the sort of
	 * bug that ships.
	 */
	box-sizing: border-box;
	color: var( --wp--preset--color--contrast, #182320 );
	display: block;

	/*
	 * Never below 16px. Safari zooms the whole page when a smaller field takes
	 * focus, and the reader is then left on a page they have to pinch back out
	 * of — which reads as the site being broken.
	 */
	font-family: inherit;
	font-size: max( 1rem, var( --wp--preset--font-size--medium, 1.0625rem ) );
	line-height: 1.4;
	max-width: var( --wp--custom--field--max, 30rem );
	min-height: var( --wp--custom--field--target, 44px );
	padding: var( --wp--custom--field--padding, 0.7rem 0.85rem );
	width: 100%;
}

.ac-field__control:hover {
	border-color: var( --wp--preset--color--primary, #1c554a );
}

/*
 * A wrong field is outlined heavily as well as coloured, so the two states are
 * told apart by shape when the colours cannot be.
 */
.ac-field__control[ aria-invalid="true" ] {
	border-color: var( --wp--preset--color--danger, #96231c );
	border-width: 2px;
}

textarea.ac-field__control {
	min-height: 7rem;
	resize: vertical;
}

/*
 * A date, a time or a quantity has a known length. Stretching them to the full
 * measure suggests more is wanted than is.
 */
.ac-field__control[ type="date" ],
.ac-field__control[ type="time" ],
.ac-field__control[ type="number" ] {
	max-width: var( --wp--custom--field--short, 11rem );
}

/*
 * The dropdown arrow is drawn rather than left to the platform, because the
 * platform's is a different height from our border and the mismatch is what
 * makes a form look assembled from parts. Inline SVG in a data URI, since the
 * site loads nothing from anywhere else.
 */
select.ac-field__control {
	appearance: none;
	/* The `#` is URL-encoded as `%23`, which is why this one escaped the palette
	   change and had to be found by eye. */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2317423a' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	padding-right: 2.5rem;
}

/*
 * In forced-colours mode the drawn arrow is discarded along with every other
 * background image, which would leave a dropdown with no arrow at all. Hand
 * the control back to the platform there.
 */
@media ( forced-colors: active ) {

	select.ac-field__control {
		appearance: auto;
		background-image: none;
		padding-right: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
 * Groups: fieldset and legend.
 * ---------------------------------------------------------------------- */

/*
 * A fieldset's default border is the single most dated thing on a web page —
 * a 2px inset groove with the legend notched into it, unchanged since 1997.
 * It is also load-bearing markup: a legend is the only way a screen reader
 * announces what a group of controls is *for*. So the element stays and only
 * the border goes, replaced by a rule that reads as a section break.
 */
.ac-form fieldset,
.ac-field--group {
	border: 0;
	border-top: 2px solid var( --wp--preset--color--border, #d8d3ca );
	margin: 0 0 var( --wp--preset--spacing--40, 2rem );

	/*
	 * A fieldset's default `min-width` is `min-content`, which means it refuses
	 * to be narrower than its widest child and pushes the page sideways on a
	 * phone. It is the one element that does this, and it catches everybody.
	 */
	min-width: 0;
	padding: var( --wp--preset--spacing--30, 1.25rem ) 0 0;
}

.ac-form fieldset > legend,
.ac-field--group > legend {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: var( --wp--preset--font-size--large, 1.25rem );
	font-weight: 600;
	line-height: 1.25;
	padding: 0;
}

/* A group inside a section is a sub-heading, so it is quieter than one. */
.ac-form fieldset .ac-field--group {
	border-top-width: 1px;
	margin-bottom: var( --wp--preset--spacing--30, 1.25rem );
}

.ac-form fieldset .ac-field--group > legend {
	font-size: var( --wp--preset--font-size--medium, 1.0625rem );
}

/* -------------------------------------------------------------------------
 * Checkboxes and radios.
 *
 * The label wraps the control, so the whole line is clickable — which is the
 * difference between a comfortable form and one that has to be aimed at.
 * ---------------------------------------------------------------------- */

.ac-field--checkbox label,
.ac-field__option {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.65rem;
	min-height: var( --wp--custom--field--target, 44px );
	padding: 0.4rem 0;
}

.ac-field__option {
	display: flex;
}

.ac-field--checkbox input[ type="checkbox" ],
.ac-field--checkbox input[ type="radio" ],
.ac-field__option input[ type="checkbox" ],
.ac-field__option input[ type="radio" ] {
	accent-color: var( --wp--preset--color--primary, #1c554a );
	flex: none;
	height: 1.35rem;
	margin: 0.15rem 0 0;
	width: 1.35rem;
}

/* -------------------------------------------------------------------------
 * The summary of problems, at the top of the form.
 *
 * Focusable and focused on submit, so somebody who got one field wrong out of
 * eight is taken to the explanation rather than left at the bottom of the page
 * wondering whether anything happened. This is the GOV.UK pattern.
 * ---------------------------------------------------------------------- */

.ac-form__errors {
	border: 2px solid var( --wp--preset--color--danger, #96231c );
	border-left-width: 8px;
	border-radius: var( --wp--custom--field--radius, 0.375rem );
	margin-bottom: var( --wp--preset--spacing--40, 2rem );
	padding: var( --wp--preset--spacing--30, 1.25rem );
}

.ac-form__errors > :first-child {
	color: var( --wp--preset--color--danger, #96231c );
	margin-top: 0;
}

.ac-form__errors ul {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

.ac-form__errors li + li {
	margin-top: 0.35rem;
}

.ac-form__errors:focus-visible {
	outline: var( --wp--custom--focus--width, 3px ) solid var( --wp--custom--focus--color, #17423a );
	outline-offset: var( --wp--custom--focus--offset, 2px );
}

/* -------------------------------------------------------------------------
 * The form itself, and what follows the button.
 * ---------------------------------------------------------------------- */

.ac-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30, 1.25rem );
	margin-top: var( --wp--preset--spacing--40, 2rem );
}

.ac-form__note {
	color: var( --wp--preset--color--muted, #58625d );
	max-width: var( --wp--custom--measure--prose, 68ch );
}

/*
 * Submit buttons are given the block editor's button class so there is one
 * button in this site rather than two that nearly match.
 */
.ac-form button[ type="submit" ],
.ac-form input[ type="submit" ] {
	cursor: pointer;
	min-height: var( --wp--custom--field--target, 44px );
}

/*
 * ## While it is sending
 *
 * Reserving a place takes several seconds, because the confirmation email is sent inside
 * the request. Until this existed the page did nothing at all for those seconds, so the
 * button read as unpressed and got pressed again — and a second press is a second
 * reservation, in a hall with a fixed number of chairs.
 *
 * The button's own words change first; this is the supporting signal, not the message.
 */
.ac-form.is-sending button[ type="submit" ],
.ac-form.is-sending input[ type="submit" ] {
	cursor: progress;
	opacity: 0.75;
}

.ac-form.is-sending button[ type="submit" ]::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.55em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ac-form-spin 0.7s linear infinite;
}

@keyframes ac-form-spin {

	to {
		transform: rotate( 360deg );
	}
}

/*
 * A spinner is decoration on top of a button that already says "Saving your place…", so
 * for anybody who has asked for less movement it simply stops — the wording and the
 * disabled state carry the whole message without it.
 */
@media ( prefers-reduced-motion: reduce ) {

	.ac-form.is-sending button[ type="submit" ]::after {
		animation: none;
	}
}