/*
Theme Name: Purple WPSignal
Template: purple
Requires at least: 7.1
Requires PHP: 8.2
Version: 0.3.0
Text Domain: purple-wpsignal
Description: A vintage-flared restyle of the Purple block theme for a helmet demo store: warm near-black background, condensed uppercase Oswald headings, square corners, hairline brown borders and mustard yellow as the one accent, burnt red for sale badges. WPSignal demo store skin.
*/

/* Everything below is a fix for content theme.json cannot reach: literal
 * hex colours baked into the parent theme's pattern markup and PHP files,
 * or typography theme.json has no schema property for. */

/* patterns/hero-with-text-and-two-buttons.php (used by templates/front-page.html)
 * hardcodes the hero heading and paragraph to style="color:#111111", assuming
 * a light page background; on this dark palette that is near-invisible text
 * on a black page. Inline styles beat theme.json and normal stylesheet rules,
 * so !important is required; an author-stylesheet !important rule is the one
 * thing that can still override an inline style without editing the parent's
 * pattern file. */
[style*="color:#111111"] {
	color: var(--wp--preset--color--theme-2) !important;
}

/* theme.json's typography styles have no font-variant-numeric property, so
 * tabular (fixed-width) numerals, used throughout wpsignal.io for prices and
 * stats, can only be set here. */
body {
	font-variant-numeric: tabular-nums;
}

/* WooCommerce's block library hardcodes the product carousel and gallery
 * next/previous buttons to `var(--wp--preset--color--base,#fff)`: this
 * theme (like the parent) never defines a "base" palette slug, so the
 * fallback #fff always wins, invisible on the parent's white page but a
 * stray white tile here. The parent already patches an equivalent
 * WooCommerce-hardcoded-white surface (the mini-cart drawer) in its own
 * style.css with the same theme-1 approach; do the same here plus set the
 * icon colour, since theme.json settings/styles cannot reach WooCommerce's
 * own block CSS. */
.wc-block-next-previous-buttons__button {
	background: var(--wp--preset--color--theme-1);
	color: var(--wp--preset--color--theme-2);
}

/* ShopSocket's "N shoppers have this in their cart right now" callout and its
 * sibling stock line are plugin-rendered markup (extensions/shopsocket); this
 * demo styling for them lives here in the theme, not the plugin. The
 * plugin's own `shopsocket-storefront` stylesheet enqueues on
 * `wp_enqueue_scripts` at the default priority; `purple_wpsignal_styles()`
 * (functions.php) enqueues this stylesheet on the same hook at priority 20,
 * so it always prints after the plugin's and wins ties on equal selector
 * specificity without `!important`. */
.shopsocket-in-carts {
	background-color: var(--wp--preset--color--theme-5);
	border: 1px solid var(--wp--preset--color--theme-6);
	border-left: 3px solid var(--wp--preset--color--theme-3);
	border-radius: 0;
	padding: 0.75rem 1rem;
	margin: 1.25rem 0;
	opacity: 1;
	color: var(--wp--preset--color--theme-2);
}

.shopsocket-in-carts__text {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1rem;
}

.shopsocket-in-carts__dot {
	width: 0.6rem;
	height: 0.6rem;
	color: var(--wp--preset--color--theme-3);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--theme-3) 25%, transparent);
}

/* Same animation name as the plugin's stylesheet: the last `@keyframes` of a
 * given name wins by source order (no specificity concept applies), so this
 * fully replaces the plugin's cream flash with one that settles back into
 * the callout's own theme-5 background instead of transparent. */
@keyframes shopsocket-pulse {
	from {
		background-color: color-mix(in srgb, var(--wp--preset--color--theme-3) 35%, transparent);
	}
	to {
		background-color: var(--wp--preset--color--theme-5);
	}
}

.shopsocket-stock {
	color: var(--wp--preset--color--theme-3);
}