/* =========================================================
   Villae Vinifera Theme CSS
   Design tokens, structural styling, header/footer,
   hero, section patterns, and motion system.

   Table of contents:
   1.  Design tokens
   2.  Base polish
   3.  Forms (global, dark canvas)
   4.  Motion system (reveal on scroll)
   5.  Header
   6.  Navigation submenu
   7.  Hero (wine bottle)
   8.  Footer
   9.  Terroir section
   10. Closing statement
   11. Reduced motion
   ========================================================= */


/* =========================================================
   1. Design tokens
   ========================================================= */

:root {
	/* Radii */
	--vv-radius-s: 6px;
	--vv-radius-m: 12px;
	--vv-radius-l: 24px;
	--vv-radius-pill: 999px;

	/* Elevation */
	--vv-shadow-1: 0 4px 14px rgba(0, 0, 0, 0.12);
	--vv-shadow-2: 0 18px 40px rgba(0, 0, 0, 0.22);

	/* Motion */
	--vv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vv-duration-fast: 180ms;
	--vv-duration-slow: 900ms;

	/* Hairlines on the dark canvas */
	--vv-line: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	--vv-line-strong: color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);

	/* Muted text on the dark canvas */
	--vv-text-muted: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	--vv-text-faint: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);

	/* Brand shorthands */
	--vv-gold: var(--wp--preset--color--accent-1);
	--vv-gold-soft: var(--wp--preset--color--accent-3);
	--vv-blue: var(--wp--preset--color--accent-2);
}


/* =========================================================
   2. Base polish
   ========================================================= */

::selection {
	background: color-mix(in srgb, var(--vv-gold) 32%, transparent);
	color: var(--wp--preset--color--base);
}

/* Editorial display headings keep their lines balanced */
h1.wp-block-heading,
h2.wp-block-heading,
h1.wp-block-post-title {
	text-wrap: balance;
}

/* Small uppercase label used across sections */
.vv-kicker {
	margin-bottom: 0;
	color: var(--vv-gold-soft);
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Kicker with a leading rule, e.g. in the hero */
.vv-kicker--rule {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}

.vv-kicker--rule::before {
	content: "";
	width: 2.25rem;
	height: 1px;
	background: var(--vv-gold-soft);
}

.vv-eyebrow {
	display: inline-block;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: var(--vv-radius-pill);
	opacity: 0.85;
}

.vv-section-heading {
	max-width: 900px;
}

.vv-section-heading h2 {
	max-width: 900px;
	margin-top: 0.5rem;
}

.vv-section-intro {
	max-width: 720px;
	opacity: 0.82;
}


/* =========================================================
   3. Forms (global, dark canvas)
   Light WooCommerce panels override these in woocommerce.css.
   ========================================================= */

:is(
	input:not([type="button"], [type="submit"], [type="radio"], [type="checkbox"], [type="file"], [type="image"], [type="hidden"]),
	textarea,
	select,
	.wp-block-search .wp-block-search__input,
	.wc-block-product-search .wc-block-product-search__field
) {
	max-width: 100%;
	min-height: 1.5em;
	padding: 12px 16px;
	border: 1px solid var(--vv-line-strong);
	border-radius: var(--vv-radius-s);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 5%, transparent);
	color: var(--wp--preset--color--base);
	transition:
		border-color var(--vv-duration-fast) ease,
		box-shadow var(--vv-duration-fast) ease;
}

:is(
	input:not([type="button"], [type="submit"], [type="radio"], [type="checkbox"], [type="file"], [type="image"], [type="hidden"]),
	textarea,
	select,
	.wp-block-search .wp-block-search__input,
	.wc-block-product-search .wc-block-product-search__field
):focus {
	border-color: var(--vv-gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vv-gold) 22%, transparent);
	outline: none;
}

::placeholder {
	color: var(--vv-text-faint);
	opacity: 1;
}


/* =========================================================
   4. Motion system (reveal on scroll)
   vv-animations.js adds `vv-js` to <html> and toggles
   `is-visible` via IntersectionObserver. Without JS the
   content simply stays visible.
   ========================================================= */

html.vv-js .vv-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity var(--vv-duration-slow) var(--vv-ease),
		transform var(--vv-duration-slow) var(--vv-ease);
	transition-delay: var(--vv-reveal-delay, 0ms);
	will-change: opacity, transform;
}

