/*
Theme Name: GeneratePress Child – Wizura
Theme URI: https://antaxia.telix.org/
Description: Doodle-styled child theme for the Wizura handmade art shop.
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* ==========================================================================
   Fonts — Caveat (self-hosted, latin + latin-ext for polskie znaki)
   ========================================================================== */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/caveat-v23-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/caveat-v23-latin_latin-ext-700.woff2') format('woff2');
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* wobbly hand-drawn border radius */
	--wiz-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
	--wiz-wobble-2: 15px 225px 15px 255px / 255px 15px 225px 15px;
	--wiz-hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
	/* wavy underline as data-URI, cream */
	--wiz-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3' fill='none' stroke='%23eef5c0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--wiz-squiggle-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3' fill='none' stroke='%23e03131' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Announcement bar (above header)
   ========================================================================== */
.wiz-announce {
	background: var(--ink, #0a0a1e);
	text-align: center;
	padding: 6px 12px;
}
.wiz-announce p {
	margin: 0;
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--red, #e03131);
	letter-spacing: 0.06em;
}

/* ==========================================================================
   Header — cobalt bar: logo, WIZURA wordmark, tools right
   ========================================================================== */
.inside-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 24px;
}
.site-logo img {
	filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35));
}
.main-title {
	margin: 0;
}
.main-title a {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cream, #eef5c0) !important;
	text-shadow: 2px 2px 0 rgba(10, 10, 30, 0.45);
}
.site-description { display: none; }

