/*
Theme Name: Chocobo Grove
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chocobo-grove
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

:root {
	--cg-primary: var(--wp--preset--color--primary);
	--cg-ink: var(--wp--preset--color--text);
	--cg-mint: var(--wp--preset--color--mint);
	--cg-butter: var(--wp--preset--color--butter);
	--cg-blush: var(--wp--preset--color--blush);
	--cg-lavender: var(--wp--preset--color--lavender);
	--cg-card-shadow: 0 10px 30px rgba(122, 92, 191, 0.10);
	--cg-brand: var(--wp--preset--font-family--outfit);
}

/* === header === */
.site-header {
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 14px rgba(122, 92, 191, 0.08);
}
.site-header .wp-block-site-title {
	font-family: var(--cg-brand);
	font-weight: 600;
	font-size: 1.45rem;
	color: var(--cg-ink);
}
.site-nav a {
	color: var(--cg-ink);
	font-weight: 700;
}
.site-nav a:hover {
	color: var(--cg-primary);
}

/* === buttons === */
.wp-element-button {
	transition: filter 200ms ease;
}
.wp-element-button:hover {
	filter: brightness(1.07);
}

/* === footer === */
.site-footer .wp-block-site-title {
	font-family: var(--cg-brand);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--cg-ink);
}

/* === cards === */
.is-style-card {
	background: #ffffff;
	border-radius: var(--wp--custom--rounded--md);
	padding: 1.6rem;
	box-shadow: var(--cg-card-shadow);
}

/* === sticker badge === */
.is-style-sticker {
	background: var(--cg-butter);
	border: 4px solid #ffffff;
	border-radius: 20px;
	padding: 0.85rem 1.15rem;
	box-shadow: 0 10px 22px rgba(122, 92, 191, 0.20);
	color: var(--cg-ink);
	font-weight: 700;
}

/* === collage bits === */
.collage-frame {
	position: relative;
}
.collage-frame .wp-block-image img,
.is-style-frame img {
	border-radius: var(--wp--custom--rounded--lg);
}

/* === section type === */
.eyebrow {
	background: var(--cg-mint);
	border-radius: var(--wp--custom--rounded--pill);
	padding: 0.45rem 1rem;
	font-family: var(--wp--preset--font-family--nunito-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-primary);
}
.cg-title {
	font-family: var(--cg-brand);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.08;
	color: var(--cg-ink);
}
.cg-lede {
	font-size: 1.2rem;
	line-height: 1.6;
	color: #5b5470;
	max-width: 34rem;
}
.cg-band-title {
	font-family: var(--cg-brand);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--headline);
	line-height: 1.2;
	color: var(--cg-ink);
}
.cg-band-note {
	color: #5b5470;
	max-width: 30rem;
}
.cg-card-title {
	font-family: var(--cg-brand);
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--cg-ink);
}
.cg-hero-image {
	margin-inline: auto;
}
.bird-breed {
	font-family: var(--wp--preset--font-family--nunito-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-primary);
}
.cg-pond {
	margin-inline: auto;
}

.pin-tr {
	position: absolute;
	z-index: 3;
	top: -24px;
	right: 44px;
	transform: rotate(-3deg);
}
.pin-tl {
	position: absolute;
	z-index: 3;
	top: -22px;
	left: 30px;
	transform: rotate(3deg);
}
.pull-up {
	margin-block-start: -3rem;
}
.pull-up-sm {
	margin-block-start: -1.5rem;
}

/* === blog listing === */
.post-card .wp-block-post-title a {
	font-family: var(--cg-brand);
	font-weight: 600;
	color: var(--cg-ink);
}

/* === WooCommerce === */
.woocommerce ul.products li.product {
	background: #ffffff;
	border-radius: var(--wp--custom--rounded--md);
	padding: 1.1rem;
	box-shadow: var(--cg-card-shadow);
}
.woocommerce ul.products li.product img,
.wc-block-product-template li img {
	border-radius: var(--wp--custom--rounded--sm);
}
.woocommerce ul.products li.product .price {
	color: var(--cg-primary);
	font-weight: 700;
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button {
		transition: none;
	}
}

/* === collage fallback: overlaps off below 782px === */
@media (max-width: 782px) {
	.pull-up,
	.pull-up-sm {
		margin-block-start: 0;
	}
}