/* kg-formulier.css — de opmaak van het concept op de Avada-formuliermarkup.
 *
 * Handgeschreven; dit bestand komt NIET uit tools/genereer_css.py.
 *
 * WAAROM DIT NODIG IS
 * Het concept stileert zijn formulier via `.cform input`, `.cform label` enzovoort.
 * Bij ons staat er een echt Avada-formulier, want de huls in het concept heeft geen
 * verwerking en zou inzendingen laten verdwijnen. Dat formulier draagt heel andere
 * klassen (`.fusion-form-field`, `.fusion-form-input`), dus de gegenereerde
 * `.cform`-regels grijpen nergens op aan: het formulier stond ongestileerd.
 *
 * Hieronder staan dezelfde waarden als in het concept, gemikt op de Avada-klassen.
 * Waar het concept een eigen token gebruikt staat hier de --kg-variant.
 *
 * Gescopet op `.kg .kern`, de contactsectie. Zo blijft het sollicitatieformulier op
 * /werken-bij/ buiten schot; dat heeft zijn eigen opmaak in het concept.
 */

/* Het kaartvlak om het formulier EN de afsluitende regel. In het concept is dat
   `.cform` zelf; hier het eigen omhulsel uit kg_kern, want het Avada-formulier brengt
   alleen zijn eigen wrapper mee en de regel viel er anders buiten. */
.kg .kern .kg-formulierkaart {
	background: var( --kg-papier );
	border: 1px solid var( --kg-lijn );
	border-radius: var( --kg-radius );
	padding: clamp( 24px, 3vw, 36px );
}

/* De twee kolommen naast elkaar: het concept houdt 16px tussenruimte aan. Avada zet
   die ruimte als marge op de kolom, dus hier de helft aan weerszijden. */
.kg .kern .kg-formulierkaart .fusion-layout-column {
	margin-left: 0;
	margin-right: 0;
	width: calc( 50% - 8px );
}
.kg .kern .kg-formulierkaart .fusion-builder-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	width: 100%;
	max-width: none;
	margin: 0;
}
.kg .kern .kg-formulierkaart .fusion_builder_column_1_1 {
	width: 100%;
}

.kg .kern .fusion-form-field label,
.kg .kern .fusion-form-field .fusion-form-label {
	display: block;
	font-family: var( --kg-kop );
	font-weight: 700;
	font-size: 13.5px;
	margin: 16px 0 6px;
	color: var( --kg-donker );
}

.kg .kern .fusion-form-input,
.kg .kern .fusion-form-field input[type="text"],
.kg .kern .fusion-form-field input[type="email"],
.kg .kern .fusion-form-field input[type="tel"],
.kg .kern .fusion-form-field select,
.kg .kern .fusion-form-field textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var( --kg-lijn );
	border-radius: 12px;
	font-family: var( --kg-body );
	font-size: 15px;
	color: var( --kg-donker );
	background: var( --kg-wit );
	transition: border-color .2s, box-shadow .2s;
}

.kg .kern .fusion-form-field input:hover,
.kg .kern .fusion-form-field select:hover,
.kg .kern .fusion-form-field textarea:hover {
	border-color: rgba( 13, 31, 18, .4 );
}

.kg .kern .fusion-form-field input:focus,
.kg .kern .fusion-form-field select:focus,
.kg .kern .fusion-form-field textarea:focus {
	outline: 2px solid var( --kg-groen );
	outline-offset: 1px;
}

/* Het pijltje in de keuzelijst komt als data-URI uit het concept. */
.kg .kern .fusion-form-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1F12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	padding-right: 44px;
	cursor: pointer;
}

.kg .kern .fusion-form-field textarea {
	min-height: 130px;
	resize: vertical;
}

/* Het akkoordvinkje staat niet in het concept, maar blijft hier staan zolang Klaassen
   er niet over beslist heeft. Wel dezelfde ritmiek als de rest van het formulier. */
.kg .kern .fusion-form-checkbox {
	margin-top: 18px;
}

/* De verzendknop en de regel eronder. In het concept staan ze naast elkaar in
   `.verzend`; Avada kent geen vrij tekstveld in formulieren, dus staat de regel bij
   ons eronder. De maatvoering is verder gelijk gehouden. */
.kg .kern .kg-formulierkaart .fusion-button {
	margin-top: 22px;
}
.kg .kern .privacy {
	margin-top: 12px;
	font-size: 12.5px;
	color: var( --kg-grijs );
	line-height: 1.5;
}

@media ( max-width: 760px ) {
	/* Het concept zet de twee kolommen onder elkaar op smal. */
	.kg .kern .kg-formulierkaart .fusion-layout-column {
		width: 100%;
	}
}