.wiz-header-tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}
.wiz-header-tools svg {
	display: block;
	width: 28px;
	height: 28px;
	stroke: var(--cream, #eef5c0);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.wiz-header-tools a:hover svg { stroke: #ffffff; transform: rotate(-6deg); }
.wiz-pln {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--cream, #eef5c0);
	border: 2px solid var(--cream, #eef5c0);
	border-radius: var(--wiz-wobble-2);
	padding: 0 10px;
	line-height: 1.6;
}

/* ==========================================================================
   Primary nav — ink bar, uppercase, squiggle hover
   ========================================================================== */
.main-navigation .main-nav ul li a {
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	padding-left: 18px;
	padding-right: 18px;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	background-image: var(--wiz-squiggle);
	background-repeat: repeat-x;
	background-position: center bottom 8px;
	background-size: 24px 6px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.wiz-hero {
	padding: 5rem 1rem 4rem;
	text-align: center;
	position: relative;
}
.wiz-hero-title {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: clamp(3.5rem, 10vw, 7.5rem);
	line-height: 0.9;
	color: var(--cream, #eef5c0);
	transform: rotate(-2deg);
	margin: 0;
	text-shadow: 3px 3px 0 rgba(10, 10, 30, 0.6);
}
.wiz-hero-sub {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.8rem);
	color: var(--red, #e03131);
	transform: rotate(1.5deg);
	margin: 0.5rem 0 1.5rem;
}
.wiz-hero .wp-block-button__link {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.5rem;
	background: var(--red, #e03131);
	color: #fff;
	border: 3px solid var(--cream, #eef5c0);
	border-radius: var(--wiz-wobble);
	padding: 0.4em 1.6em;
	transform: rotate(-1deg);
	transition: transform 0.15s ease;
}
.wiz-hero .wp-block-button__link:hover { transform: rotate(1deg) scale(1.04); }

/* ==========================================================================
   Section titles + category tiles
   ========================================================================== */
.wiz-section-title {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--cream, #eef5c0);
	text-align: center;
	transform: rotate(-1deg);
	margin: 3rem 0 1.5rem;
}
.wiz-cats .wp-block-image img {
	border: 3px solid var(--cream, #eef5c0);
	border-radius: var(--wiz-wobble);
}
.wiz-cats h3 {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center;
	transform: rotate(-1deg);
}
.wiz-cats h3 a { color: var(--cream, #eef5c0); }
.wiz-cats h3 a:hover {
	background-image: var(--wiz-squiggle-red);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 24px 6px;
}

/* ==========================================================================
   WooCommerce — product cards, buttons, prices, badges
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--ink, #0a0a1e);
	border: 3px solid var(--cobalt, #3b3bf0);
	border-radius: var(--wiz-wobble);
	padding: 16px 16px 20px;
	text-align: center;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.woocommerce ul.products li.product:hover {
	transform: rotate(-0.7deg) translateY(-3px);
	border-color: var(--cream, #eef5c0);
}
.woocommerce ul.products li.product img {
	border-radius: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.45rem;
	color: var(--cream, #eef5c0);
	padding-top: 0.4em;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: #ffffff;
	font-weight: 600;
	font-size: 1.05rem;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del { color: var(--contrast-3, #8b93c9); }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.25rem;
	background: var(--red, #e03131);
	color: #ffffff;
	border: 2px solid transparent;
	border-radius: var(--wiz-wobble);
	padding: 0.35em 1.3em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: #c22525;
	color: #fff;
	border-color: var(--cream, #eef5c0);
	transform: rotate(-1deg);
}

/* sale badge = rotated cream doodle */
.woocommerce span.onsale {
	background: var(--cream, #eef5c0);
	color: var(--ink, #0a0a1e);
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 2.6;
	min-height: 2.6em;
	min-width: 2.6em;
	border-radius: var(--wiz-wobble-2);
	transform: rotate(-8deg);
}

/* single product */
.woocommerce div.product .product_title {
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 2.4rem;
	color: var(--cream, #eef5c0);
}
.woocommerce div.product div.images img {
	border: 3px solid var(--cobalt, #3b3bf0);
	border-radius: var(--wiz-wobble);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--ink, #0a0a1e);
	border-color: var(--cobalt, #3b3bf0);
	border-radius: 12px 12px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--cream, #eef5c0); }
.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--ink, #0a0a1e);
	border-radius: var(--wiz-wobble);
	padding: 1.2em 1.6em;
}

/* cart / checkout / account — dark surfaces */
.woocommerce table.shop_table {
	background: var(--ink, #0a0a1e);
	border: 2px solid var(--cobalt, #3b3bf0);
	border-radius: 14px;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: rgba(59, 59, 240, 0.35); }
.woocommerce-cart table.cart img { border-radius: 10px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
	background: var(--ink, #0a0a1e);
	color: #ffffff;
	border: 2px solid var(--cobalt, #3b3bf0);
	border-radius: 10px;
	padding: 0.45em 0.7em;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce .quantity .qty:focus { border-color: var(--cream, #eef5c0); outline: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--ink, #0a0a1e);
	color: #ffffff;
	border-top-color: var(--red, #e03131);
	border-radius: 0 0 14px 14px;
}
.woocommerce-message { border-top-color: var(--cream, #eef5c0); }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--cream, #eef5c0); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	font-family: var(--wiz-hand);
	font-size: 1.25rem;
	color: var(--cream, #eef5c0);
}
.woocommerce .woocommerce-breadcrumb { color: var(--contrast-3, #8b93c9); }
.woocommerce .woocommerce-breadcrumb a { color: var(--contrast-2, #cdd3f0); }
.woocommerce .star-rating span::before { color: var(--cream, #eef5c0); }
.woocommerce .woocommerce-result-count { color: var(--contrast-2, #cdd3f0); }
.woocommerce .woocommerce-ordering select {
	background: var(--ink, #0a0a1e);
	color: #fff;
	border: 2px solid var(--cobalt, #3b3bf0);
	border-radius: 10px;
	padding: 0.3em 0.6em;
}

/* ==========================================================================
   Wizard mascot + speech bubble (fixed, bottom right)
   ========================================================================== */
.wiz-mascot {
	position: fixed;
	right: 16px;
	bottom: 10px;
	z-index: 99;
	width: 190px;
	text-align: center;
	pointer-events: none;
}
.wiz-bubble {
	pointer-events: auto;
	background: var(--cream, #eef5c0);
	color: var(--ink, #0a0a1e);
	font-family: var(--wiz-hand);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.15;
	padding: 10px 14px;
	border-radius: var(--wiz-wobble);
	position: relative;
	margin-bottom: 12px;
	transform: rotate(-2deg);
	box-shadow: 2px 3px 0 rgba(10, 10, 30, 0.5);
}
.wiz-bubble::after {
	content: '';
	position: absolute;
	bottom: -7px;
	right: 34px;
	width: 16px;
	height: 16px;
	background: inherit;
	transform: rotate(48deg);
}
.wiz-mascot img { display: inline-block; }

@media (max-width: 781px) {
	.wiz-mascot { display: none; }
	.main-title a { font-size: 2rem; }
	.wiz-header-tools { gap: 10px; }
	.inside-header { padding: 10px 14px; }
}

/* ==========================================================================
   Misc
   ========================================================================== */
.site-footer { border-top: 3px dashed var(--cobalt, #3b3bf0); }
.inside-site-info { font-family: var(--wiz-hand); font-size: 1.15rem; }
::selection { background: var(--cream, #eef5c0); color: var(--ink, #0a0a1e); }