/* SmartHub 2026 - paginalaag word-lid
 *
 * De blokken op deze pagina (stappen, vindkaarten, roadmap, werkgeversblok,
 * faq) zetten allemaal zelf een .sectie-veld op hun sectie. Op /word-lid/
 * staan er daardoor vijf achter elkaar en valt het ritme veld/wit weg dat de
 * rest van de site wel heeft; de pagina wordt één grijs vlak.
 *
 * De elementen hebben geen instelling voor de achtergrond, dus regelen we het
 * hier. Het bouwscript geeft elke container een eigen sh-wl-klasse, zodat we
 * per sectie kunnen kiezen - en zodat het meebeweegt als iemand de volgorde in
 * de Live Builder aanpast: de klasse hangt aan het blok, niet aan een positie.
 */
/* 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. scroll-margin-top houdt
   ankerlinks vrij van de plakkende header. */
.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-wl-roadmap .sectie-veld,
.sh-wl-faq .sectie-veld {
	background: transparent;
}

/* De stapkaarten hebben op deze pagina geen beeld. Het element toont dan een
   gestreepte uploadplaats van 16:10, en drie tot vier lege vlakken op rij
   lezen als een fout in plaats van als ontwerp.
   Het beeldvlak zelf blijft staan, want het nummerbolletje hangt erin; alleen
   de lege fotoplaats verdwijnt en de hoogte krimpt tot precies genoeg voor dat
   bolletje. Komt er beeld bij de stappen (het vierde veld in de stappen-tekst),
   dan kunnen deze twee regels weg. */
.sh-wl-stappen .stap .beeld .foto,
.sh-wl-roadmap .stap .beeld .foto {
	display: none;
}

.sh-wl-stappen .stap .beeld,
.sh-wl-roadmap .stap .beeld {
	aspect-ratio: auto;
	height: 72px;
}

/* De roadmap heeft vier fases in een grid van drie: dat laat er één als wees
   op de tweede rij achter. Boven het breekpunt waarop het element zelf naar
   één kolom gaat, zetten we er dus vier naast elkaar. */
@media (min-width: 901px) {

	.sh-wl-roadmap .stappen {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Aanmeldformulier voor het lidmaatschap

   Het formulier zelf komt uit smarthub-core en leent `forms.css` voor de velden.
   Hieronder staat alleen wat daar niet in zit: de pakketbevestiging bovenaan,
   de tussenkoppen en het inklapbare blok voor de tweede contactpersoon.
   --------------------------------------------------------------------------- */

/* Het aanmeldblok krijgt hetzelfde merkverloop en netwerk als de hero's, zodat
   de laatste stap van de klantreis er niet uitziet als een los formulier op een
   grijs vlak. De witte kaart erbovenop houdt alle tekst leesbaar; op het verloop
   zelf staat niets. */
/* Let op de selector: deze sectie staat ín een Avada-container die óók .sh-sectie
   heet, waardoor `.sh-sectie section` (0,1,1) bovenaan dit bestand het wint van een
   losse klasse. Vandaar `.sh-sectie section.sh-form--lidmaatschap` (0,2,1). */
.sh-sectie section.sh-form--lidmaatschap,
.sh-form--lidmaatschap {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Zijruimte hoort hier en niet op de kaart: anders raakt de kaart op mobiel de
	   schermranden en zie je van de achtergrond niets terug. */
	padding: 64px 28px;
	background: linear-gradient(150deg, var(--roze) 0%, var(--paars) 70%);
}

.sh-form--lidmaatschap .sh-netwerk {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Lijnen en knopen ademen, net als in de hero. Daar gebeurt dat met SMIL; hier
   met CSS, zodat het stilstaat als iemand bewegende beelden heeft uitgezet. Dat
   telt hier zwaarder dan in een hero: mensen zitten hier minutenlang te typen. */
.sh-form--lidmaatschap .sh-netwerk line {
	animation: sh-net-lijn 6s ease-in-out infinite;
}

.sh-form--lidmaatschap .sh-netwerk circle {
	transform-box: fill-box;
	transform-origin: center;
	animation: sh-net-knoop 5s ease-in-out infinite;
}

@keyframes sh-net-lijn {

	0%, 100% { opacity: .25; }
	50%      { opacity: .85; }
}

@keyframes sh-net-knoop {

	0%, 100% { transform: scale(.8); opacity: .75; }
	50%      { transform: scale(1.35); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {

	.sh-form--lidmaatschap .sh-netwerk line,
	.sh-form--lidmaatschap .sh-netwerk circle {
		animation: none;
	}
}

/* forms.css geeft .sh-form een witte kaart met afgeronde hoeken. Hier stond
   alleen zijpadding, waardoor de kop tegen de bovenrand van die kaart plakte. */
.sh-form--lidmaatschap .sh-form {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
	padding: 40px 36px 44px;
	border-radius: 16px;
	box-shadow: 0 30px 70px rgba(29, 18, 32, .22);
}

@media (max-width: 560px) {

	.sh-form--lidmaatschap .sh-form {
		padding: 28px 22px 32px;
	}
}

/* Bevestigt waar iemand ja tegen zegt. Bij een verplichting van 550 tot 2200
   euro per jaar hoort het gekozen pakket in beeld te staan tijdens het invullen,
   niet alleen op de kaart waar iemand vandaan kwam. */
/* Het blok heeft sinds de pakketkeuze drie kinderen onder elkaar (de huidige
   keuze, de opties en de melding); de flex-rij zit nu op `.sh-lidkeuze__nu`. */
.sh-lidkeuze {
	display: block;
	margin: 0 0 28px;
	padding: 18px 22px;
	border: 1px solid var(--lijn);
	border-left: 4px solid var(--roze);
	border-radius: 10px;
	background: #fff;
}

.sh-lidkeuze__label {
	width: 100%;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--steen);
}

.sh-lidkeuze__naam {
	font-size: 22px;
	line-height: 1.1;
	color: var(--paars);
}

.sh-lidkeuze__prijs {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}

.sh-lidkeuze__grens {
	width: 100%;
	font-size: 13px;
	color: var(--steen);
}

.sh-form__kop {
	margin: 34px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--lijn);
	font-size: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--paars);
}

.sh-form__kop:first-of-type {
	margin-top: 6px;
	padding-top: 0;
	border-top: 0;
}

/* De tweede contactpersoon is optioneel. Ingeklapt oogt het formulier korter
   dan het is, en dat scheelt afhakers; wie hem al had ingevuld krijgt het blok
   open terug na een validatiefout (het `open`-attribuut wordt server-side gezet). */
.sh-form__extra {
	margin: 26px 0 6px;
	border: 1px solid var(--lijn);
	border-radius: 10px;
	background: #fff;
}

.sh-form__extra > summary {
	padding: 14px 18px;
	font-weight: 700;
	color: var(--paars);
	cursor: pointer;
	list-style: none;
}

.sh-form__extra > summary::-webkit-details-marker {
	display: none;
}

.sh-form__extra > summary::before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	font-weight: 700;
}

.sh-form__extra[open] > summary::before {
	content: "–";
}

.sh-form__extra > *:not(summary) {
	padding-inline: 18px;
}

.sh-form__extra > *:last-child {
	padding-bottom: 18px;
}

@media (max-width: 640px) {

	.sh-sectie section.sh-form--lidmaatschap,
	.sh-form--lidmaatschap {
		padding: 44px 16px;
	}

	.sh-lidkeuze {
		padding: 14px 16px;
	}
}

/* De akkoordteksten lopen over twee regels; zonder deze regel schuift de tweede
   regel onder het vinkje door. forms.css zet wel flex met een gap, maar geeft de
   tekst geen eigen kolom. */
.sh-form--lidmaatschap .sh-form__field--checkbox {
	gap: 12px;
	line-height: 1.5;
}

.sh-form--lidmaatschap .sh-form__field--checkbox input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--roze);
}

