/**
 * GHDM — Frontend Dark Mode Engine + Toggle Button Styles
 *
 * Dark mode is achieved with a lightweight CSS-filter "invert" technique so it
 * works on top of ANY theme without needing per-theme color mapping. Media
 * (images, video, iframes, svg) get a counter-invert so they still look
 * natural, unless "Grayscale Images" is enabled — then they're desaturated
 * instead.
 */

:root {
	--ghdm-switch-bg: #2b2f38;
	--ghdm-switch-icon: #ffffff;
	--ghdm-dark-bg: #121212;
	--ghdm-dark-text: #e4e4e4;
	--ghdm-transition-speed: 400ms;
	--ghdm-toggle-track-bg: var(--ghdm-switch-bg);
	--ghdm-toggle-track-bg-2: transparent;
	--ghdm-toggle-knob-bg: #ffffff;
	--ghdm-toggle-icon-color: var(--ghdm-switch-icon);
	--ghdm-toggle-text-color: #1c1d22;
	--ghdm-toggle-border-color: transparent;
}

/* ---------------------------------------------------------------------
 * Core dark mode engine
 *
 * Light-mode rules always set filter to the identity values
 * invert(0) hue-rotate(0deg) so the browser can smoothly interpolate
 * to the dark-mode values when toggling. Using invert(0) instead of
 * `none` is critical — the browser cannot animate between different
 * filter functions, but it CAN animate between invert(0) and invert(1).
 * ------------------------------------------------------------------- */

/* Light-mode baseline: identity filter (no visual change) that allows
 * smooth interpolation to the dark-mode values. */
html {
	filter: invert(0) hue-rotate(0deg);
}
html img,
html video,
html iframe,
html svg,
html picture,
html canvas,
html embed {
	filter: invert(0) hue-rotate(0deg);
}
html .swiper-slide,
html .splide__slide,
html .slick-slide,
html .owl-item,
html .elementor-repeater-item,
html .elementor-carousel-slide,
html .flickity-slider > *,
html .tns-item,
html .glide__slide,
html .keen-slider__slide {
	filter: invert(0) hue-rotate(0deg);
}

/* Dark mode: invert + hue-rotate the page. The browser smoothly
 * interpolates from invert(0) hue-rotate(0deg) to invert(1) hue-rotate(180deg). */
html.ghdm-dark {
	background: var(--ghdm-dark-bg) !important;
	filter: invert(1) hue-rotate(180deg);
}

html.ghdm-dark body {
	background: var(--ghdm-dark-bg);
	color: var(--ghdm-dark-text);
}

/* Counter-invert media so photos/videos/icons still display naturally. */
html.ghdm-dark img,
html.ghdm-dark video,
html.ghdm-dark iframe,
html.ghdm-dark svg,
html.ghdm-dark picture,
html.ghdm-dark canvas,
html.ghdm-dark embed {
	filter: invert(1) hue-rotate(180deg);
}

/* Counter-invert background images on carousel / slider slide elements.
 * Many carousel widgets (Elementor Image Carousel, Swiper, Splide, OWL
 * Carousel, Slick, etc.) display images as CSS background-image on div
 * containers rather than as <img> tags. The html-level invert filter
 * inverts these backgrounds with no counter-invert, producing wrong
 * colours. Applying the same counter-invert to common slide wrappers
 * fixes this. Child <img> elements are NOT double-inverted because the
 * more specific html.ghdm-dark img rule (loaded later by Pro CSS) wins
 * the cascade for those elements. */
html.ghdm-dark .swiper-slide,
html.ghdm-dark .splide__slide,
html.ghdm-dark .slick-slide,
html.ghdm-dark .owl-item,
html.ghdm-dark .elementor-repeater-item,
html.ghdm-dark .elementor-carousel-slide,
html.ghdm-dark .flickity-slider > *,
html.ghdm-dark .tns-item,
html.ghdm-dark .glide__slide,
html.ghdm-dark .keen-slider__slide {
	filter: invert(1) hue-rotate(180deg);
}

/* Grayscale mode: desaturate images instead of counter-inverting them. */
html.ghdm-dark.ghdm-grayscale-images img,
html.ghdm-dark.ghdm-grayscale-images picture,
html.ghdm-dark.ghdm-grayscale-images video {
	filter: grayscale(1) !important;
}

/* Smooth transition between light/dark. Only transition filter — the old
 * background-color transition caused a visible flash mid-animation because
 * the bg-color and filter changed at different perceptual rates. */
