/* Stylesheet that corresponds with the Modal Menu Block contrib module */


/* Main Menu */
/* - Block Styles */
#block-mainmenumodal {
	width: 20%;
}

#block-mainmenumodal .modal-menu-block--trigger {
	visibility: hidden;
	position: relative;
}
 
#block-mainmenumodal .modal-menu-block--trigger::after {
	font-family: "fontello";
	content: "\f0c9";
	font-size: 1.75rem;
	color: var(--logo-blue);
	display: block;
	visibility: visible;
	position: absolute;
	top: 0;
	padding-left: 5px; 
}

@media (min-width: 800px) {
	#block-mainmenumodal .modal-menu-block--trigger::after {
		font-size: 2.75rem;
	}
}

#block-mainmenumodal .modal-menu-block--content {
	display: none; /* prevents flash of menu content before opening */
}

/* - Modal Menu Styles */
#mainmenumodal-container {
	/* !important flags needed here to overwrite inline styles */
	font-size: 1.25rem;
	font-family: 'Nunito Sans';
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: 100%;
	z-index: 550 !important; /* must be >501 to cover Gin toolbar and back to top button */
	height: 100vh !important;
	background: var(--dk-blue);
	border: none;
	--default-text-color: var(--pale-blue);
	--lvl-2-text-color: white;
	--lvl-3-text-color: black;
}

	/* -- Titlebar */
#mainmenumodal-titlebar {
	background: var(--dk-blue);
	border: none;
	padding: 1.5rem 1.5rem 1rem 1.5rem; /* revert to 1rem 1.5rem without logo */
}

#mainmenumodal-titlebar > span { /* adds logo to titlebar */
	background-image: url("/sites/default/files/2023-05/footer-logo-2017.png");
	background-size: contain;
	background-repeat: no-repeat;
	height: 3.5rem;
}

#mainmenumodal-titlebar button.ui-button { /* menu close button */
	margin-right: 1.5rem;
	border: none;
	background: transparent;
	top: 45%; /* needed for logo in titlebar */
}

#mainmenumodal-titlebar .ui-button .ui-icon { /* span that holds jQuery's icon */
	visibility: hidden;
	background: none;
	width: fit-content;
	height: fit-content;
}

#mainmenumodal-titlebar button.ui-button .ui-icon::after { /* add custom close icon */
	font-family: "fontello";
	content: "\e808";
	visibility: visible;
	display: block;
	color: white;
	font-size: 2rem;
	text-indent: initial; /* must reset to initial to show icon */
}

	/* -- Menu content */
	/* --- backgrounds, containers */
#mainmenumodal-content {
	/* !important flags needed here to overwrite inline styles */
	padding: 0.5rem 1.5rem 1rem 1.5rem;
	height: calc(100vh - 3.75rem) !important; /* could break if user sets 1rem > 16px */
	max-height: initial !important;
}

#mainmenumodal-content > ul { /* helps show entire menu when overflow */
	padding-bottom: 2rem;
}

#mainmenumodal-content ul {
	list-style: none;
}

#mainmenumodal-content li {
	display: grid;
	grid:
		"a b"
		"c c";
}

#mainmenumodal-content li.expanded:last-child {
	margin-bottom: 0.5rem;
}

#mainmenumodal-content li ul { /* all submenus */
	display: none; /* hide submenus before opening */
	padding: 0 0.5rem;
	grid-area: c;
}

#mainmenumodal-content ul.level-2 {
	background: var(--logo-blue);
}

#mainmenumodal-content ul.level-3 {
	background: var(--pale-blue);
}

	/* --- menu links */
#mainmenumodal-content li > a { /* All submenu links */
	padding: 0.75rem 0;
}

#mainmenumodal-content li.level-1-item > a { /* All lvl 1 links */
	padding: 1.25rem 0;
	font-weight: 700;
	font-size: 1.5rem;
}

#mainmenumodal-content a {
	color: var(--default-text-color);
}

#mainmenumodal-content li.level-2-item > a { /* Level 2 menu links only */
	color: var(--lvl-2-text-color);
}

#mainmenumodal-content ul.level-3 a { /* All menu links level 3 and up */
	color: var(--lvl-3-text-color);
}

	/* --- opener buttons */
#mainmenumodal-content .modal-menu-block--opener {
	justify-self: end;
}

#mainmenumodal-content .modal-menu-block--opener::before {
	font-family: "fontello";
	content: "\e805"; /* right arrow icon */
	color: var(--default-text-color);
}

#mainmenumodal-content li.level-2-item .modal-menu-block--opener::before {
	color: var(--lvl-2-text-color);
}

#mainmenumodal-content li.level-3-item .modal-menu-block--opener::before {
	color: var(--lvl-3-text-color);
}

#mainmenumodal-content li.expanded > .modal-menu-block--opener::before {
	content: "\e801"; /* down arrow icon */
}