html.vv-js .vv-reveal.is-visible {
	opacity: 1;
	transform: none;
}


/* =========================================================
   5. Header
   ========================================================= */

.vv-header {
	color: var(--wp--preset--color--base);
}

.wp-block-template-part:has(.vv-header.is-sticky-header) {
	position: sticky;
	top: 0;
	z-index: 999;
}

.vv-header a {
	color: inherit;
	text-decoration: none;
}

.vv-header a:hover {
	color: var(--vv-gold);
}

.vv-header {
	position: relative;
	isolation: isolate;
	min-height: 68px;
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: clamp(1rem, 3vw, 2.5rem);
	/* Subtle descent hairline under the bar — quiet, premium. */
	border-bottom: 1px solid var(--vv-line);
}

/* Tinted, blurred backdrop on a pseudo-element. Keeping
   backdrop-filter OFF the header element itself is essential:
   a filter on the element would make it the containing block
   for the position:fixed overlay menu, trapping it inside the
   bar (the iPad/tablet bug). The ::before is not an ancestor
   of the nav, so the overlay can still cover the viewport. */
.vv-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--contrast) 92%,
		transparent
	);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	pointer-events: none;
}

.admin-bar .wp-block-template-part:has(.vv-header.is-sticky-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.vv-header__brand,
.vv-header__nav,
.vv-header__actions,
.vv-header__language {
	display: flex;
	align-items: center;
}

.vv-header__brand {
	justify-self: start;
	min-width: 0;
}

.vv-header__nav {
	justify-self: center;
	min-width: 0;
}

.vv-header__actions {
	justify-self: end;
	min-width: 0;
	gap: 4px;
	/* Never let the language switcher drop to a second line
	   (the ~1080–1250px misalignment). */
	flex-wrap: nowrap;
}

.vv-header__language {
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
}

.vv-header .vv-logo,
.vv-header .wp-block-site-logo {
	display: flex;
	align-items: center;
	/* Don't let the site-logo block's pixel width cap the wide
	   horizontal wordmark — we size it by height instead. */
	width: auto !important;
}

.vv-header .vv-logo img,
.vv-header .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: none;
	height: 52px;
	max-height: none;
}

.vv-header .wp-block-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--wp--preset--color--base);
}

.vv-header .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
}

.vv-header .wp-block-navigation-item__content {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding-block: 4px;
	color: var(--wp--preset--color--base);
	transition: color var(--vv-duration-fast) ease;
}

/* Gold underline that draws in on hover / current item */
.vv-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--vv-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms var(--vv-ease);
}

.vv-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.vv-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.vv-header .wp-block-navigation-item__content:hover,
.vv-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--vv-gold);
}

.vv-header .wp-block-woocommerce-customer-account,
.vv-header .wp-block-woocommerce-mini-cart {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: var(--wp--preset--color--base);
}

.vv-header .wp-block-woocommerce-mini-cart[hidden],
.vv-header .wc-block-mini-cart[hidden],
.vv-header .wc-block-mini-cart__button[hidden] {
	display: inline-flex !important;
}

.vv-header .wc-block-customer-account__account-link,
.vv-header .wc-block-mini-cart__button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--vv-radius-pill);
	background: transparent;
	color: var(--wp--preset--color--base);
	transition:
		background-color var(--vv-duration-fast) ease,
		color var(--vv-duration-fast) ease,
		transform var(--vv-duration-fast) ease;
}

.vv-header .wc-block-customer-account__account-link:hover,
.vv-header .wc-block-mini-cart__button:hover {
	background: color-mix(
		in srgb,
		var(--wp--preset--color--base) 12%,
		transparent
	);
	color: var(--vv-gold);
	transform: translateY(-1px);
}

.vv-header .wc-block-customer-account__account-icon,
.vv-header .wc-block-mini-cart__button svg,
.vv-header .wc-block-mini-cart__icon {
	color: currentColor;
}

.vv-header .wc-block-mini-cart__button svg [fill]:not([fill="none"]),
.vv-header .wc-block-customer-account__account-icon [fill]:not([fill="none"]) {
	fill: currentColor;
}

