/*
 * Mourning mode: black-and-white version of the site.
 * Included only when mourning mode is enabled in Wagtail settings.
 *
 * The grayscale filter goes on <html> rather than <body>, because a filter
 * on <body> breaks position: fixed elements such as the sticky navbar.
 */
html {
	filter: grayscale(100%);
}

/* Dark buttons with light text */
.btn.btn-primary,
.btn.btn-secondary {
	background: #333333 !important;
	border: 1px solid #333333 !important;
	color: #f2f2f2 !important;
}
.btn.btn-primary:hover,
.btn.btn-secondary:hover {
	background: #f2f2f2 !important;
	border: 1px solid #333333 !important;
	color: #333333 !important;
}

/* Highlighted menu item: white over the header image... */
.ftco-navbar-light .navbar-nav > .nav-item.active > a,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link.active {
	color: #ffffff !important;
}

/* ...and dark where the menu has a white background (mobile menu, navbar after scrolling) */
@media (max-width: 1200px) {
	.ftco-navbar-light .navbar-nav > .nav-item.active > a,
	.ftco-navbar-light .navbar-nav > .nav-item > .nav-link.active {
		color: #333333 !important;
		font-weight: 700;
	}
}
.ftco-navbar-light.scrolled .navbar-nav > .nav-item.active > a,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link.active {
	color: #333333 !important;
	border-bottom-color: #333333;
}

/* Dropdown menus: dark background, light text */
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu {
	background: #333333 !important;
	border-color: #333333 !important;
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item {
	color: #f2f2f2 !important;
	background: transparent;
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item:hover,
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item:focus,
.ftco-navbar-light
	.navbar-nav
	> .nav-item
	.dropdown-menu
	.dropdown-item.active {
	color: #ffffff !important;
	background: #555555 !important;
}