/* ALGEMENE RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
ol, ul { list-style: none; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }


/* VARS */
:root {
	--w-max: 640px; 
	
	--font-baloo: normal 400 1rem/1.1 baloo-2, sans-serif;
	--font-balooMed: normal 500 1rem/1.1 baloo-2, sans-serif;
	--font-balooSemi: normal 600 1rem/1.1 baloo-2, sans-serif;
	
	
	/*--kl-cont-tint: 255, 250, 244;*/
	--kl-blauw: #8FB0C2;
	--kl-lichtblauw: #A9C3D2;
	--kl-roest: #C96A06;
	--kl-donkerroest: #894B12;
	--kl-popupbg: #EFEBE6;
	--kl-popupkader: #D6D1C4;
}


/* HTML & BODY */
html, body {
	width: 100%; 
	font-family: var(--font-baloo);
	color: var(--kl-blauw); 
	font-size: 18px; /*15px;*/
	line-height: 1.4;
	scroll-behavior: smooth;
}


/* FONTS & KOPPEN */
h1 { font: var(--font-balooMed); font-size: 1.8rem; padding-bottom: 1rem; text-transform: lowercase; }
h2 { font: var(--font-balooMed); font-size: 1.2rem; padding-bottom: 0.3rem; }
h3 { font: var(--font-baloo); font-size: 1rem; }
h4 { font: var(--font-baloo); font-size: 0.7rem; padding-bottom: 1rem; }
h5, .quoteonderschrift { font: var(--font-balooMed); font-style: italic; font-size: 1rem;  margin-left: 60%; }
h6, .onderschrift { font: var(--font-baloo); font-size: 0.85rem; padding-bottom: 1.4rem; } /* onderschrift */
.mobkop { display: none; }
.ondertitel { font: var(--font-baloo); font-size: 0.9rem; }

p { font: var(--font-baloo); font-size: 1rem; line-height: 1.5; padding-bottom: 1rem; }
p.intro { padding-bottom: 1.8rem; }
blockquote { font: var(--font-baloo); margin-left: 2rem; padding: 1rem 0 0.5rem; }
a { color: var(--kl-roest); text-decoration: underline; }
a:hover { color: var(--kl-donkerroest); }


/* KLEUREN */
.roest { color: var(--kl-roest); }







/* NAVIGATIE */
nav { position: fixed; display: flex; align-items: center; justify-content: center; padding-top: 0.8rem; left: 0; width: 100%; 
	color: var(--kl-lichtblauw); z-index: 1000; }
nav.vervolg { backdrop-filter: blur(5px); }
nav ul { display: flex; list-style: none; gap: 0rem; border-bottom: 2px solid var(--kl-lichtblauw); }
nav li { font: var(--font-balooMed); font-size: 1.2rem; line-height: 1; letter-spacing: 10%; text-transform: lowercase; padding: 2.3rem 2rem 2.3rem; }
nav li:first-child { padding-left: 4.5rem; }
nav ul a { color: var(--kl-lichtblauw); text-decoration: none; }
nav ul a:hover, 
nav li.actief a { color: var(--kl-roest); }

.logo { position: relative; width: 5rem; height: 6.1rem; margin-right: -2rem; margin-top: -3px; z-index: 500; line-height: 0; }
.logo img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.3s ease; line-height: 0; }


/* HAMBURGER */
.hamburger { display: none; position: relative; width: 28px; height: 18px; cursor: pointer; }
.hamburger span { position: absolute; left: 0; width: 100%; height: 3px; background: var(--kl-lichtblauw); border-radius: 2px; transition: all 0.3s ease; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7.5px; }
.hamburger span:nth-child(3) { bottom: 0; }


/* HERO / SLIDESHOW */
.hero { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; }
.slide.active { opacity: 1; }
.slide.slidetop { background-position: top; }