.vv-header .wc-block-mini-cart__button svg [stroke]:not([stroke="none"]),
.vv-header .wc-block-customer-account__account-icon [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.vv-header .wc-block-mini-cart__badge {
	background: var(--vv-gold);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	font-weight: 700;
}

.vv-header__language {
	line-height: 1;
}

/* Keep TranslatePress's own switcher behaviour (dropdown opens
   downward). Only anchor it and keep links on one line. */
.vv-header__language .trp-language-switcher {
	position: relative;
	z-index: 1001;
}

.vv-header__language .trp-language-switcher a {
	white-space: nowrap;
}

.vv-header a:focus-visible,
.vv-header button:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --- Tablet & phone: hamburger left · logo centre · actions right --- */

@media (max-width: 1080px) {
	/* Hamburger and logo grouped on the left with a small gap;
	   actions (language · account · cart) pushed to the right by
	   the flexible third track. Avoids the centred-logo / language
	   switcher collision. */
	.vv-header {
		grid-template-columns: auto auto 1fr;
		column-gap: 0.7rem;
	}

	.vv-header__nav {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		min-width: 0;
	}

	.vv-header__brand {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	.vv-header__actions {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		/* Keep language · account · cart on a single row. */
		flex-wrap: nowrap;
		justify-content: flex-end;
	}

	/* Hide the desktop horizontal menu and reveal the hamburger up
	   to tablet sizes (core only collapses below 600px). */
	.vv-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
		color: var(--wp--preset--color--base);
	}

	.vv-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Full-screen overlay panel */
	.vv-header .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		padding: clamp(1.5rem, 8vw, 3.5rem);
	}

	.vv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		width: 100%;
		margin-top: clamp(2rem, 8vh, 4rem);
	}

	.vv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0.25rem;
		width: 100%;
	}

	.vv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 0.6rem 0;
		font-family: var(--wp--preset--font-family--literata);
		font-size: 1.5rem;
		font-weight: 500;
		text-transform: none;
		letter-spacing: -0.01em;
	}

	.vv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1.05rem;
		font-family: var(--wp--preset--font-family--manrope);
		color: var(--vv-text-muted);
	}

	.vv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: var(--vv-gold);
	}

	.vv-header .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--base);
	}
}

@media (max-width: 782px) {
	.vv-header {
		min-height: 64px;
	}

	.vv-header .wp-block-site-logo img,
	.vv-header .vv-logo img {
		height: 46px;
	}

	.vv-header .wc-block-customer-account__account-link,
	.vv-header .wc-block-mini-cart__button {
		width: 38px;
		height: 38px;
	}
}

@media (max-width: 600px) {
	.admin-bar .wp-block-template-part:has(.vv-header.is-sticky-header) {
		top: 0;
	}
}

@media (max-width: 480px) {
	.vv-header {
		min-height: 60px;
		column-gap: 0.5rem;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/* Compact the actions so language · account · cart stay on one
	   row on small phones (iPhone SE / 12 Pro). */
	.vv-header__actions {
		gap: 0;
	}

	.vv-header__language {
		font-size: 0.8rem;
	}

	.vv-header .wc-block-customer-account__account-link,
	.vv-header .wc-block-mini-cart__button {
		width: 32px;
		height: 32px;
	}

	.vv-header .wc-block-customer-account__account-icon,
	.vv-header .wc-block-mini-cart__icon,
	.vv-header .wc-block-mini-cart__button svg {
		width: 20px;
		height: 20px;
	}

	.vv-header .wp-block-navigation__responsive-container-open svg {
		width: 20px;
		height: 20px;
	}

	.vv-header .wp-block-site-logo img,
	.vv-header .vv-logo img {
		height: 34px;
	}
}


/* =========================================================
   6. Navigation submenu
   ========================================================= */

@media (min-width: 1081px) {
	.vv-header .wp-block-navigation-item__submenu-container {
		top: calc(100% + 18px) !important;
		min-width: 210px !important;
		padding: 14px 18px !important;
		border: 1px solid var(--vv-line) !important;
		border-radius: var(--vv-radius-s) !important;
		background: color-mix(
			in srgb,
			var(--wp--preset--color--contrast) 94%,
			transparent
		) !important;
		box-shadow: var(--vv-shadow-2) !important;
		backdrop-filter: blur(16px) saturate(130%);
		-webkit-backdrop-filter: blur(16px) saturate(130%);
	}

	.vv-header .wp-block-navigation-item__submenu-container .wp-block-navigation-item__content {
		color: color-mix(
			in srgb,
			var(--wp--preset--color--base) 78%,
			transparent
		) !important;
		padding: 8px 0 !important;
		background: transparent !important;
		font-size: 0.78rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	.vv-header .wp-block-navigation-item__submenu-container .wp-block-navigation-item__content::after {
		display: none;
	}

	.vv-header .wp-block-navigation-item__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--vv-gold) !important;
		background: transparent !important;
	}

	.vv-header .wp-block-navigation-submenu__toggle svg {
		width: 10px;
		height: 10px;
		margin-left: 5px;
	}
}