html.ghdm-transition,
html.ghdm-transition body {
	transition: filter var(--ghdm-transition-speed) ease, color var(--ghdm-transition-speed) ease !important;
}
html.ghdm-transition img,
html.ghdm-transition video,
html.ghdm-transition iframe,
html.ghdm-transition svg,
html.ghdm-transition picture,
html.ghdm-transition canvas,
html.ghdm-transition embed,
html.ghdm-transition .swiper-slide,
html.ghdm-transition .splide__slide,
html.ghdm-transition .slick-slide,
html.ghdm-transition .owl-item,
html.ghdm-transition .elementor-repeater-item,
html.ghdm-transition .elementor-carousel-slide,
html.ghdm-transition .flickity-slider > *,
html.ghdm-transition .tns-item,
html.ghdm-transition .glide__slide,
html.ghdm-transition .keen-slider__slide {
	transition: filter var(--ghdm-transition-speed) ease !important;
}

/* Prevent double-inverting the toggle button itself so its colors stay
 * exactly as configured regardless of dark/light state. */
html.ghdm-dark .ghdm-toggle-btn {
	filter: invert(1) hue-rotate(180deg);
}

/* ---------------------------------------------------------------------
 * Floating toggle button
 * ------------------------------------------------------------------- */

.ghdm-toggle-btn {
	position: fixed;
	z-index: 999999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--ghdm-toggle-track-border, transparent);
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--ghdm-switch-bg);
	color: var(--ghdm-switch-icon);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	padding: 10px 14px;
	line-height: 1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* RTL isolation — keep the toggle's internal layout (flex order, knob slide
	   direction, icon+text order) locked to LTR even on Persian (dir=rtl) pages
	   so the switch never mirrors or gets pushed off-track. */
	direction: ltr;
	unicode-bidi: isolate;
}

.ghdm-toggle-btn:focus-visible {
	outline: 3px solid #6a5cff;
	outline-offset: 2px;
}

/* Positions */
.ghdm-pos-bottom-right { bottom: 20px; right: 20px; }
.ghdm-pos-bottom-left  { bottom: 20px; left: 20px; }
.ghdm-pos-top-right    { top: 20px; right: 20px; }
.ghdm-pos-top-left     { top: 20px; left: 20px; }

/* Sizes */
.ghdm-size-small  { padding: 6px 10px; font-size: 14px; }
.ghdm-size-medium { padding: 10px 14px; font-size: 18px; }
.ghdm-size-large  { padding: 14px 18px; font-size: 24px; }

/* Icon visibility: show sun in dark mode (switch TO light), moon in light mode (switch TO dark). */
.ghdm-icon { display: none; }
.ghdm-toggle-btn .ghdm-icon-moon { display: inline-block; }
html.ghdm-dark .ghdm-toggle-btn .ghdm-icon-moon { display: none; }
html.ghdm-dark .ghdm-toggle-btn .ghdm-icon-sun { display: inline-block; }

/* Icon style variants */
.ghdm-icon-switch .ghdm-icon,
.ghdm-icon-text .ghdm-icon {
	display: none !important;
}

.ghdm-switch-text { display: none; font-weight: 600; unicode-bidi: plaintext; }
.ghdm-icon-text .ghdm-switch-text.ghdm-text-light { display: inline-block; }
.ghdm-icon-text.ghdm-dark .ghdm-switch-text.ghdm-text-light,
html.ghdm-dark .ghdm-icon-text .ghdm-switch-text.ghdm-text-light { display: none; }
html.ghdm-dark .ghdm-icon-text .ghdm-switch-text.ghdm-text-dark { display: inline-block; }

/* "switch" style: renders as an actual sliding pill toggle. */
.ghdm-icon-switch {
	width: 52px;
	height: 28px;
	padding: 3px;
	box-sizing: border-box;
	border-radius: 999px;
}
.ghdm-icon-switch::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--ghdm-transition-speed) ease;
}
html.ghdm-dark .ghdm-icon-switch::after {
	transform: translateX(24px);
}

/* Style 1 — flat icon, light rounded square (free default). */
.ghdm-style-1 {
	border-radius: 12px;
}

/* Style 2 — dark rounded pill with icon + current-mode text label. */
.ghdm-style-2 {
	border-radius: 999px;
	background: #1f2430;
	color: #fff;
}
.ghdm-style-2 .ghdm-switch-text {
	display: inline-block !important;
}
.ghdm-style-2 .ghdm-switch-text.ghdm-text-dark { display: none !important; }
html.ghdm-dark .ghdm-style-2 .ghdm-switch-text.ghdm-text-light { display: none !important; }
html.ghdm-dark .ghdm-style-2 .ghdm-switch-text.ghdm-text-dark { display: inline-block !important; }

/* ---------------------------------------------------------------------
 * Mobile friendly adjustments
 * ------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ghdm-toggle-btn {
		padding: 8px 10px;
		font-size: 16px;
	}
	.ghdm-pos-bottom-right,
	.ghdm-pos-bottom-left {
		bottom: 12px;
	}
	.ghdm-pos-top-right,
	.ghdm-pos-top-left {
		top: 12px;
	}
	.ghdm-switch-text {
		display: none !important;
	}
}