/**
 * Pole Fit Freedom: dark mode.
 *
 * Swaps the palette variables, so every block keeps its colour names and follows along.
 * Applies when the visitor chose dark (html[data-theme="dark"]) or, with no choice saved,
 * when the device is set to dark. Contrast of every pair is checked to WCAG AA.
 */

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #1a171e;
	--wp--preset--color--contrast: #faf7f5;
	--wp--preset--color--surface: #2a2230;
	--wp--preset--color--primary: #dfa8b7;
	--wp--preset--color--primary-dark: #ebc1cc;
	--wp--preset--color--primary-light: #b07a8b;
	--wp--preset--color--muted: #bfb3ba;
	--wp--preset--color--base-dark: #120f15;
	--pff-pro: #81c784;
	--pff-con: #f2a7a0;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #1a171e;
		--wp--preset--color--contrast: #faf7f5;
		--wp--preset--color--surface: #2a2230;
		--wp--preset--color--primary: #dfa8b7;
		--wp--preset--color--primary-dark: #ebc1cc;
		--wp--preset--color--primary-light: #b07a8b;
		--wp--preset--color--muted: #bfb3ba;
		--wp--preset--color--base-dark: #120f15;
		--pff-pro: #81c784;
		--pff-con: #f2a7a0;
	}
}

/*
 * Fixed-colour areas (Additional CSS class "pff-fixed-colours"): keep the light-mode
 * palette in dark mode, for bands that are already dark or strongly coloured.
 */
:root[data-theme="dark"] .pff-fixed-colours {
	--wp--preset--color--base: #faf7f5;
	--wp--preset--color--contrast: #29232b;
	--wp--preset--color--surface: #f3e4e8;
	--wp--preset--color--primary: #a15a6d;
	--wp--preset--color--primary-dark: #713a4c;
	--wp--preset--color--primary-light: #dfa8b7;
	--wp--preset--color--muted: #6b5e66;
	--wp--preset--color--base-dark: #1a171e;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pff-fixed-colours {
		--wp--preset--color--base: #faf7f5;
		--wp--preset--color--contrast: #29232b;
		--wp--preset--color--surface: #f3e4e8;
		--wp--preset--color--primary: #a15a6d;
		--wp--preset--color--primary-dark: #713a4c;
		--wp--preset--color--primary-light: #dfa8b7;
		--wp--preset--color--muted: #6b5e66;
		--wp--preset--color--base-dark: #1a171e;
	}
}

/* Logo: Rose Glow in dark mode (Dusty Pink is only 3.5:1 on Midnight Plum). */
:root[data-theme="dark"] .pff-logo img {
	content: url("../logos/pole-fit-freedom-rose-glow.svg");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pff-logo img {
		content: url("../logos/pole-fit-freedom-rose-glow.svg");
	}
}

/*
 * "Dark mode image" (block sidebar): show the dark photo instead of the main one.
 */
.pff-dark-img {
	display: none !important;
}

:root[data-theme="dark"] .pff-light-img {
	display: none !important;
}

:root[data-theme="dark"] .pff-dark-img {
	display: block !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pff-light-img {
		display: none !important;
	}

	:root:not([data-theme="light"]) .pff-dark-img {
		display: block !important;
	}
}

/*
 * Gravity Forms. Each form prints its colours inline (from the brand defaults in
 * inc/gravity-forms.php), with an ID selector, so the dark palette has to win with
 * !important on these variables. Values are the dark tokens above.
 */
