/* --------------------------------------------------------------------------------------------------------------------- */
/* MAIN NAVIGATION */
/* --------------------------------------------------------------------------------------------------------------------- */

@font-face
{
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?d8kjfa');
	src: url('fonts/icomoon.eot?d8kjfa#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?d8kjfa') format('truetype'),
		url('fonts/icomoon.woff?d8kjfa') format('woff'),
		url('fonts/icomoon.svg?d8kjfa#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.icon-home:before
{
	content: "\e900";
}

.icon-menu:before
{
	content: "\e9bd";
}

#main_navigation
{
	margin-top: 1rem;
	margin-bottom: 1rem;
	height: auto;
	overflow: hidden;
	background-image: url(../img/background/main_nav.png);
}

#main_navigation a
{
	padding: 0 10px;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 6rem;
	float: left;
	display: block;
	color: #FFF;
	text-decoration: none;
	align-items: center;
	text-shadow: rgb(1, 7, 15) 1px 1px 5px;
}

a#navhome
{
	background-position: center center;
	margin-left: 20px;
	font-family: 'icomoon';
}

a#navhome:before
{
	font-size: 1.5rem;
	content: "\e900";
}

a#hamburger
{
	display: none;
	margin: 0;
	padding: 0;
	font-family: 'icomoon';
	background-position: center center;
}

a#hamburger:before
{
	font-size: 1.5rem;
	content: none;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* SUBNAVIGATION */
/* --------------------------------------------------------------------------------------------------------------------- */

#subnav
{
	font-style: italic;
	font-size: 1rem;
	letter-spacing: 0.03em;
	text-align: center;
	line-height: 3.25rem;
	background-image: url(../img/background/main_nav.png);
	grid-area: subnav;
	color: #FFF;
}

#subnav a,
#subnav span
{
	padding: 5px 8px;
	color: #FFF;
	text-decoration: none;
}

/* the bar is the site's blue picture, so the hover mark is a softened white
   rather than the redesign's blue */
#subnav a:hover
{
	color: #FFF;
	border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

#subnav span
{
	font-weight: 900;
	color: #FFF;
	border-bottom: 2px solid #FFF;
}

/* admin subnav: section tabs on a light bar, payments by status as chips below */

#subnav.adm-subnav
{
	display: flex;
	flex-direction: column;
	background: #fff;
	font-style: normal;
	letter-spacing: 0;
	line-height: normal;
	text-align: left;
	color: #1b2a38;
}

#subnav.adm-subnav .adm-subnav-row
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	padding: 0 12px;
}

#subnav.adm-subnav .adm-subnav-row:first-child
{
	border-bottom: 1px solid #e3e8ec;
}

#subnav.adm-subnav a.adm-subnav-tab,
#subnav.adm-subnav span.adm-subnav-tab
{
	padding: 14px 10px 11px 10px;
	border-bottom: 3px solid transparent;
	color: #3d4f5c;
	font-size: 0.95rem;
	line-height: 1.3rem;
	font-weight: 400;
	text-decoration: none;
}

#subnav.adm-subnav a.adm-subnav-tab:hover,
#subnav.adm-subnav a.adm-subnav-tab:focus-visible
{
	border-bottom-color: #c9dcec;
	color: #1f6391;
}

#subnav.adm-subnav span.adm-subnav-tab.adm-subnav-current
{
	border-bottom-color: #1f6391;
	color: #1f6391;
	font-weight: 900;
}

#subnav.adm-subnav .adm-subnav-payments
{
	padding-top: 8px;
	padding-bottom: 8px;
	background: #f4f7f9;
}

/* the payments row reads as its own labelled group: the label in the tabs'
   weight and colour, with the blue marker once a payments list is open */
#subnav.adm-subnav .adm-subnav-label
{
	margin-right: 6px;
	padding: 2px 0 2px 10px;
	border-bottom: 0;
	border-left: 3px solid #c9d5df;
	color: #1b2a38;
	font-size: 0.95rem;
	line-height: 1.3rem;
	font-weight: 900;
}

#subnav.adm-subnav .adm-subnav-label.adm-subnav-current
{
	border-left-color: #1f6391;
	color: #1f6391;
}

#subnav.adm-subnav a.adm-subnav-chip
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 4px 3px 12px;
	border: 1px solid #cfdbe6;
	border-radius: 999px;
	background: #fff;
	color: #3d4f5c;
	font-size: 0.85rem;
	line-height: 1.3rem;
	text-decoration: none;
}

#subnav.adm-subnav a.adm-subnav-chip b
{
	min-width: 1.4rem;
	padding: 0 7px;
	border-radius: 999px;
	background: #e8eff5;
	color: #1f6391;
	font-weight: 900;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

#subnav.adm-subnav a.adm-subnav-chip:hover,
#subnav.adm-subnav a.adm-subnav-chip:focus-visible
{
	border-color: #2980b9;
}

/* pending payments waiting: the amber of the dashboard's to-do tiles */
#subnav.adm-subnav a.adm-subnav-chip.wait b
{
	background: #b9770e;
	color: #fff;
}

#subnav.adm-subnav a.adm-subnav-chip.adm-subnav-current
{
	border-color: #1f6391;
	background: #1f6391;
	color: #fff;
}

#subnav.adm-subnav a.adm-subnav-chip.adm-subnav-current b
{
	background: #fff;
	color: #1f6391;
}

#steps
{
	margin-top: 10px;
	text-align: center;
	background-color: #f1f4f7;
	border-bottom: 1px solid #dde5ec;
	grid-area: subnav;
	color: #1b2a38;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem 0;
	gap: 1.5rem;
}

#steps a.step
{
	display: flex;
	flex-direction: column;
	text-decoration: none;
	align-items: center;
	gap: 0.35rem;
}

#steps a.step div.number
{
	display: block;
	color: #FFF;
	line-height: 44px;
	font-size: 1.1rem;
	font-weight: 900;
	border-radius: 50%;
	background: #1f6391;
	width: 44px;
	height: 44px;
	border: 0;
}

#steps a.step span
{
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5b6b7a;
}

#steps a.step:hover div.number
{
	background: #2492b3;
}

#steps a.step:hover span
{
	color: #1f6391;
}

#steps div.arrow
{
	color: #b9cadb;
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.5rem;
	display: flex;
	align-self: start;
	margin-top: 10px;
}

#steps .break 
{
	flex-basis: 100%;
	height: 0;
}