/*
Theme Name:   Blocksy Child
Theme URI:    https://clicketyclaklb.com
Description:  Child theme of Blocksy for Clickety Clak custom styling.
Author:       Clickety Clak
Author URI:   https://clicketyclaklb.com
Template:     blocksy
Version:      0.1.1
Text Domain:  blocksy-child
*/

/* ==========================================================================
   Clickety Clak "Candy Bright" palette
   ========================================================================== */

:root {
	--cc-primary: #ff5a5f;
	--cc-primary-hover: #e6484d;
	--cc-secondary: #3da9fc;
	--cc-secondary-hover: #2891e0;
	--cc-accent: #ffd23f;
	--cc-accent-hover: #f0bd1f;
	--cc-text: #242038;
	--cc-surface: #fcfcff;
	--cc-card-radius: 16px;
	--cc-button-radius: 12px;
	--cc-card-shadow: 0 4px 14px rgba(36, 32, 56, 0.1);
	--cc-card-shadow-hover: 0 10px 24px rgba(36, 32, 56, 0.16);
	--cc-heading-font: 'Fredoka', 'Alexandria', sans-serif;

	/* Recolor Blocksy's own semantic tokens so header, footer, links and
	   focus states pick up the new palette without extra selectors. */
	--theme-palette-color-1: var(--cc-primary);
	--theme-palette-color-2: var(--cc-primary-hover);
	--theme-link-initial-color: var(--cc-primary);
	--theme-link-hover-color: var(--cc-primary-hover);
	--theme-headings-color: var(--cc-text);
}

/* ==========================================================================
   Headings — playful display font, body copy untouched for readability
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.ct-woo-price-wrapper + .woocommerce-loop-product__title {
	font-family: var(--cc-heading-font);
	font-weight: 600;
}

/* ==========================================================================
   WooCommerce product cards
   ========================================================================== */

ul.products li.product,
.products .product {
	border-radius: var(--cc-card-radius);
	overflow: hidden;
	background: var(--cc-surface);
	box-shadow: var(--cc-card-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

ul.products li.product:hover,
.products .product:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--cc-card-shadow-hover);
}

ul.products li.product img,
.products .product img {
	border-radius: var(--cc-card-radius) var(--cc-card-radius) 0 0;
}

ul.products li.product .price,
.products .product .price,
.summary .price {
	font-family: var(--cc-heading-font);
	font-weight: 600;
	font-size: 1.15em;
	color: var(--cc-primary);
}

ul.products li.product .onsale,
.products .product .onsale {
	background: var(--cc-accent);
	color: var(--cc-text);
	font-weight: 600;
	border-radius: 999px;
}

/* ==========================================================================
   Buttons site-wide
   ========================================================================== */

.ct-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.add_to_cart_button,
.single_add_to_cart_button {
	border-radius: var(--cc-button-radius);
	background-color: var(--cc-primary);
	border-color: var(--cc-primary);
	color: #ffffff;
	font-weight: 600;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.ct-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
	background-color: var(--cc-primary-hover);
	border-color: var(--cc-primary-hover);
	transform: translateY(-2px) scale(1.03);
}

/* Cart and checkout: keep buttons on-brand but calmer — no lift animation,
   so totals/submit stay predictable while the customer is paying. */
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button,
#place_order {
	transition: background-color 0.15s ease;
}

.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-checkout .woocommerce a.button:hover,
.woocommerce-checkout .woocommerce button.button:hover,
#place_order:hover {
	transform: none;
}

/* ==========================================================================
   Cart & checkout forms — legibility over playfulness
   ========================================================================== */

.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
	font-family: inherit;
}

.woocommerce-cart input,
.woocommerce-cart select,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	border-radius: 8px;
	background: #ffffff;
	color: var(--cc-text);
}

/* ==========================================================================
   Mobile (~380px) — keep card chrome from overwhelming small screens
   ========================================================================== */

@media (max-width: 480px) {
	:root {
		--cc-card-radius: 14px;
	}

	ul.products li.product .price,
	.products .product .price {
		font-size: 1em;
	}

	.ct-button,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.add_to_cart_button,
	.single_add_to_cart_button {
		padding: 10px 18px;
	}
}