/**
 * VVT formulieren - aanvulling op de stijl van Formidable Forms.
 *
 * ZO IS DE TAAKVERDELING
 * ----------------------
 * De stijl-editor van Formidable is de baas over uitzicht: lettertype,
 * lettergroottes, kleuren, padding, hoogtes, afrondingen, knoppen. Wil je daar
 * iets aan veranderen, doe dat in de editor - niet hier.
 *
 *   Formidable > Stijlen > "Formidable stijlen"
 *
 * In dit bestand staat alleen wat de editor niet kan uitdrukken. Dat is bewust
 * kort gehouden. Elke regel die hier bijkomt, is een instelling die daarna niet
 * meer werkt in de editor.
 *
 * WAAROM DEZE WAARSCHUWING ER STAAT
 * ---------------------------------
 * Een eerdere versie van dit bestand nam typografie, kleuren, padding en
 * knoppen over, met selectors die bewust zwaarder wogen dan die van Formidable.
 * Dat werkte, maar het legde veertien instellingen in de stijl-editor stil: je
 * kon eraan draaien zonder dat er iets veranderde. Die regels zijn verhuisd
 * naar de editor.
 */

/* ---------- focus op invoervelden ---------- */

/*
 * Formidable tekent bij focus een uitwaaierende gloed van 5px. Een strakke ring
 * van 3px leest rustiger en laat de rand van het veld scherp. De editor heeft
 * geen instelling voor de vorm van die gloed, alleen voor de kleur
 * (border_color_active) - vandaar dat dit hier blijft staan.
 *
 * De kleur komt wel uit de editor: #129e6e staat daar als border_color_active.
 * Verander je die, pas dan ook deze ring aan.
 */
.frm_forms.with_frm_style .frm_form_fields .frm_form_field input:not([type="hidden"]):focus,
.frm_forms.with_frm_style .frm_form_fields .frm_form_field select:focus,
.frm_forms.with_frm_style .frm_form_fields .frm_form_field textarea:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(18, 158, 110, .16);
}

.frm_forms.with_frm_style .frm_form_fields .frm_blank_field input:not([type="hidden"]):focus,
.frm_forms.with_frm_style .frm_form_fields .frm_blank_field select:focus,
.frm_forms.with_frm_style .frm_form_fields .frm_blank_field textarea:focus {
	box-shadow: 0 0 0 3px rgba(240, 68, 56, .16);
}

/* ---------- tijdelijke tekst in lege velden ---------- */

/* De editor stelt wel de tekstkleur van een veld in, maar niet die van de
   placeholder. */
.frm_forms.with_frm_style .frm_form_fields .frm_form_field input::placeholder,
.frm_forms.with_frm_style .frm_form_fields .frm_form_field textarea::placeholder {
	color: #98a2b3;
	opacity: 1;
}

/* ---------- vinkjes en keuzerondjes ---------- */

/*
 * accent-color kleurt het vinkje zelf. De editor kent alleen het bijhorende
 * label, niet het vakje. Kleur gelijkgehouden met border_color_active.
 */
.frm_forms.with_frm_style input[type="checkbox"],
.frm_forms.with_frm_style input[type="radio"] {
	accent-color: #129e6e;
}

/* ---------- iPhone ---------- */

/*
 * Onder 16px zoomt Safari op iPhone automatisch in zodra je een veld aantikt.
 * De editor kent geen schermbreedtes, dus deze uitzondering hoort hier thuis.
 * Op desktop blijft de waarde uit de editor (field_font_size) gelden.
 */
@media (max-width: 782px) {
	.frm_forms.with_frm_style .frm_form_fields .frm_form_field input:not([type="hidden"]),
	.frm_forms.with_frm_style .frm_form_fields .frm_form_field select,
	.frm_forms.with_frm_style .frm_form_fields .frm_form_field textarea {
		font-size: 16px;
	}
}

/* ---------- beweging ---------- */

/* Zachte overgang op focus en op de knop, en een lichte indruk bij het
   aanklikken. De editor kent geen overgangen. */
.frm_forms.with_frm_style .frm_form_fields .frm_form_field input:not([type="hidden"]),
.frm_forms.with_frm_style .frm_form_fields .frm_form_field select,
.frm_forms.with_frm_style .frm_form_fields .frm_form_field textarea,
.frm_forms.with_frm_style .frm_submit input[type="submit"],
.frm_forms.with_frm_style .frm_submit button {
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.frm_forms.with_frm_style .frm_submit input[type="submit"]:active,
.frm_forms.with_frm_style .frm_submit button:active {
	transform: translateY(1px);
}

.frm_forms.with_frm_style .frm_submit input[type="submit"]:focus-visible,
.frm_forms.with_frm_style .frm_submit button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(18, 158, 110, .30);
}

@media (prefers-reduced-motion: reduce) {
	.frm_forms.with_frm_style .frm_form_fields .frm_form_field input,
	.frm_forms.with_frm_style .frm_form_fields .frm_form_field select,
	.frm_forms.with_frm_style .frm_form_fields .frm_form_field textarea,
	.frm_forms.with_frm_style .frm_submit input[type="submit"],
	.frm_forms.with_frm_style .frm_submit button {
		transition: none;
	}

	.frm_forms.with_frm_style .frm_submit input[type="submit"]:active,
	.frm_forms.with_frm_style .frm_submit button:active {
		transform: none;
	}
}