/*
 * HAViK legacy overrides
 *
 * Variable-driven replacements for the grunge button styling and the
 * hard-coded font-families that used to live in havik-core.css. Loaded
 * after havik-core.css, so the old rules they replace are gone and nothing
 * here depends on cascade order against them.
 *
 * The !important declarations are deliberate. Most Elementor button widgets
 * still carry their own font, background and text color in the widget
 * settings, and WooCommerce Blocks and WS Form print their own button
 * colors. Until the per-widget cleanup pass clears those, !important is the
 * only way one rule wins everywhere. Remove it when that pass is done.
 */

/* Buttons ------------------------------------------------------------- */

/*
 * Every button surface that used the grunge texture: flat accent fill,
 * accent font, no texture, square corners.
 *
 * Excluded: .havik-text-btn widgets (text-link buttons on the product cards
 * and elsewhere; the old :not(.havik-txt-btn) was meant to skip them but
 * misspelled the class), the header's Menu Cart toggle, and every button
 * that uses the .hv-btn-outline secondary style: anything with the class
 * (on the button itself or on the Elementor widget around it), plus the
 * buttons assigned it by selector below.
 *
 * The outline exclusion is wrapped in :where() so it adds no specificity:
 * each selector keeps exactly the weight it had, so rules that already beat
 * it (the WS Form Previous/Next outline in havik-core.css, for one) still do.
 */
.elementor-button:not(.havik-txt-btn):not(.havik-text-btn .elementor-button):not(.elementor-menu-cart__toggle_button):not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wsf-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wp-block-button a:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wc-block-cart__submit-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wc-block-components-checkout-place-order-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.woocommerce-form-login__submit:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wc-block-components-totals-coupon__button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.havik-vote-btn--modal:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.havik-vote-btn.havik-voted:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.red-grunge .elementor-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)) {
	background-color: var(--hv-color-accent) !important;
	background-image: none !important;
	color: var(--hv-color-text-on-accent) !important;
	font-family: var(--hv-font-accent) !important;
	border-radius: 0 !important;
}

/*
 * WooCommerce's add to cart button on the product pages: black text on the
 * accent fill, like every other solid button. The single product
 * template's add to cart widget sets its text color (and hover color) to
 * Elementor's white primary color, so this needs !important too.
 */
.single_add_to_cart_button,
.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus {
	color: var(--hv-color-text-on-accent) !important;
}

/*
 * Solid buttons: hover and keyboard focus. A slight press (scale 0.985,
 * 150ms ease-out) in place of the old site's 0.97 (havik-core.css) and
 * Elementor's per-widget "shrink" hover animation (0.9), both of which this
 * outranks. With reduced motion there's no movement; the fill darkens
 * instead (the accent mixed with 15% black). Same selectors as the rule
 * above, so the outline buttons are excluded here too. The transition is
 * !important because WooCommerce Blocks' own button rule
 * (.wc-block-components-button:not(.is-link)) is more specific.
 */
.elementor-button:not(.havik-txt-btn):not(.havik-text-btn .elementor-button):not(.elementor-menu-cart__toggle_button):not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wsf-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wp-block-button a:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wc-block-cart__submit-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wc-block-components-checkout-place-order-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.woocommerce-form-login__submit:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.wc-block-components-totals-coupon__button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.havik-vote-btn--modal:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.havik-vote-btn.havik-voted:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)),
.red-grunge .elementor-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)) {
	transition: transform 150ms ease-out, background-color 150ms ease-out !important;
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-button:not(.havik-txt-btn):not(.havik-text-btn .elementor-button):not(.elementor-menu-cart__toggle_button):not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wsf-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wp-block-button a:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wc-block-cart__submit-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wc-block-components-checkout-place-order-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.woocommerce-form-login__submit:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wc-block-components-totals-coupon__button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.havik-vote-btn--modal:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.havik-vote-btn.havik-voted:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.red-grunge .elementor-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible) {
		transform: scale(0.985);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button:not(.havik-txt-btn):not(.havik-text-btn .elementor-button):not(.elementor-menu-cart__toggle_button):not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wsf-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wp-block-button a:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wc-block-cart__submit-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wc-block-components-checkout-place-order-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.woocommerce-form-login__submit:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.wc-block-components-totals-coupon__button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.havik-vote-btn--modal:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.havik-vote-btn.havik-voted:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible),
	.red-grunge .elementor-button:not(:where(.hv-btn-outline, .hv-btn-outline *, #wizard-back *, #wizard-next *, .elementor-button--view-cart, .havik-prev, .havik-next, .pwgc-apply-gift-card-button)):is(:hover, :focus-visible) {
		transform: none;
		background-color: color-mix(in srgb, var(--hv-color-accent) 85%, black) !important;
	}
}

/*
 * .hv-btn-outline on an Elementor Button widget, and the buttons that get
 * the outline by selector because they have no CSS Classes field of their
 * own (or are identified by an ID that every environment shares):
 *   #wizard-back, #wizard-next   the knife wizard's BACK and NEXT
 *                                (IDs on the widgets; wizard.js uses them)
 *   .elementor-button--view-cart the side cart's View cart
 *   .havik-prev, .havik-next     the FROTM nomination form's Previous/Next
 *   .pwgc-apply-gift-card-button the cart's Apply Gift Card (PW Gift Cards;
 *                                otherwise styled by the kit's button style)
 *
 * tokens.css defines the variant without !important; these buttons still
 * set their own background, text and icon colors and font (widget settings,
 * Menu Cart defaults, the WS Form style, havik-core.css), and those would
 * win. Same values as tokens.css, forced, until the per-widget cleanup
 * pass. Their own sizes and padding are left as they are. Icons follow the
 * text color.
 */
