/* YE Core: vacaturezoeker en formulieren.
   Iconen zijn inline SVG, zodat Font Awesome (76 KB) niet meer nodig is. */

.ye-zoeker, .ye-form {
	--ye-i-zoek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23dda02b' d='M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
	--ye-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 512'%3E%3Cpath fill='%23dda02b' d='M112 316.9v156.7l22 33c4.8 7.1 15.2 7.1 20 0l22-33V316.9c-10.4 1.9-21 3.1-32 3.1s-21.6-1.2-32-3.1zM144 0C64.5 0 0 64.5 0 144s64.5 144 144 144 144-64.5 144-144S223.5 0 144 0zm0 76c-37.5 0-68 30.5-68 68 0 6.6-5.4 12-12 12s-12-5.4-12-12c0-50.7 41.3-92 92-92 6.6 0 12 5.4 12 12s-5.4 12-12 12z'/%3E%3C/svg%3E");
	--ye-i-persoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23707070' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/%3E%3C/svg%3E");
	--ye-i-telefoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23707070' d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E");
	--ye-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23707070' d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E");
	--ye-i-bericht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23707070' d='M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z'/%3E%3C/svg%3E");
	--ye-i-bedrijf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23707070' d='M436 480h-20V24c0-13.3-10.7-24-24-24H56C42.7 0 32 10.7 32 24v456H12c-6.6 0-12 5.4-12 12v20h448v-20c0-6.6-5.4-12-12-12zM128 76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V76zm0 96c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm52 148h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm76 160h-64v-84c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84zm64-172c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40z'/%3E%3C/svg%3E");
	--ye-i-plaats: var(--ye-i-pin);
}

/* ---------- vacaturezoeker ---------- */