.sh-form--lidmaatschap .sh-form__field--checkbox > span {
	flex: 1 1 auto;
}

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

/* ---------------------------------------------------------------------------
   Terugweg boven het formulier (alleen op pagina's zonder header)

   Eén regel met alles erin: de selector moet `.sh-sectie a` verslaan (die zet de
   linkkleur op --paars, vrijwel onleesbaar op magenta), en dan mag de uitlijning
   er niet in een tweede, zwakkere regel achteraan komen.
   --------------------------------------------------------------------------- */

.sh-sectie .sh-form--lidmaatschap a.sh-terug {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
	width: 100%;
	max-width: 760px;
	margin: 0 auto 20px;
	padding: 6px 2px;
	color: rgba(255, 255, 255, .82);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .18s ease;
}

.sh-sectie .sh-form--lidmaatschap a.sh-terug svg {
	width: 17px;
	height: 17px;
	transition: transform .18s ease;
}

.sh-sectie .sh-form--lidmaatschap a.sh-terug:hover,
.sh-sectie .sh-form--lidmaatschap a.sh-terug:focus-visible {
	color: #fff;
}

.sh-sectie .sh-form--lidmaatschap a.sh-terug:hover svg {
	transform: translateX(-3px);
}

/* Zonder header valt de bovenrand van het blok samen met de bovenkant van het
   scherm; wat extra lucht voorkomt dat de link tegen de browserrand plakt. */
.sh-zonder-header .sh-sectie section.sh-form--lidmaatschap {
	padding-top: 40px;
}

/* ---------------------------------------------------------------------------
   Bedankscherm na een aanmelding

   Het laatste wat een nieuw lid van de site ziet, dus geen kale statusbalk maar
   een eigen scherm: een vinkje, wat er hierna gebeurt, en een weg terug.
   --------------------------------------------------------------------------- */

.sh-bedankt {
	text-align: center;
}

.sh-bedankt__vink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--roze);
	color: #fff;
}

.sh-bedankt__vink svg {
	width: 30px;
	height: 30px;
}

.sh-bedankt h2 {
	margin-bottom: 10px;
}

.sh-bedankt__lead {
	max-width: 46ch;
	margin: 0 auto 26px;
	color: var(--steen);
}

/* De drie vervolgstappen staan links uitgelijnd in een gecentreerd blok: een
   opsomming die zelf ook gecentreerd is, leest niet. */
.sh-bedankt__stappen {
	display: grid;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto 30px;
	padding: 20px 22px;
	border: 1px solid var(--lijn);
	border-radius: 12px;
	background: var(--veld);
	list-style: none;
	text-align: left;
	counter-reset: sh-stap;
}

.sh-bedankt__stappen li {
	position: relative;
	padding-left: 34px;
	font-size: .94rem;
	line-height: 1.5;
	counter-increment: sh-stap;
}

.sh-bedankt__stappen li::before {
	content: counter(sh-stap);
	position: absolute;
	top: 1px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--paars-05, rgba(162, 0, 103, .1));
	color: var(--paars);
	font-size: .78rem;
	font-weight: 800;
}

.sh-bedankt__actie .btn {
	min-width: 220px;
	justify-content: center;
}