/* PAGER */
.dots { position: relative; padding-top: 1.5rem; margin: 0 auto; display: flex; justify-content: center; gap: 0.8rem; z-index: 10; }
.dot { width: 1rem; height: 1rem; border-radius: 50%; background: none; border: 1px solid var(--kl-lichtblauw); transition: background 0.3s ease; cursor: pointer; }
.dot.active { background: #FFF; }


/* SECTIES */
section { min-height: 100vh; background: #FFF; padding: 6.5rem 1.5rem; }

/* ACHTERGROND VAST */
body.vervolg::before,
body.vervolg nav::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/Claudia_home1.jpg');
	background-size: cover; background-position: center; background-attachment: fixed; z-index: -1; }
body.wrk::before,
body.wrk nav::before { background-image: url('../images/Claudia_workshops_lichter.jpg'); background-position: top;}
body.obj::before,
body.obj nav::before { background-image: url('../images/Claudia_objecten.jpg'); background-position: top; }
body.rit::before,
body.rit nav::before { background-image: url('../images/Claudia_rituelen.jpg'); background-position: top; }
body.kra::before,
body.kra nav::before { background-image: url('../images/Claudia_kramen.jpg'); background-position: top; }
body.ovr::before,
body.ovr nav::before { background-image: url('../images/Claudia_over.jpg'); background-position: top; }


/* HOMETEKST */
.homediv { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 26rem; text-align: center; z-index: 500; }
.homediv .tekst { text-align: left; }
.homediv h1 { font: var(--font-balooMed); font-size: 3.0rem; letter-spacing: 11%; padding-bottom: 1rem; }
.homediv p { font: var(--font-baloo); font-size: 1.1rem; line-height: 1.4; letter-spacing: 11%; }


/* CONTENT */
.content { position: absolute; padding-top: 12rem; left: 50%; transform: translate(-50%, 0); width: 80%; max-width: 25rem; text-align: left; z-index: 20; color: var(--kl-roest); }
.content img { width: 100%; height: auto; padding-bottom: 0.2rem; }
.content p img { margin-bottom: -1rem; }

.tekstimg { width: 100%; }
.tekstimg img { width: 100%; height: auto; }

.objecten { margin-bottom: 10rem; }
.objecten li { width: 100%; padding-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.objecten li.klik { cursor: pointer; transition: color 0.2s; }
.objecten li.klik:hover { color: var(--kl-donkerroest); }
.objecten li > div { width: 50%; }
.objecten .foto img { width: 100%; height: auto; }
.objecten .tekst h3 { font: var(--font-baloo); font-size: 0.9rem; }
.objecten .tekst p { font-size: 0.7rem; }

.objecten .info { display: none; width: 90%; max-width: 30rem; height: auto; }

.workshop { padding-bottom: 2rem; }

/* MOBIEL UITKLAPBLOK */
.object-info { display: none; flex: 0 0 100%; width: 100%; margin-top: 1rem; padding: 1rem; background: var(--kl-popupbg); border: 0.5px solid var(--kl-popupkader); box-shadow: -4px 4px 8px rgba(214, 209, 196, 0.25); color: var(--kl-roest); }
/*.objecten li.open { flex-wrap: wrap; }*/
.objecten li.open .object-info { display: block; animation: expand 0.3s ease-out; }
.objecten li.open > div { width: calc(100% + 2.1rem); margin-left: -1.05rem; }


@keyframes expand {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}


/* CONTENT POPUP */
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 1000; }
.popup.active { opacity: 1; visibility: visible; }
.popup-content { position: relative; /*display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; */ width: 90%; max-width: 40rem; background: var(--kl-popupbg); border: 0.5px solid var(--kl-popupkader); box-shadow: -4px 4px 8px rgba(214, 209, 196, 0.5); color: var(--kl-roest); padding: 1rem 2rem 1rem 2rem; overflow-y: auto; }
.popup-close { position: absolute; top: 0rem; right: 0.3rem; padding: 0.5rem; font: var(--font-balooMed); font-size: 1.5rem; cursor: pointer; color: var(--kl-roest); z-index: 10; }
.popup-close:hover { color: var(--kl-donkerroest); }
.popup-foto { line-height: 0; display: flex; gap: 1.5rem; width: 100%; margin-bottom: 1rem; }
.popup-foto img { width: calc(50% - 0.75rem); height: auto; line-height: 0; }
.popup-tekst { padding-right: 1.5rem; }
.popup-tekst p { font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.3; }
.hidden { display: none; }




@media screen and (min-width: 621px) {
	.object-info { display: none !important; }
}



@media screen and (max-width: 950px) {
	html, body { font-size: 15px; }
}

@media screen and (max-width: 780px) {
	nav li { padding: 2.3rem 1rem 2.3rem; }
	nav li:first-child { padding-left: 3.5rem; }
}

@media screen and (max-width: 620px) {
	.hamburger { display: flex; }
	
	.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
	.hamburger.active span:nth-child(2) { opacity: 0; }
	.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
	
	nav { /*position: relative; */ overflow: visible; top: 0; left: 5%; width: 90%; padding: 0.8rem 1rem; display: flex; justify-content: flex-end;
        align-items: flex-end; height: auto; }
	
	.logo { width: 4.5rem; height: auto; margin: 0; }
	.logo img { width: 100%; height: auto; }
	.hamburger { display: flex; }

	/* BLAUWE LIJN */
	nav::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--kl-lichtblauw); z-index: 1; }
	
	/* MENU (ingeklapt onder lijn) */
	nav ul { position: absolute; top: 100%; left: 0; width: 100%; margin: 0;
		background: rgba(250,248,245,0.95); backdrop-filter: blur(6px);
		display: flex; flex-direction: column; align-items: flex-end;
		max-height: 0; overflow: hidden; transition: max-height 0.4s ease; 
		border-bottom: none; box-shadow: -4px 4px 8px rgba(214, 209, 196, 0.5); }
	nav ul::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--kl-lichtblauw); }
	nav ul.open { max-height: 300px; }
	nav li { padding: 0.7rem 1.5rem; }
	nav li:first-child { padding-top: 1.5rem; }
	nav li:last-child { padding-bottom: 1.5rem; }
	
	.mobkop { display: block; position: absolute; width: 90%; left: 50%; transform: translate(-50%, 0); max-width: 25rem; text-align: left; }
	.mobkop h1 { font: var(--font-balooMed); font-size: 1.8rem; text-transform: lowercase; }
	
	.content { position: absolute; } 
	.popup { display: none !important; }
	
	
	.objecten li { display: flex; flex-wrap: wrap; /*align-items: flex-start;*/ gap: 1rem; }
	.objecten li > div { width: calc(50% - 0.5rem); }
	
	.objecten li.open { padding-bottom: 1.5rem; }
	.objecten li.open > .foto,
	.objecten li.open > .tekst { width: 100%; }
	
	.objecten li.open .object-info { display: block; }
	.objecten li.open > .foto,
	.objecten li.open > .tekst { display: none; }
	
	
	
	
	.object-info { display: none; flex: 0 0 100%; width: calc(100% + 2.1rem); margin-left: -1.05rem; margin-top: 1rem; padding: 1rem; background: var(--kl-popupbg); border: 0.5px solid var(--kl-popupkader); box-shadow: -4px 4px 8px rgba(214, 209, 196, 0.25); color: var(--kl-roest); scroll-margin-top: 8rem; }

	
	.object-info .popup-foto { display: block; }
	.object-info .popup-foto img { width: 100%; margin-bottom: 1rem; }
	.object-info .popup-foto img:last-child { margin-bottom: 0; }


	
}


@media screen and (max-width: 400px) {
	.homediv h1 { font-size: 2.6rem; }
}

@media screen and (max-width: 375px) {
	.popup-content { width: 90%; }
}

@media screen and (max-width: 345px) {
	.breek { display: block; line-height: 0.6; }
}