:root[data-theme="dark"] .gform_wrapper.gform-theme {
	--gf-color-primary: #dfa8b7 !important;
	--gf-color-primary-rgb: 223, 168, 183 !important;
	--gf-color-primary-contrast: #1a171e !important;
	--gf-color-primary-contrast-rgb: 26, 23, 30 !important;
	--gf-color-primary-darker: #ebc1cc !important;
	--gf-color-primary-lighter: #ebc1cc !important;
	--gf-color-out-ctrl-dark: #bfb3ba !important;
	--gf-color-out-ctrl-dark-rgb: 191, 179, 186 !important;
	--gf-color-out-ctrl-dark-darker: #faf7f5 !important;
	--gf-color-out-ctrl-dark-lighter: rgba(250, 247, 245, 0.7) !important;
	--gf-color-in-ctrl: #1a171e !important;
	--gf-color-in-ctrl-rgb: 26, 23, 30 !important;
	--gf-color-in-ctrl-contrast: #faf7f5 !important;
	--gf-color-in-ctrl-contrast-rgb: 250, 247, 245 !important;
	--gf-color-in-ctrl-darker: #120f15 !important;
	--gf-color-in-ctrl-lighter: #2a2230 !important;
	--gf-color-in-ctrl-primary: #dfa8b7 !important;
	--gf-color-in-ctrl-primary-rgb: 223, 168, 183 !important;
	--gf-color-in-ctrl-primary-contrast: #1a171e !important;
	--gf-color-in-ctrl-dark: #bfb3ba !important;
	--gf-color-in-ctrl-dark-darker: #faf7f5 !important;
	--gf-color-in-ctrl-dark-lighter: rgba(250, 247, 245, 0.7) !important;
	--gf-ctrl-border-color: #b07a8b !important;
	--gf-ctrl-label-color-primary: #faf7f5 !important;
	--gf-ctrl-label-color-secondary: #faf7f5 !important;
	--gf-ctrl-btn-border-color-secondary: #b07a8b !important;
	/* Error red, light enough to read on the dark surfaces (7.4:1 or more). */
	--gf-color-danger: #ff9b8f !important;
	--gf-color-danger-rgb: 255, 155, 143 !important;
	--gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(250, 247, 245, 0.75)'/%3E%3C/svg%3E") !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gform_wrapper.gform-theme {
		--gf-color-primary: #dfa8b7 !important;
		--gf-color-primary-rgb: 223, 168, 183 !important;
		--gf-color-primary-contrast: #1a171e !important;
		--gf-color-primary-contrast-rgb: 26, 23, 30 !important;
		--gf-color-primary-darker: #ebc1cc !important;
		--gf-color-primary-lighter: #ebc1cc !important;
		--gf-color-out-ctrl-dark: #bfb3ba !important;
		--gf-color-out-ctrl-dark-rgb: 191, 179, 186 !important;
		--gf-color-out-ctrl-dark-darker: #faf7f5 !important;
		--gf-color-out-ctrl-dark-lighter: rgba(250, 247, 245, 0.7) !important;
		--gf-color-in-ctrl: #1a171e !important;
		--gf-color-in-ctrl-rgb: 26, 23, 30 !important;
		--gf-color-in-ctrl-contrast: #faf7f5 !important;
		--gf-color-in-ctrl-contrast-rgb: 250, 247, 245 !important;
		--gf-color-in-ctrl-darker: #120f15 !important;
		--gf-color-in-ctrl-lighter: #2a2230 !important;
		--gf-color-in-ctrl-primary: #dfa8b7 !important;
		--gf-color-in-ctrl-primary-rgb: 223, 168, 183 !important;
		--gf-color-in-ctrl-primary-contrast: #1a171e !important;
		--gf-color-in-ctrl-dark: #bfb3ba !important;
		--gf-color-in-ctrl-dark-darker: #faf7f5 !important;
		--gf-color-in-ctrl-dark-lighter: rgba(250, 247, 245, 0.7) !important;
		--gf-ctrl-border-color: #b07a8b !important;
		--gf-ctrl-label-color-primary: #faf7f5 !important;
		--gf-ctrl-label-color-secondary: #faf7f5 !important;
		--gf-ctrl-btn-border-color-secondary: #b07a8b !important;
		/* Error red, light enough to read on the dark surfaces (7.4:1 or more). */
		--gf-color-danger: #ff9b8f !important;
		--gf-color-danger-rgb: 255, 155, 143 !important;
		--gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(250, 247, 245, 0.75)'/%3E%3C/svg%3E") !important;
	}
}

