/* Herbruikbare onderdelen: knoppen, iconen, kickers, lijsten, kaarten, citaten. */

/* ---------- Iconen: klasse sc-ic-… zet het icoon als masker (--sc-icoon) ---------- */
.sc-ic-users   { --sc-icoon: url("../images/iconen/users.svg"); }
.sc-ic-folder  { --sc-icoon: url("../images/iconen/folder.svg"); }
.sc-ic-cal     { --sc-icoon: url("../images/iconen/cal.svg"); }
.sc-ic-box     { --sc-icoon: url("../images/iconen/box.svg"); }
.sc-ic-plan    { --sc-icoon: url("../images/iconen/plan.svg"); }
.sc-ic-clock   { --sc-icoon: url("../images/iconen/clock.svg"); }
.sc-ic-invoice { --sc-icoon: url("../images/iconen/invoice.svg"); }
.sc-ic-chart   { --sc-icoon: url("../images/iconen/chart.svg"); }
.sc-ic-spark   { --sc-icoon: url("../images/iconen/spark.svg"); }
.sc-ic-plug    { --sc-icoon: url("../images/iconen/plug.svg"); }
.sc-ic-lock    { --sc-icoon: url("../images/iconen/lock.svg"); }
.sc-ic-check   { --sc-icoon: url("../images/iconen/check.svg"); }
.sc-ic-heart   { --sc-icoon: url("../images/iconen/heart.svg"); }
.sc-ic-phone   { --sc-icoon: url("../images/iconen/phone.svg"); }
.sc-ic-pin     { --sc-icoon: url("../images/iconen/pin.svg"); }
.sc-ic-desktop { --sc-icoon: url("../images/iconen/desktop.svg"); }

/* ---------- Knoppen ---------- */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 3.25rem;
	transition: transform 0.2s var(--wp--custom--motion--veer), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--wp--preset--color--lime);
}

.wp-block-button.is-style-rand .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--petrol);
	box-shadow: none;
}

.wp-block-button.is-style-limoen .wp-block-button__link:hover {
	background: var(--wp--custom--color--knop-limoen-hover);
	border-color: var(--wp--custom--color--knop-limoen-hover);
	color: var(--wp--preset--color--on-lime);
	box-shadow: 0 6px 0 var(--wp--preset--color--petrol-deep);
}

.sc-ctas {
	gap: 0.75rem;
}

/* ---------- Tekst ---------- */
.sc-kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol);
}

.sc-lead {
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.sc-accent {
	color: var(--wp--preset--color--petrol);
}

/* Pil "Nieuw …" */
.sc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	margin: 0;
	padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--lime-wash-2);
	color: var(--wp--preset--color--lime-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 700;
}

.sc-pill a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

.sc-pill strong {
	padding: 0.1875rem 0.5625rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--on-lime);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Link "Meer …" */
.sc-meer {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--petrol);
}

.sc-meer a {
	text-decoration: none;
	display: inline-block;
	transition: transform 0.2s ease;
}

.sc-meer a:hover {
	transform: translateX(4px);
}

/* ---------- Lijst met vinkjes ---------- */
.sc-vinkjes {
	list-style: none;
	padding-left: 0 !important;
	display: grid;
	gap: 0.625rem;
	color: var(--wp--preset--color--muted);
}

.sc-vinkjes li {
	position: relative;
	padding-left: 2rem;
}

.sc-vinkjes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.375rem;
	height: 1.375rem;
	background: var(--wp--preset--color--lime-dark);
	-webkit-mask: url("../images/iconen/check.svg") no-repeat center / contain;
	mask: url("../images/iconen/check.svg") no-repeat center / contain;
}

.sc-vinkjes strong {
	color: var(--wp--preset--color--ink);
}

