/* Filters in de groeiboeken (groeiboek2024): onder de inhoudsopgave. Zie src/js/groeiboek-filters.js. */

/* het oude filterpaneel en de knoppen ervoor zijn vervangen */
body.gbf-on .groeiboek-filter,
body.gbf-on .groeiboek-filter-mobile,
body.gbf-on .filterWrapper { display: none !important; }
/* de mobiele kopbalk hoort niet op desktop (groeiboek-quiz-2024.css zet elke .active op display:block) */
@media (min-width: 1024px) {
	body.gbf-on .header-box-mobile2, .gbf-balk { display: none !important; }
}
/* Desktop: de linkerkolom als kolom met de inhoudsopgave bovenin (scrolt zelf) en de filters vast onderaan.
   Zo verschuift het filterblok niet als de inhoudsopgave een hoofdstuk open- of dichtklapt. */
@media (min-width: 1024px) {
	body.gbf-on #groeiboek-left { display: flex; flex-direction: column; overflow: hidden; }
	body.gbf-on #groeiboek-left > .header__index { flex: 1 1 auto; min-height: 80px; overflow-y: auto; }
	body.gbf-on #groeiboek-left > .gbf { flex: 0 0 auto; position: relative; bottom: auto; box-shadow: none; }
}
/* tijdens Spelen (quiz) hoort de linkerkolom bij de quiz */
body.qg-spelen .gbf, body.qg-spelen .gbf-balk { display: none !important; }

.gbf {
	--gbf-ink: rgba(0, 0, 0, .78);
	--gbf-mid: rgba(0, 0, 0, .56);
	--gbf-zacht: rgba(0, 0, 0, .42);
	--gbf-lijn: #e1e5dc;
	--gbf-stip: 26px;
	position: sticky; bottom: 0; z-index: 2;
	/* even breed als de inhoudsopgave: de kolom is fixed zonder breedte en zou anders meegroeien met een lange regel */
	width: 340px; max-width: calc(100% - 53px);
	margin: 6px 13px 0 40px; padding: 14px 0 12px;
	background: #fff; border-top: 1px solid rgba(0, 0, 0, .1);
	box-shadow: 0 -12px 14px -12px rgba(0, 0, 0, .12);
	font: 400 13px/1.4 'Open Sans', Arial, sans-serif; color: var(--gbf-ink);
	box-sizing: border-box;
}
.gbf *, .gbf *::before, .gbf *::after { box-sizing: border-box; }
.gbf[hidden] { display: none !important; }
.gbf button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.gbf p { margin: 0; padding: 0; }

.gbf-kop { font: 700 10.5px/1 'Open Sans', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gbf-zacht); margin: 0 0 6px !important; }

