/* =====================================================================
   Site-wide dark mode
   ---------------------------------------------------------------------
   The Adi plugins each paint their own dark background, but the theme
   around them — body, Divi's page container, its sections and rows —
   stays white, which leaves a dark block floating in a white page. This
   paints the page itself so the two agree.

   Follows the visitor's system setting, and obeys an explicit override:

       <html data-adi-theme="dark">    always dark
       <html data-adi-theme="light">   always light

   Colours match the plugins: #141312 ground, #f3f1ee text (15.9:1),
   #b4aea7 muted (7.6:1) — both past the WCAG AA floor.
   ================================================================== */

:root {
	--adi-dark-bg: #141312;
	--adi-dark-raise: #1b1a19;
	--adi-dark-ink: #f3f1ee;
	--adi-dark-muted: #b4aea7;
	--adi-dark-rule: rgba(255, 255, 255, .26);
}

@media (prefers-color-scheme: dark) {
	html:not([data-adi-theme="light"]) {
		background: var(--adi-dark-bg);
		color-scheme: dark;
	}

	html:not([data-adi-theme="light"]) body,
	html:not([data-adi-theme="light"]) #page-container,
	html:not([data-adi-theme="light"]) #et-main-area,
	html:not([data-adi-theme="light"]) #main-content,
	html:not([data-adi-theme="light"]) .et_pb_section,
	html:not([data-adi-theme="light"]) .et_pb_row,
	html:not([data-adi-theme="light"]) .et_pb_column,
	html:not([data-adi-theme="light"]) article,
	html:not([data-adi-theme="light"]) .entry-content {
		background-color: var(--adi-dark-bg) !important;
		color: var(--adi-dark-ink);
	}

	/* Headings carry an explicit colour in most themes, Divi included. */
	html:not([data-adi-theme="light"]) h1,
	html:not([data-adi-theme="light"]) h2,
	html:not([data-adi-theme="light"]) h3,
	html:not([data-adi-theme="light"]) h4,
	html:not([data-adi-theme="light"]) h5,
	html:not([data-adi-theme="light"]) h6 {
		color: var(--adi-dark-ink);
	}

	html:not([data-adi-theme="light"]) p,
	html:not([data-adi-theme="light"]) li,
	html:not([data-adi-theme="light"]) dd,
	html:not([data-adi-theme="light"]) dt,
	html:not([data-adi-theme="light"]) td,
	html:not([data-adi-theme="light"]) th,
	html:not([data-adi-theme="light"]) blockquote {
		color: var(--adi-dark-ink);
	}

	html:not([data-adi-theme="light"]) a { color: inherit; }

	html:not([data-adi-theme="light"]) hr,
	html:not([data-adi-theme="light"]) td,
	html:not([data-adi-theme="light"]) th {
		border-color: var(--adi-dark-rule);
	}

	/* Form fields are white by default and blind people in a dark room. */
	html:not([data-adi-theme="light"]) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
	html:not([data-adi-theme="light"]) select,
	html:not([data-adi-theme="light"]) textarea {
		background-color: var(--adi-dark-raise);
		color: var(--adi-dark-ink);
		border-color: var(--adi-dark-rule);
	}
	html:not([data-adi-theme="light"]) ::placeholder { color: var(--adi-dark-muted); opacity: 1; }

	/* Our own wrappers already handle their interiors; they only need to
	   stop painting a background of their own over the page. */
	html:not([data-adi-theme="light"]) .adi-bl,
	html:not([data-adi-theme="light"]) .adi-sv,
	html:not([data-adi-theme="light"]) .adi-ab,
	html:not([data-adi-theme="light"]) .adi-cs,
	html:not([data-adi-theme="light"]) .adi-work,
	html:not([data-adi-theme="light"]) .adi-cl,
	html:not([data-adi-theme="light"]) .adi-rs,
	html:not([data-adi-theme="light"]) .adi-ld {
		background-color: transparent;
	}
}

/* The same, forced on. */
[data-adi-theme="dark"] { background: var(--adi-dark-bg); color-scheme: dark; }

[data-adi-theme="dark"] body,
[data-adi-theme="dark"] #page-container,
[data-adi-theme="dark"] #et-main-area,
[data-adi-theme="dark"] #main-content,
[data-adi-theme="dark"] .et_pb_section,
[data-adi-theme="dark"] .et_pb_row,
[data-adi-theme="dark"] .et_pb_column,
[data-adi-theme="dark"] article,
[data-adi-theme="dark"] .entry-content {
	background-color: var(--adi-dark-bg) !important;
	color: var(--adi-dark-ink);
}

[data-adi-theme="dark"] h1,
[data-adi-theme="dark"] h2,
[data-adi-theme="dark"] h3,
[data-adi-theme="dark"] h4,
[data-adi-theme="dark"] h5,
[data-adi-theme="dark"] h6,
[data-adi-theme="dark"] p,
[data-adi-theme="dark"] li { color: var(--adi-dark-ink); }

[data-adi-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-adi-theme="dark"] select,
[data-adi-theme="dark"] textarea {
	background-color: var(--adi-dark-raise);
	color: var(--adi-dark-ink);
	border-color: var(--adi-dark-rule);
}

[data-adi-theme="dark"] .adi-bl,
[data-adi-theme="dark"] .adi-sv,
[data-adi-theme="dark"] .adi-ab,
[data-adi-theme="dark"] .adi-cs,
[data-adi-theme="dark"] .adi-work,
[data-adi-theme="dark"] .adi-cl,
[data-adi-theme="dark"] .adi-rs,
[data-adi-theme="dark"] .adi-ld { background-color: transparent; }