/* 
Theme Name: psycholoogtamara.nl
Author: Monsterbrands 
Author URI: https://www.monsterbrands.nl
Version: 2.0
*/ 

/* Fonts on the site itself (no requests to Google): Newsreader for headings, Source Sans 3 for text and navigation. */
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
	--bordeaux:	rgb(83, 23, 20);
	--red:		rgb(185, 52, 45);
	--white: 	rgb(255, 255, 255);
	--lightGrey:rgb(235, 235, 235);
	--darkGrey:	rgb(87, 84, 84);	
	--greyBlue:	rgb(47,65,76);
	--rose:		rgb(240, 178, 166);
	--serif:	'Newsreader', Georgia, serif;
	--sans:		'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
	--header-height: 96px;
	--header-space: 96px;
}

* { margin: 0; padding: 0; outline: 0; }
img { display: block; max-width: 100%; height: auto; } 

body { font-family: var(--sans); font-size: 19px; line-height: 1.6; overflow-x: hidden; color: var(--darkGrey); -webkit-font-smoothing: antialiased; }
div.wrapper { width: 960px; margin: 0 auto; position: relative; }
.menu-active  { position: fixed; }

/* Headings in Newsreader, sized by its optical axis; the subheading in its italic; small labels (h6) in capitals of
   the text font with some space between the letters. */
h1, h2, h3, h4, h5 { font-family: var(--serif); font-optical-sizing: auto; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-weight: 600; font-size: 40px; }
h2 { font-weight: 600; font-size: 34px; }
h3 { font-weight: 400; font-size: 22px; line-height: 1.4; padding: 6px 0; font-style: italic; }
h4 { font-weight: 600; font-size: 28px; }
h5 { font-weight: 600; font-size: 21px; }
h6 { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 14px; }
p  { margin: 15px 0; line-height: 1.6; }

/* slider styling */
section#slider { height: 600px; position: relative; background-color: var(--white); }
section#slider div.slider     { width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; background-position: center center; background-size: cover; background-repeat: no-repeat; 
	background-image:linear-gradient(to right, rgba(255, 251, 195) 10%, rgba(246, 211, 108) 100%); }
section#slider div.slider>div { width: 100%; height: 100%; position: absolute; 
    background-position: center center; background-size: cover; background-repeat: no-repeat; }   
section#slider div.slider>span.container { display: block; width: 100%; color: var(--white); background-color: rgba(0,0,0,0.1); position: absolute; padding: 20px 0; top: 50%; transform: translateY(-50%);  border-top: 1px solid white; border-bottom: 1px solid white; }
section#slider div.slider span.headline { display: block; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: 60px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin-bottom: 10px; }
section#slider div.slider span.subline { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin-bottom: 15px; }
section#slider div.slider span.tag { display: inline-block; margin: 0 12px; }
section#slider div.slider span.tag:before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 4px; vertical-align: -4px; background-color: var(--white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* slider_next styling */
section#slider_next { height: 350px; position: relative; background-color: rvar(--white); }
section#slider_next div.slider     { width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; background-position: center center; background-size: cover; background-repeat: no-repeat; 
	background-image:linear-gradient(to right, rgba(255, 251, 195) 10%, rgba(246, 211, 108) 100%); }
section#slider_next div.slider>div { width: 100%; height: 100%; position: absolute; 
    background-position: center center; background-size: cover; background-repeat: no-repeat; }   
section#slider_next div.slider>span.container { display: block; width: 100%; color: var(--white); background-color: rgba(0,0,0,0.1); position: absolute; padding: 20px 0; top: 50%; transform: translateY(-50%);  border-top: 1px solid white; border-bottom: 1px solid white; }
section#slider_next div.slider span.headline { display: block; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: 60px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin-bottom: 10px; }
section#slider_next div.slider span.subline { display: block; font-weight: 400; font-size: 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin-bottom: 15px; }
section#slider_next div.slider span.tag { display: inline-block; margin: 0 12px; }
section#slider_next div.slider span.tag:before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 4px; vertical-align: -4px; background-color: var(--white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* visual styling */
section#visual { height: 300px; position: relative; background-color: var(--white); }
section#visual div.visual     { width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; background-position: center center; background-size: cover; background-repeat: no-repeat; 
	background-image:linear-gradient(to right, rgba(0,181,204,0.5) 10%, rgba(244, 133, 14, 0.5) 100%); }
