/**
 * Chlaus Core — registration form styling (Familien / Vereine / Firmen).
 * Uses the theme's design-token CSS variables with the SPEC fallback
 * values baked in, so the forms still look reasonable even before the
 * chlaus-zug theme's theme.json is active.
 */

.chlaus-form {
	display: grid;
	gap: 1.5rem;
	max-width: 42rem;
	font-family: var( --wp--preset--font-family--inter, 'Inter', sans-serif );
	color: var( --wp--preset--color--ink, #1a1410 );
}

.chlaus-form fieldset {
	border: 1px solid var( --wp--preset--color--muted, #6b5d4a );
	border-radius: 4px;
	padding: 1rem 1.25rem 1.25rem;
	margin: 0;
}

.chlaus-form legend {
	padding: 0 0.5rem;
	font-family: var( --wp--preset--font-family--playfair, 'Playfair Display', serif );
	font-weight: 700;
	color: var( --wp--preset--color--red, #7a1f1f );
}

.chlaus-field {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.chlaus-field:last-child {
	margin-bottom: 0;
}

.chlaus-field label {
	font-weight: 600;
	font-size: 0.9rem;
}

.chlaus-required {
	color: var( --wp--preset--color--red, #7a1f1f );
}

.chlaus-field input[type="text"],
.chlaus-field input[type="email"],
.chlaus-field input[type="tel"],
.chlaus-field input[type="date"],
.chlaus-field input[type="time"],
.chlaus-field input[type="number"],
.chlaus-field select,
.chlaus-field textarea {
	padding: 0.55rem 0.7rem;
	border: 1px solid var( --wp--preset--color--muted, #6b5d4a );
	border-radius: 4px;
	background: var( --wp--preset--color--paper, #faf4e6 );
	color: var( --wp--preset--color--ink, #1a1410 );
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
}

.chlaus-field input:focus,
.chlaus-field select:focus,
.chlaus-field textarea:focus {
	outline: 2px solid var( --wp--preset--color--gold, #b88a3a );
	outline-offset: 1px;
}

.chlaus-field-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: 1rem;
}

.chlaus-kinder-rows {
	display: grid;
	gap: 1rem;
	margin-bottom: 1rem;
}

.chlaus-kind-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 0.75rem;
	align-items: end;
	padding: 0.75rem;
	background: var( --wp--preset--color--cream, #f5ecd9 );
	border-radius: 4px;
}

.chlaus-remove-kind {
	justify-self: start;
	background: transparent;
	border: 1px solid var( --wp--preset--color--red, #7a1f1f );
	color: var( --wp--preset--color--red, #7a1f1f );
	border-radius: 999px;
	width: 2.25rem;
	height: 2.25rem;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}

.chlaus-remove-kind:hover,
.chlaus-remove-kind:focus {
	background: var( --wp--preset--color--red, #7a1f1f );
	color: #fff;
}

.chlaus-add-kind {
	justify-self: start;
	background: transparent;
	border: 1px dashed var( --wp--preset--color--gold, #b88a3a );
	color: var( --wp--preset--color--gold, #b88a3a );
	border-radius: 4px;
	padding: 0.5rem 1rem;
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
}

.chlaus-add-kind:hover,
.chlaus-add-kind:focus {
	background: var( --wp--preset--color--gold, #b88a3a );
	color: var( --wp--preset--color--paper, #faf4e6 );
}

.chlaus-form-submit {
	justify-self: start;
	background: var( --wp--preset--color--red, #7a1f1f );
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.75rem 1.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.chlaus-form-submit:hover,
.chlaus-form-submit:focus {
	background: var( --wp--preset--color--gold, #b88a3a );
}

.chlaus-form-notice {
	padding: 0.9rem 1.1rem;
	border-radius: 4px;
	font-weight: 600;
	margin-bottom: 1rem;
}

.chlaus-form-notice--success {
	background: #e4f1e4;
	border: 1px solid #4c8a4c;
	color: #234c23;
}

.chlaus-form-notice--error {
	background: #fbe6e6;
	border: 1px solid var( --wp--preset--color--red, #7a1f1f );
	color: var( --wp--preset--color--red, #7a1f1f );
}

@media ( max-width: 640px ) {
	.chlaus-kind-row {
		grid-template-columns: 1fr;
	}
}