/* SmartHub 2026 - paginalaag vacature-alert
 *
 * Het alert-formulier komt uit smarthub-core en rendert met eigen BEM-klassen
 * (sh-form__*). Die basisopmaak is bewust neutraal - blauwe focusrand, 6px
 * radii, geen horizontale padding - omdat hij ook door andere formulieren
 * wordt gebruikt. Hier zetten we alleen de vacature-alert in de merkstijl, en
 * daarom is alles gescopet op .sh-sectie .sh-form--alert (0,2,0): dat wint van
 * forms.css (0,1,0) zonder dat we die stylesheet hoeven aan te passen.
 */

/* Sectieritme en subhero. Deze drie regels staan in élke paginalaag en niet in
   base.css: zonder laag valt een pagina terug op een sectie zonder verticale
   padding en op de volle heldenhoogte van de homepage. */
.sh-sectie section {
	padding: 96px 0;
	position: relative;
	scroll-margin-top: 92px;
}

.sh-sectie .hero-sub {
	min-height: 0 !important;
}

.sh-sectie .hero-sub .hero-in {
	padding: 52px 0 66px;
	max-width: 680px;
}

.sh-sectie .sh-alert-kolom > .fusion-column-wrapper {
	max-width: 860px;
	margin-inline: auto;
	width: 100%; /* zonder breedte krimpt margin-inline:auto in een flexkolom */
}

.sh-sectie .sh-form--alert {
	max-width: none;
	margin: 0;
	padding: 44px 40px;
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.sh-sectie .sh-form--alert h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin: 0 0 10px;
}

.sh-sectie .sh-form--alert .sh-form__intro {
	color: var(--steen);
	font-size: .98rem;
	margin: 0 0 30px;
}

.sh-sectie .sh-form--alert .sh-form__row {
	margin-bottom: 22px;
}

.sh-sectie .sh-form--alert .sh-form__field > span {
	font-weight: 800;
	font-size: .88rem;
	margin-bottom: 8px;
}

.sh-sectie .sh-form--alert .sh-form__hint {
	color: var(--steen);
	font-size: .82rem;
}

.sh-sectie .sh-form--alert .sh-form__field input[type="text"],
.sh-sectie .sh-form--alert .sh-form__field input[type="email"],
.sh-sectie .sh-form--alert .sh-form__field input[type="tel"],
.sh-sectie .sh-form--alert .sh-form__field select,
.sh-sectie .sh-form--alert .sh-form__field textarea {
	padding: 13px 16px;
	border: 1px solid var(--lijn);
	border-radius: 14px;
	background: var(--veld);
	font-size: .98rem;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.sh-sectie .sh-form--alert .sh-form__field input:focus,
.sh-sectie .sh-form--alert .sh-form__field select:focus,
.sh-sectie .sh-form--alert .sh-form__field textarea:focus {
	outline: none;
	background: var(--papier);
	border-color: var(--roze);
	box-shadow: 0 0 0 3px var(--roze-08);
}

/* Filtergroepen: legenda als kicker, opties als chips. */
.sh-sectie .sh-form--alert .sh-form__filter-group {
	margin-bottom: 26px;
}

.sh-sectie .sh-form--alert .sh-form__filter-group legend {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .76rem;
	color: var(--steen);
	margin-bottom: 12px;
}

.sh-sectie .sh-form--alert .sh-form__filter-option {
	padding: 9px 16px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--lijn);
	border-radius: var(--pill);
	background: var(--papier);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.sh-sectie .sh-form--alert .sh-form__filter-option:hover {
	border-color: var(--roze);
	background: var(--roze-08);
}

/* :has() zit in alle browsers die Avada 7.15 ondersteunt; zonder ondersteuning
   blijft de chip gewoon neutraal - het vinkje zelf is dan de statusindicator. */
.sh-sectie .sh-form--alert .sh-form__filter-option:has(input:checked) {
	border-color: var(--roze);
	background: var(--roze-08);
	color: var(--paars);
}

.sh-sectie .sh-form--alert .sh-form__filter-option input {
	accent-color: var(--roze);
}

.sh-sectie .sh-form--alert .sh-form__field--checkbox input {
	accent-color: var(--roze);
}

.sh-sectie .sh-form--alert .sh-form__actions {
	margin-top: 30px;
}

.sh-sectie .sh-form--alert .sh-button--primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 2px solid transparent;
	border-radius: var(--pill);
	padding: 15px 30px;
	background: var(--roze);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(209, 0, 116, .32);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sh-sectie .sh-form--alert .sh-button--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(209, 0, 116, .42);
}

/* Status-meldingen houden bewust hun eigen fout-/succeskleuren; alleen de
   radius trekken we gelijk met de rest van het formulier. */
.sh-sectie .sh-form--alert .sh-form__status {
	border-radius: 14px;
}

@media (max-width: 640px) {

	.sh-sectie .sh-form--alert {
		padding: 30px 22px;
	}
}