/*
Theme Name:   Liberty Vape
Theme URI:    https://www.libertyvape.ca
Description:  Liberty Vape child theme for Kadence. Holds the brand palette, type and any custom storefront logic so that Kadence can be updated freely without losing work. Colours and fonts are taken from the live Shopify theme's own settings, not sampled by eye.
Author:       Liberty Vape
Template:     kadence
Version:      1.0.0
Text Domain:  liberty-vape
*/

/* ---------------------------------------------------------------------------
 * Brand tokens
 *
 * Defined here as custom properties so there is exactly ONE place to change a
 * brand colour. Kadence's own Global Palette is set in the customiser (see
 * README) — these variables cover everything the palette does not reach.
 * ------------------------------------------------------------------------ */

:root {
	--lv-primary:        #00d4ff; /* electric cyan — buy button, labels        */
	--lv-primary-hover:  #3ab0d8; /* muted cyan — hover / checkout accent      */
	--lv-ink:            #1a1a2e; /* near-black navy — text ON the cyan        */
	--lv-navy:           #2c374d; /* deep navy — prices, secondary buttons     */
	--lv-sale:           #ff006e; /* magenta — sale labels, urgency            */
	--lv-muted:          #808793; /* compare-at prices, secondary text         */
	--lv-surface:        #eef5f7; /* tinted surface                            */
	--lv-border:         #d5e3e8; /* derived from surface                      */
	--lv-error:          #e93d3d;

	--lv-font-heading:   'Manrope', system-ui, -apple-system, sans-serif;
	--lv-font-body:      'Inter', system-ui, -apple-system, sans-serif;
	--lv-button-weight:  600;
}

/* ---------------------------------------------------------------------------
 * THE CONTRAST FIX — do not remove
 *
 * #00d4ff is a very light cyan. White text on it is roughly 1.8:1, which fails
 * WCAG AA badly and makes the primary call to action genuinely hard to read.
 * The Shopify theme paired it with #1a1a2e for exactly this reason.
 *
 * Kadence defaults button text to white, so this has to be asserted.
 * ------------------------------------------------------------------------ */

.wp-block-button__link,
.button,
button.button,
input.button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button {
	font-weight: var(--lv-button-weight);
}

.woocommerce .single_add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.wc-block-components-product-button .wp-block-button__link {
	background-color: var(--lv-primary);
	color: var(--lv-ink);
	border-color: var(--lv-primary);
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
	background-color: var(--lv-primary-hover);
	color: var(--lv-ink);
	border-color: var(--lv-primary-hover);
}

/* Checkout / place order keeps the navy treatment it has on Shopify. */
.woocommerce #place_order,
.wc-block-components-checkout-place-order-button {
	background-color: var(--lv-navy);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Pricing
 * ------------------------------------------------------------------------ */

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lv-navy);
}

.woocommerce .price del,
.woocommerce div.product p.price del {
	color: var(--lv-muted);
	opacity: 1;
}

.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background-color: var(--lv-sale);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce div.product .product_title {
	font-family: var(--lv-font-heading);
}

body,
.woocommerce {
	font-family: var(--lv-font-body);
}

@media (max-width: 767px) {
	body { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
 * Province UI
 *
 * Styling only. The behaviour lives in the Provincial Compliance Gate plugin
 * so that it survives a theme change — a storefront is cosmetic, a compliance
 * rule is not, and the two should never share a fate.
 * ------------------------------------------------------------------------ */

.lv-region-notice {
	border-left: 4px solid var(--lv-primary);
	background: var(--lv-surface);
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 0.95em;
}

.lv-region-notice--unavailable {
	border-left-color: var(--lv-sale);
	background: #fff0f6;
}

.lv-region-switcher {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--lv-navy);
}

/* Footer category navigation — three widget columns in the top footer row.
   Added 2026-08-09: the footer previously carried four links and no route into
   the catalogue, so neither a crawler nor a customer could get from the bottom
   of a page back to a category. */
.site-top-footer-wrap .lv-footer-nav{list-style:none;margin:0;padding:0}
.site-top-footer-wrap .lv-footer-nav li{margin:0 0 .4em}
.site-top-footer-wrap .lv-footer-nav a{text-decoration:none}
.site-top-footer-wrap .lv-footer-nav a:hover{text-decoration:underline}
.site-top-footer-wrap h3{text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.8rem;margin:0 0 .9em;opacity:.7}