section#visual div.visual>div { width: 100%; height: 100%; position: absolute; 
    background-position: center center; background-size: cover; background-repeat: no-repeat; }   




section#content { padding: 40px 0 10px 0; background-color: var(--lightGrey); }
section#content div.content_holder { overflow: auto; }
section#content div.content_holder div.sidenav { float: left; width: calc(30%); }
section#content div.content_holder div.sidenav ul {  }
section#content div.content_holder div.sidenav li {  }
section#content div.content_holder div.sidenav a {  }
section#content div.content_holder div.sidenav a:hover {  }
section#content div.content_holder div.content_main { float: left; width: calc(70% - 20px); margin-right: 20px; }
section#content div.content_holder div.content_main:only-child { float: none; width: auto; max-width: 760px; margin-right: 0; }
section#content div.row { display: flex; padding: 15px 0; }
section#content div.col { float: left; }
section#content div.col:first-child { width: calc((200% / 3) - 80px); padding-right: 80px; }
section#content div.col:last-child { width: calc(100% / 3); }
section#content div.col:last-child div.contact_data p { margin: 0; }
section#content div.col:last-child iframe { width: 100%; height: 350px; border: solid 2px var(--white); }

section#content h1 { color: var(--red); }
section#content h2 { }
section#content h3 { color: var(--darkGrey); }
section#content h5 { }
section#content h6 { color: var(--greyBlue); }

section#content ul { margin-left: 30px; }
section#content li { padding-left: 7px; line-height: 2em; /*font-style: italic; */ }
section#content a { color: var(--red); text-decoration: underline; }
section#content a:hover { text-decoration: none; }


/* --- table styling --- */
section#content table { border: 3px solid var(--white); border-radius: 6px; background-color: var(--white); }
section#content tbody {  }
section#content tr:first-child { background-color: var(--greyBlue) !important; font-weight: 500 !important; color: var(--lightGrey); }
section#content tr:nth-child(even) { background-color: rgba(47,65,76,0.1);  }
section#content tr:nth-child(odd) { background-color: var(--white);  }
section#content td { padding: 4px 6px;  }
section#content td:first-child { width: 250px; }

/* --- form styling --- */
section#content div.contact_holder {  }
section#content div.contact_holder form {  }
section#content div.contact_holder div.form_row {  }
section#content div.contact_holder div.form_label { line-height: 2em; }
section#content div.contact_holder div.form_field {  }
section#content div.contact_holder input[type=text], section#content div.contact_holder input[type=email] { width: 400px; box-sizing: border-box; border: solid 1px rgb(166, 168, 171); font-family: var(--sans); font-size: 18px; line-height: 2em; padding: 0px 8px; -webkit-appearance: none;}
section#content div.contact_holder textarea { width: 400px; height: 200px; box-sizing: border-box; resize: none; border: solid 1px rgb(166, 168, 171); font-family: var(--sans); font-size: 18px; padding: 4px 8px; -webkit-appearance: none;}
section#content div.contact_holder [type=submit] { cursor: pointer; border: 0;  font-family: var(--sans); font-weight: 500; font-size: 20px; background-color: var(--bordeaux); color: var(--lightGrey); padding: 4px 8px; border-radius: 5px; transition: 0.3s background-color; -webkit-appearance: none;}
section#content div.contact_holder [type=submit]:hover { background-color: var(--red); }

/* --- form validation styles --- */
.hp-field { position: absolute; left: -9999px; }
input.error, textarea.error { border: 2px solid var(--red) !important; background-color: rgba(185, 52, 45, 0.1); }
.field-error { color: var(--red); font-size: 16px; margin-top: 4px; min-height: 18px; }
.antispam-hint { min-height: auto; }
.antispam-hint .form_label { font-weight: 500; }
.antispam-code { display: inline-block; background-color: var(--bordeaux); color: var(--white);
	padding: 4px 12px; border-radius: 4px; font-weight: 700; font-size: 18px; letter-spacing: 2px; }

/* --- toast notification --- */
.form-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
	background-color: var(--white); border: 2px solid var(--red); border-radius: 8px;
	padding: 16px 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 90%; box-sizing: border-box;
	opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.form-toast.show { opacity: 1; visibility: visible; }
