/*
 * FRONTEND-NAVACTIVE-001 + hover/focus colours. Shared by the design's shadow root, Home and every shop page.
 *
 * Colours are the site's own three: coral #f04a2a, ink #1a1816, cream #f6f4ec (the --ck-* values already used everywhere).
 * Contrast (WCAG): ink on cream 15.5:1, ink on coral 4.7:1, cream on ink 15.5:1.
 * Coral #f04a2a is 3.3:1 on cream, 3.7:1 on white and 4.7:1 on ink: fine for a 2px focus ring / border (needs 3:1) and for text on the
 * dark footer, but too light for small TEXT on cream, so link text on cream hovers to ink with a coral underline instead of coral text.
 */
:root,
:host {
	--ck-coral: #f04a2a;
	--ck-ink: #1a1816;
	--ck-cream: #f6f4ec;
}

/* ---------- Focus ring: 2px coral, 2px offset (ink on coral-filled controls); inputs keep their own coral glow ---------- */
:is(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--ck-coral) !important;
	outline-offset: 2px !important;
}
:is(a, button)[class~="bg-coral"]:focus-visible,
.ck-btn--coral:focus-visible,
.wc-block-components-button:not(.wc-block-components-button--outlined):focus-visible,
.woocommerce :is(a.button, button.button):focus-visible {
	outline-color: var(--ck-ink) !important;
}
/* on the dark footer/ink surfaces the coral ring (4.7:1) stays; nothing to override */