/* =========================================================
   7. Hero (wine bottle)
   Markup lives in patterns/hero-wine.php.
   The bottle media can be the bundled SVG or a transparent
   product photo — both are styled identically.
   ========================================================= */

.vv-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: clamp(560px, calc(100svh - 110px), 860px);
	padding: clamp(3rem, 6vw, 5rem) var(--wp--style--root--padding-right);
	background:
		radial-gradient(
			52% 64% at 72% 46%,
			color-mix(in srgb, var(--vv-gold) 9%, transparent) 0%,
			transparent 70%
		),
		radial-gradient(
			120% 90% at 50% 110%,
			color-mix(in srgb, #000 32%, transparent) 0%,
			transparent 60%
		),
		var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Faint horizon line at the bottom of the hero */
.vv-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--vv-line);
}

.vv-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	width: min(100%, var(--wp--style--global--wide-size, 1340px));
	margin-inline: auto;
}

.vv-hero__copy {
	max-width: 620px;
}

.vv-hero__copy > * {
	margin-block: 0;
}

.vv-hero__copy > * + * {
	margin-block-start: 1.4rem;
}

.vv-hero h1 {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--literata);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.vv-hero h1 em {
	color: var(--vv-gold-soft);
	font-style: italic;
}

.vv-hero__lead {
	max-width: 480px;
	color: var(--vv-text-muted);
	font-size: clamp(1.02rem, 1.3vw, 1.18rem);
	line-height: 1.65;
}

.vv-hero__actions {
	margin-block-start: 2rem !important;
}

/* Entrance animation, staggered per child */
html.vv-js .vv-hero__copy > * {
	opacity: 0;
	transform: translateY(26px);
	animation: vv-rise 1s var(--vv-ease) forwards;
}

html.vv-js .vv-hero__copy > *:nth-child(2) {
	animation-delay: 120ms;
}

html.vv-js .vv-hero__copy > *:nth-child(3) {
	animation-delay: 240ms;
}

html.vv-js .vv-hero__copy > *:nth-child(4) {
	animation-delay: 360ms;
}

@keyframes vv-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Bottle stage --- */

.vv-hero__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: clamp(380px, 52vw, 620px);
}

/* Warm spotlight behind the bottle */
.vv-hero__stage::before {
	content: "";
	position: absolute;
	inset: 6% -10% 0;
	z-index: 0;
	background: radial-gradient(
		46% 46% at 50% 48%,
		color-mix(in srgb, var(--vv-gold) 16%, transparent) 0%,
		transparent 72%
	);
	pointer-events: none;
}

/* Thin gold ring as a composition element */
.vv-hero__stage::after {
	content: "";
	position: absolute;
	top: 12%;
	left: 50%;
	z-index: 0;
	width: clamp(240px, 30vw, 380px);
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--vv-gold-soft) 36%, transparent);
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

.vv-hero__bottle {
	position: relative;
	z-index: 1;
	margin: 0;
	/* JS drives --vv-parallax on scroll; defaults to none */
	transform: translateY(var(--vv-parallax, 0px));
	will-change: transform;
}

html.vv-js .vv-hero__bottle {
	opacity: 0;
	animation: vv-bottle-in 1.5s var(--vv-ease) 250ms forwards;
}

@keyframes vv-bottle-in {
	from {
		opacity: 0;
		transform: translateY(46px);
	}

	to {
		opacity: 1;
		transform: translateY(var(--vv-parallax, 0px));
	}
}

.vv-hero__bottle img,
.vv-hero__bottle svg {
	display: block;
	width: auto;
	height: clamp(380px, 50vw, 600px);
	filter: drop-shadow(0 36px 44px rgba(0, 0, 0, 0.38));
}