.toast-content { display: flex; align-items: flex-start; gap: 12px; }
.toast-icon { font-size: 24px; color: var(--red); flex-shrink: 0; line-height: 1; }
.toast-message { color: var(--red); font-size: 16px; font-weight: 500; line-height: 1.4; word-wrap: break-word; }


section#cta { padding: 40px 0; background-color: var(--white); }
section#cta div.cta_holder { }
section#cta div.row { display: flex; }
section#cta div.col { float: left; }
section#cta div.col:first-child { width: 50%; padding-right: calc(100% / 6); }
section#cta div.col:last-child { width: calc(100% / 3); position: relative; }
section#cta a.readmore { position: absolute; transform: translateY(-50%); top: 50%; left: 0; font-family: var(--sans); font-weight: 500; font-size: 22px; text-decoration: none; display: inline-block; color: var(--white); background-color: var(--bordeaux); 
	padding: 24px 36px; border-radius: 10px; border: 2px solid var(--white); transition: 0.3s background-color, 0.3s color; }
section#cta a.readmore:hover { background-color: var(--red); color: var(--white); }
section#cta a.readmore span { margin-right: 15px; }
section#cta h4 { color: var(--red); }


section#news { padding: 40px 0; background-color: var(--bordeaux); color: var(--white); }
section#news div.news_holder { overflow: auto; }
section#news div.col { float: left; width: calc((100% / 3) - 40px); padding-right: 40px; margin: 20px 0 10px 0; }
section#news div.col div.news_visual { width: 100%; height: 70px; position: relative; overflow: hidden; background-position: center center; background-size: cover; background-repeat: no-repeat; border: solid 3px var(--white); margin-bottom: 20px; }
section#news div.col p { margin: 10px 0; }
section#news a.readmore { font-family: var(--sans); font-weight: 500; font-size: 20px; text-decoration: none; display: inline-block; color: var(--red); background-color: var(--white); margin: 6px 0; padding: 3px 8px; border-radius: 6px; border: 2px solid var(--white); transition: 0.3s background-color, 0.3s color; }
section#news a.readmore:hover { background-color: var(--red); color: var(--white); }







.cookie-consent {
	position: fixed;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1200;
	display: none;
}

.cookie-consent.visible {
	display: block;
}

