/* =============================================
   Header / Navbar stijlen
   ============================================= */

/* ─────────────────────────────────────────────
   DESKTOP (≥ 992px): zwevende pill-navbar
   Logo in de pill, links naast Home
   ───────────────────────────────────────────── */
@media (min-width: 992px) {
	/* Pill: gecentreerd, met logo erin */
	#top-bar {
		position: fixed !important;
		top: 12px !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		width: calc(100% - 140px) !important;
		max-width: 1100px !important;
		margin: 0 !important;
		border-radius: 50px !important;
		overflow: hidden;
		z-index: 999 !important;
		transition: transform 0.35s ease, opacity 0.35s ease !important;
	}

	#top-bar.nav--hidden {
		transform: translateX(-50%) translateY(-110%) !important;
		opacity: 0 !important;
	}

	#top-bar .top-bar__bg {
		position: absolute !important;
		inset: 0;
		background-color: rgba(40, 33, 84, 0.92) !important;
		background-image: none !important;
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}

	/* Container + row: alles op één horizontale lijn */
	#top-bar .container-fluid {
		position: relative;
		z-index: 1;
		width: auto !important;
		max-width: none !important;
		padding: 0 20px !important;
	}

	#top-bar .container-fluid .row {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 0 !important;
	}

	/* Logo: in de flow, links in de pill */
	#top-bar .top-bar__logo {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		flex-shrink: 0;
		margin: 0 8px 0 0 !important;
		z-index: 1 !important;
		transition: none !important;
	}

	#top-bar .top-bar__logo img {
		height: 40px !important;
		display: block;
	}

	/* Inner wrapper: in de flex-rij */
	#top-bar .top-bar__inner {
		display: flex !important;
		align-items: center !important;
		height: auto !important;
		overflow: visible !important;
		margin-left: 0 !important;
	}

	/* Nav-items compact */
	#top-bar .top-bar__navigation li {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		margin-left: 14px !important;
	}

	#top-bar .top-bar__navigation li:first-child {
		margin-left: 0 !important;
	}

	#top-bar .top-bar__navigation a {
		font-size: 1.35rem !important;
	}
}

