/*
 * Dark mode, invert flavour.
 *
 * One rule does the work: the whole document is inverted and its hues rotated
 * back 180 degrees, so white becomes near-black, cream becomes warm charcoal,
 * and the taupe and gold keep their family. Everything else in this file is
 * the list of things that must NOT be inverted: photographs, film, embeds,
 * maps, and the blocks that were designed dark to begin with.
 *
 * Only active when the topbar toggle (or the OS preference) has set
 * html[data-anan-theme="dark"] AND the module runs in invert mode, which adds
 * html.anan-invert server-side. The palette stylesheets are not loaded at all
 * in this mode, and the other modules' palette rules are scoped away from it.
 *
 * A filter on the ROOT element is the one place the spec exempts from the
 * "filter creates a containing block for position:fixed" rule, so the dock,
 * the phone bar and Ana's pane keep working. A filter on anything lower does
 * create one, which is why the re-inverted photo containers are marked by JS
 * only when they have no marked ancestor, and why nothing fixed is re-inverted.
 */

html.anan-invert[data-anan-theme="dark"] {
	filter: invert(1) hue-rotate(180deg);
	/* Painted inside the filter, so white here is the dark page ground and the
	   overscroll edges match it. */
	background: #fff;
}

/* Photographs, film, embeds and drawings keep their true colours, and so do
   the blocks that were designed dark: the brand footer, Ana's night scene and
   the preferences dock (its charcoal pill and language flags are already the
   intended look; inverted, the flags came out in the wrong colours). The dock
   is itself the fixed element, so a filter on it contains only its own
   flyouts, which are positioned against it anyway. */
html.anan-invert[data-anan-theme="dark"] :is(img, picture, video, iframe, canvas, embed, object, .anan-dark-photo, .anan-dark-keep, .anan-footer, .anan-meetana, .anan-dock) {
	filter: invert(1) hue-rotate(180deg);
}

/* Nothing inside a re-inverted block is inverted a third time. */
html.anan-invert[data-anan-theme="dark"] :is(.anan-dark-photo, .anan-dark-keep, .anan-footer, .anan-meetana, .anan-dock) :is(img, picture, video, iframe, canvas, embed, object, .anan-dark-photo, .anan-dark-keep) {
	filter: none;
}

/* Map tiles stay inverted: a dark map suits a dark page. Pins are still images
   and keep their colours through the rule above. */
html.anan-invert[data-anan-theme="dark"] .leaflet-tile,
html.anan-invert[data-anan-theme="dark"] .leaflet-tile-container img {
	filter: none;
}

/* Small mono icons drawn as images (flags excepted) read better inverted with
   the text around them. */
html.anan-invert[data-anan-theme="dark"] img[src$=".svg"]:not(.anan-dark-keep):not([class*="flag"]),
html.anan-invert[data-anan-theme="dark"] img[src*="data:image/svg"] {
	filter: none;
}

/* Native controls: let the browser draw them light so the inversion makes
   them dark like everything else. */
html.anan-invert[data-anan-theme="dark"] {
	color-scheme: light;
}

/* Shadows are inverted into glows; soften them. */
html.anan-invert[data-anan-theme="dark"] :is(.elementor-widget-container, .property_listing, .blog_unit, .agent_unit, .anan-card) {
	box-shadow: none;
}