.hv-btn-outline .elementor-button,
#wizard-back .elementor-button,
#wizard-next .elementor-button,
.elementor-menu-cart__footer-buttons .elementor-button--view-cart,
button.havik-prev,
button.havik-next,
button.pwgc-apply-gift-card-button {
	border: 2px solid var(--hv-color-accent) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--hv-color-accent) !important;
	font-family: var(--hv-font-accent) !important;
}

.hv-btn-outline .elementor-button:hover,
#wizard-back .elementor-button:hover,
#wizard-next .elementor-button:hover,
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover,
button.havik-prev:hover,
button.havik-next:hover,
button.pwgc-apply-gift-card-button:hover {
	background-color: var(--hv-color-accent) !important;
	color: var(--hv-color-text-on-accent) !important;
}

.hv-btn-outline .elementor-button svg,
#wizard-back .elementor-button svg,
#wizard-next .elementor-button svg,
.elementor-menu-cart__footer-buttons .elementor-button--view-cart svg {
	fill: currentColor !important;
}

/*
 * Solid buttons that sit next to an outline button (2px border): the side
 * cart's Checkout (next to View cart) and the wizard's ADD TO CART (next to
 * BACK). The same 2px border in their fill color, so each pair is the same
 * height, like .hv-btn next to .hv-btn-outline (tokens.css). With reduced
 * motion the fill darkens on hover (the solid-button rule above), so the
 * border darkens with it.
 */
.elementor-menu-cart__footer-buttons .elementor-button--checkout,
#wizard-add-cart .elementor-button {
	border: 2px solid var(--hv-color-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-menu-cart__footer-buttons .elementor-button--checkout:is(:hover, :focus-visible),
	#wizard-add-cart .elementor-button:is(:hover, :focus-visible) {
		border-color: color-mix(in srgb, var(--hv-color-accent) 85%, black) !important;
	}
}

/*
 * The wizard's ADD TO CART (primary) uses the HAViK plus icon, drawn in
 * currentColor; the widget would otherwise paint it white. It follows the
 * button text, like the outline buttons' icons.
 */
#wizard-add-cart .elementor-button svg {
	fill: currentColor !important;
}

/*
 * The wizard buttons' HAViK icons (arrow-back, arrow, plus) have space built
 * in around each drawing, so their box is a step bigger than the text,
 * space-24, as elsewhere in the icon set (see the README's icon sizes).
 */
#wizard-back .elementor-button-icon svg,
#wizard-next .elementor-button-icon svg,
#wizard-add-cart .elementor-button-icon svg {
	width: var(--hv-space-24);
	height: var(--hv-space-24);
}

/* Fonts ---------------------------------------------------------------- */

/* Same selectors and !important as the declarations they replace. */

/* was Oswald. Cart and checkout item names are small, so they use the body
   font, extra bold and uppercase, like the wizard's option names. */
.wc-block-components-product-name {
	font-family: var(--hv-font-body) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
}

#wsf-1-label-105 {
	font-family: var(--hv-font-display);
}

/* was Roboto Condensed */
.wsf-form h3 {
	font-family: var(--hv-font-body) !important;
}

/* was Archivo Narrow */
.lower {
	font-family: var(--hv-font-body) !important;
}

/*
 * Knife wizard: option names, prices and the "Learn more" toggle are small,
 * so they're extra bold and uppercase. wizard.css sets their font (the body
 * font) but its own weights and case; these win because they load later.
 */
.option-name,
.option-price-range,
.option-surcharge,
.wizard-running-price,
button.learn-more-toggle {
	font-weight: 800;
	text-transform: uppercase;
}

/*
 * Gift guide filter buttons: body font, extra bold, uppercase, like the
 * other small labels. havik-core.css's .gg-filter asks for the display
 * font, but the kit's button style (.elementor-kit-N button) is more
 * specific and was giving them BMX Radical; .gg-filters .gg-filter beats it.
 */
.gg-filters .gg-filter {
	font-family: var(--hv-font-body);
	font-weight: 800;
	text-transform: uppercase;
}

/*
 * Elementor Pro's My Account widget stylesheet gives the whole widget
 * Roboto as its default; the widget has no font setting for its form
 * labels and text.
 */
.elementor-widget-woocommerce-my-account {
	font-family: var(--hv-font-body);
}

/*
 * Bebas Neue on .havik-vote-btn.havik-voted (and :hover), .wp-block-button a,
 * .wc-block-components-totals-coupon__button, the Block cart / checkout /
 * login submit buttons and .havik-vote-btn--modal is
 * covered by the button rule above.
 */

/* Error notices -------------------------------------------------------- */

/*
 * Every WooCommerce error notice is the accent orange with black text and
 * a black icon, so it stands out: the classic notice (product page, cart,
 * account) and the Blocks banner on the cart and checkout. Replaces the
 * dark #111 notice set in Elementor's Site Settings > Custom CSS and the
 * kit's error notice colors (--error-message-text-color, white, and
 * --error-message-icon-color, orange), hence !important like the rest of
 * this file. The top border matches the fill, so there's no orange line on
 * orange.
 */
body .woocommerce-error,
body .wc-block-components-notice-banner.is-error {
	background-color: var(--hv-color-accent) !important;
	border-color: var(--hv-color-accent) !important;
	color: var(--hv-color-text-on-accent) !important;
}

body .woocommerce-error li,
body .woocommerce-error strong,
body .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content {
	color: var(--hv-color-text-on-accent) !important;
}

body .woocommerce-error a,
body .wc-block-components-notice-banner.is-error a {
	color: var(--hv-color-text-on-accent) !important;
	text-decoration: underline !important;
}

body .woocommerce-error::before {
	color: var(--hv-color-text-on-accent) !important;
}

body .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--hv-color-text-on-accent) !important;
	fill: var(--hv-color-accent) !important;
}