/*--------------------------------------------------------------
# Dark Mode
--------------------------------------------------------------*/

:root {
	--color-dark-gray: #222;
}

/* This overrides anything else; needs more detail to set it. 

html * {
	background-color: #111 !important;
	color: #f0f0f0 !important;
	border-color: #fff !important;
}*/

#page,
#masthead {
	background-color: var(--color-dark-gray);
	color: var(--color-white);
}

#masthead {
	background-color: var(--color-dark-gray);
	color: var(--color-white);
}

.site-branding {
	color: var(--color-white);
}
.main-navigation.toggled .sub-menu {
	background: var(--color-black);
}
.main-navigation.toggled {
	background: var(--color-dark-blue);
}

.main-navigation li button, .main-navigation a, .main-navigation a:visited {
	color: var(--color-light-gray);
}

.main-navigation ul ul {
	background: var(--color-medium-blue);
}

.main-navigation ul.sub-menu a {
	color: var(--color-white);
}

.main-navigation.toggled .megamenu li.menu-item-has-children:nth-of-type(1) a, .main-navigation.toggled .megamenu li.menu-item-has-children:nth-of-type(1) .sub-menu a,
.main-navigation .megamenu li.menu-item-has-children:nth-of-type(1) a, .main-navigation .megamenu li.menu-item-has-children:nth-of-type(1) .sub-menu a {
	color: var(--color-white);
}

#site-navigation .sub-menu li.current-menu-item a:active, #site-navigation .sub-menu li button:focus, #site-navigation .sub-menu li button:hover, #site-navigation .sub-menu li a:focus, #site-navigation .sub-menu li a:hover {
	background: rgba(255,255,255,.1);
}

.slider.slider-text .slider-right, .slider.slider-text .slider-left {
	background: rgba(0,0,0,.7);
	color: var(--color-light-gray);
}

.has-medium-blue-color {
	color: var(--color-light-gray) !important;;
}

#content .nhfv-filters {
	background: var(--color-dark-gray);
	box-shadow: 3px 3px 3px #000;
}

#content .archive-cards article {
	background: var(--color-dark-gray);
	box-shadow: 3px 3px 3px #000;
	border: 1px solid #444;
}

.archive-cards article .entry-title a:hover, .archive-cards article .entry-title a:focus {
	background: #000;
}

.cover-background {
	backdrop-filter: brightness(50%) !important;
}

.entry-featured-thumbnail img {
	opacity: .8;
}

#breadcrumbs a,
#main a {
	color: var(--color-white);
}

button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {
	border-color: var(--color-white);
}

#content .nhfv-filters fieldset label:hover, #content .nhfv-filters fieldset label:focus {
	background-color: #000;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select {
	background-color: #f0f0f0;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus, select:focus {
	outline: 2px solid var(--color-white);
}

.wp-block-button__link:focus, .wp-block-button__link:hover {
	outline: 2px solid var(--color-white);
}

.wp-pagenavi a, .wp-pagenavi span {
	border: 2px solid #555;
}

.wp-pagenavi span.current {
	background: var(--color-medium-blue);
	border-color: var(--color-medium-blue);
}

.background-image {
	background: none !important;
}

.wp-block-group.has-background {
	background: var(--color-black) !important;
}

.entry-content .has-black-color {
	color: var(--color-white) !important;
}


.archive #content .entry-header h1 {
	color: var(--color-light-gray);
}

.archive #content .entry-header span {
	color: var(--color-white);
}

.archive-cards article:nth-of-type(4n+3) h4 a,
.archive-cards article:nth-of-type(4n+3) h3 a,
.archive-cards article:nth-of-type(4n+3) h2 a {
	border-bottom: 6px solid var(--color-light-gray);
}

h1 {
	text-shadow: none;
}

.entry-content h3 {
	color: var(--color-light-gray);
}

.utility-dark-mode button[aria-pressed="true"] {
	background: var(--color-dark-blue);
	color: var(--color-white);
}

.main-navigation #primary-menu .megamenu .sub-menu h2 {
	color: var(--color-white);
}