/**
 * navigation.css
 *
 * Primary navigation
 *
**/

/******************************************************************************* Mobile Menu */
/* position (mobile) navigation. Omitting this results in slow closing of mobile menu on button click (omitting triggers a reflow) */
.mainNavigation {
	grid-row-start: 2;
    position: relative;
    width: 100%;
	z-index: 9999;
}

/* hide (sub)menu(s) */
.mainNavigation--menu,
.mainNavigation--subMenu,
.metaNavigation--menu,
.extraNavigation {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/***************************************** Menu toggle button */

.mainNavigation--toggle {
	background: none;
	border: none;
	cursor: pointer;
    float: right;
	outline: none;
}

.mainNavigation--toggle:after {
	background: url("../../img/icon-hamburger.svg") no-repeat 0 0;
	background-size: contain;
	box-shadow: none;
	content: "";
    display: block;
	height: 40px;
	right: 0;
	top: 8px;
	width: 40px;
}

.mainNavigation--toggle.is-active:after {
	background: url("../../img/icon-close.svg") no-repeat 0 0;
	background-size: contain;
	box-shadow: none;
}


/***************************************** Main Navigation */

.mainNavigation--menu {
	background-color: var(--color-charlie);
	border-radius: 0 0 var(--size__border-radius-small) var(--size__border-radius-small);
	box-shadow: var(--box-shadow-big);
	position: absolute;
	top: 79px;
	width: 100%;
	z-index: 100;
}

.mainNavigation--menuItem {
	border-top: 1px solid #ccc;
	position: relative;
}

.mainNavigation--menu > li:first-child {
	border-top: 0;
	padding: 20px;
}

.mainNavigation--menuItem a {
	color: var(--color-alpha);
	display: block;
	font-family: var(--font-family-markot);
	font-size: var(--step-4);
	padding: 12px 15px;
    text-decoration: none;
}

/***************************************** is-active navigation */

/* show menu on toggle */
.mainNavigation--menu.is-active,
.is-active .mainNavigation--subMenu {
	display: block;
}


.mainNavigation--menuItem a:hover,
.mainNavigation--menuItem a:focus,
.mainNavigation--menuItem a:active,
.mainNavigation--menu .is-active > a,
.mainNavigation--menu .is-active-ancestor > a {
    background-color: var(--color-bravo);
	text-decoration: none;
}


/***************************************** Submenu toggle button */
.mainNavigation--subMenuToggle {
    display: none;
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 0;height:50px;
	top: 0;
	width: 50px;
}

.mainNavigation--subMenuToggle:after {
	background: url("../../img/pijltje-down-wit.svg") no-repeat 0 0;
	background-size: contain;
	box-shadow: none;
	content: "";
	height: 30px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 20px;
}

.mainNavigation--subMenuToggle.is-active:after {
	background: url("../../img/pijltje-up-wit.svg") no-repeat 0 0;
	background-size: contain;
	box-shadow: none;
}

/***************************************** Submenu */
.mainNavigation--subMenu {
	border: none;
	padding-left: 15px;
}

.mainNavigation--subMenu--menuItem {
	position: relative;
}

.mainNavigation--subMenu--menuItem a {
    border-radius: var(--size__border-radius-small) 0 0 var(--size__border-radius-small);
	font-family: var(--font-family-markot);
	font-size: var(--wp--preset--font-size--normal);
}

.mainNavigation--menuItem:last-child .mainNavigation--subMenu--menuItem:last-child a {
    border-bottom-right-radius: var(--size__border-radius-small);
}
/*
.mainNavigation--subMenu--menuItem.is-active a {
	background-color: var(--color-alpha);
}

.mainNavigation--subMenu.is-active .mainNavigation--subMenu--menuItem.is-active a {
	background-color: var(--color-bravo);
}

.mainNavigation--subMenu.is-active li a {
	background-color: var(--color-charlie);
}*/
/*
.mainNavigation--subMenu.is-active li a:hover,
.mainNavigation--subMenu.is-active li.is-active a {
	background-color: var(--color-bravo);
}*/

/********** - Single member / Group member / Group owner - navigation items */

.navItem-agencyDashboard {
    display: none;
}

.rcp-group-owner .navItem-agencyDashboard {
    display: list-item;
}

.rcp-group-member .navItem-yourMembership {
    display: none;
}

/********** Breadcrumbs */

.breadcrumbs {
    background-color: var(--color-charlie-light);
    font-family: var(--font-family-markot);
    font-size: var(--step--1);
    padding-top: var(--size__space-medium-small);
}

.breadcrumbs .breadcrumb li::after {
    margin-left: 1px;
    margin-right: 3px;
}

.breadcrumbs a {
    color: #000;
    text-decoration: none;
}


/******************************************************************************* Media Queries */
@media screen and (min-width: 1024px) {

	.mainNavigation--toggle {
		display: none;
	}

	.mainNavigation {
        align-self: flex-end;
        justify-self: auto;
        position: static;
		width: auto;
	}

	.mainNavigation--menu,
	.metaNavigation--menu {
		box-shadow: none;
		display: block;
		position: static;
		width: auto;
	}

	.mainNavigation--menu > li:first-child {
		padding: 0;
	}

	.mainNavigation--menuItem {
		border: 0;
		float: left;
		margin: 0 calc(var(--size__inline-gutters) / 1.5);
	}

    .mainNavigation--menu > .mainNavigation--menuItem:first-child {
        margin-left: 0;
    }
	
	/* Mainmenu links */
	.mainNavigation--menuItem a {
        background-color: transparent;
		color: var(--color-charlie);
		cursor: pointer;
		float: left;
        font-weight: bold;
		line-height: 1.8;
		padding: 1px calc(var(--size__inline-gutters) + 25px) 0 var(--size__inline-gutters);
        position: relative;
		text-decoration: none;
		text-transform: uppercase;
        z-index: 200;
	}

    .mainNavigation--menu > .mainNavigation--menuItem:first-child > a {
        left: calc(var(--size__inline-gutters) * -1);
    }

	.mainNavigation--menuItem > a:hover,
	.mainNavigation--menuItem > a:active,
	.mainNavigation--menuItem > a:focus,
	.mainNavigation--menu .is-active > a,
	.mainNavigation--menu .is-active-ancestor > a {
        background-color: transparent;
        color: var(--color-bravo);
		transition: color .30s ease-in-out;
	}
    
    .mainNavigation--menuItem > a:after {
        background: url(../../img/icon-arrow-down-red.svg) no-repeat 0 50%;
        content: '';
        display: block;
        height: 100%;
        right: 0;
        position: absolute;
        top: 0;
        width: 25px;
    }

	.mainNavigation--subMenuToggle {
		display: none;
	}

	/* dropdown submenu */
	.mainNavigation .mainNavigation--menuItem:hover > .mainNavigation--subMenu,
	.mainNavigation .mainNavigation--menuItem:focus-within > .mainNavigation--subMenu {
        border-radius: var(--size__border-radius-small);
        box-shadow: var(--box-shadow);
        display: block;
		min-width: 150px;
		padding: 15px 0 0;
		position: absolute;
		top: 68%;
		z-index: 100;
	}

    .mainNavigation .mainNavigation--menuItem:hover > .mainNavigation--subMenu::before,
    .mainNavigation .mainNavigation--menuItem:focus-within > .mainNavigation--subMenu::before {
        background-color: white;
        content: ' ';
        height: 29px;
        left: -13px;
        pointer-events: none; 
        position: absolute;
        right: -13px;
        top: -6px;
      }

	.mainNavigation--subMenu--menuItem {
		background: #fff;
		border: 1px solid var(--color-bravo);
		padding: 2px var(--size__inline-gutters);
		border-width: 0 1px;
	}

	.mainNavigation--subMenu--menuItem:first-child {
		border-left-width: 1px;
		border-right-width: 1px;
		border-top-width: 1px;
		border-top-left-radius: var(--size__border-radius-small);
		border-top-right-radius: var(--size__border-radius-small);
		padding-top: calc(var(--size__inline-gutters) / 2);
	}

	.mainNavigation--subMenu--menuItem:last-child {
		border-bottom-width: 1px;
		border-left-width: 1px;
		border-right-width: 1px;
		border-bottom-left-radius: var(--size__border-radius-small);
		border-bottom-right-radius: var(--size__border-radius-small);
		padding-bottom: calc(var(--size__inline-gutters) / 2);
	}

	/* Submenu links */
	.mainNavigation--subMenu--menuItem a {
		background: none;
		color: var(--color-charlie);
		float: none;
		font-weight: normal;
		line-height: 25px;
		margin: 0;
		padding: 0;
		text-transform: capitalize;
		white-space: nowrap;
	}

	.mainNavigation--subMenu--menuItem a:hover,
	.mainNavigation--subMenu--menuItem a:focus,
	.mainNavigation--subMenu--menuItem a:active,
	.mainNavigation--subMenu--menuItem.is-active a {
		background: none;
		color: var(--color-bravo);
	}

	/* make all sub-sub menu-items visible */
	.mainNavigation--subMenu .mainNavigation--subMenu {
		display: block;
	}

	/* dropdown submenu of last item should be right aligned so it doesn't fall of the screen */
	/*.mainNavigation--menuItem:last-child > .mainNavigation--subMenu {
		right: 0;
	}*/

	/********** Meta Navigation */

	.metaNavigation--menuItem {
		opacity: 0;
	}

	.metaNavigationContainer {
		display: flex;
		grid-column-end: content-end;
		justify-self: right;
		grid-row-start: 2;
	}

	.metaNavigation--menuItem a {
		background: var(--color-alpha);
		border: 1px solid var(--color-bravo);
		color: var(--color-bravo);
	}

	.metaNavigation--menuItem a:hover,
	.metaNavigation--menuItem a:active,
	.metaNavigation--menuItem a:focus,
	.metaNavigation--menu .is-active > a  {
		background: var(--color-bravo);
		color: var(--color-alpha);
		transition: background-color .30s ease-in-out;
	}

	/******** Sidebar Submenu */

	.l-sidebar .mainNavigation--subMenu {
		display: block;
		padding: 0;
	}

	.l-sidebar .mainNavigation--subMenu--menuItem {
        background-color: transparent;
		border: 0;
        padding: 0;
        margin-bottom: var(--size__space-small);
	}

	.l-sidebar .mainNavigation--subMenu--menuItem > a,
    .extraNavigation a {
        background-color: var(--color-charlie);
        border: 1px solid var(--color-alpha);
        border-radius: var(--size__border-radius-small);
        box-shadow: var(--box-shadow);
		color: var(--color-alpha);
		display: block;
        padding: var(--size__space-tiny) var(--size__space-medium-small);
		text-decoration: none;
        text-transform: uppercase;
        white-space: normal;
	}

	.l-sidebar .mainNavigation--subMenu--menuItem > a:hover,
	.l-sidebar .mainNavigation--subMenu--menuItem > a:focus,
	.l-sidebar .mainNavigation--subMenu--menuItem > a:active,
	.l-sidebar .mainNavigation--subMenu--menuItem.is-active > a,
    .extraNavigation a:hover,
    .extraNavigation a:focus,
    .extraNavigation a:active {
        background-color: var(--color-bravo);
	}

    .extraNavigation {
        display: block;
        position: sticky;
        top: var(--size__space-normal);
        z-index: 100;
    }

    .extraNavigation,
    .extraNavigation li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .extraNavigation li {
        margin-bottom: var(--size__space-small);
    }

    .extraNavigation a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .extraNavigation a:after {
        background: url("../../img/icon-arrow-right-white.svg") no-repeat 0 0;
        background-size: contain;
        box-shadow: none;
        content: "";
        display: block;
        height: 20px;
        right: 0;
        top: 8px;
        transform: rotate(90deg);
        width: 20px;
    }

}

@media screen and (min-width: 1024px) {

}