/* ==========================================================================
   Digital ROI — Site-wide UX: sticky header, scroll-to-top/bottom toggle,
   dark/light theme switch.
   ========================================================================== */

/* ── Sticky header (always visible while scrolling) ── */
header[itemtype="https://schema.org/WPHeader"] {
	position: sticky;
	top: 0;
	z-index: 9999;
}

/* ── Scroll-to-top / scroll-to-bottom toggle button ── */
#droi-scroll-toggle {
	position: fixed !important;
	right: 24px;
	bottom: 24px;
	z-index: 9998;
	width: 46px;
	height: 46px;
	padding: 0 !important;
	border-radius: 50%;
	background: #1e1e1e !important;
	border: 1px solid #2c2c2c !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#droi-scroll-toggle:hover {
	background: #ed3d0e !important;
	border-color: #ed3d0e !important;
}
#droi-scroll-toggle svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px;
	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2 !important;
	transition: transform 0.3s ease;
}
#droi-scroll-toggle:hover svg { stroke: #ffffff !important; }
#droi-scroll-toggle.is-at-bottom svg {
	transform: rotate(180deg);
}

/* ── Dark / Light theme toggle switch ── */
#droi-theme-toggle {
	position: fixed !important;
	right: 24px;
	bottom: 82px;
	z-index: 9998;
	width: 46px;
	height: 46px;
	padding: 0 !important;
	border-radius: 50%;
	background: #1e1e1e !important;
	border: 1px solid #2c2c2c !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#droi-theme-toggle:hover {
	background: #ed3d0e !important;
	border-color: #ed3d0e !important;
}
#droi-theme-toggle svg {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px;
	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2 !important;
}
#droi-theme-toggle .droi-icon-moon { display: block; }
#droi-theme-toggle .droi-icon-sun { display: none; }
html[data-theme="light"] #droi-theme-toggle .droi-icon-moon { display: none; }
html[data-theme="light"] #droi-theme-toggle .droi-icon-sun { display: block; }

@media (max-width: 600px) {
	#droi-scroll-toggle,
	#droi-theme-toggle {
		width: 40px;
		height: 40px;
		right: 16px;
	}
	#droi-scroll-toggle { bottom: 16px; }
	#droi-theme-toggle { bottom: 66px; }
}

/* ── Light mode: full-page colour inversion ──
   Pragmatic, robust way to flip an entire dark-themed site to light
   without re-skinning every custom section individually. Media elements
   are re-inverted so photos/video keep natural colours. */
html[data-theme="light"] {
	background: #fff;
}
html[data-theme="light"] body {
	filter: invert(1) hue-rotate(180deg);
	background: #fff;
}
html[data-theme="light"] img,
html[data-theme="light"] video,
html[data-theme="light"] iframe,
html[data-theme="light"] picture,
html[data-theme="light"] svg image {
	filter: invert(1) hue-rotate(180deg);
}
/* Keep the toggle buttons themselves visually consistent (un-invert, then
   re-apply by inheriting through the filter naturally — buttons use
   currentColor icons so they read fine post-invert; no override needed). */