/*
Theme Name: LFG Shop
Theme URI: https://shop.getlfg.app
Description: Official LFG merch store. Child of Twenty Twenty-Five, styled after getlfg.app.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Text Domain: lfg-shop
*/

/* Floating pill nav, like getlfg.app. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.lfg-nav {
	box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
}
.lfg-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	transition: color 0.2s;
}
.lfg-nav .wp-block-navigation-item__content:hover,
.lfg-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

/* Hero: cyan → white → pink wash. The ::before runs 400px up behind the sticky header, whatever its height. */
.lfg-hero {
	position: relative;
	isolation: isolate;
	padding-top: var(--wp--preset--spacing--70);
}
.lfg-hero::before {
	content: "";
	position: absolute;
	inset: -400px 0 0;
	z-index: -1;
	background: linear-gradient(180deg, #d6fafe 400px, #ffffff 65%, #fde8f3 100%);
}

/* Secondary pill button (white, hairline border). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button__link {
	transition: transform 0.2s, opacity 0.2s;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
	opacity: 0.9;
}

/* Product cards. */
.wc-block-product .wc-block-components-product-image img,
.wc-block-grid__product-image img,
.woocommerce-product-gallery img {
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
}

.quantity input.qty,
.woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	padding: 0.5rem 1rem;
	font: inherit;
}
.quantity input.qty {
	align-self: stretch;
	width: 4.5em;
}

@media (max-width: 781px) {
	.wp-block-buttons.lfg-header-cta {
		display: none;
	}
	.wp-block-group.lfg-nav {
		padding-left: 24px !important; /* beats the block's inline 40px */
	}
}