.ye-zoeker { display: flex; gap: 2px; align-items: stretch; margin: 0; }
.ye-zoeker--hero { max-width: 950px; }
.ye-zoeker__veld { position: relative; display: block; }
.ye-zoeker__veld--functie { flex: 0 0 58%; }
.ye-zoeker__veld--postcode { flex: 1 1 auto; }
.ye-zoeker input {
	width: 100%; height: 42px; margin: 0;
	padding: 8px 40px 8px 16px;
	background: #fff; color: #4a4a4a;
	border: 1px solid transparent; border-radius: 0;
	font: 400 18px/1.4 "Open Sans", sans-serif; text-transform: uppercase;
	-webkit-appearance: none; appearance: none;
}
.ye-zoeker input::placeholder { color: #abafb0; opacity: 1; text-transform: uppercase; }
.ye-zoeker input::-webkit-search-cancel-button { display: none; }
.ye-zoeker__veld::after {
	content: ""; position: absolute; right: 20px; top: 50%; width: 17px; height: 17px;
	transform: translateY(-50%); background: var(--ye-i-zoek) center / contain no-repeat; pointer-events: none;
}
.ye-zoeker__veld--postcode::after { background-image: var(--ye-i-pin); }
.ye-zoeker__knop {
	flex: 0 0 120px; height: 42px; padding: 2px; border: 0; border-radius: 0; cursor: pointer;
	background: #dda02b; color: #fff; font: 800 18px/1 Roboto, sans-serif; text-transform: uppercase;
	transition: filter .2s;
}
.ye-zoeker__knop:hover { filter: brightness(1.08); }

.ye-zoeker--zijbalk { flex-direction: column; gap: 10px; max-width: none; }
.ye-zoeker--zijbalk .ye-zoeker__knop { flex-basis: 42px; }

@media (max-width: 767px) {
	.ye-zoeker { flex-wrap: wrap; gap: 10px; }
	.ye-zoeker__veld--functie, .ye-zoeker__veld--postcode, .ye-zoeker__knop { flex: 1 1 100%; }
}

/* ---------- formulieren ---------- */


.ye-form__form { display: flex; flex-wrap: wrap; gap: 10px; }
.ye-form__veld { position: relative; flex: 1 1 100%; }
.ye-form__veld--derde { flex: 0 0 calc(32.5% - 5px); }
.ye-form__veld--tweederde { flex: 1 1 calc(67.5% - 5px); }
.ye-form input, .ye-form textarea {
	display: block; width: 100%; margin: 0;
	padding: 8px 16px; border: 0; border-radius: 0;
	background: #fff; color: #707070;
	font: 400 15px/21px "Open Sans", sans-serif;
	-webkit-appearance: none; appearance: none;
}
.ye-form input { height: 40px; }
.ye-form textarea { min-height: 94px; padding: 5px 16px; resize: vertical; }
.ye-form ::placeholder { color: #a1a1a1; opacity: 1; }
.ye-form .heeft-icoon input, .ye-form .heeft-icoon textarea { padding-left: 40px; }
.ye-form .heeft-icoon::before {
	content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; z-index: 1;
	background: center / contain no-repeat; pointer-events: none;
}
.ye-form .icoon-persoon::before { background-image: var(--ye-i-persoon); }
.ye-form .icoon-telefoon::before { background-image: var(--ye-i-telefoon); }
.ye-form .icoon-mail::before { background-image: var(--ye-i-mail); }
.ye-form .icoon-bericht::before { background-image: var(--ye-i-bericht); }
.ye-form .icoon-bedrijf::before { background-image: var(--ye-i-bedrijf); }
.ye-form .icoon-plaats::before { background-image: var(--ye-i-plaats); }
.ye-form__kop { flex: 1 1 100%; margin: 24px 0 0; padding: 0; color: #d1d1d1; font-size: 16px; font-weight: 400; line-height: 24px; }
.ye-form__knop {
	flex: 1 1 100%; height: 40px; padding: 0 24px; border: 0; border-radius: 0; cursor: pointer;
	background: #dda02b; color: #fff; font: 800 15px/1 "Open Sans", sans-serif; text-transform: uppercase;
	transition: filter .2s;
}
.ye-form__knop:hover { filter: brightness(1.08); }
.ye-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ye-form__melding { flex: 1 1 100%; padding: 12px 16px; margin: 0 0 10px; font-weight: 400; }
.ye-form__melding--ok { background: #dda02b; color: #000; }
.ye-form__melding--fout { background: #fff; color: #a00; }
.ye-form input:focus-visible, .ye-form textarea:focus-visible, .ye-zoeker input:focus-visible { outline: 2px solid #dda02b; outline-offset: 0; }

@media (max-width: 767px) {
}

/* ---------- teamcarrousel ---------- */

.ye-team { width: 100%; }
.ye-team__rij {
	display: grid; grid-auto-flow: column; grid-auto-columns: 25%;
	list-style: none; margin: 0; padding: 0;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ye-team__rij::-webkit-scrollbar { display: none; }
.ye-team__kaart { scroll-snap-align: start; padding-right: 10px; }
.ye-team__kaart:nth-child(4n + 1) { scroll-snap-align: start; }
.ye-team__kaart a { display: block; filter: brightness(90%); transition: filter .3s; color: inherit; }
.ye-team__kaart a:hover, .ye-team__kaart a:focus-visible { filter: brightness(120%); }
.ye-team__foto { display: block; width: 100%; height: 478px; object-fit: cover; }
.ye-team__naam, .ye-team__knop {
	display: block; padding: 15px 0; text-align: center;
	font: 700 14px/1.2 "Open Sans", sans-serif;
}
.ye-team__naam { background: #fff; color: #1d1d1d; }
.ye-team__knop { background: #dda02b; color: #fff; text-transform: uppercase; }
.ye-team__stippen { display: flex; justify-content: center; gap: 11px; padding-top: 14px; }
.ye-team__stippen button {
	width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
	background: transparent; border: 1px solid #fff;
}
.ye-team__stippen button[aria-current="true"] { background: #fff; }
.ye-team__stippen button:hover { background: #fab600; }

@media (max-width: 767px) {
	.ye-team__rij { grid-auto-columns: 100%; }
	.ye-team__kaart { padding-right: 0; }
	.ye-team__stippen { gap: 8px; }
	.ye-team__stippen button { width: 10px; height: 10px; }
}
