/* Styles for the main navigation. */

:root {
	--border-color-menu-item--inactive: var( --background-color-interactive );
	--border-color-menu-item--active: var( --color-emphasized );
	--spacing-vertical-nav-item: 0.5rem;
	--margin-bottom-nav-item: 0.25rem;
	--font-size-nav-item: 1rem;
	--font-size-nav-sub-item: 0.875rem;
	/* Calculate the height of a nav item. Vertical padding * 2, plus the font size * line height, plus margin-bottom. */
	--size-vertical-nav-item: calc( var( --spacing-vertical-nav-item ) * 2 + var( --font-size-nav-item ) * var( --line-height-medium ) + var( --margin-bottom-nav-item ) );
}

/* Navigation button. */
.btn--nav-main {
	position: absolute;
	top: var( --spacing-header );
	width: var( --size-nav-button );
	height: var( --size-nav-button );
	cursor: pointer;
}

/* Fake hamburger icon. */
.btn--nav-main i {
	display: block;
	height: var( --size-nav-button );
	transition: color var( --transition-duration-medium ), box-shadow var( --transition-duration-medium );
}

.btn--nav-main i::before,
.btn--nav-main i::after {
	content: '';
	/* Background color is the icon color. */
	background-color: var( --color-subtle );
	width: var( --size-nav-button );
	height: 2px;
	position: absolute;
	top: 0.25rem;
	left: 0;
}

.btn--nav-main i::after {
	top: 0.6875rem;
	/* Forms the third line of the menu icon. */
	box-shadow: 0 0.4375rem 0 var( --color-subtle );
}

.btn--nav-main i:hover::before,
.btn--nav-main i:hover::after {
	background-color: var( --color-emphasized );
}

.btn--nav-main i:hover::after {
	box-shadow: 0 0.4375rem 0 var( --color-emphasized );
}

/* FIXME: add is-aural class instead of duplicating styles? */
.btn--nav-main span {
	display: block;
	position: absolute;
	clip: rect( 1px, 1px, 1px, 1px );
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

/* Main Navigation. */
.nav--main {
	background-color: var( --background-color-base ); /* needed for menu appearance on mobile below */
	overflow-x: auto; /* keep navbox from overflowing */
}

.nav--main ol,
.nav--main ul {
	padding: 0;
}

.nav--main li:not( .is-on ) ul,
.trigger--nav-main {
	display: none;
}

.nav--main ol:first-child {
	margin: 0;
}

.nav--main li {
	padding: 0;
	list-style: none none;
}

.nav--main > ol > li {
	margin-bottom: var( --margin-bottom-nav-item );
}

.nav--main a {
	color: var( --color-base );
	display: block;
	padding: var( --spacing-vertical-nav-item ) var( --spacing-horizontal-nav-item-small );
	font-size: var( --font-size-nav-item );
	text-decoration: none;
	transition-property: background-color, padding;
	transition-duration: var( --transition-duration-medium );
}

.nav--main a:hover,
.nav--main a:focus {
	background-color: var( --background-color-interactive-subtle );
	color: var( --color-emphasized );
}

.nav--main .is-on > a {
	background-color: var( --background-color-progressive-subtle );
	color: var( --color-progressive );
	border-radius: var( --border-radius-base );
	font-weight: var( --font-weight-semi-bold );
	cursor: default;
	pointer-events: inherit;
}

/* override navbox styling from parent which prevents collapsing open li */
.nav--main .nav__item > a {
	cursor: pointer;
}

.nav__sub-items {
	margin-top: 0.75rem;
	margin-bottom: 1rem;
}

.nav__sub-items > .nav__sub-item {
	margin-left: 2.25rem;
}

/* stylelint-disable-next-line no-descending-specificity */
.nav--main .nav__sub-items ul {
	margin: 0;
}

.nav--main .nav__sub-items a {
	color: var( --color-subtle );
	border-left: var( --border-width-base ) solid var( --border-color-menu-item--inactive );
	border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;
	padding-left: 1rem;
	font-size: var( --font-size-nav-sub-item );
	transition: background-color var( --transition-duration-medium ), color var( --transition-duration-medium );
}

.nav--main .nav__sub-item.is-on > a {
	background-color: var( --background-color-base );
	color: var( --color-emphasized );
	border-left-color: var( --border-color-menu-item--active );
	font-weight: var( --font-weight-semi-bold );
}

.nav--main .nav__sub-item .nav__sub-item a {
	padding-left: 2.25rem;
}

/* Smartphone only. */
@media ( max-width: 767px ) {
	.nav--main {
		position: fixed;
		/* Hide the Home item since a link to home is available directly above the mobile menu. */
		top: calc( var( --size-header--mobile ) - var( --size-vertical-nav-item ) );
		left: 0;
		right: 0;
		max-height: calc( 100vh - var( --size-header--mobile ) + var( --size-vertical-nav-item ) );
		overflow-y: auto;
		padding-bottom: 1rem;
		box-shadow: var( --box-shadow-drop-medium );
		z-index: 1;
		transform: translateY( -200% );
		transition: left var( --transition-duration-medium ), right var( --transition-duration-medium ), transform var( --transition-duration-medium );
	}

	.trigger--nav-main:checked + .nav--main {
		transform: translateY( 0 );
	}
}

/* Smartphone+ portrait. */
@media ( min-width: 414px ) {
	.nav--main a {
		padding-left: var( --spacing-horizontal-nav-item-large );
		padding-right: var( --spacing-horizontal-nav-item-large );
	}
}

/* Tablet. */
@media ( min-width: 768px ) {
	.btn--nav-main {
		display: none;
	}

	.nav--main a {
		padding-left: var( --spacing-horizontal-nav-item-small );
		padding-right: var( --spacing-horizontal-nav-item-small );
	}

	.nav--main {
		left: auto;
		right: auto;
	}
}

/* Tablet+ / Netbook. */
@media ( min-width: 992px ) {
	.nav--main a {
		padding-left: var( --spacing-horizontal-nav-item-large );
		padding-right: var( --spacing-horizontal-nav-item-large );
	}
}

/* Styles for breadcrumbs */
.breadcrumbs {
	margin-bottom: 0.625rem;
}