.cookie-consent__inner {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	max-width: 860px;
	margin: 0 auto;
	padding: 18px 20px;
	border: 4px solid var(--white);
	border-radius: 16px;
	background-color: var(--bordeaux);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cookie-consent__content {
	flex: 1;
}

.cookie-consent__title,
.cookie-consent__text {
	color: var(--white);
	margin: 0;
}

.cookie-consent__text {
	margin-top: 8px;
}

.cookie-consent__text a {
	color: var(--white);
	text-decoration: underline;
}

.cookie-consent__actions {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-shrink: 0;
	gap: 12px;
	margin-top: 16px;
}

.cookie-consent__button {
	border: none;
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 8px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.cookie-consent__button--primary {
	background-color: var(--white);
	color: var(--bordeaux);
}

.cookie-consent__button--primary:hover {
	background-color: var(--lightGrey);
}


/* --- @media queries --- */
@media screen and (max-width: 980px) {	
	div.wrapper { width: 90%; }
	section#slider { height: 450px; }
	section#slider_next { height: 250px; }	

	section#content div.content_holder div.content_main { float: none; width: 100%; margin-right: 0px; }	
	section#content td:first-child { width: 45%; }

	section#cta div.row { display: block; }
	section#cta div.col { float: none; }
	section#cta div.col:first-child { width: 100%; padding-right: 0; }
	section#cta div.col:last-child { width: 100%; }
	section#cta a.readmore { position: initial; transform: initial; top: initial; left: initial; font-size: 16px;  
		padding: 16px 18px; }
}

@media screen and (max-width: 800px) {
	section#content div.contact_holder input[type=text], section#content div.contact_holder input[type=email] { width: 100%; font-size: 15px; }
	section#content div.contact_holder textarea { width: 100%; height: 200px; font-size: 15px; }
	section#content div.contact_holder [type=submit] { font-size: 18px; }
}

@media screen and (max-width: 750px) {
}

@media screen and (max-width: 700px) {
	section#slider { height: 350px; }
	section#slider div.slider span.headline { font-size: 48px; }
	section#slider div.slider span.subline { font-size: 24px; }
	section#slider_next { height: 200px; }
	section#slider_next div.slider span.headline { font-size: 48px; }
	section#content div.row { display: block; padding: 15px 0; }
	section#content div.col { float: none; }
	section#content div.col:first-child { width: 100%; padding-right: 0; }
	section#content div.col:last-child { width: 100%; margin-top: 20px; }
	section#content ul { margin-left: 15px; }
	section#content li { padding-left: 5px; line-height: 1.8em; }
	section#content div.contact_holder { padding-bottom: 30px; }
	section#content div.contact_holder input[type=text], section#content div.contact_holder input[type=email] { width: 80%; font-size: 15px; }
	section#content div.contact_holder textarea { width: 80%; height: 200px; font-size: 15px; }
	section#content div.contact_holder [type=submit] { font-size: 18px; }
	section#news div.col { float: none; width: 100%; padding-right: 0; margin: 20px 0 10px 0; }
	section#news div.col div.news_visual {  box-sizing: border-box; height: 70px; margin-bottom: 20px; }
	/* toast responsive */
	.form-toast { width: auto; max-width: 90%; left: 50%; right: auto; transform: translateX(-50%); padding: 12px 16px; }
	.toast-message { font-size: 14px; }
	.field-error { font-size: 14px; }
	.cookie-consent { left: 12px; right: 12px; bottom: 12px; }
	.cookie-consent__inner { flex-direction: column; align-items: stretch; padding: 16px; }
	.cookie-consent__actions { flex-direction: column; margin-top: 16px; }
	.cookie-consent__button { width: 100%; }
}

@media screen and (max-width: 600px) {	
	section#slider div.tagblock { display: none; }
}

@media screen and (max-width: 550px) {	
	section#slider { height: 250px; }
	section#slider div.slider span.headline { font-size: 32px; }
	section#slider div.slider span.subline { font-size: 18px; }
	section#slider_next { height: 160px; }
	section#slider_next div.slider span.headline { font-size: 32px; }	
}

@media screen and (max-width: 500px) {	
	section#content td:first-child { width: 35%; }
	section#content td { font-size: 12px; padding: 4px 6px; }	
}

@media screen and (max-width: 450px) {
	body { font-size: 16px; }
	h1   { font-size: 30px; }
	h2   { font-size: 26px; }
	h3   { font-size: 18px; padding: 4px 0; }
	h4   { font-size: 23px; }
	h5   { font-size: 18px; }
	h6   { font-size: 12px; }
	p    { font-size: 16px; }
	section#content div.contact_holder input[type=text], section#content div.contact_holder input[type=email] { width: 100%; font-size: 13px; }
	section#content div.contact_holder textarea { width: 100%; height: 200px; font-size: 13px; }
	section#content div.contact_holder [type=submit] { font-size: 13px; }
	section#news a.readmore { font-size: 11px; margin: 4px 0; padding: 3px 6px; }
	/* form validation responsive */
	.field-error { font-size: 12px; }
	.toast-message { font-size: 12px; }
	.antispam-code { font-size: 14px; padding: 3px 10px; }
}

@media screen and (max-width: 400px) {	
	section#slider div.slider span.headline { font-size: 22px; }
	section#slider div.slider span.subline { font-size: 15px; }
	section#slider_next { height: 140px; }	
	section#cta a.readmore { font-size: 14px; padding: 12px 14px; }
}

/* Text from the editor: a heading of more lines is a paragraph in the heading and looks like the heading itself;
   an image in a centred or right-aligned paragraph follows it; a paragraph holds an image that floats beside it */
span.headline p, section#content h1 p { margin: 0; font: inherit; }
p[style*="text-align: center"] img { margin-left: auto; margin-right: auto; }
p[style*="text-align: right"] img { margin-left: auto; }
p:has(> img[style*="float"]) { display: flow-root; }

/* ========== Header and menu ==========
   The header stays at the top. Beside the logo the main pages, and the menu button; the menu is a panel that unfolds
   from under the header (menu.js, GSAP) over a backdrop, like a page of its own: the main pages large, the topics of
   psychologie and energetisch, and how to get in touch. Without JavaScript the <details> element opens it. */
/* The header is fixed at the top; the page keeps one constant space for it (--header-space, its full height), so a
   compact header changes nothing else on the page. In the page flow it made the browser move the page along, back
   below the threshold, and the header flipped between compact and full at one height. */
body { padding-top: var(--header-space); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
	transition: box-shadow 0.35s ease; }
.site-header div.header-bar { position: static; display: flex; align-items: center; gap: 2rem; min-height: var(--header-height); transition: min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.brand { display: block; line-height: 0; }
.brand img { width: 220px; height: auto; transform-origin: left center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
/* Scrolled down: the header is compact, the logo a little smaller, with a soft shadow below it. */
html.header-compact { --header-height: 68px; }
html.header-compact .site-header { box-shadow: 0 10px 30px -18px rgba(83, 23, 20, 0.45); }
html.header-compact .brand img { transform: scale(0.84); }
/* How far down the page one is: a thin line at the bottom of the header. */
.reading-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--rose), var(--red));
	transform: scaleX(var(--progress, 0)); transform-origin: left center; opacity: 0; transition: opacity 0.3s ease; }
