/**
 * WooCommerce UI corrections.
 *
 * Everything here exists because the Elementor global kit (post 11) sets
 *
 *   --e-global-color-text: #F5F1E8
 *
 * and then applies it as the text colour on body, h1-h6, label, input and
 * textarea:
 *
 *   .elementor-kit-11 label { color: var( --e-global-color-text ); ... }
 *
 * #F5F1E8 is the brand's IVORY BACKGROUND (--ezi-ivory in tokens.css), not a
 * text colour - the value was put in the wrong slot in Site Settings. Elementor
 * widgets and the Investa kit set their own colours per widget, so the mistake
 * is invisible on designed sections and only shows on the surfaces nothing
 * styles: the WooCommerce form layer. There it renders ivory text on an ivory
 * background at a contrast ratio of 1.00:1.
 *
 * The correct fix is to put the right value in Elementor's Global Colours; this
 * file is the scoped version of that fix, covering the WooCommerce layer only,
 * so nothing else on the site moves.
 *
 * Specificity: the kit's selector is (0,1,1). Scoping to `body.woocommerce-page`
 * gives (0,1,2), so these win on specificity alone - no !important anywhere in
 * this file.
 *
 * Contrast, measured not eyeballed (see the ratios beside each token):
 *   #1A1712 on #F5F1E8 = 15.85:1   #1A1712 on #FFFFFF = 17.87:1
 *   #6E6657 on #F5F1E8 =  5.03:1   #6E6657 on #FFFFFF =  5.67:1
 *   #806528 on #F5F1E8 =  4.89:1   #806528 on #FBF9F3 =  5.24:1
 */

:root {
	/* The ink the WooCommerce form layer should have been using all along. */
	--ezi-form-ink: var(--ezi-ink, #1A1712);
	--ezi-form-ink-muted: var(--ezi-ink-muted, #6E6657);
	/* Brand gold is 2.13:1 on ivory and fails body text outright. This is the
	   same hue taken down until it clears 4.5:1, for links at body size. */
	--ezi-link-gold: #806528;
}

/* --------------------------------------------------------------------------
 * 1. The form layer: everything the kit painted ivory.
 * ------------------------------------------------------------------------ */

body.woocommerce-page label,
body.woocommerce-page legend,
body.woocommerce-page .wc-block-components-checkbox__label,
body.woocommerce-page .wc-block-components-radio-control__label,
body.woocommerce-page .wc-blocks-components-select__label,
body.woocommerce-page .wc-block-components-payment-method-label,
body.woocommerce-page .wc-block-components-text-input label,
body.woocommerce-page .woocommerce-form-row label,
body.woocommerce-page .wc-block-components-totals-item__label,
body.woocommerce-page .wc-block-components-order-summary-item__description {
	color: var(--ezi-form-ink);
}

/* Descriptions and helper text sit one step back but still clear 4.5:1. */
body.woocommerce-page .wc-block-components-radio-control__description,
body.woocommerce-page .wc-block-components-payment-method-description,
body.woocommerce-page .wc-block-components-checkout-step__description,
body.woocommerce-page .wc-block-components-totals-item__description,
body.woocommerce-page .woocommerce-form-row .description {
	color: var(--ezi-form-ink-muted);
}

/* The kit colours the controls themselves, so their value text went too. */
body.woocommerce-page input:not([type="button"]):not([type="submit"]),
body.woocommerce-page textarea,
body.woocommerce-page select,
body.woocommerce-page .wc-blocks-components-select__select {
	color: var(--ezi-form-ink);
}

/* Placeholders are deliberately muted rather than ink, but must stay legible. */
body.woocommerce-page input::placeholder,
body.woocommerce-page textarea::placeholder {
	color: var(--ezi-form-ink-muted);
	opacity: 1; /* Firefox dims placeholders by default on top of the colour. */
}

/* Shipping and payment rows. */
body.woocommerce-page .wc-block-components-shipping-rates-control__package,
body.woocommerce-page .wc-block-components-radio-control__option,
body.woocommerce-page .wc-block-components-payment-method-title {
	color: var(--ezi-form-ink);
}

/* --------------------------------------------------------------------------
 * 2. Links inside the same layer.
 *
 * Brand gold (#C9A24B) is 2.13:1 on ivory - it fails body text and fails the
 * 3:1 UI floor as well. These are body-size links, so they take the darkened
 * gold rather than the brand value.
 * ------------------------------------------------------------------------ */

body.woocommerce-page .wc-block-checkout__terms a,
body.woocommerce-page .wc-block-components-checkbox__label a,
body.woocommerce-page .wc-block-components-checkout-policies__item a,
body.woocommerce-page .woocommerce-LostPassword a,
body.woocommerce-page .wc-block-components-address-card__edit,
body.woocommerce-page form.woocommerce-form a {
	color: var(--ezi-link-gold);
}