/*
 *
 * Theme main styles
 */

html,
body {
	background-color: var(--z-body-bg);
	color: var(--z-body-text);
}


h1 em,
h2 em,
h3 em {
	font-style: normal;
	color: var(--z-color-primary);
}
del,
del a {
	color: var(--z-color-deleted-text) !important;
}

p + a.button,
p + button {
	margin-top: 2rem;
}

/*
 * Readmore
 * ======================================================== */
 .readmore-box {
	padding-top: 4rem;
	padding-bottom: 0;
}







/*
 * idee voor omlijning van items
 * <svg viewBox="0 0 603 239" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path pathLength="100" vector-effect="non-scaling-stroke" d="M538.849 50.948C421.88 21.889 80.689-4.55 9.821 114.736c-38.538 109.421 181.184 85.605 222.992 87.73 30.995 1.576 350.28-16.47 362.292-69.377 14.613-64.36-146-74.373-175.866-76.657" stroke="#2D2D2D" stroke-linecap="round" stroke-linejoin="round" style="stroke-dasharray: 100px, 0px;"></path></svg>
 *  Een svg om een "highlighted" woord heen ;))
 *
 */





/*
 * Article question header
 * ======================================================== */

article.page-question > header {
	display: grid;
	grid-template-rows: max-content max-content max-content max-content max-content;
	grid-template-columns: 1fr;
}
article.page-question > header > * {
	margin-top: 0;
	margin-bottom: 0;
}
article.page-question > header h1 {
	grid-column: 1;
	grid-row: 4;
	font-size: 1.5rem;
	color: var(--z-body-text-20pct); /* #b8b8b8 */
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}
article.page-question > header h1 label:not(:has(input)) {
	/* fixing the default style for labels */
	font-size: 1.4rem;
}
article.page-question > header .meta.meta-theme {
	grid-column: 1;
	grid-row: 2;
	font-size: 2.4rem;
	color: var(--z-color-secondary);
	font-weight: 763000;
}
article.page-question > header .meta-theme-label {
	display: block;
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.15rem;
}
article.page-question > header h1 .current,
article.page-question > header h1 .current em {
	font-style: normal;
	font-weight: 630;
	color: var(--z-body-text-60pct); /* #2B2E31 */
}
article.page-question > header .meta.meta-topic {
	grid-column: 1;
	grid-row: 3;
	font-size: 2rem;
	color:var(--z-body-text-60pct); /*  #79828C */
	font-weight: 500;
	margin-bottom: 4rem;
}
article.page-question > header h2 {
	grid-column: 1;
	grid-row: 5;
	font-size: 2.3rem;
	color: var(--z-color-primary);
	font-weight: 600;
	text-transform: none;
	margin-bottom: 1.5rem;
	letter-spacing: 0.05rem;
}

/*
 * Page advice
 * ======================================================== */
article.page-advice > header {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: max-content max-content;
}
article.page-advice > header h2 {
	grid-column: 1;
	grid-row: 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: max-content max-content;
}
article.page-advice > header a.back-link {
	grid-column: 1;
	grid-row: 1;
}
article.page-advice > header h2 em {
	grid-column: 1;
	grid-row: 2;
	color: inherit;
}
article.page-advice > header h2 span {
	grid-column: 1;
	grid-row: 1;
	letter-spacing: 0.15rem;
}
article.page-advice h3 {
	font-style: italic;
}
article.page-advice h4 {
	margin-bottom: 0;
	font-weight: 600;
	letter-spacing: 0.15rem;
	font-size: 2rem;
}
article.page-advice h4.tips:before,
article.page-advice h4.more-info:before {
	font-family: var(--z-font-icon);
	display: inline-block;
	padding-right: var(--z-padding-default);
	font-size: 90%;
	font-weight: 400;
	opacity: 0.35;
}
article.page-advice h4.tips:before {
	content: "\f672";
}
article.page-advice h4.more-info:before {
	content: "\f02e";
}



article.page-advice a.back-link {
	margin-bottom: calc(2 * var(--z-default-gap));
	position: relative;
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.15rem;
	text-decoration: none;
}
article.page-advice a.back-link.last {
	margin-top: calc(2 * var(--z-default-gap));
}
article.page-advice a.back-link:before {
	content: "\f177";
	font-family: var(--z-font-icon);
	position: absolute;
	width: max-content;
	transform: translateX(-100%);
	padding-right: calc(var(--z-padding-default)/2);
	font-size: 90%;
}


