/*
 * Connacht Agri: bridge between Blocksy and the brand tokens (tokens.css).
 *
 * Rules of thumb:
 * - Colours, fonts and spacing come from --ca-* tokens, never raw hex values.
 * - Blocksy's palette (--theme-palette-color-1..8) is set in the Customizer to the same brand values;
 *   see config/blocksy-palette.md. Don't override those variables here, or the Customizer would show
 *   colours the site doesn't use.
 * - Prefer :where() for broad defaults so components can override them without fighting specificity.
 */

/* "System Default" in the Customizer resolves to the brand body stack. */
:root {
	--theme-font-stack-default: var(--ca-font-body);
}

/* Prices line up in grids, carts and tables. */
:where(.price, .amount, .woocommerce-Price-amount) {
	font-variant-numeric: tabular-nums lining-nums;
}

/* Keyboard focus: the brand's two-tone ring from tokens.css, over Blocksy's single outline. Never remove. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--ca-border-width-focus) solid var(--ca-border-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ca-border-focus-halo);
}

/* Text fields, selects and text areas: one look everywhere (search, checkout, account, forms, filters,
 * quantity). Hover turns the border Forest. Focus keeps the two tones but makes them one band, as GOV.UK does:
 * the field's own border goes Forest and thickens, with the Wheat ring straight outside it. Blocksy's Forest
 * focus border plus the standard ring (Wheat gap, Forest outline) used to stack into three bands. The
 * transparent outline is what Windows high-contrast mode draws. */
:is(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button'], [type='reset'], [type='range'], [type='file'], [type='image'], [type='color']), select, textarea):hover:not(:disabled, [readonly]) {
	border-color: var(--ca-border-brand);
}

:is(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button'], [type='reset'], [type='range'], [type='file'], [type='image'], [type='color']), select, textarea):focus-visible {
	border-color: var(--ca-border-focus);
	outline: var(--ca-border-width-focus) solid transparent;
	outline-offset: 0;
	box-shadow:
		inset 0 0 0 var(--ca-border-width-thin) var(--ca-border-focus),
		0 0 0 calc(var(--ca-border-width-focus) + var(--ca-border-width-thin)) var(--ca-border-focus-halo);
}

/* WPForms clips each field's sides (overflow-x: hidden, which also hides its spam-trap fields), which cut the
 * ring off at the left and right on phones. A little room inside the clip keeps it whole. */
body div.wpforms-container .wpforms-form .wpforms-field {
	margin-inline: calc(-1 * var(--ca-space-2));
	padding-inline: var(--ca-space-2);
}

/* Blocksy's toggle buttons (menu, cart, dropdown arrows) force their shadow with !important, through this. */
[class*='ct-toggle']:focus-visible {
	--toggle-button-shadow: 0 0 0 2px var(--ca-border-focus-halo);
}

/* On Forest surfaces a Forest ring would vanish, so they use the dark-surface pairing from tokens.css:
 * Wheat outer ring, deep Forest halo. */
:is(.ca-on-brand, .ct-footer, #offcanvas) {
	--ca-border-focus: var(--ca-gold-300);
	--ca-border-focus-halo: var(--ca-forest-950);
}

/* Links inside running text are always underlined: the link colour alone isn't enough contrast with body
 * text (WCAG 1.4.1). Navigation, cards, tiles and buttons are not running text, so they're left alone. */
:is(.entry-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .woocommerce-notices-wrapper, .ct-footer .widget_text) :is(p, li:not(.product), td, dd, figcaption) a:not(.wp-element-button, .wp-block-button__link, .button, .ct-button) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:is(.entry-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .woocommerce-notices-wrapper, .ct-footer .widget_text) :is(p, li:not(.product), td, dd, figcaption) a:not(.wp-element-button, .wp-block-button__link, .button, .ct-button):hover {
	text-decoration-thickness: 2px;
}

/* Product cards are lists, so Blocksy's "underline content links" setting reaches them too. */
.products .product a {
	--theme-text-decoration: none;
}

/* Keyboard focus is never hidden under the cookie notice or the phone add-to-cart bar (WCAG 2.4.11): the page
 * scrolls a focused element clear of them, and can scroll far enough that the footer's last line clears them
 * too. Their heights come from cookie-notice.js and product.js. */
html {
	scroll-padding-block-end: calc(var(--ca-sticky-buy-height, 0px) + var(--ca-cookie-notice-height, 0px));
}

