/*==============================================
1.BASISINSTELLINGEN EN CSS VARIABELEN
==============================================*/

:root {
	--bgcolor-body: #ffffff; 			/* achtergrondkleur body*/
	--bgcolor-top: #333333;				/* achtergrondkleur top */
	--bgcolor-header: #f0f0f0;			/* achtergrondkleur header */
	--bgcolor-content: #ffffff; 		/* achtergrondkleur content */
	--bgcolor-aside: #fafafa; 			/* achtergrondkleur sidebar */
	--bgcolor-footer: #333333; 			/* achtergrondkleur footer */
	--btn-color: #6ba3e7;				/* kleur buttons */
	--btn-hover: color-mix(in srgb, var(--btn-color), black 20%); /* 2 tinten donkerder */
	--txtcolor-top: #ffffff;			/* tekstkleur top */
	--txtcolor-nav: #6ba3e7;			/* tekstkleur nav menu */
	--txtcolor-main: #333333;			/* tekstkleur hoofdtekst */
	--txtcolor-footer: #6ba3e7;			/* tekstkleur footer */
	--txtcolor-link: #6ba3e7;			/* tekstkleur hyperlink */
	--max-width: 1200px;				/* maximale breedte grote schermen*/
	--font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Lettertype */

}

/* .donker-thema { } */

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	gap: 0;
	width: 100%;
    font-family: var(--font-main);
	background-color: var(--bgcolor-body);
	line-height: 1.4;
	color: var(--txtcolor-main);
	display: flex;
	flex-direction: column;

	scroll-behavior: smooth; /* Zorgt voor zacht scrollen bij de knop */
	-webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,p {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 { padding: 1rem 0; }

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 400; }
h5 { font-size: 1rem; font-weight: 700; }
h6 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
p { font-size: clamp(0.9rem, 2vw, 1rem); font-weight: 350; }

.witruimte { padding:0.5rem; }

.link {
    color: var(--txtcolor-nav);
    text-decoration: none;   /* Verwijder standaard onderstreep */
    position: relative;      /* Verplicht voor de positionering van de lijn */
    display: inline-block;   /* Zorgt dat de lijn de tekstbreedte volgt */
    padding-bottom: 2px;     /* Ruimte voor de lijn */
}

/* De lijn die nog onzichtbaar is (breedte 0) */
.link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--txtcolor-nav);
    
    /* Animatie-instellingen */
    transform: scaleX(0);          /* Start onzichtbaar */
    transform-origin: center;       /* Groei vanuit het midden */
    transition: transform 0.3s ease; /* Gladde beweging */
}

/* De lijn uitschuiven bij hover */
.link:hover::after {
    transform: scaleX(1);          /* Wordt 100% breed */
}

