/**
 * GHDM — Elementor per-element dark-mode behavior ("islands").
 *
 * Relies on the page-level engine in ghdm-frontend.css:
 *   html.ghdm-dark { filter: invert(1) hue-rotate(180deg); }
 * plus counter-inversion of media (img/video/iframe/svg/...) while dark.
 *
 * Elements get `data-ghdm-dm="none"` (Never dark) or `data-ghdm-dm="always"`
 * (Always dark) from the Luma Night panel section. Only the OUTERMOST island
 * of each kind is inverted, so nesting an island inside another one of the
 * same kind doesn't toggle it back.
 *
 * `filter` values always list invert()/hue-rotate() in the same order and a
 * baseline identity filter is set in the "off" state so toggling the site
 * switch animates smoothly with the rest of the page.
 */

/* Baseline identity filters (animate-able + establishes the filter chain). */
[data-ghdm-dm="none"],
html:not(.ghdm-dark) [data-ghdm-dm="always"] {
	filter: invert(0) hue-rotate(0deg);
}

/* ---------------------------------------------------------------------
 * "Never dark" — stay light while the site is dark.
 * Second local inversion cancels the page inversion exactly once per
 * rendered pixel (it applies to descendants too), so the element looks
 * like the light site.
 * ------------------------------------------------------------------- */
html.ghdm-dark [data-ghdm-dm="none"]:not([data-ghdm-dm="none"] *) {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* Inside a light island on a dark page, the page-level counter-invert on
   media would push it negative (light-island pixels are already
   un-inverted) — neutralize every filter the engine stacks on media. */
html.ghdm-dark [data-ghdm-dm="none"] img,
html.ghdm-dark [data-ghdm-dm="none"] video,
html.ghdm-dark [data-ghdm-dm="none"] iframe,
html.ghdm-dark [data-ghdm-dm="none"] svg,
html.ghdm-dark [data-ghdm-dm="none"] picture,
html.ghdm-dark [data-ghdm-dm="none"] canvas,
html.ghdm-dark [data-ghdm-dm="none"] embed,
html.ghdm-dark [data-ghdm-dm="none"] .swiper-slide,
html.ghdm-dark [data-ghdm-dm="none"] .splide__slide,
html.ghdm-dark [data-ghdm-dm="none"] .slick-slide,
html.ghdm-dark [data-ghdm-dm="none"] .owl-item,
html.ghdm-dark [data-ghdm-dm="none"] .elementor-repeater-item,
html.ghdm-dark [data-ghdm-dm="none"] .elementor-carousel-slide,
html.ghdm-dark [data-ghdm-dm="none"] .flickity-slider > *,
html.ghdm-dark [data-ghdm-dm="none"] .tns-item,
html.ghdm-dark [data-ghdm-dm="none"] .glide__slide,
html.ghdm-dark [data-ghdm-dm="none"] .keen-slider__slide {
	filter: unset !important;
}

/* ---------------------------------------------------------------------
 * "Always dark" — dark island on a light page.
 * Local inversion mimics the page-level dark engine; media is
 * counter-inverted just like the real dark mode does.
 * ------------------------------------------------------------------- */
html:not(.ghdm-dark) [data-ghdm-dm="always"]:not([data-ghdm-dm="always"] *) {
	filter: invert(1) hue-rotate(180deg) !important;
}

html:not(.ghdm-dark) [data-ghdm-dm="always"] img,
html:not(.ghdm-dark) [data-ghdm-dm="always"] video,
html:not(.ghdm-dark) [data-ghdm-dm="always"] iframe,
html:not(.ghdm-dark) [data-ghdm-dm="always"] svg,
html:not(.ghdm-dark) [data-ghdm-dm="always"] picture,
html:not(.ghdm-dark) [data-ghdm-dm="always"] canvas,
html:not(.ghdm-dark) [data-ghdm-dm="always"] embed,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .swiper-slide,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .splide__slide,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .slick-slide,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .owl-item,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .elementor-repeater-item,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .elementor-carousel-slide,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .flickity-slider > *,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .tns-item,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .glide__slide,
html:not(.ghdm-dark) [data-ghdm-dm="always"] .keen-slider__slide {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* When the site itself is dark, "always dark" elements simply inherit the
   page inversion (that's the baseline identity rule above) — no extra work.
   Exception: an always-dark island placed INSIDE a never-dark island must
   re-invert itself (page + island cancel out to light, so one inversion
   has to come from the element itself), with its media compensated: */
html.ghdm-dark [data-ghdm-dm="none"] [data-ghdm-dm="always"]:not([data-ghdm-dm="always"] *) {
	filter: invert(1) hue-rotate(180deg) !important;
}
html.ghdm-dark [data-ghdm-dm="none"] [data-ghdm-dm="always"] img,
html.ghdm-dark [data-ghdm-dm="none"] [data-ghdm-dm="always"] video,
html.ghdm-dark [data-ghdm-dm="none"] [data-ghdm-dm="always"] iframe,
html.ghdm-dark [data-ghdm-dm="none"] [data-ghdm-dm="always"] svg,
html.ghdm-dark [data-ghdm-dm="none"] [data-ghdm-dm="always"] picture {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* And a never-dark island inside an always-dark island on a light page:
   page + always cancel out for its pixels, so "none" contributes no
   inversion there — it inherits the surrounding dark look, which is the
   consistent reading of "always dark" applying to its parent context. */

/* ---------------------------------------------------------------------
 * Smooth toggling — interpolate island filters with the page.
 * ------------------------------------------------------------------- */
html.ghdm-transition [data-ghdm-dm],
html.ghdm-transition [data-ghdm-dm] img,
html.ghdm-transition [data-ghdm-dm] video,
html.ghdm-transition [data-ghdm-dm] picture,
html.ghdm-transition [data-ghdm-dm] iframe,
html.ghdm-transition [data-ghdm-dm] svg {
	transition: filter var(--ghdm-transition-speed) ease !important;
}

/* ---------------------------------------------------------------------
 * Editor niceties (Elementor preview iframe)
 * ------------------------------------------------------------------- */
[data-ghdm-dm] {
	outline-offset: -2px;
}
.elementor-editor-preview [data-ghdm-dm="none"] {
	outline: 1px dashed rgba(255, 200, 60, 0.65);
}
.elementor-editor-preview [data-ghdm-dm="always"] {
	outline: 1px dashed rgba(120, 160, 255, 0.65);
}