/**
 * Participant fields on the WooCommerce checkout (PAD-7401).
 *
 * Loaded on the checkout page only, and shared by both checkout paths: the classic checkout and the
 * React block render the same class names, so a name or an address looks the same either way.
 *
 * Deliberately small. A checkout belongs to the shop's theme, so this styles only what the markup
 * cannot express on its own -- which fields share a line, how wide each one wants to be, and which
 * fields belong to the same person -- and leaves colour and input appearance to the theme. The one
 * border it does draw is half-transparent grey, which reads as a hairline on a light theme and on a
 * dark one alike.
 */

/* Fields the provider put on a shared row. Wrapping by default rather than squeezing: a house number
   beside a street is comfortable on a desktop and unreadable on a phone, and a flex-basis with wrap
   lets the browser decide which it is without a media query. The name row overrides this below --
   there a wrap would split one answer in two. */
.padc-participant-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
}

.padc-participant-field-row > * {
	flex: 1 1 10em;
	min-width: 0;
}

/* A name is one answer and stays on one line, however narrow the card gets. Sizing the two name
   fields from zero rather than from a comfortable width is what guarantees it: they divide whatever
   room there is instead of asking for room that may not exist, and the row is told not to wrap, so
   there is no width at which "Voornaam" drops below "Achternaam". */
.padc-participant-field-row--name {
	flex-wrap: nowrap;
}

.padc-participant-field-row--name > .padc-participant-field--first_name,
.padc-participant-field-row--name > .padc-participant-field--last_name {
	flex: 1 1 0;
}

/* Fields that are short by nature take a narrower share of the line than the one they sit beside,
   and never grow: a postcode does not get more readable at double the width. The house number and
   its extension are NOT among them -- they have a line to themselves and fill it. */
.padc-participant-field-row > .padc-participant-field--prefix {
	flex: 0 1 5em;
}

.padc-participant-field-row > .padc-participant-field--address_postal_code {
	flex: 0 1 8em;
}

/* WooCommerce's own form-row helpers assume a two-column grid and would fight the flex row above. */
.padc-participant-field-row > .form-row {
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: 0.5em;
}

/* The card's header. A theme's h5 is typically smaller than its body text, which reads as a label
   belonging to the field under it rather than as the title of everything in the card. */
.padc-participant-slot-title {
	margin: 0 0 0.75em;
	font-size: 1.25em;
	line-height: 1.2;
	font-weight: 700;
}

/* One card per participant. The fields of one person are a group the shopper has to be able to see
   as a group -- which is what makes a wrong name land in the right place -- and neither the course
   heading nor the "Deelnemer 2" heading says where that group ENDS. */
.padc-participant-slot {
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 4px;
	padding: 1em;
}

.padc-participant-slot + .padc-participant-slot {
	margin-top: 1.5em;
}

/* Participants side by side, when the shop asked for it (Config\WooCommerce\Participants:
   SIDE_BY_SIDE). The row scrolls rather than squeezing: a card narrower than a name is worse than a
   row the shopper has to drag, and a team of eight would otherwise be eight unreadable columns. */
.padc-participant-course--side-by-side .padc-participant-course-slots {
	display: flex;
	align-items: flex-start;
	gap: 1em;
	overflow-x: auto;
	/* Room for the focus ring of the outermost inputs, which the scroll container would else clip. */
	padding-bottom: 0.5em;
}

.padc-participant-course--side-by-side .padc-participant-course-slots > .padc-participant-slot {
	/* Wide enough for a first name, a prefix and a last name side by side, and never wider than the
	   screen -- on a phone that means one card at a time, scrolled, instead of a column of slivers. */
	flex: 0 0 26em;
	max-width: 100%;
	margin-top: 0;
}

.padc-participant-course + .padc-participant-course {
	margin-top: 2em;
}

/* A captioned block of fields that belong together -- the address. A fieldset is what this is
   semantically, so the browser and a screen reader both read the caption as belonging to the fields
   under it; what it needs from us is only to stop looking like a browser default. */
.padc-participant-section {
	border: 0;
	border-top: 1px solid rgba(128, 128, 128, 0.25);
	margin: 1.25em 0 0;
	padding: 0.75em 0 0;
	/* A fieldset's implicit min-width is min-content, which would stop the flex rows inside it from
	   ever shrinking -- and inside a side-by-side card there is nothing to spare. */
	min-width: 0;
}

.padc-participant-section-title {
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: 0.5em;
	font-weight: 600;
}

/* The block after a captioned one starts a line below it, so the caption cannot be read as belonging
   to whatever follows the address. */
.padc-participant-section + * {
	margin-top: 1.25em;
}

.padc-participant-copy {
	display: flex;
	align-items: center;
	gap: 0.5em;
}