/* ==========================================================================
   AdM Administraties
   Header
   ========================================================================== */

.adm-header {
	position: sticky;
	top: 0;
	z-index: 1000;

	background: rgba(255, 255, 255, 0.97);

	border-bottom:
		1px solid
		var(--adm-border);

	backdrop-filter: blur(12px);
}

.admin-bar .adm-header {
	top: 32px;
}


/* ==========================================================================
   Header layout
   ========================================================================== */

.adm-header__inner {
	display: flex;

	align-items: center;
	justify-content: space-between;

	min-height: 112px;

	gap: 32px;
}


/* ==========================================================================
   Branding
   ========================================================================== */

.adm-brand {
	display: flex;

	align-items: center;

	flex: 0 0 auto;
}

.adm-brand__link {
	display: inline-flex;

	align-items: center;

	text-decoration: none;
}


/* ==========================================================================
   Logo
   ========================================================================== */

.adm-header .adm-brand__logo {
	display: block;

	width: 310px;
	max-width: 310px;

	height: auto;

	object-fit: contain;
}

.adm-brand__fallback {
	color: var(--adm-pink-dark);

	font-family: var(--adm-serif);
	font-size: 1.25rem;
	font-weight: 700;
}


/* ==========================================================================
   Navigatie
   ========================================================================== */

.adm-nav {
	display: flex;

	align-items: stretch;

	gap: 26px;

	height: 100%;
}

.adm-nav__list,
.adm-nav .menu {
	display: flex;

	align-items: stretch;

	gap: 0;

	height: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}

.adm-nav__list li,
.adm-nav .menu li {
	display: flex;

	align-items: stretch;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Navigatielinks
   ========================================================================== */

.adm-nav__list a,
.adm-nav .menu a {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	height: 100%;
	min-height: 112px;

	padding:
		0
		18px;

	color: var(--adm-heading);

	font-size: 0.96rem;
	font-weight: 700;

	line-height: 1.2;

	text-decoration: none;

	transition:
		color 160ms ease,
		background 160ms ease;
}


/* ==========================================================================
   Hover
   ========================================================================== */

.adm-nav__list li:hover > a,
.adm-nav__list li:focus-within > a,
.adm-nav .menu li:hover > a,
.adm-nav .menu li:focus-within > a {
	color: var(--adm-pink-dark);
}


/* ==========================================================================
   Actief menu-item
   ========================================================================== */

.adm-nav .current-menu-item,
.adm-nav .current-menu-parent,
.adm-nav .current-menu-ancestor,
.adm-nav .current_page_item,
.adm-nav .current_page_parent,
.adm-nav .current_page_ancestor {
	background: #E1C5C7;
}

.adm-nav .current-menu-item > a,
.adm-nav .current-menu-parent > a,
.adm-nav .current-menu-ancestor > a,
.adm-nav .current_page_item > a,
.adm-nav .current_page_parent > a,
.adm-nav .current_page_ancestor > a,
.adm-nav a[aria-current="page"] {
	color: var(--adm-heading);

	font-weight: 800;
}


/* ==========================================================================
   Wit streepje actieve menu-item
   ========================================================================== */

.adm-nav .current-menu-item > a::after,
.adm-nav .current-menu-parent > a::after,
.adm-nav .current-menu-ancestor > a::after,
.adm-nav .current_page_item > a::after,
.adm-nav .current_page_parent > a::after,
.adm-nav .current_page_ancestor > a::after,
.adm-nav a[aria-current="page"]::after {
	position: absolute;

	right: 18px;
	bottom: 31px;
	left: 18px;

	height: 3px;

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.98);

	content: "";
}


/* ==========================================================================
   Nieuws & Tips
   Individuele artikelen / archief
   ========================================================================== */

body.single-adm_news
.adm-nav li:has(> a[href*="/nieuws-tips/"]),
body.post-type-archive-adm_news
.adm-nav li:has(> a[href*="/nieuws-tips/"]) {
	background: #E1C5C7;
}

body.single-adm_news
.adm-nav a[href*="/nieuws-tips/"],
body.post-type-archive-adm_news
.adm-nav a[href*="/nieuws-tips/"] {
	color: var(--adm-heading);

	font-weight: 800;
}

body.single-adm_news
.adm-nav a[href*="/nieuws-tips/"]::after,
body.post-type-archive-adm_news
.adm-nav a[href*="/nieuws-tips/"]::after {
	position: absolute;

	right: 18px;
	bottom: 31px;
	left: 18px;

	height: 3px;

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.98);

	content: "";
}


/* ==========================================================================
   Header CTA
   Compactere "Neem contact op"-button
   ========================================================================== */

.adm-header .adm-button,
.adm-header .adm-button--small {
	position: relative;

	display: inline-flex;

	align-self: center;
	align-items: center;
	justify-content: center;

	min-height: 46px;

	padding:
		11px
		18px;

	border: 0;
	border-radius: 18px;

	background: var(--adm-pink-dark);
	color: var(--adm-white);

	font-size: 0.9rem;
	font-weight: 800;

	line-height: 1.2;

	white-space: nowrap;

	text-decoration: none;

	box-shadow:
		0 8px 18px
		rgba(
			184,
			117,
			122,
			0.17
		);

	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		background 160ms ease;
}


/* ==========================================================================
   Witte lijntjes CTA
   ========================================================================== */