/* ---------- Text links: coral on dark, ink + coral underline on cream/white (AA) ---------- */
a[class~="hover:text-coral"]:hover {
	color: var(--ck-ink);
	text-decoration: underline;
	text-decoration-color: var(--ck-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
footer a[class~="hover:text-coral"]:hover,
.ck-footer a:hover {
	color: var(--ck-coral);
	text-decoration: none;
}
body.ck-shop-page .woocommerce a:not(.button):not(.wc-block-components-button):hover {
	color: var(--ck-ink);
	text-decoration-color: var(--ck-coral);
	text-decoration-thickness: 2px;
}

/* ---------- Outlined pill buttons: light coral tint + coral border, text stays ink (was: fill ink) ---------- */
:is(a, button)[class~="border"][class*="rounded-full"]:not([class~="bg-ink"]):not([class~="bg-coral"]):not([class*="bg-cream"]):hover,
body.ck-shop-page .qikink-pdp__bulk-cta.qikink-pdp__bulk-cta:hover,
.ck-btn--outline:hover {
	background: rgba(240, 74, 42, 0.1);
	border-color: var(--ck-coral);
	color: var(--ck-ink);
}
/* the selected/filled state of filter pills keeps its ink fill */

/* ---------- PDP option pills / swatches / related cards: ink border on hover ---------- */
body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill:hover:not(.is-selected),
body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch:hover:not(.is-selected) {
	border-color: var(--ck-ink);
}
body.ck-shop-page .qikink-pdp__related-card:hover {
	border-color: var(--ck-coral);
}

/* ---------- Header: active + hover state for the current page's link ---------- */
/* Desktop links (shared header .ck-desk-nav, Home header .ck-nav). The underline is an absolutely placed pseudo-element inside the
   header's fixed 64px height, so nothing moves. Active = full 3px coral bar, ink text; hover = half-width, lighter bar. */
:is(.ck-desk-nav, .ck-nav) a {
	position: relative;
}
:is(.ck-desk-nav, .ck-nav) a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 3px;
	border-radius: 2px;
	background: var(--ck-coral);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
	pointer-events: none;
}
:is(.ck-desk-nav, .ck-nav) a:hover {
	color: var(--ck-ink);
	text-decoration: none;
}
:is(.ck-desk-nav, .ck-nav) a:hover::after {
	transform: scaleX(0.5);
	opacity: 0.55;
}
:is(.ck-desk-nav, .ck-nav) a[aria-current="page"] {
	color: var(--ck-ink);
}
:is(.ck-desk-nav, .ck-nav) a[aria-current="page"]::after,
:is(.ck-desk-nav, .ck-nav) a[aria-current="page"]:hover::after {
	transform: scaleX(1);
	opacity: 1;
}

/* Mobile drawer: left coral bar (inset shadow, no layout shift) + light coral tint for the current page; half-strength bar on hover */
.ck-mobile-nav a {
	box-shadow: inset 3px 0 0 transparent;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ck-mobile-nav a:hover {
	background: rgba(26, 24, 22, 0.06);
	box-shadow: inset 3px 0 0 rgba(240, 74, 42, 0.45);
	color: var(--ck-ink);
}
.ck-mobile-nav a[aria-current="page"] {
	background: rgba(240, 74, 42, 0.1);
	box-shadow: inset 3px 0 0 var(--ck-coral);
	color: var(--ck-ink);
}

@media (prefers-reduced-motion: reduce) {
	:is(.ck-desk-nav, .ck-nav) a::after,
	.ck-mobile-nav a {
		transition: none;
	}
}

/* =====================================================================================================================
 * FRONTEND-BTNBORDER-001: light outlined controls get a 3:1 border.
 * ink at 50% alpha = 3.3:1 on cream #f6f4ec and 3.4:1 on white (WCAG 1.4.11 needs 3:1). Radius, width and look are unchanged.
 * ===================================================================================================================== */
:root,
:host {
	--ck-border-strong: rgba(26, 24, 22, 0.5);
}
/* design pages: outlined pill links/buttons (Shop filter pills and pagination, "Ask about bulk pricing", 404 "Browse shop", ...) */
:is(a, button)[class*="rounded-full"][class~="border"][class*="border-ink/"] {
	border-color: var(--ck-border-strong);
}
/* /custom-product/: option pills, colour swatches, "Ask about bulk pricing" (selected/hover states keep their own colours) */
body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill:not(.is-selected),
body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch:not(.is-selected),
body.ck-shop-page .qikink-pdp__bulk-cta.qikink-pdp__bulk-cta {
	border-color: var(--ck-border-strong);
}
/* Home review-slider arrows */
.ck-home button.ck-slider__btn.ck-slider__btn {
	border-color: var(--ck-border-strong);
}

/* =====================================================================================================================
 * FRONTEND-PRESSED-001: pressed state (scale .97, the same as the PDP buttons) and 150ms hover transitions.
 * ===================================================================================================================== */
:is(a, button)[class*="rounded-full"],
.ck-btn,
.ck-cart,
.wc-block-components-button,
.woocommerce :is(a.button, button.button) {
	transition-property: color, background-color, border-color, box-shadow, transform, opacity;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
:is(a, button)[class*="rounded-full"]:active,
.ck-btn:active,
.ck-cart:active,
.wc-block-components-button:active,
.woocommerce :is(a.button, button.button):active {
	transform: scale(0.97);
}
body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch,
.ck-home button.ck-slider__btn.ck-slider__btn,
body.ck-shop-page .qikink-pdp__other .qikink-pdp__slider-prev,
body.ck-shop-page .qikink-pdp__other .qikink-pdp__slider-next {
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ck-home button.ck-slider__btn:active:not(:disabled),
body.ck-shop-page .qikink-pdp__other .qikink-pdp__slider-prev:active:not(:disabled),
body.ck-shop-page .qikink-pdp__other .qikink-pdp__slider-next:active:not(:disabled) {
	transform: scale(0.95);
}
@media (prefers-reduced-motion: reduce) {
	:is(a, button)[class*="rounded-full"]:active,
	.ck-btn:active,
	.ck-cart:active,
	.wc-block-components-button:active,
	.woocommerce :is(a.button, button.button):active,
	.ck-home button.ck-slider__btn:active:not(:disabled),
	body.ck-shop-page .qikink-pdp__other .qikink-pdp__slider-prev:active:not(:disabled),
	body.ck-shop-page .qikink-pdp__other .qikink-pdp__slider-next:active:not(:disabled) {
		transform: none;
		opacity: 0.85;
	}
	:is(a, button)[class*="rounded-full"],
	.ck-btn,
	.ck-cart,
	body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch,
	.ck-home button.ck-slider__btn.ck-slider__btn {
		transition-duration: 0.01ms;
	}
}

/* =====================================================================================================================
 * FRONTEND-TAPTARGET-001: 40px minimum tap area on phones WITHOUT changing what is drawn or where anything sits.
 * An invisible ::before (absolute, centred, at least 40x40) enlarges the hit area; header/footer layout does not move.
 * ===================================================================================================================== */
@media (max-width: 767px) {
	:is(a, button)[class*="rounded-full"][class~="py-2"],
	.ck-cart,
	.wc-block-cart-item__remove-link,
	body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill,
	body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch {
		position: relative;
	}
	.ck-plus,
	.wc-block-cart-item__remove-link {
		position: relative;
		overflow: visible;
	}
	/* option pills and swatches clipped their children; the hit area must stick out */
	body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill,
	body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch {
		overflow: visible;
	}
	:is(a, button)[class*="rounded-full"][class~="py-2"]::before,
	.ck-cart::before,
	.ck-plus::before,
	.wc-block-cart-item__remove-link::after,
	.mobile-nav-close::before,
	body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill::before,
	body.ck-shop-page .qikink-pdp__swatch.qikink-pdp__swatch::before {
		content: "";
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: max(100%, 40px);
		height: max(100%, 40px);
		transform: translate(-50%, -50%);
	}
	/* WooCommerce hides this button's pseudo-elements, so the hit area needs !important */
	body.ck-shop-page .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link::after {
		display: block !important;
	}
	body.ck-shop-page .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link {
		overflow: visible;
	}
	/* swatches are 24px: 16px between them keeps the 40px hit areas from overlapping */
	body.ck-shop-page .qikink-pdp__pills:has(.qikink-pdp__swatch) {
		gap: 1rem;
	}
	/* footer links: rows are 28px apart, so the hit area grows to 28px (padding cancelled by margin, nothing moves) */
	footer li > a {
		display: inline-block;
		padding: 4px 0;
		margin: -4px 0;
	}
}