/* Cenzo Oplossingenvinder – huisstijl Cenzo */
.cov {
	--cov-donker: #2B2E83;
	--cov-helder: #1BB2E3;
	--cov-turquoise: #4BBBB4;
	--cov-groen: #7BBF86;
	--cov-tint-helder: #E4F3FA;
	--cov-tint-turquoise: #DDF3EF;
	--cov-tint-groen: #EAF5EC;
	--cov-sectie: #F2F8FB;
	--cov-tekst: #3A3D5C;
	--cov-r-paneel: 2rem;
	--cov-r-kaart: 1.5rem;
	--cov-r-knop: 5px;
	--cov-r-veld: 8px;
	color: var(--cov-tekst);
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
}
.cov *, .cov *::before, .cov *::after { box-sizing: border-box; }
.cov [hidden] { display: none !important; }
.cov .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Paneel met zoeken en filters ---------- */
.cov-form {
	background: #fff;
	border-radius: var(--cov-r-paneel);
	box-shadow: 0 20px 60px rgba(43, 46, 131, 0.10);
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.cov-kop {
	display: block;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--cov-donker);
	margin: 0 0 0.75rem;
	padding: 0;
}
.cov-groep { border: 0; margin: 0; padding: 0; min-width: 0; }

.cov-zoek__rij { display: flex; gap: 0.5rem; }
.cov-zoek input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 1rem;
	padding: 0.875rem 1rem;
	border: 2px solid #D5E3EC;
	border-radius: var(--cov-r-veld);
	background: #fff;
	color: var(--cov-donker);
}
.cov-zoek input[type="search"]:focus { outline: none; border-color: var(--cov-helder); box-shadow: 0 0 0 3px rgba(27, 178, 227, 0.2); }
.cov-zoek__knop, .cov-knop {
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	border: 0;
	cursor: pointer;
	border-radius: var(--cov-r-knop);
	background: var(--cov-helder);
	color: #fff;
	padding: 0.875rem 1.5rem;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
	transition: background-color 0.2s;
}
.cov-zoek__knop:hover, .cov-knop:hover { background: var(--cov-donker); color: #fff; }
.cov-knop--lijn { background: transparent; color: var(--cov-donker); box-shadow: inset 0 0 0 2px var(--cov-donker); }
.cov-knop--lijn:hover { background: var(--cov-donker); color: #fff; }

/* Thema's als aanvinkbare knoppen */
.cov-vinkjes { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.cov-vink { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.cov-vink input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cov-vink span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	border: 2px solid #D5E3EC;
	border-radius: 999px;
	background: #fff;
	color: var(--cov-donker);
	font-size: 0.9375rem;
	line-height: 1.3;
	transition: border-color 0.2s, background-color 0.2s;
}
.cov-vink span::before {
	content: "";
	width: 1rem; height: 1rem; flex: 0 0 1rem;
	border: 2px solid #B8CBD8;
	border-radius: 4px;
	background: #fff center / 0.7rem no-repeat;
}
.cov-vink:hover span { border-color: var(--cov-helder); }
.cov-vink input:checked + span { border-color: var(--cov-helder); background: var(--cov-tint-helder); }
.cov-vink input:checked + span::before {
	border-color: var(--cov-helder);
	background-color: var(--cov-helder);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.cov-vink input:focus-visible + span { outline: 3px solid rgba(27, 178, 227, 0.4); outline-offset: 2px; }
.cov-vink--klein span { padding: 0.4rem 0.8rem; font-size: 0.875rem; }

/* Fases als drie grote knoppen */
.cov-fasekeuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cov-fase {
	--kleur: var(--cov-helder);
	--tint: var(--cov-tint-helder);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 1.25rem 1.25rem 1.25rem 1.5rem;
	border: 2px solid #D5E3EC;
	border-radius: var(--cov-r-kaart);
	cursor: pointer;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s, background-color 0.2s;
}
.cov-fase::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--kleur); }
.cov-fase--groei { --kleur: var(--cov-groen); --tint: var(--cov-tint-groen); }
.cov-fase--veerkracht { --kleur: var(--cov-turquoise); --tint: var(--cov-tint-turquoise); }
.cov-fase--herstel { --kleur: var(--cov-helder); --tint: var(--cov-tint-helder); }
.cov-fase input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cov-fase__naam { font-weight: 700; font-size: 1.25rem; color: var(--cov-donker); }
.cov-fase__term { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7090; }
.cov-fase__uitleg { font-size: 0.9375rem; line-height: 1.45; margin-top: 0.375rem; }
.cov-fase:hover { border-color: var(--kleur); }
.cov-fase:has(input:checked) { border-color: var(--kleur); background: var(--tint); }
.cov-fase:has(input:focus-visible) { outline: 3px solid rgba(27, 178, 227, 0.4); outline-offset: 2px; }

/* Meer filters */
.cov-meer { border-top: 1px solid #E3ECF2; padding-top: 1.25rem; }
.cov-meer summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cov-donker);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.cov-meer summary::-webkit-details-marker { display: none; }
.cov-meer summary::after {
	content: "";
	width: 0.5rem; height: 0.5rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s;
}
.cov-meer[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.cov-meer__teller { color: var(--cov-helder); }
.cov-meer__groepen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 1.25rem;
}
.cov-meer__groepen legend { font-weight: 600; color: var(--cov-donker); margin-bottom: 0.5rem; font-size: 0.9375rem; }
.cov-meer__groepen .cov-groep { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.cov-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cov-aantal { margin: 0; font-weight: 600; color: var(--cov-donker); }
.cov-wis { color: var(--cov-helder); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cov-wis:hover { color: var(--cov-donker); }

/* ---------- Resultaten ---------- */
.cov-resultaten { display: flex; flex-direction: column; gap: 1.5rem; }
.cov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

.cov-tegel {
	--strip: var(--cov-helder);
	--tint: var(--cov-tint-helder);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #fff;
	border-radius: var(--cov-r-kaart);
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 10px 30px rgba(43, 46, 131, 0.08);
	overflow: hidden;
	transition: transform 0.25s, box-shadow 0.25s;
}
.cov-tegel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--strip); }
.cov-tegel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(43, 46, 131, 0.14); }
.cov-tegel--individuele-begeleiding { --strip: var(--cov-turquoise); --tint: var(--cov-tint-turquoise); }
.cov-tegel--trainingen { --strip: var(--cov-groen); --tint: var(--cov-tint-groen); }

.cov-tegel__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cov-chip {
	display: inline-block;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--tint, var(--cov-tint-helder));
	color: var(--cov-donker);
}
.cov-chip--donker { background: var(--cov-donker); color: #fff; }
.cov-chip--chapeau { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cov-donker); }
.cov-chip--wit { background: rgba(255, 255, 255, 0.18); color: #fff; }

.cov-tegel__naam { margin: 0.25rem 0 0; font-size: 1.375rem; line-height: 1.25; color: var(--cov-donker); }
.cov-tegel__naam a { color: inherit; text-decoration: none; }
.cov-tegel__naam a:hover { color: var(--cov-helder); }
.cov-tegel__tekst { margin: 0; line-height: 1.6; flex: 1 1 auto; }
.cov-tegel__voor, .cov-tegel__door { margin: 0; font-size: 0.875rem; line-height: 1.4; }
.cov-tegel__door { font-weight: 600; color: var(--cov-donker); }
.cov-tegel__link { font-weight: 600; color: var(--cov-helder); text-decoration: none; align-self: flex-start; }
.cov-tegel__link:hover { color: var(--cov-donker); }

/* Fasemeter */
.cov-meter { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem 0; border-top: 1px solid #EEF3F6; border-bottom: 1px solid #EEF3F6; }
.cov-meter__rij { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 0.75rem; font-size: 0.8125rem; opacity: 0.85; }
.cov-meter__naam { color: var(--cov-donker); }
.cov-meter__balk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 7rem; }
.cov-meter__balk i { display: block; height: 6px; border-radius: 3px; background: #E3ECF2; }
.cov-meter__rij--groei .aan { background: var(--cov-groen); }
.cov-meter__rij--veerkracht .aan { background: var(--cov-turquoise); }
.cov-meter__rij--herstel .aan { background: var(--cov-helder); }
.cov[data-fase="groei"] .cov-meter__rij--groei,
.cov[data-fase="veerkracht"] .cov-meter__rij--veerkracht,
.cov[data-fase="herstel"] .cov-meter__rij--herstel { opacity: 1; font-weight: 700; }
.cov[data-fase]:not([data-fase=""]) .cov-meter__rij { opacity: 0.55; }
.cov[data-fase="groei"] .cov-meter__rij--groei,
.cov[data-fase="veerkracht"] .cov-meter__rij--veerkracht,
.cov[data-fase="herstel"] .cov-meter__rij--herstel { opacity: 1; }

/* CHAPEAU-pakkettegel */
.cov-pakket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem 2.5rem;
	border-radius: var(--cov-r-kaart);
	background: linear-gradient(135deg, #2B2E83 0%, #1F5FA8 60%, #1BB2E3 100%);
	color: #fff;
	box-shadow: 0 20px 50px rgba(43, 46, 131, 0.25);
}
.cov-pakket__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.cov-pakket__titel { margin: 0.25rem 0 0; color: #fff; font-size: 1.75rem; letter-spacing: 0.02em; }
.cov-pakket p { margin: 0; color: rgba(255, 255, 255, 0.9); }
.cov-pakket__fases { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; font-weight: 600; }
.cov-pakket__fases li { display: inline-flex; align-items: center; gap: 0.5rem; }
.cov-pakket__fases li + li::before { content: "→"; opacity: 0.7; }
.cov-pakket .cov-knop { background: #fff; color: var(--cov-donker); white-space: nowrap; }
.cov-pakket .cov-knop:hover { background: var(--cov-tint-helder); color: var(--cov-donker); }

.cov-leeg { margin: 0; padding: 2rem; text-align: center; background: var(--cov-sectie); border-radius: var(--cov-r-kaart); }

.cov-twijfel {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
	padding: 1.5rem 2rem; border-radius: var(--cov-r-kaart);
	background: linear-gradient(135deg, #E3F4FB 0%, #DDF3EF 100%);
}
.cov-twijfel p { margin: 0; font-weight: 600; color: var(--cov-donker); }

/* ---------- Themapagina ---------- */
.cov-themapagina__kop { background: var(--cov-tint-helder, #E4F3FA); padding: 6rem 1.5rem 4rem; }
.cov-themapagina__inhoud { background: #F2F8FB; padding: 4rem 1.5rem 6rem; }
.cov-themapagina__inner { max-width: 80rem; margin: 0 auto; }
.cov-themapagina__titel { color: #2B2E83; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; margin: 0.75rem 0 1rem; max-width: 50rem; }
.cov-themapagina__intro { max-width: 42rem; font-size: 1.125rem; line-height: 1.7; }
.cov-kruimel { font-size: 0.9375rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cov-kruimel a { color: #1BB2E3; font-weight: 600; text-decoration: none; }
.cov-themapagina__verder { margin: 2.5rem 0 0; }
.cov-themapagina__verder .cov-knop { font: inherit; font-weight: 600; border-radius: 5px; background: #1BB2E3; color: #fff; padding: 0.875rem 1.5rem; text-decoration: none; display: inline-block; }
.cov-themapagina__verder .cov-knop:hover { background: #2B2E83; }

/* ---------- Tablet en mobiel ---------- */
@media (max-width: 1024px) {
	.cov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cov-meer__groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cov-form { padding: 2rem; }
}
@media (max-width: 767px) {
	.cov-grid, .cov-fasekeuze, .cov-meer__groepen { grid-template-columns: 1fr; }
	.cov-form { padding: 1.5rem; border-radius: var(--cov-r-kaart); }
	.cov-fase { padding: 1rem 1rem 1rem 1.25rem; }
	.cov-pakket { flex-direction: column; align-items: flex-start; padding: 1.75rem; }
	.cov-zoek__knop { padding: 0.875rem 1rem; }
	.cov-themapagina__kop { padding: 4rem 1.25rem 3rem; }
	.cov-themapagina__inhoud { padding: 3rem 1.25rem 4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.cov-tegel, .cov-tegel:hover { transition: none; transform: none; }
}
