/*
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, translucent site header. */
.vesperia-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(8px);
}

/*
 * 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;
	}
}