/* Compound V dark mode: palette under html[data-theme="dark"] (set by inc/theme-mode.php), image swaps, toggle. */

/* ---------- toggle ---------- */
.cv-mode-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--wp--preset--color--contrast); cursor: pointer; }
.cv-mode-toggle:hover { background: var(--wp--preset--color--soft); }
.cv-mode-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--focus); outline-offset: 2px; }
.cv-mode-toggle__sun { display: none; }
html[data-theme="dark"] .cv-mode-toggle__sun { display: block; }
html[data-theme="dark"] .cv-mode-toggle__moon { display: none; }

/* ---------- image swaps ---------- */
.cv-img-dark { display: none !important; }
html[data-theme="dark"] .cv-img-dark { display: block !important; }
html[data-theme="dark"] .cv-img-light,
html[data-theme="dark"] .wp-block-cover:has(.cv-img-dark) > .wp-block-cover__image-background:not(.cv-img-dark) { display: none !important; }

/* ---------- palette ---------- */
html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #0b0f14;
	--wp--preset--color--contrast: #e8ecf1;
	--wp--preset--color--accent-1: #2f6fe0;
	--wp--preset--color--accent-1-strong: #4a86f0;
	--wp--preset--color--accent-2: #13233b;
	--wp--preset--color--accent-3: #e8ecf1;
	--wp--preset--color--accent-4: #a3adb9;
	--wp--preset--color--accent-5: #141b24;
	--wp--preset--color--accent-6: #243040;
	--wp--preset--color--border-strong: #5f6b78;
	--wp--preset--color--surface: #111821;
	--wp--preset--color--link: #7fb0ff;
	--wp--preset--color--soft: #141b24;
	--wp--preset--color--sale: #ff8a80;
	--wp--preset--color--sale-surface: #3a1714;
	--wp--preset--color--success: #5fd3a6;
	--wp--preset--color--success-surface: #0f2a22;
	--wp--preset--color--warning: #f2c35b;
	--wp--preset--color--warning-surface: #33270b;
	--wp--preset--color--error: #ff8a80;
	--wp--preset--color--error-surface: #3a1714;
	--wp--preset--color--info: #7fb0ff;
	--wp--preset--color--info-surface: #13233b;
	--wp--preset--color--focus: #7fb0ff;
	--wp--preset--color--star: #f2b84b;
	--wp--preset--color--overlay: #000000b3;
}
html[data-theme="dark"] body { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
html[data-theme="dark"] img.custom-logo, html[data-theme="dark"] .wp-block-site-logo img { filter: brightness(1.15); }

/* product photos sit on a white ground until a dark version exists */
html[data-theme="dark"] .wc-block-components-product-image:not(:has(.cv-img-dark)),
html[data-theme="dark"] .woocommerce-product-gallery__image:not(:has(.cv-img-dark)) { background: #ffffff; border-radius: var(--wp--custom--radius--card, 12px); }

/* ---------- shop banners: light images need dark headline text, dark images keep white ---------- */
.cv-sec__banner.has-cv-light .wp-block-cover__inner-container > *,
.cv-sec__life.has-cv-light .wp-block-cover__inner-container > * { color: var(--wp--preset--color--contrast) !important; }
html[data-theme="dark"] .cv-sec__banner.has-cv-light .wp-block-cover__inner-container > *,
html[data-theme="dark"] .cv-sec__life.has-cv-light .wp-block-cover__inner-container > * { color: #ffffff !important; }
.cv-sec__banner .wp-block-cover__image-background, .cv-sec__life .wp-block-cover__image-background { object-position: 70% 50%; }

/* fixed-colour elements that must not follow the dark palette */
html[data-theme="dark"] .cv-wa-float a { background: #0d6b4f; }

/* checkout step numbers: light disc needs dark digits in dark mode */
html[data-theme="dark"] .wc-block-components-checkout-step__title::before,
html[data-theme="dark"] .wc-block-components-title.wc-block-components-checkout-step__title::before { color: var(--wp--preset--color--base) !important; }
/* plain form fields (UTR, pop-up email, calculator) follow the dark palette instead of the browser's grey */
html[data-theme="dark"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input:not([type]), select, textarea):not(.wc-block-components-text-input input):not(.wc-blocks-components-select__select) {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent-6);
}
/* light mode keeps light native form controls even when the device is in dark mode */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input:not([type]), select, textarea):not(.wc-block-components-text-input input) { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }

/* Light + dark product scenes are both square: undo the block's 3:2 crop on the light image */
.wc-block-components-product-image .cv-img-light,
.wc-block-components-product-image .cv-img-dark { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; object-fit: cover !important; }

/* Product cards: the block's 3:2 box clipped our square photos on iPhone Safari (aspect-ratio + overflow:clip
   ignores content height there), cutting off the vial name. Make the box square like the photos. */
.wc-block-components-product-image[class*="--aspect-ratio-"]:has(.cv-img-light, .cv-img-dark) { aspect-ratio: 1 / 1 !important; height: auto !important; }
.wc-block-components-product-image[class*="--aspect-ratio-"]:has(.cv-img-light, .cv-img-dark) > a { display: block; height: 100%; }