/*
 * JD Dark Mode
 * Everything here applies only when the visitor's device is set to dark.
 * Colours come from the --jd-dm-* variables set in the Customizer.
 */

@media (prefers-color-scheme: dark) {

	/* Base -------------------------------------------------------------- */

	:root {
		color-scheme: dark;
	}

	html,
	body {
		background-color: var(--jd-dm-bg);
	}

	body {
		color: var(--jd-dm-text);
		/* Minimalio reads these in its own stylesheet (buttons etc). */
		--preset--background-color: var(--jd-dm-bg);
		--preset--font-color: var(--jd-dm-text);
		--preset--secondary-color: var(--jd-dm-link);
		--preset--tertiary-color: var(--jd-dm-muted);
	}

	.site .content-area a:not(.btn, .wp-block-button__link, .header__brand) {
		color: var(--jd-dm-link);
	}

	/* Header and desktop menu -------------------------------------------- */

	.header {
		background: var(--jd-dm-bg);
	}

	.nav__link,
	.header ul li .nav__link,
	.header .socials__icon,
	.header .header__brand,
	.header .header__tagline {
		color: var(--jd-dm-link);
	}

	/* Hamburger icon (hard-coded black in the theme). */
	.header__mobile-button.text-black {
		color: var(--jd-dm-link);
	}

	/* Mobile menu -------------------------------------------------------- */

	.mobile-menu,
	.mobile-menu__logo-wrap {
		background-color: var(--jd-dm-bg);
	}

	.mobile-menu__menu li .mobile-menu__link,
	.mobile-menu__submenu .mobile-menu__link,
	.menu-item-has-children.mobile-menu__item::after,
	.mobile-menu__container-social a.socials__link svg,
	.site .header__mobile-button .mobile-menu__close-icon {
		color: var(--jd-dm-text);
	}

	/* Content blocks ----------------------------------------------------- */

	/* Black separators and black text set in the block editor. */
	.wp-block-separator.has-black-background-color {
		background-color: var(--jd-dm-text) !important;
	}

	.wp-block-separator.has-black-color,
	.has-black-color {
		color: var(--jd-dm-text) !important;
		border-color: var(--jd-dm-text) !important;
	}

	/* Portfolio meta block (year / client / disciplines) has an inline dark grey. */
	.entry-content .wp-block-preformatted.has-text-color {
		color: var(--jd-dm-text) !important;
	}

	/* Outline buttons fill with the text colour on hover. */
	.wp-block-button.is-style-outline .wp-block-button__link:hover,
	.wp-block-button.is-style-outline .wp-element-button:hover {
		color: var(--jd-dm-bg);
	}

	/* Forms (Fluent Forms and core) --------------------------------------- */

	.site input[type="text"],
	.site input[type="email"],
	.site input[type="tel"],
	.site input[type="url"],
	.site input[type="number"],
	.site input[type="search"],
	.site textarea,
	.site select,
	.fluentform .ff-el-form-control {
		background-color: transparent;
		color: var(--jd-dm-text);
		border-color: color-mix(in srgb, var(--jd-dm-text) 35%, transparent);
	}

	.site input::placeholder,
	.site textarea::placeholder,
	.fluentform .ff-el-form-control::placeholder {
		color: color-mix(in srgb, var(--jd-dm-text) 55%, transparent);
	}

	.fluentform .ff-el-form-control:focus {
		background-color: transparent;
		color: var(--jd-dm-text);
		border-color: var(--jd-dm-text);
	}

	.fluentform .ff-el-input--label label {
		color: var(--jd-dm-text);
	}

	.fluentform .ff-btn-submit.ff_btn_no_style {
		background-color: var(--jd-dm-text);
		color: var(--jd-dm-bg);
	}

	/* Lightbox ----------------------------------------------------------- */

	.pswp__bg {
		background: var(--jd-dm-bg);
	}
}