/*
Theme Name: Sapogok
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: sapogok
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) 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;
}

/* Drop the default block-gap margin (24px) between top-level full-width page
   sections (homepage bands, covers) so they butt edge-to-edge and own their
   vertical rhythm via their own padding. Targets only direct .alignfull
   children, so gaps between columns/cards inside a section are untouched. */
.entry-content > .alignfull {
	margin-block-start: 0;
}

/* ---------- Shop: product cards ---------- */
.wp-block-woocommerce-product-collection .wc-block-product {
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.wp-block-woocommerce-product-collection .wc-block-product:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgb(0 0 0 / 0.06);
}



/* Hero: soften white text against the bright image with a text shadow */
.wp-block-cover.hero .wp-block-cover__inner-container h1,
.wp-block-cover.hero .wp-block-cover__inner-container p {
	text-shadow: 0 2px 5px rgba(0,0,0,0.4), 0 8px 28px rgba(0,0,0,0.5);
}

/* Product carousel: default is a normal grid; JS adds .is-carousel */
.product-carousel .carousel-nav { display: none; }

.product-carousel.is-carousel .wc-block-product-template {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.product-carousel.is-carousel .wc-block-product-template::-webkit-scrollbar { display: none; }
.product-carousel.is-carousel .wc-block-product {
	flex: 0 0 31%;
	max-width: 31%;
	scroll-snap-align: start;
}
.product-carousel.is-carousel .wc-block-product-template { cursor: grab; }
.product-carousel.is-carousel .wc-block-product-template.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}
.product-carousel.is-carousel .wc-block-product-template.is-dragging img { pointer-events: none; }
.product-carousel.is-carousel .carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-bottom: 1.25rem;
}
.product-carousel.is-carousel .carousel-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #e0d8cb;
	background: #fff;
	color: #4c3629;
	font-size: 1.5rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.product-carousel.is-carousel .carousel-btn:hover {
	background: #c8724f;
	border-color: #c8724f;
	color: #fff;
}

@media (max-width: 781px) {
	.product-carousel.is-carousel .wc-block-product {
		flex: 0 0 78%;
		max-width: 78%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.product-carousel.is-carousel .wc-block-product-template { scroll-behavior: auto; }
}

/* ---------- Buttons / links ---------- */
.wp-block-button__link:hover {
	background-color: #b5613f;
}
.wp-block-navigation-item a {
	transition: color 0.2s ease;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-collection .wc-block-product {
		transition: none;
		transform: none;
	}
}