/*
Theme Name: Vesperia
Theme URI: https://webhelpagency.com/vesperia/
Author: Web Help Agency
Author URI: https://webhelpagency.com
Description: Vesperia is a modern, full-site-editing block theme for wineries and small-batch wine shops. Built around an estate-grown aesthetic — deep wine reds, gold foil accents, and a Cormorant Garamond / Inter type pairing — it ships homepage, shop, and product patterns ready for WooCommerce.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vesperia
Tags: full-site-editing, custom-colors, editor-style, featured-images, wide-blocks, translation-ready, sticky-post, blog
*/

/*
 * Most styling lives in theme.json (global styles, presets) and block markup.
 * This file holds only the theme header (required) plus a small set of helper
 * styles for patterns that core blocks cannot express declaratively.
 */

/* Eyebrow: gold uppercase label with a leading rule. */
.vesperia-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.vesperia-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
}

/* Product / wine card hover lift. */
.vesperia-card {
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.vesperia-card:hover {
	transform: translateY(-6px);
	border-color: rgba(201, 162, 39, 0.35);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

/*
 * Light modifier so the same .vesperia-card markup works on light shop/related
 * surfaces. Done as a helper class (not a registered core/group block style)
 * on purpose: a global block style would leak to every group in the editor.
 */
.vesperia-card.is-estate {
	background: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.vesperia-card.is-estate:hover {
	border-color: rgba(168, 132, 30, 0.35);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

/* Sticky site header. */
.vesperia-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/*
 * Push the brand to the left so the nav and the WooCommerce-injected
 * mini-cart / account icons cluster on the right with an even gap
 * (instead of space-between spreading them across the bar).
 */
.vesperia-site-header > .wp-block-site-title {
	margin-right: auto;
}

/* Sticky product gallery on single-product (light surface). */
.vesperia-gallery-sticky {
	position: sticky;
	top: 90px;
}

@media (max-width: 860px) {
	.vesperia-gallery-sticky {
		position: static;
	}
}

/*
 * Hero: bottom-left content over a full-height gradient. Flex positioning is
 * done here (not via the block's flex layout) so the saved block markup stays
 * canonical and never triggers editor "invalid content" recovery.
 */
.vesperia-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 1.2rem;
}

.vesperia-hero > * {
	max-width: 680px;
}

/* Hero accent: italic gold on the highlighted words of the headline. */
.vesperia-hero-title em {
	font-style: italic;
	color: var(--wp--preset--color--gold-soft);
}

/*
 * Tasting-notes flavor meters. Rendered via a core/html block (so the
 * percentage-width fills validate in the editor); styled here.
 */
.vesperia-flavors {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.vesperia-flavor__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vesperia-flavor__track {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.vesperia-flavor__fill {
	height: 100%;
	border-radius: 3px;
	background: var(--wp--preset--gradient--flavor);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.vesperia-card {
		transition: none;
	}
}

/*
 * Profile Builder (registration/login) form labels: force the theme's light
 * body text color. Left alone, these labels pick up a dark default that's
 * nearly unreadable against Vesperia's dark page background -- looked like
 * blank boxes with no labels at all.
 */
.wppb-form-field label,
.wppb-user-forms label,
#wppb-login-wrap label,
.wppb-checkbox-terms-and-conditions label,
.wppb-send-credentials-checkbox label {
	color: var(--wp--preset--color--parchment) !important;
}

/*
 * Shop grid on mobile: WooCommerce's Product Collection block calculates its
 * own grid-template-columns via JS (inline style, "shrinkColumns" behavior)
 * and was still fitting 2 narrow columns at phone widths -- squeezing the
 * "Add to Cart" / "1 in Cart" button text down to the point of getting
 * clipped ("1 IN", "ADD"). Force a single column below 600px so cards get
 * full width and buttons have room to show their full label. !important is
 * required here since the JS sets grid-template-columns as an inline style,
 * which only a stylesheet !important rule can override.
 */
@media (max-width: 600px) {
	.wc-block-product-template__responsive,
	ul.wc-block-product-template {
		grid-template-columns: 1fr !important;
	}
}

/*
 * "Call for Price" — shown instead of a dollar price/Add to Cart button for
 * retail (non-member) visitors; see vesperia_call_for_price_html() and
 * vesperia_call_for_price_contact_prompt() in functions.php.
 *
 * Both the shop grid and the single-product summary area render on the
 * theme's light "estate" surface (bone background, ink text -- see
 * .vesperia-card.is-estate above), not the dark global background. The
 * original gold-soft/parchment colors here were picked for a dark surface
 * and were low-contrast (near-invisible) on this light one. Using the
 * ink-toned tokens instead keeps this readable where it actually appears.
 */
.vesperia-call-for-price {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--gold-ink);
}

.vesperia-call-for-price-prompt {
	margin-top: 1em;
	color: var(--wp--preset--color--ink-soft);
}

.vesperia-call-for-price-prompt a {
	color: var(--wp--preset--color--gold-ink);
	text-decoration: underline;
	font-weight: 500;
}

/*
 * Hide stock-level/quantity display from the storefront (shop grid and
 * single-product page). This is WooCommerce's block-based Product Stock
 * Indicator block, auto-inserted next to Add to Cart -- the classic-template
 * display filter in functions.php (woocommerce_get_stock_html) doesn't
 * reach it, so it's hidden here instead. Applies to every visitor, not just
 * non-members -- this is inventory information, not pricing, and Jeffrey
 * doesn't want it public. Purely visual on the front end; the stock count
 * is still fully visible/editable on the product edit screen in wp-admin.
 *
 * SKU is handled separately: the Product SKU block shares its wrapper markup
 * with the Category/Tag display, so hiding it by class also hid Category --
 * removed the SKU block directly from the single-product template instead
 * (via the Site Editor), leaving Category/Tags untouched.
 */
.wc-block-components-product-stock-indicator {
	display: none !important;
}