/*
 * Pultz Core: formular. Neutral grundstil, som sitets eget stylesheet tematiserer med custom properties
 * (sættes på .pultz-form eller et forældreelement):
 *
 *   --pultz-brand          knappens baggrund
 *   --pultz-brand-ink      tekst på knappen
 *   --pultz-brand-strong   knappens baggrund ved hover
 *   --pultz-accent         fokusramme og markering i radio/checkbox
 *   --pultz-ink            tekstfarve
 *   --pultz-muted          hjælpetekst og "(valgfri)"
 *   --pultz-surface        baggrund i felter
 *   --pultz-line           kant på felter
 *   --pultz-error          fejlfarve
 *   --pultz-error-surface  baggrund i fejlopsummeringen
 *   --pultz-radius         hjørnerunding
 *   --pultz-gap            afstand mellem felter
 *   --pultz-font           skrifttype (arves som standard)
 */

.pultz-form {
	--_brand: var(--pultz-brand, #1f1f1f);
	--_brand-ink: var(--pultz-brand-ink, #ffffff);
	--_brand-strong: var(--pultz-brand-strong, var(--_brand));
	--_accent: var(--pultz-accent, var(--_brand));
	--_text: var(--pultz-ink, currentColor);
	--_muted: var(--pultz-muted, #5f5f5f);
	--_surface: var(--pultz-surface, #ffffff);
	--_border: var(--pultz-line, #8a8a8a);
	--_error: var(--pultz-error, #b3261e);
	--_error-surface: var(--pultz-error-surface, #fdf1f0);
	--_radius: var(--pultz-radius, 6px);
	--_gap: var(--pultz-gap, 1rem);

	color: var(--_text);
	font-family: var(--pultz-font, inherit);
	max-width: 100%;
	position: relative;
	scroll-margin-top: 5rem;
}

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

.pultz-form__title {
	margin: 0 0 0.5rem;
}

.pultz-form__intro {
	margin: 0 0 var(--_gap);
}

.pultz-form__fields {
	display: grid;
	gap: var(--_gap);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.pultz-form__fields {
		grid-template-columns: 1fr 1fr;
	}

	.pultz-form__field--full,
	.pultz-form__field--checkbox {
		grid-column: 1 / -1;
	}
}

.pultz-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.pultz-form__label {
	font-weight: 600;
	line-height: 1.3;
	padding: 0;
}

.pultz-form__req {
	color: var(--_error);
}

.pultz-form__opt {
	color: var(--_muted);
	font-size: 0.875em;
	font-weight: 400;
}

.pultz-form__input {
	appearance: none;
	background-color: var(--_surface);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	color: inherit;
	font: inherit;
	font-size: max(1rem, 16px); /* 16px forhindrer zoom ved fokus i iOS. */
	line-height: 1.4;
	margin: 0;
	min-height: 3rem;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

.pultz-form__input--textarea {
	min-height: 8rem;
	resize: vertical;
}

.pultz-form__input--select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	padding-right: 2.25rem;
}

.pultz-form__input:focus-visible,
.pultz-form__choice input:focus-visible,
.pultz-form__submit:focus-visible,
.pultz-form__summary:focus-visible,
.pultz-form a:focus-visible {
	outline: 3px solid var(--pultz-focus, var(--_accent));
	outline-offset: 2px;
}

.pultz-form__group {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.pultz-form__group > legend {
	margin-bottom: 0.35rem;
	width: 100%;
}

.pultz-form__choice {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5rem;
	min-height: 2.75rem;
}

.pultz-form__choice input {
	accent-color: var(--_accent);
	height: 1.25rem;
	margin: 0;
	width: 1.25rem;
}

.pultz-form__help,
.pultz-form__consent,
.pultz-form__micro {
	color: var(--_muted);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

.pultz-form__consent {
	margin-top: var(--_gap);
}

.pultz-form__consent a,
.pultz-form__summary a {
	color: inherit;
	text-decoration: underline;
}

.pultz-form__micro {
	margin-top: 0.5rem;
}

/* Fejl */

.pultz-form__field.is-invalid .pultz-form__input,
.pultz-form__input[aria-invalid="true"] {
	border-color: var(--_error);
	border-width: 2px;
}

.pultz-form__error {
	color: var(--_error);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.pultz-form__summary {
	background: var(--_error-surface);
	border: 2px solid var(--_error);
	border-radius: var(--_radius);
	color: #1f1f1f;
	margin: 0 0 var(--_gap);
	padding: 1rem 1.15rem;
	scroll-margin-top: 5rem;
}

.pultz-form__summary p {
	margin: 0 0 0.5rem;
}

.pultz-form__summary p:last-child {
	margin-bottom: 0;
}

.pultz-form__summary-title {
	font-weight: 700;
}

.pultz-form__summary ul {
	margin: 0;
	padding-left: 1.25rem;
}

/* Knap */

.pultz-form__actions {
	margin-top: var(--_gap);
}

.pultz-form__submit {
	appearance: none;
	background: var(--_brand);
	border: 2px solid var(--_brand);
	border-radius: var(--_radius);
	color: var(--_brand-ink);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	min-height: 3rem;
	padding: 0.85rem 1.6rem;
}

.pultz-form__submit:hover {
	background: var(--_brand-strong);
	border-color: var(--_brand-strong);
}

.pultz-form__submit[disabled] {
	cursor: progress;
	opacity: 0.7;
}

@media (max-width: 39.99em) {
	.pultz-form__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pultz-form__submit {
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}
}