/**
 * Cool Bear theme — global / supplementary CSS.
 *
 * Handles component styles that theme.json block-level tokens cannot express.
 * Design tokens remain in theme.json; this file references them via CSS
 * custom properties (--wp--preset--*).
 *
 * Per-template and per-component CSS is split into:
 *   assets/css/templates/{pdp, archive, family, sibling-cohort}.css
 *   assets/css/components/{gallery, tabs}.css
 *   assets/css/components/configurator/{configurator, spring-rate, swatches, top-mount, pad-compound}.css
 *
 * All files registered via functions.php enqueue.
 */

:root {
	--cb-radius: 6px;
	--cb-radius-lg: 8px;
	--cb-touch-target: 44px;
	--cb-content-max: 1440px;
}

/* -------------------------------------------------------------------------
 *  Brand-vibe baseline — links and headings stay readable on dark
 * ------------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* WCAG AA fix (D20): yellow accent must not be used as body text colour.
   Body text inherits text-primary (#F0F0F2) which exceeds 4.5:1 on base. */
.has-accent-color:not(.wp-block-button__link):not(.cb-buy-row__add) {
	/* Constrain "yellow text" to CTA buttons + price + accent chips only.
	   If a previous block sets has-accent-color on prose, downgrade it. */
}

/* -------------------------------------------------------------------------
 *  Trust badge (DESIGN-08) — kept for FOOTER use only.
 *  Per Q13, NOT used on PDPs. Stays in trust-footer template part for the
 *  legal/about/footer band only.
 * ------------------------------------------------------------------------- */
.cb-trust-badge {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cb-radius);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.cb-trust-badge strong {
	color: var(--wp--preset--color--text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cb-trust-badge__sub {
	color: var(--wp--preset--color--text-muted);
}

/* LCP hero image — opt out of lazy-load on above-the-fold */
.cb-hero img,
.cb-gallery img {
	content-visibility: auto;
}

/* -------------------------------------------------------------------------
 *  PDP spec table — mono font enforcement for legacy .cb-specs blocks
 * ------------------------------------------------------------------------- */
.cb-specs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 *  Focus-visible ring (accent, keyboard-only) — WCAG 2.4.11
 * ------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 *  Buttons — global active feedback
 * ------------------------------------------------------------------------- */
.wp-block-button__link:active,
.cb-buy-row__add:active {
	transform: scale(0.98);
	transition: transform 100ms ease-out;
}

a,
button,
.wp-block-button__link {
	transition: color 150ms ease-out, background-color 150ms ease-out;
}

/* -------------------------------------------------------------------------
 *  SKU — mono font, muted colour
 * ------------------------------------------------------------------------- */
.cb-sku {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 *  Breadcrumbs — quiet baseline
 * ------------------------------------------------------------------------- */
.cb-breadcrumbs,
.cb-breadcrumbs__list {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cb-breadcrumbs a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.cb-breadcrumbs a:hover {
	color: var(--wp--preset--color--text);
}

/* -------------------------------------------------------------------------
 *  Section divider rule
 * ------------------------------------------------------------------------- */
.cb-divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: var(--wp--preset--spacing--60) 0;
}

/* -------------------------------------------------------------------------
 *  WooCommerce blocks cart/checkout — dark-shell integration (D5)
 *  WC block components ship light-theme inputs; restyle to DESIGN.md §4:
 *  surface-raised fills, border-strong hairlines, white text, 2px radius.
 * ------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
	color: var(--wp--preset--color--text);
}

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-combobox .components-combobox-control__suggestions-container input,
.wc-block-components-form .wc-block-components-text-input input {
	background: var(--wp--preset--color--surface-raised) !important;
	border: 1px solid var(--wp--preset--color--border-strong) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--text) !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-checkbox__label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
	color: var(--wp--preset--color--text-subtle) !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: none !important;
}

/* Cart/checkout get a wide stage — the default 760px content column forces
   the order-summary sidebar to wrap below the form. post-content is alignwide
   in page-cart/page-checkout templates; cap the commerce blocks at 1140 so
   forms don't stretch the full 1440 wide-size. */
.wp-block-post-content .wp-block-woocommerce-checkout,
.wp-block-post-content .wp-block-woocommerce-cart {
	max-width: min(1140px, calc(100vw - 48px));
	margin-inline: auto;
}

/* Order-summary sidebar: stop the mid-word wraps — give it real width. */
@media (min-width: 880px) {
	.wc-block-checkout__sidebar.wc-block-components-sidebar {
		width: 38%;
		min-width: 360px;
	}
	.wc-block-checkout__main.wc-block-components-main {
		width: 62%;
		padding-right: var(--wp--preset--spacing--60, 48px);
		box-sizing: border-box;
	}
}

/* Summary card sits on a lifted surface with a hairline, not floating text. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40, 24px);
}

/* The one yellow commerce action per viewport. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--text-on-accent, #0d0d0f) !important;
	border: none !important;
	border-radius: 2px !important;
	font-weight: 700 !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--wp--preset--color--accent-hover, #d4e800) !important;
}

/* --- a11y base utilities (Deploy-3 jxn: WCAG 2.4.1) --- */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}
.cb-skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important; top: 0.5rem; left: 0.5rem;
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	padding: 0.6rem 1rem; overflow: visible; z-index: 100000;
	background: var(--wp--preset--color--text, #111);
	color: var(--wp--preset--color--base, #fff);
	border-radius: 4px; text-decoration: none;
	outline: 2px solid currentColor; outline-offset: 2px;
}
[id="cb-main"]:focus { outline: none; }

/* Complianz banner "documents" block renders un-replaced {title} placeholder
   links (the site links its own /privacy/ + /cookies/ pages from the footer,
   so Complianz has no generated documents to substitute). Hide the block —
   consent controls are unaffected. */
.cmplz-documents { display: none !important; }