/* ─────────────────────────────────────────────
   MOBIEL (≤ 991px): strakke topbalk
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
	/* Topbalk: vast, volledige breedte, subtiele schaduw */
	#top-bar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		overflow: visible !important;
		z-index: 1000 !important;
		transition: none !important;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
	}

	#top-bar.nav--hidden {
		transform: translateY(-110%) !important;
		opacity: 0 !important;
	}

	#top-bar {
		transition: transform 0.35s ease, opacity 0.35s ease !important;
	}

	/* Topbalk achtergrond */
	#top-bar .top-bar__bg {
		position: absolute !important;
		inset: 0;
		background: #282154 !important;
		background-image: none !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Container: logo en hamburger op één rij, verticaal gecentreerd */
	#top-bar .container-fluid {
		position: relative;
		z-index: 1;
		padding: 0 20px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: 64px !important;
	}

	/* Logo */
	#top-bar .top-bar__logo {
		margin-left: 0 !important;
		flex-shrink: 0;
	}

	#top-bar .top-bar__logo img {
		height: 38px !important;
		display: block;
	}

	/* Hamburger knop: vast rechts, verticaal gecentreerd in de balk */
	#top-bar .top-bar__navigation-toggler {
		position: absolute !important;
		top: 50% !important;
		right: 16px !important;
		transform: translateY(-50%) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.10) !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		transition: background 0.2s ease !important;
	}

	#top-bar .top-bar__navigation-toggler:hover,
	#top-bar .top-bar__navigation-toggler:focus {
		background: rgba(148, 194, 74, 0.25) !important;
		border-color: #94c24a !important;
	}

	/* Hamburger lijntjes iets dikker en breder */
	#top-bar .top-bar__navigation-toggler span {
		width: 22px !important;
		height: 2px !important;
	}

	#top-bar .top-bar__navigation-toggler span::before {
		top: -7px !important;
	}

	#top-bar .top-bar__navigation-toggler span::after {
		top: 7px !important;
	}

	/* ── DRAWER: schuift in van rechts ── */

	/* Overlay achtergrond (via .top-bar__bg bij is-expanded) */
	#top-bar.is-expanded .top-bar__bg {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(10, 8, 30, 0.72) !important;
		-webkit-backdrop-filter: blur(4px) !important;
		backdrop-filter: blur(4px) !important;
	}

	/* Drawer zelf */
	#top-bar.is-expanded .top-bar__inner {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		bottom: 0 !important;
		width: 80vw !important;
		max-width: 320px !important;
		height: 100% !important;
		padding: 0 !important;
		border-top: none !important;
		border-bottom: none !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		text-align: left !important;
		font-size: 1rem !important;
		background: #282154 !important;
		box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		animation: qps-drawer-in 0.30s cubic-bezier(0.22, 1, 0.36, 1) both !important;
	}

	@keyframes qps-drawer-in {
		from { transform: translateX(100%); opacity: 0.4; }
		to   { transform: translateX(0);    opacity: 1;   }
	}

	/* Pseudo-element verwijderen (was vertical-align truc) */
	#top-bar.is-expanded .top-bar__inner::before {
		display: none !important;
	}

	/* Nav-blok in de drawer */
	#top-bar.is-expanded .top-bar__navigation {
		display: block !important;
		margin: 0 !important;
		padding: 80px 0 40px !important;
		width: 100% !important;
	}

	/* Scheidingslijn bovenaan nav */
	#top-bar.is-expanded .top-bar__navigation::before {
		content: "";
		display: block;
		height: 1px;
		margin: 0 24px 24px;
		background: rgba(255, 255, 255, 0.12);
	}

	/* Elk menu-item */
	#top-bar.is-expanded .top-bar__navigation li {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
		animation: qps-item-in 0.35s ease both;
	}

	/* Staggered fade-in per item */
	#top-bar.is-expanded .top-bar__navigation li:nth-child(1) { animation-delay: 0.05s; }
	#top-bar.is-expanded .top-bar__navigation li:nth-child(2) { animation-delay: 0.10s; }
	#top-bar.is-expanded .top-bar__navigation li:nth-child(3) { animation-delay: 0.15s; }
	#top-bar.is-expanded .top-bar__navigation li:nth-child(4) { animation-delay: 0.20s; }
	#top-bar.is-expanded .top-bar__navigation li:nth-child(5) { animation-delay: 0.25s; }
	#top-bar.is-expanded .top-bar__navigation li:nth-child(6) { animation-delay: 0.30s; }
	#top-bar.is-expanded .top-bar__navigation li:nth-child(7) { animation-delay: 0.35s; }

	@keyframes qps-item-in {
		from { opacity: 0; transform: translateX(20px); }
		to   { opacity: 1; transform: translateX(0);    }
	}

	/* Menu link */
	#top-bar.is-expanded .top-bar__navigation a:not(.custom-btn) {
		display: block !important;
		padding: 15px 28px !important;
		font-size: 1.6rem !important;
		font-weight: 600 !important;
		color: rgba(255, 255, 255, 0.88) !important;
		letter-spacing: 0.02em !important;
		transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease !important;
		text-decoration: none !important;
	}

	#top-bar.is-expanded .top-bar__navigation a:not(.custom-btn):hover,
	#top-bar.is-expanded .top-bar__navigation li.active > a:not(.custom-btn) {
		color: #94c24a !important;
		background: rgba(148, 194, 74, 0.08) !important;
		padding-left: 36px !important;
	}

	/* Actieve indicator: groene streep links */
	#top-bar.is-expanded .top-bar__navigation li.active > a:not(.custom-btn) {
		border-left: 3px solid #94c24a !important;
		padding-left: 33px !important;
	}

	/* Verberg de :after onderstreep in drawer */
	#top-bar.is-expanded .top-bar__navigation a:not(.custom-btn)::after {
		display: none !important;
	}

	/* Taalwisseling in drawer */
	#top-bar.is-expanded .top-bar__navigation .nav-lang {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px 8px !important;
		padding: 16px 28px !important;
		justify-content: flex-start !important;
	}

	#top-bar.is-expanded .top-bar__navigation .nav-lang a,
	#top-bar.is-expanded .top-bar__navigation .nav-lang span {
		font-size: 1.2rem !important;
		color: rgba(255, 255, 255, 0.6) !important;
		padding: 0 !important;
	}

	#top-bar.is-expanded .top-bar__navigation .nav-lang a:hover {
		color: #94c24a !important;
	}

	/* "Get in Touch" knop in drawer */
	#top-bar.is-expanded .top-bar__navigation .li-btn {
		padding: 20px 28px 28px !important;
		border-bottom: none !important;
	}

	#top-bar.is-expanded .top-bar__navigation .li-btn a.custom-btn {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
		padding: 13px 20px !important;
		font-size: 1.4rem !important;
		border-radius: 50px !important;
	}

	/* Logo in topbalk bij open drawer: verborgen (logo is in drawer niet nodig) */
	#top-bar.is-expanded .top-bar__logo {
		z-index: 1001 !important;
	}

	/* Hamburger → X knop bij open drawer */
	#top-bar.is-expanded .top-bar__navigation-toggler {
		z-index: 1001 !important;
		background: rgba(148, 194, 74, 0.18) !important;
		border-color: #94c24a !important;
	}
}

/* ─────────────────────────────────────────────
   GEDEELD: kleur & stijl (desktop én mobiel)
   ───────────────────────────────────────────── */

/* Frosted-glass overlay uitschakelen (desktop) */
#top-bar .top-bar__bg::after {
	background: transparent !important;
}

/* Lettertype dikker */
#top-bar .top-bar__navigation a {
	font-weight: 700 !important;
}

/* Hover/actief streep groen (desktop) */
#top-bar .top-bar__navigation li:hover > a:not(.custom-btn)::after,
#top-bar .top-bar__navigation li.active > a:not(.custom-btn)::after {
	background-color: #94c24a !important;
}

/* "Get in Touch" knop */
#top-bar .top-bar__navigation .li-btn a.custom-btn {
	background-color: #6a9435 !important;
	border-color: #6a9435 !important;
	color: #fff !important;
	transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

#top-bar .top-bar__navigation .li-btn a.custom-btn:hover,
#top-bar .top-bar__navigation .li-btn a.custom-btn:focus {
	background-color: #94c24a !important;
	border-color: #94c24a !important;
	color: #fff !important;
}