/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-boxlogo
}


html {
  font-size: clamp(1rem, 1vw, 2.5rem);
}




body {
	font-family: Arial, sans-serif;
	color: #fff;
	line-height: 1.6;
	background: #111;
}

p {
	margin-bottom: 1rem;
	
}

.pf-bg {
	background: #fff;
	padding-bottom:5rem;;
	/* display:flex; */
	/* bottom: 500px; */
}

.caption {
	/* font-style: italic; */
	text-transform:uppercase;
	font-size: 0.7rem;
}


/* Header */
header {
  background: #111;
  padding: 0px;
  border-bottom: dotted 1px white;
  
  box-shadow: 0 20px 60px rgba(125,255,125,0.5);
  position: sticky;
  top: 0;
  z-index: 100;
}

header .container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: right;
  justify-content: space-between;
}

header nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
  font-weight: thin;
  font-size: 1rem;
}

/* --- NAV --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* move items to top */
  padding: 15px 20px;
}

/* Desktop menu */
.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav-links a {
  color: #ddd;
  text-decoration: none;
  font-size: 18px;
  /* border-bottom: 1px dotted black; */
}

.nav-links #selected {
	font-weight: 900;
}
/* Hamburger knop (mobiel) */
.hamburger {
	
  display: none;
  margin-top:10px;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
  color: #ddd; 
}




/* masthead */

.masthead {
	padding-left:20vw;
	padding-right:20vw;
	padding-top:125px;
	position:relative;
	height: 55vh;
	display: flex;
	/* align-items: center; */
	justify-content: left;
	text-align: left;
	color: white;
}

q {
	font-size:0.8rem;
	position:relative;
	top:1rem;
	font-style:italic;
	font-weight:bold;
}

.masthead::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.1);
}

.masthead h1 {
	font-size: 2.0rem;
	margin-top:0rem;
	line-height: 1.6rem;
	font-weight: 900;
}

.masthead h2 {
	padding-right:20%;
	margin-top: 4rem;
	font-size:1.2rem;
}

.masthead h3 {
	margin-top: 2rem;
}


.masthead p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}
P { font-size: 0.8rem; }

.masthead .btn {
  display: inline-block;
  padding: 12px 30px;
  background: #ff6f61;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
}

/* Sections */
.section {
  padding: 60px 20px;
}

.section .container {
	max-width: 1200px;
	/* margin: auto; */
	margin: 5% 20%;
  
}

.section.about {
  background: white;
}

.section.about .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 10%;
	align-items: top;
}

.section.about img {
  max-width: 100%;
  border-radius: 8px;
}

.section.about .text {
  font-size: 1rem;
}

/* Footer */
footer {
  background: #333;
  color: white;
  padding: 40px 20px;
}

footer .container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

footer p {
  margin-bottom: 10px;
}

footer a {
  color: #ff6f61;
  text-decoration: none;
}

.floating-logo {
  position: absolute; /* float above everything */
  top: 10px;          /* adjust distance from top */
  left: 30px;         /* adjust horizontal position */
  width: 5rem;       /* adjust size */
  max-width: 200px;       /* adjust size */
  z-index: 200;       /* higher than header/masthead */
}




/* 📱 Smartphones */
@media (max-width: 480px) {
	.floating-logo {
		top: 10px;
		left: 10px;
		width: 60px; /* kleiner voor gsm */
	}
  
}


/* 📱📱 Grotere smartphones & kleine tablets */
@media (max-width: 768px) {
	
	Header { padding: 20px; }
	.floating-logo {
		top: 3px;
		left: 4px;
		width: 64px;
	}

	.hamburger {
		display: block;
		position:absolute;
		top:0px;
		right:10px;
	}

  /* Verberg menu standaard */
	.nav-links {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7); /* 50% transparent */
		backdrop-filter: blur(5px); /* optional: frosted glass effect */
		width: 100%;
		height: 100vh;
		flex-direction: column;
		justify-content: center;   /* horizontaal */
		align-items: center;
		display: flex;
		z-index:200;
		transform: translateX(-100%);
	}

	.nav-links a {
		color:white;
		/* border-bottom: 1px dotted white; */
		font-weight:900;
	}

  /* Toon menu wanneer actief */
	.nav-links.active {
		gap: 45px;
		display: flex;
		border-bottom: 2px solid black;
		transform: translateX(0);
	}
  
}


/* 🖥 Grote schermen */
@media (min-width: 1200px) {
	.floating-logo {
	/* width: 200px; /* optioneel wat groter */ */
	}
}