/**
 * Lumo Eclipse - Dark Mode Styles
 *
 * Core dark mode styling using Smart Invert method
 * Lightweight and compatible with all themes
 *
 * @package LumoEclipse
 * @since 1.0.0
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
	--ne-transition-speed: 300ms;
	--ne-image-brightness: 0.85;
	--ne-bg-color: #1a1a2e;
	--ne-text-color: #eaeaea;
	--ne-link-color: #4fc3f7;
	--ne-button-bg: #eab308;
	--ne-button-text: #ffffff;
}

/* ========================================
   SMART INVERT METHOD (Default)
   ======================================== */

/* Base dark mode - invert everything */
html.ne-dark {
	filter: invert(1) hue-rotate(180deg);
	transition: filter var(--ne-transition-speed) ease;
}

/* Re-invert media elements to preserve original colors */
html.ne-dark img,
html.ne-dark video,
html.ne-dark iframe,
html.ne-dark canvas,
html.ne-dark svg:not(.ne-switch-icon),
html.ne-dark picture,
html.ne-dark [style*="background-image"],
html.ne-dark .wp-block-image,
html.ne-dark .wp-block-cover,
html.ne-dark .wp-block-media-text__media,
html.ne-dark .attachment-post-thumbnail,
html.ne-dark .wp-post-image,
html.ne-dark .ne-exclude,
html.ne-dark .no-dark-mode {
	filter: invert(1) hue-rotate(180deg);
}

/* Dim images for easier viewing */
html.ne-dark img,
html.ne-dark video,
html.ne-dark picture img {
	opacity: var(--ne-image-brightness);
}

/* Ensure nested media doesn't get double inverted */
html.ne-dark img img,
html.ne-dark picture img {
	filter: none;
}

/* ========================================
   CUSTOM COLORS METHOD
   ======================================== */

/* When using custom colors, disable smart invert */
html.ne-dark.ne-custom {
	filter: none;
	background-color: var(--ne-bg-color);
	color: var(--ne-text-color);
}

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

html.ne-dark.ne-custom a {
	color: var(--ne-link-color);
}

html.ne-dark.ne-custom button,
html.ne-dark.ne-custom .button,
html.ne-dark.ne-custom input[type="submit"],
html.ne-dark.ne-custom input[type="button"] {
	background-color: var(--ne-button-bg);
	color: var(--ne-button-text);
}

/* ========================================
   VISIBILITY CLASSES
   ======================================== */

/* Show only in dark mode */
.ne-dark-only {
	display: none !important;
}

html.ne-dark .ne-dark-only {
	display: block !important;
}

/* Show only in light mode */
html.ne-dark .ne-light-only {
	display: none !important;
}

/* ========================================
   COMMON ELEMENT FIXES
   ======================================== */

/* Fix for box shadows looking weird when inverted */
html.ne-dark {
	--shadow-color: rgba(255, 255, 255, 0.1);
}

/* Prevent flash during transition */
html.ne-dark,
html.ne-dark body {
	background-color: inherit;
}

/* Fix for some themes that use !important on body background */
html.ne-dark body {
	transition: background-color var(--ne-transition-speed) ease,
	            color var(--ne-transition-speed) ease;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
html.ne-dark::-webkit-scrollbar {
	width: 12px;
}

html.ne-dark::-webkit-scrollbar-track {
	background: #1a1a1a;
}

html.ne-dark::-webkit-scrollbar-thumb {
	background: #444;
	border-radius: 6px;
}

html.ne-dark::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* Firefox scrollbar */
html.ne-dark {
	scrollbar-color: #444 #1a1a1a;
}

/* ========================================
   COMMON PLUGIN COMPATIBILITY
   ======================================== */

/* WooCommerce */
html.ne-dark .woocommerce-product-gallery img,
html.ne-dark .woocommerce-product-gallery__image {
	filter: invert(1) hue-rotate(180deg);
}

/* Elementor */
html.ne-dark .elementor-widget-image img,
html.ne-dark .elementor-background-overlay {
	filter: invert(1) hue-rotate(180deg);
}

/* Contact Form 7 */
html.ne-dark .wpcf7-form input[type="text"],
html.ne-dark .wpcf7-form input[type="email"],
html.ne-dark .wpcf7-form textarea {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: inherit;
}

/* Gravity Forms */
html.ne-dark .gform_wrapper input[type="text"],
html.ne-dark .gform_wrapper input[type="email"],
html.ne-dark .gform_wrapper textarea {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: inherit;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
	html.ne-dark {
		filter: none;
	}
	
	html.ne-dark img,
	html.ne-dark video,
	html.ne-dark iframe {
		filter: none;
		opacity: 1;
	}
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	html.ne-dark {
		transition: none;
	}
	
	html.ne-dark body {
		transition: none;
	}
}