body {
	padding-block-end: calc(var(--ca-sticky-buy-height, 0px) + var(--ca-cookie-notice-height, 0px));
}

/* Tap targets of at least 48px (brand rule) where Blocksy draws them smaller. */

/* Breadcrumbs: taller targets without spacing the trail out. */
.ct-breadcrumbs a {
	display: inline-block;
	padding-block: calc((var(--ca-size-control) - 1lh) / 2);
	margin-block: calc((1lh - var(--ca-size-control)) / 2);
}

/* Cookie notice buttons (Blocksy Companion draws them 35px). */
.cookie-notification .ct-button {
	min-height: var(--ca-size-control);
}

/* The arrow buttons beside desktop menu headings, for keyboard and touch users. */
.ct-toggle-dropdown-desktop-ghost {
	min-height: var(--ca-size-control);
}

/* "Show password" and "Remember me" on the account forms. Blocksy draws the eye by masking the 14px button
 * itself, which also hides its focus ring; here the button is a 48px square across the end of the field and
 * the eye (Blocksy's icons, copied) is drawn inside it. The first selector matches Blocksy's. */
form:is(.login, .register, .edit-account, .lost_reset_password) [class*="password-input"] .show-password-input {
	--ca-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.9,11.6C23.7,11.2,19.5,3,12,3S0.3,11.2,0.1,11.6c-0.1,0.3-0.1,0.6,0,0.9C0.3,12.8,4.5,21,12,21s11.7-8.2,11.9-8.6 C24,12.2,24,11.8,23.9,11.6zM12,19c-5.4,0-8.9-5.4-9.9-7c0.9-1.6,4.5-7,9.9-7c5.4,0,8.9,5.4,9.9,7C20.9,13.6,17.4,19,12,19zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8zM12,14c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,13.1,13.1,14,12,14z'/%3E%3C/svg%3E");
	inset: 0 0 auto auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ca-size-control);
	height: var(--ca-size-control);
	background: none;
	color: var(--ca-text-primary);
	-webkit-mask-image: none;
	mask-image: none;
}

form:is(.login, .register, .edit-account, .lost_reset_password) [class*="password-input"] input[type="text"] ~ .show-password-input {
	--ca-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.9,5.2C13.3,5.1,12.6,5,12,5c-5.4,0-8.9,5.4-9.9,7c0.5,0.9,1.1,1.8,1.8,2.5C4.3,15,4.2,15.6,3.8,16 c-0.2,0.2-0.4,0.2-0.6,0.2c-0.3,0-0.6-0.1-0.8-0.4c-0.9-1-1.6-2.2-2.3-3.4c-0.2-0.3-0.2-0.6,0-0.9C0.3,11.2,4.5,3,12,3c0.8,0,1.6,0.1,2.3,0.3c0.5,0.1,0.9,0.7,0.7,1.2C14.9,5,14.4,5.3,13.9,5.2z M0.3,22.3l22-22c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L19.4,6c1.8,1.6,3.3,3.4,4.5,5.5c0.2,0.3,0.2,0.6,0,0.9C23.7,12.8,19.5,21,12,21c-2.1,0-4.1-0.6-5.8-1.8l-4.5,4.5C1.5,23.9,1.3,24,1,24s-0.5-0.1-0.7-0.3C-0.1,23.3-0.1,22.7,0.3,22.3zM14,11.4L11.4,14c0.2,0.1,0.4,0.1,0.6,0.1c0.5,0,1-0.2,1.4-0.5c0.4-0.4,0.6-0.9,0.6-1.4C14.1,11.9,14,11.7,14,11.4zM12,19c5.4,0,8.9-5.4,9.9-7c-1-1.8-2.3-3.3-3.9-4.6L15.5,10c0.4,0.7,0.6,1.5,0.6,2.3c0,1.1-0.5,2.1-1.3,2.8c-0.7,0.7-1.7,1.1-2.7,1.1c0,0-0.1,0-0.1,0c-0.7,0-1.4-0.3-2-0.6l-2.3,2.3C9,18.6,10.5,19,12,19z'/%3E%3C/svg%3E");
	-webkit-mask-image: none;
	mask-image: none;
}

.show-password-input::before {
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
	background-color: currentColor;
	content: "";
	-webkit-mask: var(--ca-eye) center / contain no-repeat;
	mask: var(--ca-eye) center / contain no-repeat;
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: var(--ca-space-2);
	align-items: center;
	min-height: var(--ca-size-control);
}

/* Blocksy scrolls smoothly even when the visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}