/* Banner styling - Vaste positie, vult de breedte */
.banner {
	width: 100%;
	padding-top: 0.25rem; /* py-1 */
	padding-bottom: 0.25rem; /* py-1 */
	background-color: rgb(46, 85, 56); /* bg-green-700 */
	position: fixed; /* fixed */
	top: 0; /* top-0 */
	left: 0; /* left-0 */
	z-index: 1000; /* z-50 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
	display: flex; /* flex */
	flex-direction: column; /* flex-col */
	align-items: center; /* items-center */
	justify-content: center; /* justify-center */
}

/* Logo styling in de banner */
.banner .logo {
	
	width: 100%; /* w-full */
	height: auto; /* h-auto */
	display: block; /* block */
	margin-top: 0.5rem; /* my-2 */
	margin-bottom: 0.5rem; /* my-2 */
	margin-left: auto; /* mx-auto */
	margin-right: auto; /* mx-auto */
}

/* Button container binnen de banner */
.button-container {
	display: flex; /* flex */
	flex-wrap: wrap; /* flex-wrap */
	justify-content: center; /* justify-center */
	gap: 1rem; /* gap-4 */
	padding-top: 0.5rem; /* py-2 */
	padding-bottom: 0.5rem; /* py-2 */
	width: 100%; /* w-full */
}

/* Basisstijlen voor alle bannerknoppen */
.banner_knop_zonder,
.banner_knop_dropdown {
	background-color: rgb(247, 148, 51); /* bg-orange-400 */
	color: rgb(46, 85, 56); /* text-green-700 */
	border: none; /* border-none */
	padding: 0.75rem 1.5rem; /* py-3 px-6 */
	text-align: center; /* text-center */
	text-decoration: none; /* no-underline */
	display: inline-flex; /* inline-flex */
	align-items: center; /* items-center */
	justify-content: center; /* justify-center */
	font-size: 1rem; /* text-base */
	font-weight: 600; /* font-semibold */
	margin: 0.25rem 0.125rem; /* m-1 (customized slightly for horizontal) */
	cursor: pointer; /* cursor-pointer */
	border-radius: 0.375rem; /* rounded-md */
	transition: all 0.2s ease-in-out; /* transition-all duration-200 ease-in-out */
	flex-grow: 1; /* flex-grow */
	min-width: 8rem; /* min-w-[8rem] */
	max-width: 12rem; /* max-w-[12rem] */
	position: relative; /* relative */
	z-index: 1; /* z-10 */
}

/* Hover effect voor alle knoppen */
.banner_knop_zonder:hover,
.banner_knop_dropdown:hover {
	transform: scale(1.05); /* hover:scale-105 */
	background-color: rgb(255, 165, 71); /* hover:bg-orange-500 */
}

/* Active en hover z-index voor dropdown knoppen */
.banner_knop_dropdown:hover,
.banner_knop_dropdown.active {
	z-index: 20; /* hover:z-20 active:z-20 */
}

/* Stijlen voor de links binnen de knoppen */
.banner_knop_link {
	color: inherit; /* text-inherit */
	text-decoration: none; /* no-underline */
	display: flex; /* flex */
	align-items: center; /* items-center */
	justify-content: center; /* justify-center */
	width: 100%; /* w-full */
	height: 100%; /* h-full */
}

/* SVG icoon stijlen in de dropdown knoppen */
.banner_knop_dropdown .dropdown-arrow {
	width: 1.25rem; /* w-5 */
	height: 1.25rem; /* h-5 */
	margin-left: 0.5rem; /* ml-2 */
	transition: transform 0.3s ease-out; /* transition-transform duration-300 ease-out */
	fill: currentColor; /* fill-current */
}

/* Draai de pijl wanneer de dropdown open is of gehoverd wordt */
.banner_knop_dropdown.active .dropdown-arrow,
.banner_knop_dropdown:hover .dropdown-arrow {
	transform: rotate(180deg);
}

/* Dropdown content */
.dropdown-content {
	display: none; /* hidden */
	position: absolute; /* absolute */
	background-color: rgb(247, 148, 51); /* bg-orange-400 */
	color: rgb(46, 85, 56); /* text-green-700 */
	width: 100%; /* w-full */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
	border-radius: 0.375rem; /* rounded-md */
	top: 100%; /* top-full */
	left: 0; /* left-0 */
	z-index: 20; /* z-20 */
	transform: translateY(-0.5rem); /* transform -translate-y-2 */
	opacity: 0; /* opacity-0 */
	transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* transition-all duration-300 ease-out */
	pointer-events: none; /* pointer-events-none */
	padding-top: 0.5rem; /* py-2 */
	padding-bottom: 0.5rem; /* py-2 */
	text-align: left; /* text-left */
}

/* Dropdown content links */
.dropdown-content a {
	color: rgb(46, 85, 56); /* text-green-700 */
	padding: 0.75rem 1rem; /* px-4 py-3 */
	text-decoration: none; /* no-underline */
	display: block; /* block */
	white-space: nowrap; /* whitespace-nowrap */
	transition: background-color 0.2s ease-in-out; /* transition-colors duration-200 */
	border-radius: 0.375rem; /* rounded-md */
}

.dropdown-content a:hover {
	background-color: rgb(255, 165, 71); /* hover:bg-orange-500 */
}

/* Toon dropdown op hover (desktop) - activeert animatie */
.banner_knop_dropdown:hover .dropdown-content {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Toon dropdown op klik (via JavaScript) - activeert animatie */
.banner_knop_dropdown.active .dropdown-content {
	display: block; /* Zorgt ervoor dat display blok is voor animatie */
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Verborgen klasse voor JS-beheer */
.hidden {
	display: none !important;
}

/* Media queries voor responsiviteit van knoppen */
@media (min-width: 640px) {
	/* sm breakpoint */
	.banner_knop_zonder,
	.banner_knop_dropdown {
		max-width: 10rem; /* Iets breder op tablets */
	}
}

@media (min-width: 768px) {
	/* md breakpoint */
	.banner_knop_zonder,
	.banner_knop_dropdown {
		max-width: 12rem; /* Nog breder op desktops */
	}
}