/* ==========================================================================
   Generieke knoppen (.svv-btn) en pijl-/tekstlinks (.svv-link).
   Eén bron voor alle knopstijlen, met uniforme hovers.
   ========================================================================== */

/* ---------------- Solide knoppen ---------------- */
.svv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.svv-btn__icon { display: inline-flex; }
.svv-btn__icon svg { width: 20px; height: 20px; display: block; }

.svv-btn--blauw { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.svv-btn--blauw:hover { background-color: var(--wp--preset--color--primary-dark); }

.svv-btn--rood { background-color: var(--wp--preset--color--accent-red); color: var(--wp--preset--color--white); }
.svv-btn--rood:hover { background-color: #8f1b00; }

.svv-btn--grijs { background-color: var(--wp--preset--color--gray-light); color: var(--wp--preset--color--primary); }
.svv-btn--grijs:hover { background-color: var(--wp--preset--color--gray-lighter); }

.svv-btn--geel { background-color: var(--wp--preset--color--accent-yellow); color: var(--wp--preset--color--primary-dark); }
.svv-btn--geel:hover { filter: brightness(0.94); }

.svv-btn--wit { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); }
.svv-btn--wit:hover { filter: brightness(0.94); }

/* Outline — bedoeld voor donkere achtergronden. */
.svv-btn--outline {
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--wp--preset--color--white);
}
.svv-btn--outline:hover { background-color: rgba(255, 255, 255, 0.22); }

/* ---------------- Pijl-/tekstlinks ---------------- */
.svv-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.svv-link__arrow { display: inline-flex; align-items: center; transition: transform 0.15s ease; }
.svv-link__arrow svg { width: 18px; height: 18px; display: block; }
.svv-link:hover { color: var(--wp--preset--color--primary-bright); }
.svv-link:hover .svv-link__arrow { transform: translateX(3px); }

.svv-link--rood { color: var(--wp--preset--color--accent-red); }
.svv-link--rood:hover { color: #8f1b00; }

.svv-link--light { color: var(--wp--preset--color--white); }
.svv-link--light:hover { color: rgba(255, 255, 255, 0.85); }