/* ==========================================================
   pb-header.css
   Schuine-vakken header — Optie B (geen priority-nav JS)
   ========================================================== */

:root {
	--pb-color-primary: #0b6e79;   /* TODO: vervang door echt merkkleur */
	--pb-color-secondary: #c7cdb0; /* TODO: vervang door echt merkkleur */
	--pb-color-text-dark: #1f2a24;
	--pb-header-height: 92px;
}

.pb-header {
	position: relative;
	width: 100%;
}

.pb-header__inner {
	display: flex;
	align-items: stretch;
	min-height: var(--pb-header-height);
}

/* ---------- Logo-vak ---------- */
.pb-logo {
	background: var(--pb-color-primary);
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	display: flex;
	align-items: center;
	padding: 18px 70px 18px 32px;
	flex: 0 0 auto;
	z-index: 3;
}
.pb-logo__text {
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ---------- Menu-vak ---------- */
.pb-nav {
	background: var(--pb-color-secondary);
	clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
	margin-left: -46px;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0 70px 0 90px;
	z-index: 2;
}
.pb-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.pb-menu li {
	position: relative;
	padding: 0 16px;
}
.pb-menu li:not(:last-child)::after {
	content: '/';
	position: absolute;
	right: -2px;
	color: var(--pb-color-text-dark);
	opacity: 0.5;
}
.pb-menu a {
	color: var(--pb-color-text-dark);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.pb-menu a:hover {
	opacity: 0.7;
}

/* ---------- CTA-vak ---------- */
.pb-cta {
	background: var(--pb-color-primary);
	clip-path: polygon(12% 0, 100% 0, 100% 78%, 88% 100%, 0 100%);
	margin-left: -40px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 34px 0 56px;
	z-index: 3;
}
.pb-cta__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 600;
	font-style: italic;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Hamburger (verborgen op desktop) ---------- */
.pb-hamburger {
	display: none;
}

/* ==========================================================
   VEILIGHEIDSNET (Optie B)
   Bewust een ruimere breakpoint dan Salient's standaard (~1000px),
   zodat het vakkenontwerp nooit halverwege kan "breken" als het
   menu een keer groeit. Dit is de enige plek die je hoeft aan te
   passen als er structureel meer/langere menu-items bijkomen.
   ========================================================== */
@media (max-width: 1400px) {
	.pb-nav {
		display: none;
	}
	.pb-cta__btn span {
		display: none; /* alleen pijl-icoon op kleinere breedte */
	}
	.pb-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		margin-left: 12px;
		background: none;
		border: none;
		cursor: pointer;
		z-index: 3;
	}
	.pb-hamburger span {
		display: block;
		height: 2px;
		background: var(--pb-color-text-dark);
	}
}

@media (min-width: 1401px) {
	.pb-mobile-menu {
		display: none !important;
	}
}

.pb-mobile-menu {
	display: none;
	flex-direction: column;
	background: var(--pb-color-secondary);
	padding: 16px 24px;
}
.pb-mobile-menu.is-open {
	display: flex;
}
.pb-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pb-mobile-menu__list li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pb-mobile-menu__list a {
	display: block;
	padding: 14px 4px;
	color: var(--pb-color-text-dark);
	text-decoration: none;
	font-weight: 600;
}

@media (max-width: 600px) {
	.pb-logo {
		padding: 14px 40px 14px 20px;
		clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
	}
	.pb-cta {
		padding: 0 20px;
	}
}