/* ZG Hero Keuzemenu — huisstijl ZakelijkGroeien.nl */

.zg-keuzemenu {
	--zg-primair: #184848;
	--zg-primair-donker: #0F3535;
	--zg-accent-1: #FB4B42;
	--zg-accent-1-donker: #C13730;
	--zg-accent-3: #21A548;
	--zg-pastel-1: #F8F5EE;
	--zg-wit: #FFFFFF;
	--zg-zwart: #202020;
	--zg-grijs: #565656;
	--zg-licht-grijs: #D8D8D8;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	color: var(--zg-grijs);
}

.zg-keuzemenu * {
	box-sizing: border-box;
}

/* Vraag boven de kaarten (alleen op vervolgstappen) */
.zg-keuzemenu__question {
	font-family: 'Lora', Georgia, serif;
	font-weight: 500;
	font-size: 25px;
	line-height: 1.3;
	color: var(--zg-zwart);
	margin: 0 0 24px;
}

/* Kaarten-grid */
.zg-keuzemenu__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
}

/* Kaart */
.zg-keuzemenu__card {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	flex: 1 1 260px;
	padding: 20px 24px;
	background: var(--zg-primair);
	border: 1px solid var(--zg-primair);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(32, 32, 32, 0.06);
	font-family: inherit;
	font-size: 16px;
	color: var(--zg-wit);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.zg-keuzemenu__card:hover,
.zg-keuzemenu__card:focus-visible {
	background: var(--zg-primair-donker);
	border-color: var(--zg-primair-donker);
	box-shadow: 0 8px 24px rgba(24, 72, 72, 0.30);
	transform: translateY(-2px);
}

.zg-keuzemenu__card:focus-visible {
	outline: 2px solid var(--zg-primair-donker);
	outline-offset: 2px;
}

/* Kop van de kaart: icoon boven de titel, pijl rechts van de titel */
.zg-keuzemenu__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
	row-gap: 10px;
	width: 100%;
}

.zg-keuzemenu__icon {
	display: flex;
	align-items: center;
	flex-basis: 100%;
	flex-shrink: 0;
}

.zg-keuzemenu__icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--zg-wit);
	display: block;
}

.zg-keuzemenu__label {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--zg-wit);
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
}

/* Pijl rechts in de kop */
.zg-keuzemenu__arrow {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding-left: 12px;
	flex-shrink: 0;
	align-self: center;
}

.zg-keuzemenu__arrow svg {
	width: 24px;
	height: 18px;
	stroke: var(--zg-wit);
	display: block;
	transition: transform 0.2s ease;
}

.zg-keuzemenu__card:hover .zg-keuzemenu__arrow svg,
.zg-keuzemenu__card:focus-visible .zg-keuzemenu__arrow svg {
	transform: translateX(5px);
}

/* Beschrijving onder de kop */
.zg-keuzemenu__sub {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

/* Minder prominente kaart (volledige breedte) */
.zg-keuzemenu__card--muted {
	flex: 1 1 100%;
	background: #F5F5F2;
	border-color: #E4E4E4;
	box-shadow: none;
	padding: 20px 32px;
	gap: 4px;
}

.zg-keuzemenu__card--muted .zg-keuzemenu__label {
	font-weight: 500;
	font-size: 17px;
	color: var(--zg-grijs);
}

.zg-keuzemenu__card--muted .zg-keuzemenu__icon {
	flex-basis: auto;
}

.zg-keuzemenu__card--muted .zg-keuzemenu__icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--zg-grijs);
}

.zg-keuzemenu__card--muted .zg-keuzemenu__sub {
	font-size: 14px;
	padding-left: 36px;
	color: var(--zg-grijs);
}

.zg-keuzemenu__card--muted .zg-keuzemenu__arrow svg {
	stroke: var(--zg-grijs);
}

.zg-keuzemenu__card--muted:hover,
.zg-keuzemenu__card--muted:focus-visible {
	background: var(--zg-wit);
	transform: none;
	box-shadow: 0 4px 14px rgba(24, 72, 72, 0.08);
}

.zg-keuzemenu__card--muted:hover .zg-keuzemenu__label,
.zg-keuzemenu__card--muted:focus-visible .zg-keuzemenu__label {
	color: var(--zg-zwart);
}

.zg-keuzemenu__card--muted:hover .zg-keuzemenu__arrow svg,
.zg-keuzemenu__card--muted:focus-visible .zg-keuzemenu__arrow svg {
	stroke: var(--zg-zwart);
}

/* Terug-knop */
.zg-keuzemenu__back {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 8px 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--zg-grijs);
	cursor: pointer;
	transition: color 0.2s ease;
}

.zg-keuzemenu__back:hover,
.zg-keuzemenu__back:focus-visible {
	color: var(--zg-primair);
}

.zg-keuzemenu__back svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	display: block;
}

/* Fade-in animatie bij stapwissel */
.zg-keuzemenu__step {
	animation: zg-keuzemenu-fade 0.3s ease both;
}

@keyframes zg-keuzemenu-fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zg-keuzemenu__step {
		animation: none;
	}
	.zg-keuzemenu__card,
	.zg-keuzemenu__icon svg {
		transition: none;
	}
}

/* Responsive */
@media (max-width: 767px) {
	.zg-keuzemenu__grid {
		gap: 16px;
	}

	.zg-keuzemenu__card {
		flex-basis: 100%;
		padding: 20px 24px;
		gap: 8px;
	}

	.zg-keuzemenu__icon svg {
		width: 24px;
		height: 24px;
	}

	.zg-keuzemenu__label {
		font-size: 18px;
	}

	.zg-keuzemenu__sub {
		font-size: 15px;
	}

	.zg-keuzemenu__question {
		font-size: 20px;
	}
}