/* een groep: label, lijn met iconen, pijl naar de lijst */
.gbf-groep { padding: 4px 8px 5px; margin: 0 -8px 2px; border: 1px solid transparent; border-radius: 10px; transition: border-color .15s ease; }
.gbf-groep.is-open { background: #fff; border-color: rgba(0, 0, 0, .12); }
.gbf-rij { display: flex; align-items: center; gap: 10px; }
.gbf-label { flex: 0 0 38px; font-weight: 700; font-size: 13.5px; color: var(--gbf-ink); }
.gbf--stapel .gbf-rij { flex-wrap: wrap; }
.gbf--stapel .gbf-label { flex: 1 1 100%; font-size: 12.5px; margin-bottom: 2px; }
.gbf--zonderlabel .gbf-groep { padding-top: 5px; padding-bottom: 5px; }
.gbf-lijn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.gbf-verbind { flex: 0 0 var(--gbf-gap, 8px); height: 2px; border-radius: 2px; background: var(--gbf-lijn); transition: background-color .2s ease; }
.gbf-verbind.is-on { background: var(--gbf-c); opacity: .55; }
.gbf-open { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 6px !important; display: inline-flex !important; align-items: center; justify-content: center; }
.gbf-open span { width: 7px; height: 7px; border-right: 1.6px solid var(--gbf-mid); border-bottom: 1.6px solid var(--gbf-mid); transform: rotate(-45deg); transition: transform .2s ease; }
.gbf-open[aria-expanded="true"] span { transform: rotate(45deg); margin-top: -3px; }
.gbf-open:hover { background: #f5f6f3 !important; }
.gbf-keuze { margin: 4px 0 0 !important; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: color-mix(in srgb, var(--gbf-c) 62%, #000); white-space: normal; }
.gbf-keuze.is-leeg { display: none; }
/* namen alleen in ingeklapte stand: zo verspringt er niets terwijl je in de lijst kiest */
.gbf-groep.is-open .gbf-keuze { display: none; }
.gbf-naam { white-space: nowrap; }
.gbf-naam:not(:last-child)::after { content: " ·"; font-weight: 400; color: color-mix(in srgb, var(--gbf-c) 45%, #fff); }

/* een filter op de lijn */
.gbf-stip {
	/* mag iets krimpen als een groep veel filters heeft en het scherm smal is */
	position: relative; flex: 0 0 var(--gbf-stip-w, var(--gbf-stip)); width: var(--gbf-stip-w, var(--gbf-stip)); height: auto; aspect-ratio: 1 / 1;
	display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gbf-stip i { font-size: 11.5px; line-height: 1; }
.gbf-stip img { width: 13px; height: 13px; object-fit: contain; }
.gbf-letter { font-weight: 700; font-size: 11px; }
.gbf-stip:focus-visible, .gbf-open:focus-visible, .gbf-wis:focus-visible { outline: 2px solid var(--gbf-c, #81a208); outline-offset: 2px; }
.gbf-optie:focus-visible { outline: 2px solid color-mix(in srgb, var(--gbf-fc) 55%, transparent); outline-offset: -2px; }
/* doodlopend door de huidige keuze: gestippeld, zodat het leest als "niet beschikbaar" */
.gbf .gbf-stip.is-leeg { border-style: dashed !important; opacity: .55; }

/* Uit: grijze ring en grijs icoon. Aan: gevuld in de filterkleur met wit icoon. */
.gbf .gbf-stip { background: #fff !important; border: 1.5px solid #d3d7cf !important; color: #8e948a; }
.gbf-stip img { filter: grayscale(1) opacity(.6); }
.gbf-stip:hover { border-color: var(--gbf-fc) !important; color: var(--gbf-fc); transform: scale(1.08); }
.gbf-stip:hover img { filter: none; }
.gbf-stip.is-on { background: var(--gbf-fc) !important; border-color: var(--gbf-fc) !important; color: #fff; box-shadow: 0 2px 7px color-mix(in srgb, var(--gbf-fc) 40%, transparent); }
.gbf-stip.is-on img { filter: brightness(0) invert(1); }

/* naam bij aanwijzen */
.gbf-tip {
	position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 3px); z-index: 5;
	white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease;
	font: 600 12px/1 'Open Sans', Arial, sans-serif; color: #fff; background: rgba(20, 24, 16, .88); padding: 6px 8px; border-radius: 6px;
}
.gbf-stip:hover .gbf-tip, .gbf-stip:focus-visible .gbf-tip { opacity: 1; transform: translate(-50%, 0); }
.gbf-lijn .gbf-stip:first-child .gbf-tip { left: 0; transform: translate(-4px, 3px); }
.gbf-lijn .gbf-stip:first-child:hover .gbf-tip, .gbf-lijn .gbf-stip:first-child:focus-visible .gbf-tip { transform: translate(-4px, 0); }
.gbf-lijn .gbf-stip:last-child .gbf-tip { left: auto; right: 0; transform: translate(4px, 3px); }
.gbf-lijn .gbf-stip:last-child:hover .gbf-tip, .gbf-lijn .gbf-stip:last-child:focus-visible .gbf-tip { transform: translate(4px, 0); }

/* de groep als lijst */
.gbf-lijst { list-style: none !important; margin: 8px 0 2px !important; padding: 0 !important; }
.gbf-lijst li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gbf-lijst li::before { display: none !important; }
.gbf-optie { width: 100%; display: flex !important; align-items: center; gap: 9px; padding: 5px 6px !important; border-radius: 7px !important; text-align: left; }
.gbf-optie:hover { background: #f5f6f3 !important; }
/* gekozen: zachte tint in de filterkleur */
.gbf-optie.is-on { background: color-mix(in srgb, var(--gbf-fc) 11%, #fff) !important; }
.gbf-optie.is-on:hover { background: color-mix(in srgb, var(--gbf-fc) 17%, #fff) !important; }

/* desktop: de lijst als uitklapkaart onder de regel, over de rest heen */
.gbf-groep.is-zweef { border-bottom-color: transparent; border-radius: 10px 10px 0 0; }
.gbf-lijst.gbf-lijst--zweef {
	position: fixed; z-index: 10002; margin: 0 !important; padding: 2px 8px 8px !important; overflow-y: auto;
	background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-top: 0; border-radius: 0 0 10px 10px;
	box-shadow: 0 16px 30px rgba(15, 23, 42, .14); box-sizing: border-box;
	animation: gbf-zak .18s ease-out;
}
@keyframes gbf-zak { from { opacity: 0; transform: translateY(-6px); } }
/* onderaan het scherm opent de kaart naar boven */
.gbf-groep.is-zweef.is-boven { border-bottom-color: rgba(0, 0, 0, .12); border-top-color: transparent; border-radius: 0 0 10px 10px; }
.gbf-lijst.gbf-lijst--zweef.is-boven { border-top: 1px solid rgba(0, 0, 0, .12); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -16px 30px rgba(15, 23, 42, .12); animation-name: gbf-stijg; padding: 8px 8px 2px !important; }
@keyframes gbf-stijg { from { opacity: 0; transform: translateY(6px); } }
/* zolang de kaart open is ligt de linkerkolom boven "Alle groeiboeken" en de tekst */
body.gbf-kaart-open #groeiboek-left { z-index: 10002; }
.gbf-vink { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #c9cec4; background: #fff center / 11px no-repeat; }
.gbf-optie.is-on .gbf-vink {
	background-color: var(--gbf-fc); border-color: var(--gbf-fc);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.gbf-optie__ic { flex: 0 0 18px; text-align: center; color: var(--gbf-fc); font-size: 13px; }
.gbf-optie__ic img { width: 14px; height: 14px; object-fit: contain; }
.gbf-optie__naam { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--gbf-ink); }
.gbf-optie.is-on .gbf-optie__naam { font-weight: 700; }
.gbf-optie__n { flex: 0 0 auto; font-size: 12px; color: var(--gbf-zacht); }
.gbf-optie.is-leeg { opacity: .45; }

/* aantal en wissen */
.gbf-tel { margin: 8px 0 0 !important; font-size: 13px; color: var(--gbf-mid); }
.gbf-tel b { color: var(--gbf-ink); }
.gbf-hint { color: var(--gbf-zacht); font-size: 12.5px; }
.gbf-wis { color: #81a208 !important; font-weight: 700 !important; }
.gbf-wis:hover { text-decoration: underline; }

/* inhoudsopgave: wat er per hoofdstuk past */
#tableOfContent > li { position: relative; }
#tableOfContent > li > .gbf-toc-n {
	position: absolute; right: 26px; top: 1px; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font: 700 11px/1 'Open Sans', Arial, sans-serif; color: #6f8c07; background: #eef6d8;
}
#tableOfContent > li.gbf-toc-uit > a { color: #aaa !important; }
#tableOfContent > li.gbf-toc-uit > .toc-button { opacity: .4; }

/* mobiel: balk onder de kop met wat er aan staat */
.gbf-balk { display: flex; align-items: center; gap: 10px; padding: 6px 16px 8px; border-top: 1px solid rgba(0, 0, 0, .06); background: #fff; }
.gbf-balk[hidden] { display: none !important; }
.gbf-balk button { font: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.gbf-balk__open { flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 4px; min-height: 36px; overflow: hidden; }
.gbf-balk__stip { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gbf-fc); color: #fff; font-size: 11px; }
.gbf-balk__stip img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.gbf-balk__tel { margin-left: 8px; font: 400 13px/1.2 'Open Sans', Arial, sans-serif; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.gbf-balk__tel b { color: rgba(0, 0, 0, .82); }
.gbf-balk .gbf-wis { font: 700 13px/1 'Open Sans', Arial, sans-serif; color: #81a208; min-height: 36px; padding: 0 2px; }

@media (max-width: 1023px) {
	.gbf { position: static; width: auto; max-width: none; margin: 8px 20px 0; padding: 16px 0 22px; }
	.gbf { --gbf-stip: 32px; }
	.gbf-rij { gap: 6px; }
	.gbf-stip i { font-size: 13px; }
	.gbf-label { flex-basis: 40px; }
	.gbf-optie { min-height: 40px; }
	.gbf-open { flex-basis: 34px; width: 34px; height: 36px; }
	#tableOfContent > li > .gbf-toc-n { right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.gbf-stip, .gbf-verbind, .gbf-open span, .gbf-tip, .gbf-groep { transition: none; }
	.gbf-lijst.gbf-lijst--zweef { animation: none; }
	.gbf-stip:hover { transform: none; }
}