.topwrapper {
	background-color: var(--bgcolor-top);
	color: var(--txtcolor-top);
	height:2em;
	width:100%;
	font-size:1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.topcontainer {
	width:100%;
	max-width: 1200px;
	display: flex;
	align-items: center;
	justify-content:space-between;
	gap: 1rem;
}

.topcontainer i {
	margin: 0 0.5rem;
}

.topcontainer a {color: #f0f0f0;text-decoration:none;}

.topleft {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 0.5rem
}

.topright {
	display: flex;
	align-items: center;
	justify-content: right;
}

/* Icon Kleuren */
.icon-phone { color: var(--txtcolor-nav); }
.icon-mail { color: var(--txtcolor-nav); }

.icon-whatsapp { color: var(--txtcolor-nav); }
.icon-instagram { color: var(--txtcolor-nav); }
.icon-linkedin { color: var(--txtcolor-nav); }

/* Algemene icon styling */
.social-icons i {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}

.social-icons a:hover i, .contact-item a:hover i {
    transform: scale(1.25); /* Subtiele zoom bij hover */
	color: color-mix(in srgb, var(--txtcolor-nav), white 30%);
}

.headerwrapper {
	background-color: var(--bgcolor-header);
	color: var(--txtcolor-header);
	height:4rem;
	width:100%;
	font-size:1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.headercontainer {
	width:100%;
	max-width: 1200px;
	display: flex;
	align-items: center;
	justify-content: space-between; 
	margin: 0 0.5rem;
}

.headerleft {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 0.5rem;
}

.headerright {
	display: flex;
	align-items: center;
	justify-content: right;
	margin: 0 0.5rem;
}

.headerlogo {
	height: 3rem;
}

.nav-container {
    display: flex;
    align-items: center;
}

/* --- BASIS LINK STYLING --- */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
	background: var(--bgcolor-header);
	border-top: 1px solid var(--txtcolor-nav);
}

.nav-link {
    color: var(--txtcolor-nav);
    text-decoration: none;
    font-weight: 600;
    display: block;
    position: relative;
    transition: color 0.3s;
}

.nav-links li { border-bottom:1px solid var(--txtcolor-nav); padding:1rem;}
	
/* Hamburger Button */
.hamburger {
	color: var(--txtcolor-nav);
	padding: 0.5rem 0.8rem;
	border-radius: 0.375rem;
	cursor: pointer;
	display: inline-block;
	transition: background 0.2s;
	border: 0.125rem solid var(--txtcolor-nav);
}

.hamburger:hover {
	background-color: var(--txtcolor-nav);
	color: #f0f0f0;
}

/* Toon menu als checkbox is aangevinkt */
#menu-toggle:checked ~ .nav-links {
	display: flex;
}

#menu-toggle { display: none; }

.sloganwrapper {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: var(--txtcolor-body);
	height:25rem;
	width:100%;
	font-size:1rem;
	display: flex;
	align-items: center;
	justify-content: center; 
}

.slogantitel {
	background: #c0c0c0;
	color: var(--txtcolor-top);
	height:5rem;
	width:100%;
	font-size:1rem;
	display: flex;
	align-items: center;
	justify-content: center; 
}

.slogancontainer {
	width:100%;
	max-width: 1200px;
	align-items: center;
	gap: 1rem;
}

.sloganleft {
	max-width: 800px;
}

.sloganleft p {
	margin: 0;
	font-size: 3rem;
	color: #ffffff;
	font-weight: 800;
}

.button-container {
    display: flex;
    gap: 2rem; /* Ruimte tussen de knoppen */
    justify-content: left; /* Optioneel: centreert de knoppen horizontaal */
	margin-top: 2rem;
}

.mainwrapper {
	background-color: var(--bgcolor-content);
	color: var(--txtcolor-content);
	min-height:30em;
	width:100%;
	display: flex;
	align-items: top;
	justify-content: center;
}

.maincontainer {
	width:100%;
	max-width: 1200px;
	margin: 0 auto;
	gap: 1rem;
	padding: 1rem;
}

.footerwrapper {
	background-color: var(--bgcolor-top);
	color: var(--bgcolor-body);
	height:6rem;
	width:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footercontainer {
	width:100%;
	max-width: 1200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 0.5rem;
}

.footerleft {
	align-items: center;
	justify-content: left;
}

.footerright {
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 1rem;
}

/* .footerwrapper a { color: var(--txtcolor-footer);text-decoration:none; }

.footerwrapper a:hover { color: color-mix(in srgb, var(--btn-color), white 20%); } */

.footerwrapper p { font-size: clamp(1rem, 1.1vw, 1.125rem);margin:0;padding:0;
  max-width:100%; /* Voorkomt dat regels te breed worden op grote schermen */
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Kleuren & Tekst */
    background-color: var(--btn-color);
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    
    /* Grootte & Vorm (gebaseerd op touchscreen advies) */
    min-height: 3rem; /* Ideaal voor touch */
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    
    /* Animatie */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
    background-color: var(--btn-hover);
	color: #ffffff;
}

.btn:active {
    transform: scale(0.98); /* Kleine feedback bij klikken */
}

/* Specifieke formulier-styling contactpagina */
.contact-section {
min-height: 80vh;
display: flex;
justify-content: left;
align-items: flex-start;
}

.contact-container {
width: 100%;
max-width: 43.5rem;
padding: 1rem;
border-radius: 0.375rem;
box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.05);
border: 0.0625rem solid var(--bgcolor-header);
}

.contact-container h1 {
color: var(--btn-color);
margin-bottom: 0.5rem;
font-size: 1.8rem;
}

.contact-container p.subtitle {
margin-bottom: 2rem;
color: #666;
}

.form-group {
margin-bottom: 1.5rem;
text-align: left;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--txtcolor-main);
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.8rem;
border: 0.0625rem solid #ccc;
border-radius: 0.375rem;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.3s;
box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
border-color: var(--btn-color);
outline: none;
box-shadow: 0 0 0 0.1875rem rgba(107, 163, 231, 0.1);
}

.submit-btn {
background-color: var(--btn-color);
color: #fff;
border: none;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.0625rem;
cursor: pointer;
width: 100%;
border-radius: 0.25rem;
transition: background 0.3s;
}

