/* Funky Kids — theme styles beyond theme.json */

:root {
	--fk-dots: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
}

/* Header */
.fk-header {
	background-image: var(--fk-dots);
	background-size: 14px 14px;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 4px 0 var(--wp--preset--color--deep);
}
.fk-header .wp-block-site-logo img { height: auto; }
.fk-nav a { text-shadow: 2px 2px 0 var(--wp--preset--color--deep); }
.fk-nav .current-menu-item > a { color: var(--wp--preset--color--sun); }

/* WhatsApp button style (registered by the plugin, styled here) */
.wp-block-button.is-style-whatsapp .wp-block-button__link {
	background: var(--wp--preset--color--grass);
	color: #fff;
}
.wp-block-button.is-style-whatsapp .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.1em; height: 1.1em;
	margin-right: 0.45em; vertical-align: -0.15em;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20Zm4.4-6c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.6.8-.8.9-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.3-.4.7-1.2.1-.2 0-.3 0-.4l-.7-1.8c-.2-.5-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.1 5 5 0 0 0 1 2.6 11.3 11.3 0 0 0 4.3 3.8c1.6.7 2.2.7 3 .6a2.6 2.6 0 0 0 1.7-1.2 2 2 0 0 0 .1-1.2c0-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hero */
.fk-hero {
	background-image: var(--fk-dots), linear-gradient(160deg, var(--wp--preset--color--sky), var(--wp--preset--color--deep));
	background-size: 14px 14px, auto;
	color: #fff;
}
.fk-hero h1 { color: var(--wp--preset--color--sun); text-shadow: 4px 4px 0 var(--wp--preset--color--pop), 6px 6px 0 var(--wp--preset--color--deep); }
.fk-hero p { font-size: var(--wp--preset--font-size--large); max-width: 40ch; }

/* Comic panel cards */
.fk-card {
	background: #fff;
	border: 3px solid var(--wp--preset--color--ink);
	border-radius: 1.25rem;
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fk-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--wp--preset--color--ink); }
.fk-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.fk-card__body { padding: 1rem 1.25rem 1.25rem; }
.fk-card__title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; margin: 0 0 0.25rem; line-height: 1.1; }
.fk-card__title a { color: var(--wp--preset--color--deep); text-decoration: none; }
.fk-card__size { color: #556; font-size: 0.9rem; margin: 0 0 0.5rem; }
.fk-card__price { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; color: var(--wp--preset--color--pop); margin: 0; }
.fk-card__price small { font-family: var(--wp--preset--font-family--body); font-size: 0.8rem; color: #556; }

.fk-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 2rem 0; }

/* Product page */
.fk-product__category a { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 800; color: var(--wp--preset--color--pop); text-decoration: none; }
.fk-price { font-family: var(--wp--preset--font-family--display); font-size: 2.4rem; color: var(--wp--preset--color--pop); margin: 0 0 1rem; }
.fk-price small { font-family: var(--wp--preset--font-family--body); font-size: 1rem; color: #556; display: block; }
.fk-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.fk-badge { background: var(--wp--preset--color--sun); border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.85rem; font-weight: 800; }
.fk-badge--wet { background: #bfe3ff; }

/* Price list */
.fk-pricelist { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; background: #fff; border: 3px solid var(--wp--preset--color--ink); border-radius: 1rem; overflow: hidden; box-shadow: 6px 6px 0 var(--wp--preset--color--ink); }
.fk-pricelist th, .fk-pricelist td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e3e8f0; }
.fk-pricelist th { background: var(--wp--preset--color--sky); color: #fff; font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; letter-spacing: 0.04em; font-weight: 400; }
.fk-pricelist td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.fk-pricelist tr:last-child td { border-bottom: 0; }
.fk-pricelist a { color: var(--wp--preset--color--deep); text-decoration: none; }
.fk-pricelist__terms { font-size: 0.9rem; color: #556; }

/* Footer */
.fk-footer a { color: var(--wp--preset--color--sun); }
.fk-copyright { opacity: 0.7; margin-top: 2rem; }

@media (max-width: 781px) {
	.fk-header .wp-block-site-logo img { width: 56px; }
	.fk-header .fk-header-cta { display: none; }
}

/* Keep the three price tables' columns aligned with each other */
.fk-pricelist { table-layout: fixed; }
.fk-pricelist td:nth-child(1), .fk-pricelist th:nth-child(1) { width: 46%; }
.fk-pricelist td:nth-child(3), .fk-pricelist th:nth-child(3), .fk-pricelist td:nth-child(4), .fk-pricelist th:nth-child(4) { width: 16%; text-align: right; }

.fk-card__placeholder { aspect-ratio: 1; display: grid; place-items: center; background: var(--wp--preset--color--cloud); color: #556; font-size: 0.9rem; }

/* Price list on phones: size goes under the name, columns unfix */
@media (max-width: 600px) {
	.fk-pricelist { table-layout: auto; font-size: 0.95rem; }
	.fk-pricelist th, .fk-pricelist td { padding: 0.6rem 0.6rem; }
	.fk-pricelist td:nth-child(1), .fk-pricelist th:nth-child(1),
	.fk-pricelist td:nth-child(3), .fk-pricelist th:nth-child(3),
	.fk-pricelist td:nth-child(4), .fk-pricelist th:nth-child(4) { width: auto; }
	.fk-pricelist td:nth-child(2), .fk-pricelist th:nth-child(2) { display: none; }
	.fk-pricelist .fk-pricelist__size { display: block; font-size: 0.8rem; font-weight: 400; color: #556; }
}
@media (min-width: 601px) {
	.fk-pricelist .fk-pricelist__size { display: none; }
}

/* Header: icon-only WhatsApp beside the Book now button */
.fk-header-cta .is-style-whatsapp .wp-block-button__link { padding-left: 0.9rem; padding-right: 0.9rem; }
.fk-header-cta .is-style-whatsapp .wp-block-button__link::before { margin-right: 0; }
.fk-hero .is-style-outline .wp-block-button__link { border: 2px solid #fff; color: #fff; }
.fk-nav .fk-nav__book { display: none; }
@media (max-width: 781px) { .fk-nav .fk-nav__book { display: block; } }