html.header-compact .reading-progress { opacity: 1; }
html.menu-is-open .reading-progress { opacity: 0; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.site-nav a { position: relative; padding: 0.35rem 0; font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; color: var(--bordeaux); text-decoration: none; transition: color 0.2s ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.site-nav a:hover { color: var(--red); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--red); }

.menu summary { list-style: none; user-select: none; -webkit-user-select: none; display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
	padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--bordeaux); color: var(--white);
	font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 0.2s ease; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu.is-open summary { background: var(--red); }
.menu.is-open summary:hover { background: var(--bordeaux); }
/* Hover: the hamburger's lines shift a little; once open, the cross turns a quarter. */
.menu-icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.menu:not(.is-open) summary:hover .menu-line:nth-child(1) { transform: translateY(-6px) scaleX(0.65); transform-origin: right center; }
.menu:not(.is-open) summary:hover .menu-line:nth-child(3) { transform: translateY(6px) scaleX(0.8); transform-origin: right center; }
.menu.is-open summary:hover .menu-icon { transform: rotate(90deg); }
.menu summary:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.menu-icon { position: relative; display: block; width: 18px; height: 2px; }
.menu-line { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--white);
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease; }
.menu-line:nth-child(1) { transform: translateY(-5px); }
.menu-line:nth-child(3) { transform: translateY(5px); }
.menu.is-open .menu-line:nth-child(1) { transform: rotate(45deg); }
.menu.is-open .menu-line:nth-child(2) { opacity: 0; }
.menu.is-open .menu-line:nth-child(3) { transform: rotate(-45deg); }

.backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(40, 12, 10, 0.45); }
.backdrop[hidden] { display: none; }
/* While the menu is open the page does not scroll. On body, not html: overflow on html makes body (which has
   overflow-x: hidden) a scroll area of its own, and the sticky header then leaves the window at the bottom of a page. */
html { scrollbar-gutter: stable; }
html.menu-is-open body { overflow: hidden; }

.menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto;
	box-sizing: border-box; overscroll-behavior: contain; padding: 3rem 0 calc(3.5rem + env(safe-area-inset-bottom)); background: var(--bordeaux); color: var(--white); }