/*
 * Product cards (pff-product-blocks). The card's colours are custom properties with
 * light defaults; these swap them for the dark palette. Contrast on the Surface
 * background: text 14.4:1, tag 7.3:1, tick 7.6:1, cross 7.9:1, button text 8.8:1.
 */
:root[data-theme="dark"] .pff-pcard {
	--pff-pcard-bg: #2a2230;
	--pff-pcard-fg: #faf7f5;
	--pff-pcard-img-bg: #3a3140;
	--pff-pcard-tag-bg: color-mix(in srgb, var(--pff-pcard-a) 18%, #2a2230);
	--pff-pcard-tag-fg: color-mix(in srgb, var(--pff-pcard-a) 55%, #fff);
	--pff-pcard-star-empty: #776a7c;
	--pff-pcard-pro: #81c784;
	--pff-pcard-con: #f2a7a0;
	--pff-pcard-button-fg: #1a171e;
	--pff-pcard-ring: color-mix(in srgb, var(--pff-pcard-a) 55%, #faf7f5);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pff-pcard {
		--pff-pcard-bg: #2a2230;
		--pff-pcard-fg: #faf7f5;
		--pff-pcard-img-bg: #3a3140;
		--pff-pcard-tag-bg: color-mix(in srgb, var(--pff-pcard-a) 18%, #2a2230);
		--pff-pcard-tag-fg: color-mix(in srgb, var(--pff-pcard-a) 55%, #fff);
		--pff-pcard-star-empty: #776a7c;
		--pff-pcard-pro: #81c784;
		--pff-pcard-con: #f2a7a0;
		--pff-pcard-button-fg: #1a171e;
		--pff-pcard-ring: color-mix(in srgb, var(--pff-pcard-a) 55%, #faf7f5);
	}
}

/* App cards (Group "App card" style): card matches the product card; the details list sits a shade lighter. */
:root[data-theme="dark"] .wp-block-group.is-style-pff-app {
	--pff-app-bg: #2a2230;
	--pff-app-list-bg: #3a3140;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wp-block-group.is-style-pff-app {
		--pff-app-bg: #2a2230;
		--pff-app-list-bg: #3a3140;
	}
}

/*
 * Search in the mobile menu. Core gives the button-inside wrapper a fixed white
 * background, and with color-scheme: dark the browser fills the field with its own
 * grey, so in dark mode it showed a white ring around a grey field. Here it is one
 * plum pill with a rose border, a see-through field and the pink button flat, with
 * no shadow. Contrast: text 14.4:1 and placeholder 7.6:1 on Surface, border 5.1:1 on Base.
 */
:root[data-theme="dark"] .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--primary-light) !important; /* beats core's .has-surface-border-color */
	background: var(--wp--preset--color--surface);
}

:root[data-theme="dark"] .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

:root[data-theme="dark"] .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__input {
	padding-inline: 1rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	outline: none;
}

:root[data-theme="dark"] .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

:root[data-theme="dark"] .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__button {
	box-shadow: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__inside-wrapper {
		border-color: var(--wp--preset--color--primary-light) !important;
		background: var(--wp--preset--color--surface);
	}

	:root:not([data-theme="light"]) .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}

	:root:not([data-theme="light"]) .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__input {
		padding-inline: 1rem;
		background: transparent;
		color: var(--wp--preset--color--contrast);
		outline: none;
	}

	:root:not([data-theme="light"]) .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__input::placeholder {
		color: var(--wp--preset--color--muted);
		opacity: 1;
	}

	:root:not([data-theme="light"]) .wp-block-navigation__overlay-container .wp-block-search__button-inside .wp-block-search__button {
		box-shadow: none;
	}
}