/*
 * oddforms dark mode
 * Follows the visitor's system setting (prefers-color-scheme): no toggle, no script.
 * Loaded after the theme's styles by functions.php (versioned by the file's date, so browsers
 * pick up changes despite the server's 30-day cache).
 * The home page is dark by design and is left alone (everything here skips body.home).
 * Colors: near-black like the footer, light grey text, white headings, the teal accent as is.
 */
@media (prefers-color-scheme: dark) {
	body:not(.home) {
		--of-bg: #0a0a0a;
		--of-text: #b9b9b9;
		--of-heading: #f0f0f0;
		--of-muted: #8e8e8e;
		--of-line: #2b2b2b;
		background-color: var(--of-bg) !important;
		color: var(--of-text) !important;
	}

	/* Surfaces that are white in light mode */
	body:not(.home) .ocm-effect-wrap,
	body:not(.home) #header-outer,
	body:not(.home) #header-space,
	body:not(.home) .container-wrap,
	body:not(.home) .bottom_controls,
	body:not(.home) .masonry-blog-item .inner-wrap,
	body.blog .row-bg-layer {
		background-color: var(--of-bg) !important;
	}

	/* Text: body copy, then headings and titles, then the quieter meta lines */
	body:not(.home) .container-wrap p,
	body:not(.home) .container-wrap li,
	body:not(.home) .container-wrap em,
	body:not(.home) .container-wrap strong {
		color: var(--of-text);
	}
	body:not(.home) .container-wrap h1,
	body:not(.home) .container-wrap h2,
	body:not(.home) .container-wrap h3,
	body:not(.home) .container-wrap h4,
	body:not(.home) .container-wrap h5,
	body:not(.home) .container-wrap h6,
	body:not(.home) .container-wrap h1 strong,
	body:not(.home) .container-wrap h4 strong,
	body:not(.home) .masonry-blog-item .post-header .title a,
	body:not(.home) .entry-title {
		color: var(--of-heading) !important;
	}
	body:not(.home) .masonry-blog-item .meta-author,
	body:not(.home) .masonry-blog-item .meta-author a,
	body:not(.home) .masonry-blog-item .meta-category a,
	body:not(.home) .masonry-blog-item .post-meta .date,
	body:not(.home) #single-below-header,
	body:not(.home) #single-below-header span,
	body:not(.home) #single-below-header a {
		color: var(--of-muted) !important;
	}
	body:not(.home) .row.heading-title {
		border-color: var(--of-line) !important;
	}

	/* Text Salient sets "light" (white, for colored blocks) stays white */
	body:not(.home) .container-wrap .light h1,
	body:not(.home) .container-wrap .light h2,
	body:not(.home) .container-wrap .light h3,
	body:not(.home) .container-wrap .light h4,
	body:not(.home) .container-wrap .light h5,
	body:not(.home) .container-wrap .light h6,
	body:not(.home) .container-wrap .light p,
	body:not(.home) .container-wrap .light li,
	body:not(.home) .container-wrap .light em,
	body:not(.home) .container-wrap .light strong {
		color: #fff !important;
	}

	/* Teal blocks (the Archive page's heading) become a teal outline: white on a solid
	   teal glare on a dark page */
	body:not(.home) .wpb_row[style*="--row-bg-color: #27ccc0"],
	body:not(.home) .wpb_row[style*="--row-bg-color: #27CCC0"] {
		--row-bg-color: transparent !important;
		background-color: transparent !important;
	}
	body:not(.home) .wpb_row[style*="--row-bg-color: #27ccc0"] .row-bg-wrap,
	body:not(.home) .wpb_row[style*="--row-bg-color: #27ccc0"] .row-bg-wrap *,
	body:not(.home) .wpb_row[style*="--row-bg-color: #27CCC0"] .row-bg-wrap,
	body:not(.home) .wpb_row[style*="--row-bg-color: #27CCC0"] .row-bg-wrap * {
		background-color: transparent !important;
	}
	body:not(.home) .wpb_row[style*="--row-bg-color: #27ccc0"] .row-bg-wrap,
	body:not(.home) .wpb_row[style*="--row-bg-color: #27CCC0"] .row-bg-wrap {
		box-shadow: inset 0 0 0 2px #27ccc0;
	}

	/* No white between pages: Salient's page-transition screen and the page canvas, on every
	   page (the home page is black anyway) */
	html,
	#ajax-loading-screen,
	#ajax-loading-screen .reveal-1,
	#ajax-loading-screen .reveal-2 {
		background-color: #0a0a0a !important;
	}

	/* The loading shell: a white copy of Salient's loading image (2017/02/loader.gif, black
	   line art). A copy, not filter: invert: the loading layer covers the whole window, and a
	   filter on it brought back a white flash between pages (2026-11-10). */
	#ajax-loading-screen .loading-icon,
	.loading-icon,
	.portfolio-loading,
	.pp_loaderIcon {
		background-image: url('../Images/loader-white.gif') !important;
	}

	/* The logo is black line art: white, like the home page's */
	body:not(.home) #logo img {
		filter: invert(1);
	}

	/* The nav creatures: the home page's white drawings in place of the black ones */
	body:not(.home) .project-nav {
		background-image: url('https://oddforms.com/wp-content/uploads/2019/02/latern.gif');
	}
	body:not(.home) .project-nav:hover {
		background-image: url('https://oddforms.com/wp-content/uploads/2019/03/latern-hover.gif');
	}
	body:not(.home) .news-nav {
		background-image: url('https://oddforms.com/wp-content/uploads/2019/02/puffer.gif');
	}
	body:not(.home) .news-nav:hover {
		background-image: url('https://oddforms.com/wp-content/uploads/2019/03/puffer-hover.gif');
	}
}