.menu-grid { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr 1.1fr; gap: 2.5rem; }
.menu-panel a { color: inherit; text-decoration: none; }
.menu-heading { margin: 0 0 0.9rem; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.menu-heading a:hover { color: var(--white); }
.menu-main a { display: block; padding: 0.15rem 0; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.25; letter-spacing: -0.01em; transition: color 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-main a:hover { color: var(--rose); transform: translateX(6px); }
.menu-main a[aria-current] { font-style: italic; color: var(--rose); }
.menu-topic > a { display: block; padding: 0.2rem 0; font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, 0.9); transition: color 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-sub { display: block; margin: 0.2rem 0 0.5rem; padding-left: 0.9rem; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.menu-sub a { display: block; padding: 0.12rem 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-topic a:hover { color: var(--rose); transform: translateX(4px); }
.menu-topic a[aria-current] { color: var(--rose); font-weight: 600; }
.menu-contact { align-self: start; padding: 1.5rem; border-radius: 16px; background: rgba(255, 255, 255, 0.07); }
.menu-contact p { margin: 0.4rem 0 1.25rem; font-size: 16px; color: rgba(255, 255, 255, 0.75); }
.menu-contact-line { display: block; width: fit-content; font-family: var(--serif); font-size: 21px; line-height: 1.4;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: color 0.2s ease, background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-contact-line:hover { color: var(--rose); background-size: 100% 1px; }
.menu-contact .button, .footer-button { display: inline-block; padding: 0.75rem 1.3rem; border-radius: 999px; background: var(--white); color: var(--bordeaux);
	font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.menu-contact .button:hover, .footer-button:hover { background: var(--rose); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); }

/* ========== More about a subject: the pages of its menu below the text, instead of a list beside it ========== */
section#topics { padding: 10px 0 60px; background-color: var(--lightGrey); }
section#topics .eyebrow { margin: 0 0 1rem; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--greyBlue); }
section#topics .eyebrow a { color: var(--red); text-decoration: none; }
section#topics .eyebrow a:hover { text-decoration: underline; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-flow: dense; gap: 12px; }
.topic { padding: 1rem 1.2rem; border-radius: 14px; background: var(--white); }
.topic-group { grid-column: 1 / -1; }
.topic-title { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--bordeaux); text-decoration: none; transition: color 0.2s ease; }
.topic-title:hover, .topic-title[aria-current] { color: var(--red); }
.topic-title[aria-current] { font-style: italic; }
.topic-children { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.75rem; }
.topic-children > * { padding: 0.3rem 0.85rem; border: 1px solid rgba(83, 23, 20, 0.2); border-radius: 999px; font-size: 15px; color: var(--bordeaux); text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.topic-children a:hover, .topic-children [aria-current] { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--white); }

@media screen and (max-width: 980px) {
	.site-nav { display: none; }
	.menu { margin-left: auto; }
	.menu-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media screen and (max-width: 640px) {
	:root { --header-height: 76px; --header-space: 76px; }
	html.header-compact { --header-height: 62px; }
	html.header-compact .brand img { transform: scale(0.88); }
	.brand img { width: 170px; }
	.menu-word { display: none; }
	.menu summary { padding: 0.8rem; }
	.menu-panel { padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom)); }
	.menu-grid { grid-template-columns: 1fr; gap: 1.75rem; }
	.menu-main a { font-size: 28px; }
	section#topics { padding-bottom: 40px; }
}
/* ========== News: the overview as cards (picture, date, title, intro, a link to the item); the item has its page ========== */
section#news_details { padding: 50px 0 70px; background: var(--lightGrey); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.news-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(83, 23, 20, 0.06), 0 14px 34px -22px rgba(83, 23, 20, 0.35); }
.news-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lightGrey); }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; }
/* The link of the title covers the whole card, so picture, date, text and button all lead to the item. */
.news-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* z-index: the button moves up on hover (a transform), which would otherwise paint it above this link and catch the click. */
.news-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.5rem 1.5rem; }
.news-card-date { margin: 0 0 0.4rem; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--greyBlue); }
.news-card-title { margin: 0; font-size: 24px; line-height: 1.2; }
.news-card-title a { color: var(--bordeaux); text-decoration: none; transition: color 0.2s ease; }
.news-card:hover .news-card-title a { color: var(--red); }
.news-card-intro { flex: 1; margin-top: 0.6rem; font-size: 17px; color: var(--darkGrey); }
.news-card-intro p { margin: 0 0 0.6rem; }
.news-card-intro img { display: none; }
.news-card-more { align-self: flex-start; margin-top: 1.4rem !important; }

/* ========== A news item: the visual band of Actueel like every page, then on the grey the way back, date, title,
   intro, the picture of the item over the width of the text and the text; beside it the list of all items (the
   current one marked by menu.js) ========== */