/*
 * Details - harmonica
 * ======================================================== */
details {
	padding: 0 1rem;
	border-bottom: 1px solid #d2cdb7;
}
details:first-of-type {
	border-top: 1px solid #d2cdb7;
}
details[open] {
	padding-bottom: 2rem;
}
details[open] > summary {
	border-bottom: 1px dashed #d2cdb7;
	margin-bottom: 2rem;
}
details summary { 
	cursor: pointer;
}  
details summary > * {
	display: inline;
}
summary  {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
summary h3 {
	margin: 0;
}
/* sigh, Safari again */
summary::-webkit-details-marker {
	display: none;
}
summary::after {
	content: "+";
	font-size: 3rem;
	font-weight: 300;
}
details[open] > summary::after {
	content: "-";
}

ul.details-list {
	--z-color-bg-details: #E5EDF6;
	--z-color-border-details: #a0bdde;
	list-style: none;
	padding-left: 0;
	gap: 0;
	width: calc(100% + 4rem);
	margin-left: -2rem;
}
ul.details-list li {
	padding-left: 0;
}
ul.details-list details {
	position: relative;
	transition: all 250ms ease-in-out;
	padding: 2rem;
	border: 1px solid var(--z-color-border-details);
	border-bottom: none;
	background: var(--z-color-bg-details);
}
ul.details-list details:not([open]):hover,
ul.details-list details:has(summary:focus) {
	transform: scale(1.01);
	z-index: 2;
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
	border-bottom: 1px solid var(--z-color-border-details);
}
ul.details-list li:first-of-type details {
	border-radius: 1rem 1rem 0 0;
}
ul.details-list li:last-of-type details {
	border-radius: 0 0 1rem 1rem;
	border-bottom: 1px solid var(--z-color-border-details);
}
.details-list summary {
	font-size: 2.2rem;
}
.details-list summary > span {
	position: relative;
}
.details-list summary strong {
	display: block;
	font-family: var(--z-font-secondary);
	font-size: 2.4rem;
	text-transform: uppercase;
}
.details-list details[open] summary {
	padding-bottom: 1rem;
	color: var(--z-base-text-color-75);
	border-bottom: 1px dashed var(--z-color-border-details);
	margin-bottom: 2rem;
}
.details-list details[open] summary  strong {
	color: var(--z-base-text-color);
}
.details-list summary > span {
	position: relative;
}
.details-list summary > span .icon {
	position: absolute;
	top: 0rem;
	left: 0;
	width: 7rem;
	height: auto;
	transition: all 250ms ease-in-out;
	transform-origin: right center;
	transform: translateX(-10rem) scale(0.8);
	opacity: 0.75;
}
.details-list summary > span .icon svg path {
	fill: var(--z-color-border-details);
}
.details-list summary > span .icon svg path:first-of-type {
	fill: var(--z-color-bg-details);
	opacity: 0;
}
.details-list details[open] summary > span .icon,
.details-list details:hover summary > span .icon,
.details-list details:focus summary > span .icon {
	transform: translateX(-9.2rem) scale(1.2);
	opacity: 1;
}




main ul,
main ol {
	list-style-type: square;
	list-style-position: outside;
	padding-left: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
main ol {
	list-style-type: decimal;
}
main ul li,
main ol li {
	padding-left: 1rem;
	margin-bottom: 0;
}
main ol > li::marker {
	font-weight: 600;
}

main {
	padding-top: 20rem;
	padding-bottom: 6rem;
	position: relative;
}
@media only screen and (max-width: 900px) {
	main {
		padding-top: 18rem;
	}
}
@media only screen and (max-width: 550px) {
	main {
		padding-top: 16rem;
	}
}
.has-hero main {
	padding-top: 0;
}

.entry-content {
	padding-bottom: 4rem;	
}
.entry-content-text {
	padding-bottom: 6rem;
}
#breadcrumbs {
	padding-bottom: 4rem;
	padding-top: 0;
	color: #999;
	font-size: 1.3rem;
}
#breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
#breadcrumbs a:hover {
	color: var(--z-primary-link-color-hover);
	text-decoration: underline;
}
blockquote {
    width: 100%;
	padding-left: 10%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
	border-left: 2px solid var(--tertiary-text-color);
}
img.alignright {
	float: right;
	margin-left: 2rem;
	max-width: 50%;
	width: auto;
	height: auto;
}
img.alignleft {
	float: left;
	margin-right: 2rem;
	max-width: 50%;
	width: auto;
	height: auto;
}