.adm-header .adm-button::before,
.adm-header .adm-button::after,
.adm-header .adm-button--small::before,
.adm-header .adm-button--small::after {
	position: absolute;

	left: 22%;
	right: 22%;

	height: 2px;

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.92);

	content: "";
}

.adm-header .adm-button::before,
.adm-header .adm-button--small::before {
	top: 6px;
}

.adm-header .adm-button::after,
.adm-header .adm-button--small::after {
	bottom: 6px;
}


/* ==========================================================================
   CTA hover
   ========================================================================== */

.adm-header .adm-button:hover,
.adm-header .adm-button:focus-visible,
.adm-header .adm-button--small:hover,
.adm-header .adm-button--small:focus-visible {
	background: var(--adm-dark-2);

	color: var(--adm-white);

	transform: translateY(-1px);

	box-shadow:
		0 12px 22px
		rgba(
			184,
			117,
			122,
			0.22
		);
}


/* ==========================================================================
   Mobiele menuknop
   ========================================================================== */

.adm-menu-toggle {
	display: none;

	align-items: center;

	border: 0;

	background: transparent;
	color: var(--adm-heading);

	cursor: pointer;

	font: inherit;
	font-weight: 800;
}

.adm-menu-toggle__icon {
	display: inline-block;

	width: 22px;
	height: 2px;

	margin-left: 8px;

	background: currentColor;

	box-shadow:
		0 -7px currentColor,
		0 7px currentColor;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1100px) {

	.adm-header .adm-brand__logo {
		width: 255px;
		max-width: 255px;
	}

	.adm-nav {
		gap: 18px;
	}

	.adm-nav__list a,
	.adm-nav .menu a {
		padding:
			0
			14px;
	}

	.adm-header .adm-button,
	.adm-header .adm-button--small {
		padding:
			10px
			16px;
	}

}


/* ==========================================================================
   Mobiele navigatie
   ========================================================================== */

@media (max-width: 1000px) {

	.adm-header__inner {
		min-height: 96px;
	}

	.adm-header .adm-brand__logo {
		width: 250px;
		max-width: 250px;
	}

	.adm-menu-toggle {
		display: inline-flex;
	}

	.adm-nav {
		position: fixed;

		top: 96px;
		right: 0;
		left: 0;

		display: none;

		flex-direction: column;
		align-items: stretch;

		gap: 18px;

		height: auto;

		padding:
			28px
			var(--adm-gutter)
			34px;

		background: var(--adm-white);

		border-top:
			1px solid
			var(--adm-border);

		box-shadow:
			0 18px 35px
			rgba(
				48,
				43,
				45,
				0.1
			);
	}

	.admin-bar .adm-nav {
		top: 128px;
	}

	.adm-nav.is-open {
		display: flex;
	}

	.adm-nav__list,
	.adm-nav .menu {
		flex-direction: column;

		align-items: stretch;

		gap: 6px;

		height: auto;
	}

	.adm-nav__list li,
	.adm-nav .menu li {
		width: 100%;
	}

	.adm-nav__list a,
	.adm-nav .menu a {
		display: flex;

		justify-content: flex-start;

		width: 100%;
		min-height: 52px;
		height: auto;

		padding:
			12px
			18px;
	}

	.adm-nav .current-menu-item,
	.adm-nav .current-menu-parent,
	.adm-nav .current-menu-ancestor,
	.adm-nav .current_page_item,
	.adm-nav .current_page_parent,
	.adm-nav .current_page_ancestor,
	body.single-adm_news
	.adm-nav li:has(> a[href*="/nieuws-tips/"]),
	body.post-type-archive-adm_news
	.adm-nav li:has(> a[href*="/nieuws-tips/"]) {
		border-radius: 16px;
	}

	.adm-nav .current-menu-item > a::after,
	.adm-nav .current-menu-parent > a::after,
	.adm-nav .current-menu-ancestor > a::after,
	.adm-nav .current_page_item > a::after,
	.adm-nav .current_page_parent > a::after,
	.adm-nav .current_page_ancestor > a::after,
	.adm-nav a[aria-current="page"]::after,
	body.single-adm_news
	.adm-nav a[href*="/nieuws-tips/"]::after,
	body.post-type-archive-adm_news
	.adm-nav a[href*="/nieuws-tips/"]::after {
		right: 18px;
		bottom: 10px;
		left: 18px;
	}

	.adm-header .adm-button,
	.adm-header .adm-button--small {
		width: auto;

		align-self: flex-start;

		padding:
			11px
			18px;
	}

}


/* ==========================================================================
   WordPress adminbar mobiel
   ========================================================================== */

@media (max-width: 782px) {

	.admin-bar .adm-header {
		top: 46px;
	}

	.admin-bar .adm-nav {
		top: 142px;
	}

}


/* ==========================================================================
   Smartphone
   ========================================================================== */

@media (max-width: 600px) {

	.adm-header__inner {
		min-height: 86px;
	}

	.adm-header .adm-brand__logo {
		width: 215px;
		max-width: 215px;
	}

	.adm-nav {
		top: 86px;
	}

	.admin-bar .adm-nav {
		top: 132px;
	}

}


/* ==========================================================================
   Kleine smartphone
   ========================================================================== */

@media (max-width: 400px) {

	.adm-header .adm-brand__logo {
		width: 190px;
		max-width: 190px;
	}

}