/* Idle float — wrapped element so it composes with parallax */
.vv-hero__bottle-media {
	display: block;
	animation: vv-float 6s ease-in-out 2s infinite alternate;
}

@keyframes vv-float {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-14px);
	}
}

/* The recurring light sheen on the glass is animated inside
   assets/images/bottle-schlegel.svg itself, so it also runs
   when the artwork is embedded via <img>. */

/* Soft elliptical ground shadow */
.vv-hero__bottle::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -14px;
	width: 62%;
	height: 22px;
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(0, 0, 0, 0.4) 0%,
		transparent 72%
	);
	transform: translateX(-50%);
	pointer-events: none;
}

/* Scroll cue */
.vv-hero__scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	z-index: 2;
	width: 1px;
	height: 44px;
	background: var(--vv-line-strong);
	overflow: hidden;
	transform: translateX(-50%);
}

.vv-hero__scroll-cue::after {
	content: "";
	position: absolute;
	left: 0;
	top: -50%;
	width: 100%;
	height: 50%;
	background: var(--vv-gold);
	animation: vv-scroll-cue 2.4s var(--vv-ease) infinite;
}

@keyframes vv-scroll-cue {
	0% {
		top: -50%;
	}

	60%,
	100% {
		top: 110%;
	}
}

/* Hero responsive */

@media (max-width: 900px) {
	.vv-hero {
		min-height: 0;
		padding-top: 3.5rem;
		padding-bottom: 4.5rem;
	}

	.vv-hero__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.vv-hero__stage {
		order: -1;
		min-height: 0;
	}

	.vv-hero__bottle img,
	.vv-hero__bottle svg {
		height: clamp(280px, 52vw, 420px);
	}

	.vv-hero__scroll-cue {
		display: none;
	}
}

@media (max-width: 480px) {
	.vv-hero {
		padding-left: 16px;
		padding-right: 16px;
	}

	.vv-hero__copy > * + * {
		margin-block-start: 1.1rem;
	}

	.vv-hero__actions .wp-block-button__link {
		padding-inline: 1.4rem;
	}
}


/* =========================================================
   8. Footer
   ========================================================= */

.site-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-top: 1px solid var(--vv-line);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--vv-gold);
	text-decoration: none;
}

.site-footer__columns {
	gap: clamp(2rem, 5vw, 4rem);
	margin-bottom: 3rem;
}

.site-footer__brand {
	max-width: 34rem;
}

.site-footer__brand .wp-block-site-logo {
	margin-bottom: 1rem;
}

.site-footer__brand .wp-block-site-title {
	margin-top: 0;
	margin-bottom: 0.25rem;
}

.site-footer__brand .wp-block-site-title a {
	color: var(--vv-gold-soft);
	text-decoration: none;
}

.site-footer__brand .wp-block-site-tagline,
.site-footer__description,
.site-footer__nav .wp-block-navigation-item__content,
.site-footer__contact p {
	color: var(--vv-text-muted);
}

.site-footer__brand .wp-block-site-tagline {
	margin-top: 0;
}

.site-footer__description {
	max-width: 28rem;
	margin-top: 1rem;
}

.site-footer__heading {
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--vv-gold-soft);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.site-footer__nav,
.site-footer__nav .wp-block-navigation__container {
	gap: 0.55rem;
}

.site-footer__nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--vv-gold);
	text-decoration: none;
}

.site-footer__social {
	margin-top: 1.25rem;
	gap: 0.75rem;
}

.site-footer__social .wp-social-link {
	color: var(--wp--preset--color--base);
}

.site-footer__social .wp-social-link a {
	padding: 0;
}

.site-footer__social .wp-social-link svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.site-footer__social .wp-social-link:hover {
	color: var(--vv-gold);
	transform: none;
}

.site-footer__contact p {
	margin-top: 0;
}

.site-footer__separator {
	margin-top: 0;
	margin-bottom: 1.5rem;
	color: color-mix(
		in srgb,
		var(--wp--preset--color--base) 16%,
		transparent
	);
}

.site-footer__bottom {
	gap: 1rem;
	color: color-mix(
		in srgb,
		var(--wp--preset--color--base) 68%,
		transparent
	);
}

.site-footer__bottom p {
	margin: 0;
}

