/* Dark Light Mode Toggle - front-end styles */

html {
	transition: filter 0.3s ease;
}

/* Universal dark mode: invert the whole page, then invert media back so
   photos/videos don't look like negatives. */
html.dlm-dark {
	filter: invert(1) hue-rotate(180deg);
	background: #fff;
}

html.dlm-dark img,
html.dlm-dark video,
html.dlm-dark iframe,
html.dlm-dark svg image,
html.dlm-dark picture,
html.dlm-dark [style*="background-image"],
html.dlm-dark .dlm-media {
	filter: invert(1) hue-rotate(180deg);
}

/* Hero/banner sliders (Slick "bwp-slider", Revolution Slider, etc.) layer
   photos with animated glare/overlay graphics. Trying to un-invert those
   piece by piece breaks on every new slide, so leave the whole widget
   exactly as designed instead of inverting it at all. */
html.dlm-dark .bwp-slider,
html.dlm-dark .bwp-widget-banner,
html.dlm-dark .wp-block-themepunch-revslider,
html.dlm-dark .elementor-widget-slider_revolution,
html.dlm-dark sr7-module,
html.dlm-dark [class*="rev_slider"] {
	filter: invert(1) hue-rotate(180deg);
}

/* The container above already cancels the page-wide invert, so nothing
   inside it should invert again (that would just flip it back to negative). */
html.dlm-dark .bwp-slider *,
html.dlm-dark .bwp-widget-banner *,
html.dlm-dark .wp-block-themepunch-revslider *,
html.dlm-dark .elementor-widget-slider_revolution *,
html.dlm-dark sr7-module *,
html.dlm-dark [class*="rev_slider"] * {
	filter: none;
}

/* The site logo/brand mark isn't a photo - it's usually flat black/dark
   line art, so keeping its "true colors" leaves it black on a now-dark
   header (invisible). Let it invert with the page instead, like text does. */
html.dlm-dark .header-logo img,
html.dlm-dark .site-logo img,
html.dlm-dark .custom-logo,
html.dlm-dark .wpbingoLogo img {
	filter: none;
}

/* Form controls (custom <select> arrows are often drawn with a CSS gradient,
   which counts as a background-image) are UI chrome, not photos - their text
   needs to keep inverting with the page, not stay stuck in original colors. */
html.dlm-dark select.dlm-media,
html.dlm-dark input.dlm-media,
html.dlm-dark textarea.dlm-media,
html.dlm-dark button.dlm-media {
	filter: none;
}

/* Floating toggle button */
#dlm-toggle-btn {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 999999;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: #222;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease, transform 0.2s ease;
	padding: 0;
}

#dlm-toggle-btn:hover {
	transform: scale(1.08);
}

#dlm-toggle-btn .dlm-icon {
	width: 22px;
	height: 22px;
	display: none;
	line-height: 0;
}

#dlm-toggle-btn .dlm-icon svg {
	width: 100%;
	height: 100%;
}

#dlm-toggle-btn .dlm-icon-sun {
	display: block;
}

/* Cancel the page-wide invert on the button itself so its own colors stay true. */
html.dlm-dark #dlm-toggle-btn {
	filter: invert(1) hue-rotate(180deg);
	background: #fff;
	color: #222;
}

html.dlm-dark #dlm-toggle-btn .dlm-icon-sun {
	display: none;
}

html.dlm-dark #dlm-toggle-btn .dlm-icon-moon {
	display: block;
}

@media (max-width: 480px) {
	#dlm-toggle-btn {
		bottom: 16px;
		left: 16px;
		width: 46px;
		height: 46px;
	}
}