/* ---------- Sectiekop en rasters ---------- */
.sc-sec-head {
	display: grid;
	gap: 0.875rem;
	max-width: 48rem;
	margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.sc-sec-head > * {
	margin: 0 !important;
}

.sc-sec-head.is-center {
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.sc-raster {
	display: grid;
	gap: 1rem;
}

.sc-raster > * {
	margin: 0 !important;
	min-width: 0;
}

@media (min-width: 640px) {
	.sc-raster--3,
	.sc-raster--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.sc-raster--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1080px) {
	.sc-raster--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Kaarten met icoon (modules, redenen) ---------- */
.sc-module,
.sc-reden,
.sc-sector {
	position: relative;
	display: grid;
	gap: 0.625rem;
	align-content: start;
	padding: 1.5rem 1.375rem;
	border-radius: var(--wp--custom--radius--kaart);
}

.sc-module > *,
.sc-reden > *,
.sc-sector > * {
	margin: 0 !important;
}

.sc-module {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	transition: transform 0.25s var(--wp--custom--motion--veer), border-color 0.2s ease, box-shadow 0.25s ease;
}

.sc-module:hover {
	transform: translateY(-5px);
	border-color: var(--wp--preset--color--petrol);
	box-shadow: var(--wp--preset--shadow--kaart);
}

.sc-module::before,
.sc-reden::before {
	content: "";
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	background: var(--wp--preset--color--sky);
	transition: background 0.2s ease;
}

.sc-module::after,
.sc-reden::after {
	content: "";
	position: absolute;
	left: calc(1.375rem + 0.75rem);
	top: calc(1.5rem + 0.75rem);
	width: 1.5rem;
	height: 1.5rem;
	background: var(--wp--preset--color--petrol);
	-webkit-mask: var(--sc-icoon) no-repeat center / contain;
	mask: var(--sc-icoon) no-repeat center / contain;
}

.sc-module:hover::before {
	background: var(--wp--preset--color--lime);
}

.sc-module:hover::after {
	background: var(--wp--preset--color--on-lime);
}

.sc-module h3,
.sc-sector h3 {
	font-size: 1.25rem;
}

/* Hele kaart klikbaar via de link in de titel. */
.sc-module h3 a,
.sc-sector h3 a {
	color: inherit;
	text-decoration: none;
}

.sc-module h3 a::before,
.sc-sector h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sc-module p:not(.sc-meer),
.sc-reden p,
.sc-sector p:not(.sc-meer) {
	font-size: 0.97rem;
	color: var(--wp--preset--color--muted);
}

.sc-module .sc-meer,
.sc-sector .sc-meer {
	font-size: 0.97rem;
}

.sc-reden {
	border: 1px solid var(--wp--preset--color--line);
}

.sc-reden::before {
	background: var(--wp--preset--color--lime-wash-2);
}

.sc-reden::after {
	background: var(--wp--preset--color--lime-dark);
}

/* ---------- Citaten ---------- */
.sc-stem.wp-block-quote {
	margin: 0;
	display: grid;
	gap: 0.875rem;
	align-content: space-between;
	padding: 1.375rem 1.5rem;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--kaart);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--kaart);
	transition: transform 0.25s var(--wp--custom--motion--veer);
}

.sc-stem.wp-block-quote:hover {
	transform: translateY(-4px) rotate(-0.5deg);
}

.sc-stem p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.32;
}

.sc-stem p::before {
	content: "“";
	display: block;
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 0.6;
	color: var(--wp--preset--color--lime);
	margin-bottom: 0.625rem;
}

.sc-stem cite {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.sc-stem cite::before {
	content: "S";
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--lime-wash-2);
	color: var(--wp--preset--color--lime-dark);
	font: 800 0.875rem var(--wp--preset--font-family--display);
}

/* ---------- Zwevende melding naast een productscherm ---------- */
.sc-float {
	position: absolute;
	z-index: 2;
	display: grid;
	grid-template-columns: 2.125rem 1fr;
	column-gap: 0.6875rem;
	align-items: center;
	max-width: 17.5rem;
	margin: 0 !important;
	padding: 0.6875rem 0.9375rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--zwevend);
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	animation: sc-dobber 6s ease-in-out infinite;
}

.sc-float::before {
	content: "";
	grid-row: 1 / span 3;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 10px;
	background: var(--wp--custom--color--ok-licht);
}

.sc-float::after {
	content: "";
	position: absolute;
	left: calc(0.9375rem + 0.5rem);
	top: 50%;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: -0.5625rem;
	background: var(--wp--custom--color--ok);
	-webkit-mask: url("../images/iconen/check.svg") no-repeat center / contain;
	mask: url("../images/iconen/check.svg") no-repeat center / contain;
}

.sc-float strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
}

.sc-float br {
	display: none;
}

.sc-float strong {
	grid-column: 2;
}

.sc-float--peppol::before {
	background: var(--wp--preset--color--lime);
}

.sc-float--peppol::after {
	background: var(--wp--preset--color--on-lime);
	-webkit-mask-image: url("../images/iconen/send.svg");
	mask-image: url("../images/iconen/send.svg");
}

.sc-float--let-op::before {
	background: var(--wp--custom--color--warn-licht);
}

.sc-float--let-op::after {
	background: var(--wp--custom--color--warn);
	-webkit-mask-image: url("../images/iconen/clock.svg");
	mask-image: url("../images/iconen/clock.svg");
}

.sc-float--verzonden::after {
	-webkit-mask-image: url("../images/iconen/send.svg");
	mask-image: url("../images/iconen/send.svg");
}

@keyframes sc-dobber {
	50% { transform: translateY(-8px); }
}

/* ---------- Chips en namen ---------- */
.sc-chips,
.sc-namen,
.sc-systemen {
	list-style: none;
	padding-left: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.sc-chips li {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
}

.sc-namen {
	justify-content: center;
}

.sc-namen li {
	padding: 0.75rem 1.125rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--klein);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
}

.sc-namen .is-hoofd {
	background: var(--wp--preset--color--petrol);
	border-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--base);
}

.sc-namen .is-ai {
	background: var(--wp--preset--color--lime);
	border-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--on-lime);
}

.sc-systemen li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--klein);
	background: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 700;
}

.sc-systemen li::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background: var(--wp--preset--color--petrol);
	-webkit-mask: var(--sc-icoon) no-repeat center / contain;
	mask: var(--sc-icoon) no-repeat center / contain;
}
.sc-ic-send     { --sc-icoon: url("../images/iconen/send.svg"); }
.sc-ic-inbox    { --sc-icoon: url("../images/iconen/inbox.svg"); }
.sc-ic-bank     { --sc-icoon: url("../images/iconen/bank.svg"); }
.sc-ic-qr       { --sc-icoon: url("../images/iconen/qr.svg"); }
.sc-ic-download { --sc-icoon: url("../images/iconen/download.svg"); }
.sc-ic-pen      { --sc-icoon: url("../images/iconen/pen.svg"); }