@media (max-width: 900px) {
	.site-footer {
		padding-top: 56px !important;
	}

	.site-footer__columns {
		row-gap: 2.5rem;
	}

	.site-footer__brand,
	.site-footer__nav-column,
	.site-footer__contact {
		flex-basis: 50% !important;
	}
}

@media (max-width: 600px) {
	.site-footer {
		padding-top: 48px !important;
		padding-bottom: 32px !important;
	}

	.site-footer__columns {
		gap: 2rem;
	}

	.site-footer__brand,
	.site-footer__nav-column,
	.site-footer__contact {
		flex-basis: 100% !important;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* =========================================================
   9. Terroir section
   ========================================================= */

.vv-terroir-section {
	overflow: hidden;
}

.vv-terroir-cards {
	align-items: stretch;
}

.vv-terroir-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vv-terroir-card h3 {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.vv-terroir-card p {
	max-width: 620px;
}

.vv-terroir-image {
	overflow: hidden;
	border-radius: var(--vv-radius-l);
}

.vv-terroir-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--vv-radius-l);
	transition: transform 600ms var(--vv-ease);
}

.vv-terroir-card:hover .vv-terroir-image img {
	transform: scale(1.035);
}

@media (max-width: 781px) {
	.vv-terroir-section {
		padding: 4rem 1.5rem !important;
	}

	.vv-terroir-cards {
		gap: 3rem !important;
	}
}


/* =========================================================
   10. Closing statement
   ========================================================= */

.vv-closing-statement {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 420px;
	margin: 0 !important;
	padding: 3.5rem var(--wp--style--root--padding-right) 10rem;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--contrast) 72%,
		var(--wp--preset--color--base)
	);
	color: var(--wp--preset--color--base);
}

.vv-closing-statement > .vv-closing-statement__inner {
	position: relative;
	z-index: 3;
	width: min(100%, 820px);
	max-width: 820px;
	margin: 0 auto !important;
	padding: 0 !important;
	text-align: left;
}

.vv-closing-statement__inner > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.vv-closing-statement__inner > * + * {
	margin-block-start: 1.15rem !important;
}

.vv-closing-statement::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	height: 34%;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--contrast) 60%,
		var(--wp--preset--color--base)
	);
	clip-path: polygon(0 36%, 100% 100%, 0 100%);
	pointer-events: none;
}

.vv-closing-statement::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	z-index: 2;
	width: 48%;
	height: 26%;
	background: color-mix(
		in srgb,
		var(--vv-gold-soft) 78%,
		transparent
	);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	pointer-events: none;
	opacity: 0.9;
}

.vv-closing-statement__kicker,
.vv-closing-statement h2,
.vv-closing-statement h2.wp-block-heading {
	color: var(--vv-gold-soft);
}

.vv-closing-statement h2,
.vv-closing-statement h2.wp-block-heading {
	max-width: 780px;
}

.vv-closing-statement p:not(.vv-closing-statement__kicker) {
	max-width: 620px;
	color: color-mix(
		in srgb,
		var(--wp--preset--color--base) 84%,
		transparent
	);
}

@media (max-width: 781px) {
	.vv-closing-statement {
		min-height: 400px;
		padding: 3rem 1.5rem 8rem;
	}

	.vv-closing-statement > .vv-closing-statement__inner {
		width: 100%;
	}

	.vv-closing-statement::before {
		height: 30%;
		clip-path: polygon(0 42%, 100% 100%, 0 100%);
	}

	.vv-closing-statement::after {
		width: 70%;
		height: 24%;
	}

	.vv-closing-statement p:not(.vv-closing-statement__kicker) {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.vv-closing-statement {
		min-height: 380px;
		padding: 2.5rem 1.25rem 7rem;
	}

	.vv-closing-statement__inner > * + * {
		margin-block-start: 1rem !important;
	}
}


/* =========================================================
   11. Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	html.vv-js .vv-reveal,
	html.vv-js .vv-hero__copy > *,
	html.vv-js .vv-hero__bottle {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}

	.vv-hero__bottle {
		transform: none;
	}

	.vv-hero__bottle-media,
	.vv-hero__scroll-cue::after {
		animation: none;
	}

	.vv-terroir-image img,
	.vv-hero__bottle img,
	.vv-hero__bottle svg {
		transition: none;
	}
}