.submit-btn:hover {
background-color: var(--btn-hover);
}

/* Feedback meldingen */
.alert {
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0.25rem;
font-size: 0.95rem;
font-weight: 500;
}
.success { background-color: #d4edda; color: #155724; border: 0.0625rem solid #c3e6cb; }
.error { background-color: #f8d7da; color: #721c24; border: 0.0625rem solid #f5c6cb; }

/* Verberg Honeypot */
.hidden { display: none !important; }



/*==============================================
2. LAYOUT RESPONSIVE <349px
==============================================*/

@media (max-width: 349px) {
html { font-size: 90%; /* schalen op oude en/of kleine schermen zodat header op scherm past vanaf 320px */ }
.sloganleft p { font-size:2rem; }
.sloganwrapper { height: 17rem; }
.contact-item span { display:none ; }

.nav-links {
	display: none; /* Verberg menu standaard */
	flex-direction: column;
	position: absolute;
	top: 100%;
	right: 0;
	}

.mainright {display:none; }
	
}

/*==============================================
2. LAYOUT RESPONSIVE 350px - 619px
==============================================*/

@media (min-width: 350px) and (max-width: 619px) {
.contact-item span { 
	display:none ; 
	}

.nav-links {
	display: none; /* Verberg menu standaard */
	flex-direction: column;
	position: absolute;
	top: 100%;
	right: 0;
}

.mainright {display:none; }

}

/*==============================================
3. LAYOUT RESPONSIVE 620px - 899px
==============================================*/

@media (min-width: 620px) and (max-width: 899px) {
.topleft {
	gap: 1rem
	}	

.headerwrapper {
	height:5.75rem;
}

.headerlogo {
	height: 2.8rem;
}

.headercontainer {
	display: grid;
	flex-direction: column;
	gap:0.0625rem;
}

.maincontainer {
	display: grid;
	grid-template-columns: 3fr 1fr;
	align-items: start;
}

.mainright {
	background: var(--bgcolor-content);
	position: sticky; 
	top: 1rem;
	height: fit-content;
	min-height: 20rem;
	padding: 0.5rem;
	border: 0.0625rem solid var(--bgcolor-header);
	border-radius: 1rem; /* Ronde hoeken */
	box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.5); /* Subtiele schaduw */
	overflow: hidden;
	}

.mainright i { margin: 0 0.5rem; }

.nav-links li { padding: 0.0625rem;}

.sloganleft p {
	font-size: 5rem;
	}

.sloganwrapper { 
	height: 35rem; 
	}

.hamburger, #menu-toggle { 
	display: none; 
	}

.nav-links {
	display: flex !important;
	gap: 1rem;
	}

.nav-links, .nav-links li {
	border: 0;
	}

/* Animatie: Onderstreep vanuit het midden */
.nav-link::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--txtcolor-nav);
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: center; /* Zorgt voor groei vanuit het midden */
	}

.nav-link:hover::after {
	transform: scaleX(1);
	}

}

/*==============================================
4. LAYOUT RESPONSIVE > 900px
==============================================*/

@media (min-width: 900px) {
.topleft {
	gap: 2rem
	}	

.headerwrapper {
	height:5rem;
}

.headerlogo {
	height: 3.5rem;
}

.headerright {
	display: flex;
	align-items: center;
	justify-content: right;
	margin: 0 0.375rem;
}

.nav-links li { padding: 0.0625rem;}

.sloganleft p {
	font-size: 5rem;
	}

.sloganwrapper { 
	height: 35rem; 
	}

.maincontainer {
	display: grid;
	grid-template-columns: 3fr 1fr;
	align-items: start;
}

.mainright {
	background: var(--bgcolor-aside);
	position: sticky; 
	top: 1rem;
	height: fit-content;
	min-height: 20rem;
	padding: 0.5rem;
	border: 0.0625rem solid var(--bgcolor-header);
	border-radius: 1rem; /* Ronde hoeken */
	box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.5); /* Subtiele schaduw */
	overflow: hidden;
	}

.mainright i { margin: 0 0.5rem; }

.hamburger, #menu-toggle { 
	display: none; 
	}

.nav-links {
	display: flex !important;
	gap: 1rem;
	}

.nav-links, .nav-links li {
	border: 0;
	}

/* Animatie: Onderstreep vanuit het midden */
.nav-link::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--txtcolor-nav);
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: center; /* Zorgt voor groei vanuit het midden */
	}

.nav-link:hover::after {
	transform: scaleX(1);
	}

}