section.article { padding: 44px 0 70px; background: var(--lightGrey); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.article-main { max-width: 700px; }
.article-back { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 15px; color: var(--red); text-decoration: none; }
.article-back span { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.article-back:hover span { transform: translateX(-4px); }
.article-date { margin: 1.2rem 0 0.3rem; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--greyBlue); }
.article-main h1 { margin: 0; color: var(--red); }
.article-intro { margin-top: 0.7rem; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--darkGrey); }
.article-intro p { margin: 0; }
/* The picture of the item: as wide as the text, not cropped; a tall picture at most 440 high. */
.article-visual { display: block; width: auto; max-width: 100%; max-height: 440px; margin: 1.6rem 0 0.4rem; border-radius: 14px; box-shadow: 0 16px 36px -24px rgba(83, 23, 20, 0.5); }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.article-aside { position: sticky; top: calc(var(--header-height) + 24px); padding-top: 0.2rem; }
.article-list-heading { margin: 0 0 0.6rem; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.article-list-heading a { color: var(--red); text-decoration: none; }
.article-list > a { display: block; padding: 0.6rem 0; border-top: 1px solid rgba(83, 23, 20, 0.1); color: var(--bordeaux); text-decoration: none; transition: color 0.2s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.article-list > a span { display: block; font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.article-list > a small { display: block; margin-top: 0.15rem; font-size: 13px; color: var(--darkGrey); opacity: 0.8; }
.article-list > a:hover { color: var(--red); padding-left: 6px; }
.article-list > a[aria-current] { color: var(--red); cursor: default; padding-left: 0; }
.article-list > a[aria-current] span { font-style: italic; }
@media screen and (max-width: 980px) {
	.article-grid { grid-template-columns: 1fr; gap: 40px; }
	.article-aside { position: static; }
}

/* ========== Footer ==========
   Light and warm (cream), so it differs clearly from the dark menu panel: who she is and a way to get in touch,
   contact, navigation and her portrait; below a thin line the links of social media and privacy, and the credit of
   the maker. */
.site-footer { padding: 70px 0 28px; color: var(--darkGrey); background: rgb(248, 243, 238); border-top: 1px solid rgba(83, 23, 20, 0.08); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a.footer-button { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 3rem; align-items: start; }
.footer-name { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--bordeaux); }
.footer-tagline { margin: 0.6rem 0 1.6rem; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--red); }
.footer-heading { margin: 0 0 0.9rem; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.footer-column a, .footer-column p { display: block; margin: 0 0 0.35rem; font-size: 16px; line-height: 1.5; }
.footer-column a { width: fit-content; background: linear-gradient(var(--red), var(--red)) left bottom / 0 1px no-repeat;
	transition: color 0.2s ease, background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.footer-column a:hover, .footer-column a[aria-current] { color: var(--red); background-size: 100% 1px; }
.site-footer .footer-button { background: var(--bordeaux); }
.site-footer .footer-button:hover { background: var(--red); }
.footer-portrait { text-align: center; }
.footer-portrait img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 5px solid var(--white); box-shadow: 0 18px 40px -20px rgba(83, 23, 20, 0.55); }
.footer-portrait p { margin: 0.8rem 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--bordeaux); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(83, 23, 20, 0.12); font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; }
.footer-links a { color: rgba(87, 84, 84, 0.85); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--red); }
/* The credit of the maker: a pill with a fine border along which a short streak of light travels at an even speed
   (a snake of short dashed copies of an SVG rectangle with the shape of the pill, from a faint tail to a red head;
   credit.js moves it with the GSAP ticker). Its text
   is always plain and whole. Everything that moves here, credit.js moves with GSAP; none of these elements has a CSS
   transition (the two would fight each other). */
.site-footer .footer-credit { position: relative; will-change: transform; display: inline-flex; align-items: center; gap: 0.45rem; height: 38px; box-sizing: border-box; padding: 0 1rem 0 1.15rem;
	border-radius: 19px; background: var(--white); color: rgba(87, 84, 84, 0.9); font-size: 13px; white-space: nowrap;
	--lift: 0; box-shadow: 0 calc(var(--lift) * 14px) calc(var(--lift) * 26px) -12px rgba(83, 23, 20, calc(var(--lift) * 0.6)); }
.credit-border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.credit-border rect { x: 0.75px; y: 0.75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); rx: 18.25px; ry: 18.25px; fill: none; stroke-width: 1.5px; }
.credit-track { stroke: rgba(83, 23, 20, 0.16); }
.credit-snake { opacity: 0; }
.credit-light { stroke: var(--red); stroke-linecap: butt; }
.credit-name { font-weight: 600; color: var(--bordeaux); }
.credit-arrow { width: 14px; height: 14px; color: var(--red); }