.panel,
.item {
	border-radius: 0;
	position: relative;
	background: var(--bg-color-panel);	
}
.panel.transparent,
.item.transparent {
	background: transparent;	
}



.image-box {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: 10px 10px 0 0;
	filter: brightness(1);
}
.image-box img {
	display: block;
	max-width: none;
	width: 100%;
	height: 100%;
	transform: scale(1.1);
	transition: transform 250ms ease-in-out;
	object-fit: cover;
}
.item img {
	display: block;
	max-width: none;
	width: 100%;
	height: 100%;
	transform: scale(1.1);
	transition: transform 250ms ease-in-out;
	object-fit: cover;
}
.item:hover .image-box img,
.panel:hover .image-box img {
	transform: scale(1.135);
}
.image-box .image-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(131deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,.05) 100%);
	background: linear-gradient(131deg, #469c7c 0%, #469c7c05 100%);
	mix-blend-mode: overlay;
}
.item .video-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	color: var(--z-base-text-color-white);;
	font-size: 60px;
	transition: font-size 250ms ease-in-out;
}
.item .plus-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	color: var(--z-base-text-color-white);;
	font-size: 100px;
	transition: font-size 250ms ease-in-out;
}
.item .no-box {
	height: 0px;
	width: 100%;
	margin-bottom: 20px;
	background: #E3E3E3;
}
.two-images figure figcaption {
	transform: translateY(100%);
	opacity: 0.75;
	font-size: 90%;
}
a.panel,
a.item  {
	color: var(--z-base-text-color);
	text-decoration: none;
}
a.item:hover,
a.panel:hover {
	box-shadow: 0px 10px 24px 0px var(--z-box-shadow-color-default);
}
.panel h3,
.item h3 {
	font-weight: 600;
	font-size: 2.1rem;
	margin-bottom: 0;
	line-height: 1.33;
}
.item h3 + .date,
.item h3 + .price {
	padding-top: 5px;
	font-weight: 500;
	font-size: 14px;
	color: var(--meta-text-color);
}
.item h3 + .date ul,
.item h3 + .date ul li {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.item h3 + .date ul li i {
	margin-right: 8px;
}


.meta .taglist-box {
	display: block;
}
.meta .taglist-box h2 {
	font-size: 1.8rem;
	font-weight: 600;
}
.meta .taglist-box .taglist {
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: calc( var(--z-default-gap) / 2 );
	flex-wrap: wrap;
}
.meta .taglist-box .taglist li {
	padding: 6px 14px;
	font-size: 14px;
	background: var(--z-color-grey-warm-light);
	border-radius: 5px;
}





.item .text {
	padding-top: 21px;
	font-weight: 500;
	font-size: 16px;
}
.item .icon-follow {
	position: absolute;
	right: 13px;
	bottom: 4px;
	color: #ebebeb;
	font-size: 30px;
	transition: color 250ms ease-in-out;
}

.item:hover .icon-follow {
	color: #dbdbdb;
}



/*
 * Breakout stuff and some backgrounds;
 *
 */
.bg-primary {
	background-color: var(--z-color-primary);
	color: var(--z-color-white);
	padding: 2ch 5ch;
}
.bg-secondary {
	background-color: var(--z-color-secondary);
	color: var(--z-color-white);
	padding: 2ch 5ch;
}
.bg-secondary-light {
	background-color: var(--z-color-secondary-light);
	color: var(--z-color-black);
	padding: 2ch 5ch;
}
img {
	max-width: 100%;
}
img.image-half-left,
span.image-half-left {
	--float-margin-default: 2rem;
	width: 50%;
	float: left;
	margin-right: var(--float-margin-default);
	margin-bottom: var(--float-margin-default);
}
img.image-break-left,
span.image-break-left {
	--break-translate-size: -8rem;
	transform: translateX(var(--break-translate-size));
	margin-right: calc( var(--break-translate-size) + var(--float-margin-default) );
}
img.image-half-right,
span.image-half-right {
	--float-margin-default: 2rem;
	width: 50%;
	float: right;
	margin-right: var(--float-margin-default);
	margin-bottom: var(--float-margin-default);
}
img.image-break-right,
span.image-break-right {
	--break-translate-size: 8rem;
	transform: translateX(var(--break-translate-size));
	margin-left: calc( var(--float-margin-default) - var(--break-translate-size) );
}

.bg-primary {
	background-color: var(--z-color-primary);
	color: var(--z-color-white);
	padding: 5ch;
}



p:has(.cta-video) {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	/* padding: 50% var(--z-default-gap) 0 var(--z-default-gap); */
	padding: var(--z-default-gap);
}
article.has-image figure:has(.cta-video)::before {
	opacity: 0.6;
}
p:has(.cta-video) a,
p:has(.cta-video) a:active,
p:has(.cta-video) a:visited,
p:has(.cta-video) a:hover,
p:has(.cta-video) a:focus {
	display: inline-block;
	font-size: 3rem;
	font-weight: 750;
	color: var(--z-color-white);
	text-decoration: none;
	line-height: 1;
	padding: 1rem calc(var(--z-default-gap) / 2);
	max-width: 15ch;
	height: 100%;
	text-shadow: 0 0 0.75rem rgba(0,0,0,0.45);
}
p:has(.cta-video) .button-faux {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 1rem;
	width: max-content;
	padding: 1rem 2rem 1rem 1rem;
	border-radius: 10rem;
	margin-top: 3rem;
	background: var(--z-color-tertiairy);
	color: var(--z-color-primary);
	text-shadow: 0 0 0.5rem rgba(0,0,0,0);
	transition: all 250ms ease-in-out;
	transform-origin: left center;
	transform: scale(0.85);
}
p:has(.cta-video) a em {
	font-style: normal;
	color: var(--z-color-tertiairy);
}
.button-faux span {
	font-size: 2.4rem;
	transition: all 250ms ease-in-out;
}

p:has(.cta-video) a:hover .button-faux,
p:has(.cta-video) a:focus .button-faux {
	transform: scale(0.925);
}
p:has(.cta-video) a .button-faux:hover,
p:has(.cta-video) a .button-faux:focus {
	background: var(--z-color-white);
	color: var(--z-color-primary);
}

/*

a.cta-video {
	text-decoration: none;
	background: var(--z-primary-link-color);
	padding: var(--z-padding-buttons);
	color: var(--z-base-text-color-white);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--z-padding-default);
	border-radius: var(--z-radius-inputs);
}
a.cta-video:active,
a.cta-video:visited {
	text-decoration: none;
	background: var(--z-primary-link-color-visited);
	color: var(--z-base-text-color-white);
}

a.cta-video:hover,
a.cta-video:focus {
	text-decoration: none;
	background: var(--z-primary-link-color-hover);
	color: var(--z-base-text-color-white);
}
*/

p ~ .progress {
	margin-top: 5rem;
}
table.progress {
	pointer-events: initial;
}
table.progress tr {
	display: flex;
	justify-content: space-between;
	gap: 0;
}
table.progress th,
table.progress td {
	padding: 2px 0;
	font-weight: 530;
}
table.progress th:first-of-type,
table.progress td:first-of-type {
	padding: 0;
	flex: 1;
}
table.progress a em {
	font-style: normal;
}
table.progress a .sep {
	padding: 0 4px;
}
table.progress td a {
	display: flex;
	padding: var(--z-table-cell-padding-top) var(--z-table-cell-padding-side) var(--z-table-cell-padding-top) 0;
	text-decoration: none;
	color: var(--z-body-text);
}
table.progress td:not(:last-of-type) a {
	width: calc(100% - var(--z-table-cell-padding-side));
	width: 100%;
}
table.progress td:last-of-type a {
	padding: var(--z-table-cell-padding-top) var(--z-table-cell-padding-side);
	border-radius: var(--z-radius-buttons);
	border: 1px solid var(--z-textfld-border);
	justify-content: center;
	align-items: center;
	width: max-content;
}
table.progress td a[data-number-of-questions] {
	font-size: 90%;
}

table.progress tr.done td {
	background: none;
}
table.progress tr.done a {
	color: var(--z-textfld-valid-focus-border);
	pointer-events: none;
}
table.progress tr.done td:last-of-type a {
	opacity: 0;
}
table.progress tr:not(.done):has(a:hover) td,
table.progress tr:not(.done):has(a:focus) td {
	background: var(--z-color-grey-light);
	background: var(--z-color-white-real);
}
table.progress tr:not(.done):has(a:hover) a,
table.progress tr:not(.done):has(a:focus) a {
	color: var(--z-primary-link-color);
}
table.progress tr:not(.done):has(a:hover) td:last-of-type a,
table.progress tr:not(.done):has(a:focus) td:last-of-type a {
	border-color: var(--z-primary-link-color);
	transform: translateX(1rem);
}

@media (max-width: 1200px) {}
@media (max-width: 1000px) {}
@media only screen and (max-width: 650px) {}
@media only screen and (max-width: 480px) {}






main article.page-login-alt,
main article.page-intro {
	max-width: 120rem;
	padding: 5rem 0rem 5rem 6rem;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4rem;
}
main article.page-login-alt > section {
	grid-column: 1;
	align-self: start;
}
main article.page-login-alt > form {
	grid-column: 2;
	align-self: start;
	padding-top: 0.6rem;
}
main article.page-intro .button-holder {
	flex-direction: row;
}

article.has-image figure::before {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--z-color-primary);
	position: absolute;
	mix-blend-mode: normal;
	opacity: 0.25;
	border-radius: var(--z-img-border-radius);
}
@media (max-width: 1100px) {
	main article.page-intro,
	main article.page-login-alt {
		padding: 5rem 5rem 9rem 5rem;
		grid-template-columns: 1fr 1fr;
	}
	main article.page-intro > * {
		grid-column: 1 / -1;

	}
	main article.page-login-alt form > p.button-holder {
		padding-top: 2rem;
	}

	main article.page-intro figure {
		position: relative;
		display: block;
		grid-column: 1 / -1;
		height: max-content;
		justify-self: center;
		width: 100%;
		max-width: 48rem;
		padding: 0rem;
	}
	article.has-image figure::before {
		z-index: 1;
	}
	main article.has-image:not(.page-intro) figure {
		display: none;
	}
	p:has(.cta-video) {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0;
		padding: var(--z-default-gap);
		display: block;
		z-index: 3;
	}
	p:has(.cta-video) a,
	p:has(.cta-video) a:active,
	p:has(.cta-video) a:visited,
	p:has(.cta-video) a:hover,
	p:has(.cta-video) a:focus {
		padding: var(--z-default-gap);
	}
	main article.has-image figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--z-img-border-radius);
		position: absolute;
		top: 0;
		z-index: 0;
	}
}
@media (max-width: 900px) {
	main article.page-login-alt {
		grid-template-columns: var(--z-grid--colums-default);
		padding: 5rem 2rem 9rem 2rem;
	}
	main article.page-login-alt form > p.button-holder {
		padding-top: 2rem;
	}
	main article.page-login-alt > section,
	main article.page-login-alt > form {
		grid-column: 1 / -1;
		align-self: start;
	}

	main article,
	main article.page-intro,
	main article.page-login-alt {
		padding: 5rem calc(var(--z-padding-default)*2) 9rem calc(var(--z-padding-default)*2);
		border-top-color: transparent;
		border-top-right-radius: 0;
		border-top-left-radius: 0;

	}
}




ul.list-advice,
ul.list-advice li {
	list-style: none;
	padding-left: 0;
}
h3 ~ ul.list-advice {
	margin-top: 0;
}
ul.list-advice li.star:before {
	content: "\f005";
	font-family: var(--z-font-icon);
}
.starred:before {
	content: "\f005";
	display: inline;
	font-family: var(--z-font-icon);
	width: max-content;
	font-size: 90%;
	color: var(--z-color-primary);	
}
ul.list-advice li.star::before {
	content: "\f005";
	font-family: var(--z-font-icon);
	position: absolute;
	width: max-content;
	transform: translateX(-100%);
	padding-right: calc(var(--z-padding-default)/2);
	font-size: 90%;
	color: var(--z-color-primary);
}