/* NL Dark Mode Toggle — button base styles (positioning/colors/size are injected inline by PHP) */

#dmt-toggle-btn {
	position: fixed;
	z-index: 999999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: box-shadow 0.25s ease, opacity 0.2s ease;
	line-height: 1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--dmt-glow-rgb: 43, 47, 56;
}

/* Glow on hover instead of moving/scaling the button */
#dmt-toggle-btn:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 18px 4px rgba(var(--dmt-glow-rgb), 0.65);
}

#dmt-toggle-btn:focus-visible {
	outline: 2px solid #4d90fe;
	outline-offset: 2px;
}

#dmt-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#dmt-toggle-btn svg {
	flex-shrink: 0;
}

/* Icon swapping: show moon in light mode, sun in dark mode.
   These rules must win over any generic "svg" sizing rule, so we scope
   them to #dmt-icon-wrap > svg (higher specificity than "#dmt-toggle-btn svg"). */
#dmt-icon-wrap > #dmt-icon-sun { display: none; }
#dmt-icon-wrap > #dmt-icon-moon { display: block; }

html.dmt-dark-active #dmt-icon-wrap > #dmt-icon-sun { display: block; }
html.dmt-dark-active #dmt-icon-wrap > #dmt-icon-moon { display: none; }

#dmt-label {
	white-space: nowrap;
	font-size: inherit;
	text-align: center;
}

/* In vertical orientation the button is narrow, so let text wrap instead of overflowing */
#dmt-toggle-btn.dmt-orient-vertical #dmt-label {
	white-space: normal;
	line-height: 1.25;
}

/* Text swapping: "Dark Mode" in light mode, "Light Mode" once dark is active */
#dmt-label .dmt-label-dark { display: none; }
#dmt-label .dmt-label-light { display: inline; }

html.dmt-dark-active #dmt-label .dmt-label-dark { display: inline; }
html.dmt-dark-active #dmt-label .dmt-label-light { display: none; }

/* ---------------------------------------------------------- */
/* Method 1: Smart Invert — flips the whole page's colors and */
/* re-inverts media so photos/videos still look correct.      */
/* ---------------------------------------------------------- */
html.dmt-dark-active.dmt-method-invert {
	filter: invert(1) hue-rotate(180deg);
	background-color: #fff;
}
html.dmt-dark-active.dmt-method-invert img,
html.dmt-dark-active.dmt-method-invert video,
html.dmt-dark-active.dmt-method-invert iframe,
html.dmt-dark-active.dmt-method-invert svg image,
html.dmt-dark-active.dmt-method-invert canvas,
html.dmt-dark-active.dmt-method-invert [style*="background-image"] {
	filter: invert(1) hue-rotate(180deg);
}
/* Keep our own button readable — cancel the double invert on it */
html.dmt-dark-active.dmt-method-invert #dmt-toggle-btn {
	filter: invert(1) hue-rotate(180deg);
}

/* ---------------------------------------------------------- */
/* Method 2: Basic Overlay — a straightforward dark background */
/* + light text override, safe on themes with simple markup.   */
/* ---------------------------------------------------------- */
html.dmt-dark-active.dmt-method-basic,
html.dmt-dark-active.dmt-method-basic body {
	background-color: #121212 !important;
	color: #e6e6e6 !important;
}
html.dmt-dark-active.dmt-method-basic a {
	color: #8ab4ff !important;
}
html.dmt-dark-active.dmt-method-basic header,
html.dmt-dark-active.dmt-method-basic footer,
html.dmt-dark-active.dmt-method-basic nav,
html.dmt-dark-active.dmt-method-basic aside,
html.dmt-dark-active.dmt-method-basic section,
html.dmt-dark-active.dmt-method-basic article,
html.dmt-dark-active.dmt-method-basic div {
	background-color: transparent;
	border-color: #333 !important;
}
html.dmt-dark-active.dmt-method-basic input,
html.dmt-dark-active.dmt-method-basic textarea,
html.dmt-dark-active.dmt-method-basic select {
	background-color: #1e1e1e !important;
	color: #e6e6e6 !important;
	border-color: #444 !important;
}

@media (max-width: 480px) {
	#dmt-toggle-btn {
		transform-origin: center;
	}
}