/* =========================================================================
   APC UPS Shop Kenya — brand tokens + typography
   -------------------------------------------------------------------------
   Shoptimizer prints <style id="kirki-inline-styles"> late in <head>, after
   enqueued stylesheets. Anything Kirki also sets is therefore written here
   with a `body` prefix so it wins on specificity rather than on order.
   ========================================================================= */

:root {
	/* Brand ---------------------------------------------------------- */
	--apc-red: #e4002b;
	--apc-red-dark: #b80023;
	--apc-red-tint: #fdecef;

	/* Neutrals — buttons are charcoal, red is reserved for accents ---- */
	--apc-ink: #16181a;
	--apc-ink-soft: #3f464d;
	--apc-muted: #6b7280;
	--apc-line: #e2e6ea;
	--apc-line-strong: #cbd3db;
	--apc-bg-soft: #f6f7f9;

	/* Status --------------------------------------------------------- */
	--apc-green: #1a9c4a;

	/* Shape ---------------------------------------------------------- */
	--apc-radius: 6px;
	--apc-radius-sm: 4px;
	--apc-radius-pill: 999px;
	--apc-shadow: 0 6px 20px rgba(16, 24, 32, .09);
	--apc-shadow-sm: 0 1px 2px rgba(16, 24, 32, .05);

	/* Swap this to change every heading and button face at once. Left as
	   `inherit` so the theme's own font choice is preserved. */
	--apc-font: inherit;
}

/* -------------------------------------------------------------------------
   Typography scale
   ---------------------------------------------------------------------- */

body h1,
body h2,
body h3,
body h4,
body h5,
body .entry-title,
body .widget-title {
	font-family: var(--apc-font);
	color: var(--apc-ink);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
}

body h1,
body .entry-title {
	font-size: clamp(1.85rem, 3.2vw, 2.6rem);
}

body h2 {
	font-size: clamp(1.45rem, 2.4vw, 2rem);
}

body h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

body h4 {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	letter-spacing: -.005em;
}

body {
	color: var(--apc-ink-soft);
}

body p,
body li {
	line-height: 1.65;
}

/* Section headings on the homepage read as labels, not paragraphs. */
body .widget-title,
body .shoptimizer-section-title {
	font-size: 1.25rem;
	letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------
   Accents
   ---------------------------------------------------------------------- */

body .entry-content a:not(.button):not(.wp-block-button__link) {
	color: var(--apc-red);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

body .entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--apc-red-dark);
}

::selection {
	background: var(--apc-red);
	color: #fff;
}

/* Keyboard focus — the theme's default outline is very low contrast. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
	outline: 2px solid var(--apc-red);
	outline-offset: 2px;
}

/* Sale flashes and other WooCommerce badges pick up the brand red. */
body .woocommerce span.onsale,
body ul.products li.product .onsale {
	background: var(--apc-red);
	color: #fff;
	border-radius: var(--apc-radius-pill);
	font-weight: 700;
	letter-spacing: .02em;
}

/* Primary conversion buttons (single product, cart, checkout) stay red —
   the charcoal treatment is specific to the catalogue cards. */
body .woocommerce div.product form.cart .single_add_to_cart_button,
body .woocommerce .checkout-button,
body .woocommerce-cart .wc-proceed-to-checkout a.button {
	background: var(--apc-red);
	border-color: var(--apc-red);
	color: #fff;
	border-radius: var(--apc-radius-sm);
	font-weight: 700;
	letter-spacing: .01em;
}

body .woocommerce div.product form.cart .single_add_to_cart_button:hover,
body .woocommerce .checkout-button:hover,
body .woocommerce-cart .wc-proceed-to-checkout a.button:hover {
	background: var(--apc-red-dark);
	border-color: var(--apc-red-dark);
}
