/*
 * Notariaat Lemmer: header, footer en submenu
 * Wordt op alle pagina's geladen. De containerbreedte geldt alleen voor de maatwerkpagina's,
 * het submenu overal.
 */

/* -------------------------------------------------------------------------
 * Header: logo en menu in dezelfde container als de inhoud (maatwerkpagina's)
 * ---------------------------------------------------------------------- */
body.nl-maatwerk header#mainbar .container,
body.nl-maatwerk header#mainbar .menubar .container {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-sizing: border-box;
}

@media (max-width: 760px) {
	body.nl-maatwerk header#mainbar .container,
	body.nl-maatwerk header#mainbar .menubar .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* -------------------------------------------------------------------------
 * Footer: in dezelfde container als de inhoud (maatwerkpagina's)
 * ---------------------------------------------------------------------- */
body.nl-maatwerk footer > .container,
body.nl-maatwerk footer #sub-footer .container {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-sizing: border-box;
}

@media (max-width: 760px) {
	body.nl-maatwerk footer > .container,
	body.nl-maatwerk footer #sub-footer .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* -------------------------------------------------------------------------
 * Submenu (desktop)
 * ---------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {

	/* Pijltje naast het menu-item: draait naar beneden in plaats van opzij */
	header#mainbar .desktopmenu li.menu-item-has-children > span > i {
		transition: transform .3s cubic-bezier(.2, .7, .2, 1);
	}

	header#mainbar .desktopmenu ul li.menu-item-has-children:hover > span > i,
	header#mainbar .desktopmenu ul li.menu-item-has-children:focus-within > span > i {
		transform: rotate(180deg);
	}

	/* Het paneel */
	header#mainbar .desktopmenu li.menu-item-has-children > .sub-menu {
		display: block !important;
		position: absolute;
		top: calc(100% + 16px);
		left: -26px;
		width: max-content;
		min-width: 250px;
		max-width: 340px;
		margin: 0;
		padding: 10px;
		list-style: none;
		background: #ffffff;
		border-radius: 20px;
		box-shadow: 0 30px 60px -24px rgba(0, 36, 49, .45), 0 8px 20px -12px rgba(0, 36, 49, .25);
		overflow: visible;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
	}

	/* Onzichtbare brug, zodat het menu open blijft als de muis naar beneden gaat */
	header#mainbar .desktopmenu li.menu-item-has-children > .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -18px;
		height: 18px;
	}

	header#mainbar .desktopmenu li.menu-item-has-children:hover > .sub-menu,
	header#mainbar .desktopmenu li.menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s;
	}

	/* Items */
	header#mainbar .desktopmenu .sub-menu li {
		display: block;
		float: none;
		width: 100%;
		margin: 0 !important;
		padding: 0;
		background: transparent;
		overflow: visible;
	}

	header#mainbar .desktopmenu .sub-menu li a {
		position: relative;
		display: flex !important;
		align-items: center;
		gap: 12px;
		width: 100% !important;
		margin: 0 !important;
		padding: 12px 16px !important;
		border-radius: 12px;
		background: transparent !important;
		color: #002431 !important;
		font-size: 15.5px !important;
		line-height: 1.35;
		font-weight: 600 !important;
		white-space: nowrap;
		text-decoration: none;
		transition: background .2s ease, color .2s ease, padding .25s cubic-bezier(.2, .7, .2, 1);
	}

	/* Goudkleurig bolletje dat bij hover inschuift */
	header#mainbar .desktopmenu .sub-menu li a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #ac842d;
		flex: 0 0 auto;
		margin-left: -19px;
		opacity: 0;
		transition: margin .25s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
	}

	header#mainbar .desktopmenu .sub-menu li a:hover,
	header#mainbar .desktopmenu .sub-menu li a:focus-visible {
		background: #f4ecdc !important;
		color: #002431 !important;
		outline: none;
	}

	header#mainbar .desktopmenu .sub-menu li a:hover::before,
	header#mainbar .desktopmenu .sub-menu li a:focus-visible::before,
	header#mainbar .desktopmenu .sub-menu li.current-menu-item > a::before {
		margin-left: 0;
		opacity: 1;
	}

	/* Huidige pagina */
	header#mainbar .desktopmenu .sub-menu li.current-menu-item > a {
		background: #f7f4ee !important;
		color: #ac842d !important;
	}
}