/*
 * Small fixes on top of main.css (compiled; its SCSS source isn't in this repo).
 */

/* ---------- Mobile nav tray ----------
 * On phones main.css forces the header bar white with !important, and the rule that clears
 * it when the tray opens has no !important, so a white strip stayed above the navy tray.
 */
.main-navigation.opened .nav-and-logo,
.main-navigation.opened .menu-wrapper {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* The tray used to appear by hiding the whole nav and fading it back in, so the logo and
 * button blinked and the page showed through. Now the navy tray appears instantly (only the
 * menu links fade in, from main.css). */
.main-navigation,
.main-navigation.opened {
	transition: none;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation.opened .menu-container .opened-menu {
		animation: none;
		opacity: 1;
	}
}