@media screen and (max-width: 980px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
	.footer-portrait { text-align: left; }
}
@media screen and (max-width: 640px) {
	.site-footer { padding-top: 50px; }
	.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.footer-name { font-size: 28px; }
	.footer-portrait img { width: 120px; height: 120px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; }
	.site-footer .footer-credit { gap: 0.3rem; padding: 0 0.75rem 0 0.9rem; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.site-nav a::after, .menu-line, .menu-icon, .menu-main a, .menu-topic a, .menu-contact-line, .menu-contact .button, .footer-button, .site-footer a,
	.site-header, .site-header div.header-bar, .brand img { transition: none; }
	/* Without motion credit.js does nothing: the name only colours on hover. */
	.footer-credit:hover .credit-name { color: var(--red); }
}

/* ========== Icons: Lucide (lucide-static 1.52.0, ISC licence), inline SVG in the colour of the text ========== */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ========== Text links: one style everywhere in running text ==========
   Red with a fine underline at some distance; on hover darker with a full underline. */
section#content a:not(.readmore), section#cta p a, .article-body a, section#topics .eyebrow a {
	color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgba(185, 52, 45, 0.4);
	transition: color 0.2s ease, text-decoration-color 0.2s ease; }
section#content a:not(.readmore):hover, section#cta p a:hover, .article-body a:hover, section#topics .eyebrow a:hover { color: var(--bordeaux); text-decoration-color: currentColor; }

/* ========== Buttons: one style everywhere ==========
   The pill of the footer: bordeaux with white text, on hover red, a little higher and with a shadow. On a dark
   background the same pill in white (the menu, the news on the home page, the cookie notice). Last in this file, so
   it wins over the older rules of each button. */
.footer-button, .news-card-more, section#cta a.readmore, section#content div.contact_holder [type=submit],
.menu-contact .button, section#news a.readmore, .cookie-consent__button--primary {
	display: inline-flex; align-items: center; gap: 0.55rem; width: auto; margin: 0; padding: 0.75rem 1.35rem; border: 0; border-radius: 999px;
	font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.site-footer a.footer-button, .news-card-more, section#cta a.readmore, section#content div.contact_holder [type=submit] { background: var(--bordeaux); color: var(--white); }
.site-footer a.footer-button:hover, .news-card:hover .news-card-more, section#cta a.readmore:hover, section#content div.contact_holder [type=submit]:hover {
	background: var(--red); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(83, 23, 20, 0.6); }
.menu-contact .button, section#news a.readmore, .cookie-consent__button--primary { background: var(--white); color: var(--bordeaux); }
.menu-contact .button:hover, section#news a.readmore:hover, .cookie-consent__button--primary:hover {
	background: var(--rose); color: var(--bordeaux); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.55); }

section#cta div.col:last-child { display: flex; align-items: center; }
section#cta a.readmore { position: static; transform: none; padding: 0.95rem 1.7rem; font-size: 17px; }
section#cta a.readmore span { margin: 0; }
section#news a.readmore { margin: 0.4rem 0 0; }
@media (prefers-reduced-motion: reduce) {
	.footer-button, .news-card-more, section#cta a.readmore, section#content div.contact_holder [type=submit],
	.menu-contact .button, section#news a.readmore, .cookie-consent__button--primary { transition: none; }
}

/* ========== Very large screens ==========
   The visuals are 1920 pixels wide: a wider page would enlarge them beyond their own size and zoom in ever further.
   So the page is at most 1920 wide, in the middle of a calm warm ground with a soft shadow (the fixed header too).
   On a large screen the visual is at most a share of the window's height, so it never takes the whole screen, and
   the content gets a little more room. */
html { background: rgb(234, 227, 220); }
body { max-width: 1920px; margin: 0 auto; background: var(--white); box-shadow: 0 0 80px -20px rgba(83, 23, 20, 0.25); }
.site-header { max-width: 1920px; margin: 0 auto; }
@media screen and (min-width: 981px) {
	section#slider { height: min(600px, max(320px, 60vh)); }
	section#slider_next { height: min(350px, max(200px, 40vh)); }
}
@media screen and (min-width: 1440px) {
	div.wrapper { width: 1080px; }
}
/* The home visual is cut a little higher than the middle: the subject of a photo is mostly in its upper part. */
section#slider div.slider > div { background-position: center 15%; }
/* On the subject page itself there is no "Meer over" line: the cards keep some room below the text. */
section#topics .wrapper > .topic-grid:first-child { margin-top: 28px; }