/*
 * header.css
 * DocBase header
 */

:root{
	--dbt-header-bg:#fff;
	--dbt-header-text:#050505;
	--dbt-header-accent:#00a99d;
	--dbt-header-line:rgba(5,5,5,.92);
	--dbt-header-height:82px;
	--dbt-header-side:clamp(24px,3vw,56px);
	--dbt-font:"Jakarta Bold", Arial, sans-serif;
}

html{scroll-behavior:smooth;}
body{margin:0;}

.dbt-header,
.dbt-header *{box-sizing:border-box;}

.dbt-header{
	position:sticky;
	top:0;
	z-index:99999;
	width:100%;
	height:var(--dbt-header-height);
	border:0;
	background:var(--dbt-header-bg);
	color:var(--dbt-header-text);
	font-family:var(--dbt-font);
}

.dbt-header__inner{
	position:relative;
	width:100%;
	height:var(--dbt-header-height);
	display:flex;
	align-items:center;
	gap:34px;
	padding:0 var(--dbt-header-side);
}

.dbt-brand{
	display:inline-flex;
	align-items:center;
	flex:0 0 auto;
	color:var(--dbt-header-text);
	line-height:1;
	text-decoration:none!important;
}

.dbt-brand__word{
	display:inline-block;
	color:#00a99d;
	font-family:var(--dbt-font);
	font-size:22px;
	line-height:1;
	font-weight:900;
	letter-spacing:.18em;
	text-transform:uppercase;
}

.dbt-center-logo{
	position:absolute;
	left:50%;
	top:50%;
	z-index:5;
	width:64px;
	height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:translate(-50%,-50%);
}

.dbt-center-logo a{
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
}

.dbt-center-logo img{
	display:block;
	width:34px;
	height:34px;
	object-fit:contain;
}

.dbt-nav{
	height:var(--dbt-header-height);
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:0;
	margin-left:auto;
}

.dbt-nav__link{
	position:relative;
	height:var(--dbt-header-height);
	display:inline-flex;
	align-items:center;
	color:var(--dbt-header-text)!important;
	font-family:var(--dbt-font);
	font-size:14px;
	line-height:1;
	font-weight:900;
	white-space:nowrap;
	text-decoration:none!important;
	transition:color .18s ease;
}

.dbt-nav__link:hover,
.dbt-nav__link:focus-visible,
.dbt-nav__link.is-current{
	color:var(--dbt-header-accent)!important;
}

.dbt-nav__link.is-current::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:17px;
	height:2px;
	border-radius:999px;
	background:var(--dbt-header-accent);
}

.dbt-separator{
	width:42px;
	height:var(--dbt-header-height);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--dbt-header-line);
	font-size:20px;
	line-height:1;
	font-weight:900;
	pointer-events:none;
}

.dbt-language{
	display:inline-flex;
	align-items:center;
	gap:10px;
	flex:0 0 auto;
	margin-left:28px;
	color:var(--dbt-header-text);
	font-family:var(--dbt-font);
	font-size:14px;
	line-height:1;
	font-weight:900;
	text-decoration:none!important;
	transition:opacity .18s ease;
}

.dbt-language:hover,
.dbt-language:focus-visible{opacity:.62;}

.dbt-flag-nl{
	width:25px;
	height:16px;
	display:inline-grid;
	grid-template-rows:repeat(3,1fr);
	box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}

.dbt-flag-nl span:nth-child(1){background:#ae1c28;}
.dbt-flag-nl span:nth-child(2){background:#fff;}
.dbt-flag-nl span:nth-child(3){background:#21468b;}

.dbt-language__chevron{
	width:8px;
	height:8px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(45deg) translateY(-2px);
}

.dbt-toggle{
	display:none;
	width:42px;
	height:42px;
	margin-left:auto;
	padding:0;
	border:0;
	background:transparent;
	color:var(--dbt-header-text);
	cursor:pointer;
}

.dbt-toggle span{
	display:block;
	width:24px;
	height:2px;
	margin:5px auto;
	border-radius:99px;
	background:currentColor;
	transition:transform .18s ease, opacity .18s ease;
}

.dbt-toggle[aria-expanded="true"] span:nth-child(1){
	transform:translateY(7px) rotate(45deg);
}

.dbt-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}

.dbt-toggle[aria-expanded="true"] span:nth-child(3){
	transform:translateY(-7px) rotate(-45deg);
}

.dbt-mobile{display:none;}

@media(max-width:980px){
	:root{--dbt-header-height:72px;}

	.dbt-header__inner{gap:22px;}
	.dbt-brand__word{font-size:20px;}
	.dbt-nav{display:none;}

	.dbt-language{
		margin-left:auto;
		margin-right:16px;
		gap:8px;
		font-size:13px;
	}

	.dbt-toggle{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		margin-left:0;
	}

	.dbt-center-logo{
		width:52px;
		height:52px;
	}

	.dbt-center-logo img{
		width:28px;
		height:28px;
	}

	.dbt-mobile{
		position:absolute;
		top:var(--dbt-header-height);
		left:0;
		right:0;
		display:grid;
		grid-template-columns:1fr;
		padding:8px var(--dbt-header-side) 18px;
		border-top:1px solid rgba(0,0,0,.08);
		background:#fff;
		box-shadow:0 24px 60px rgba(0,0,0,.08);
		opacity:0;
		visibility:hidden;
		transform:translateY(-8px);
		pointer-events:none;
		transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
	}

	.dbt-mobile.is-open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
		pointer-events:auto;
	}

	.dbt-mobile a{
		position:relative;
		min-height:48px;
		display:flex;
		align-items:center;
		border-bottom:1px solid rgba(0,0,0,.08);
		color:var(--dbt-header-text)!important;
		font-family:var(--dbt-font);
		font-size:15px;
		font-weight:900;
		text-decoration:none!important;
	}

	.dbt-mobile a.is-current{
		color:var(--dbt-header-accent)!important;
	}

	.dbt-mobile a.is-current::after{
		content:"";
		position:absolute;
		right:0;
		width:8px;
		height:8px;
		border-radius:50%;
		background:var(--dbt-header-accent);
	}
}

@media(max-width:620px){
	:root{--dbt-header-side:18px;}

	.dbt-brand__word{
		font-size:17px;
		letter-spacing:.14em;
	}

	.dbt-center-logo{
		width:46px;
		height:46px;
	}

	.dbt-center-logo img{
		width:24px;
		height:24px;
	}

	.dbt-language{
		margin-left:auto;
		margin-right:10px;
		gap:6px;
		font-size:12px;
	}

	.dbt-flag-nl{
		width:22px;
		height:14px;
	}

	.dbt-toggle{
		width:36px;
		height:36px;
		margin-left:0;
		flex:0 0 auto;
	}

	.dbt-toggle span{
		width:20px;
		height:2px;
		margin:4px auto;
	}
}

@media(max-width:420px){
	.dbt-center-logo{display:none;}

	.dbt-language{
		margin-right:8px;
		gap:4px;
	}

	.dbt-language > span:nth-child(2){display:none;}

	.dbt-toggle{
		width:34px;
		height:34px;
	}

	.dbt-toggle span{
		width:18px;
		margin:4px auto;
	}
}